CODING PORTFOLIO

Select an image to learn more!

RECENT PROJECTS:

Addy's Coding Project: Weather Application

Weather Application

Addy's Coding Project: Masyu

Masyu Project

UPCOMING PROJECTS:

Upcoming Project: Dictionary Application with React

Dictionary Application with React

Upcoming Project: Weather Application with React

Weather Application with React

CURIOUS ABOUT THIS WEBSITE?

Addy's Coding Project: This Responsive, Multi-Page Website

Responsive Multi-Page Website

PROJECT DESCRIPTIONS

WEATHER APPLICATION:

(Date of Completion: April 4, 2022)

HTML icon
CSS icon
JS icon
VS Code icon
API icon
GitHub icon
Bootstrap icon
Netlify hosting icon

Final project submitted for the more committed SheCodes Plus workshop. It's a weather application linked to the OpenWeather API and is a dashboard capable of displaying weather data--including the current weather and the week's forecast, among other meteorological details--for over 200,000 cities around the world. I built this application with HTML, CSS, new Bootstrap techniques, and vanilla JavaScript while following a professional workflow that integrated GitHub and the hosting platform Netlify for the continuous deployment of my code.

One special feature that I want to call attention to is the dynamic, data-dependent colors that I designed for the display. Many utilitarian weather apps saturate the eye with numerical figures without visually appealing to our intuitive sense for how the days of the week will look and feel, as, for instance, when we look out the window at the sky to decide what to wear. I offer my design as a corrective.

Another deceptively simple feature to notice is the buttons I programmed. The first button triggers a geolocation function that will retrieve weather data based on the geographic coordinates of your device. The other two buttons will convert all data from Fahrenheit (imperial) to Celsius (metric) or vice versa as many times as you like without introducing errors. I am especially proud of figuring out this solution on my own, since our instructor believed that the conversion would introduce too much complexity into the assignment and did not show us how to code this feature.

As with the Masyu Project below, to illustrate my learning trajectory, I have not modified my original code. This project will not display properly on a small screen. It is best viewed on a desktop, not on a mobile device.

MASYU PROJECT:

(Date of Completion: January 31, 2022)

HTML icon
CSS icon
JS icon
VS Code icon

Final project built after only three weeks of coding and submitted for SheCodes Basics. The objective was to write HTML, CSS, and JavaScript using VS Code (a professional coding editor) to create an interactive landing page from scratch about something I really enjoy--Masyu puzzles! The button at the bottom is a fun feature to play with. It won't actually store your name or email address, but it will alter the inner HTML of the page to generate a secret footer if you (e.g. "Gilgamesh," "Fredegund," "Squilliam") sign up for the imaginary "Masyu Daily Challenge."

To illustrate my learning trajectory, I have not modified my original code. This project will not display properly on a small screen. It is best viewed on a desktop at full width, not on a mobile device or tablet.

UPCOMING: DICTIONARY APPLICATION WITH REACT

(Projected Date of Completion: July 2022)

HTML icon
CSS icon
JS icon
React icon
API icon
GitHub icon
Bootstrap icon
Netlify hosting icon

I will complete this dictionary application search engine as part of my advanced trajectory for SheCodes Pro on my way to becoming a professional engineer. Building cumulatively on all I have learned so far, I will gain valuable experience using React, which is an in-demand and popular framework for developing interactive applications. Stay tuned and check back in over the summer to see this capstone project (and maybe pick up a few new words while you're at it!).

UPCOMING: WEATHER APPLICATION WITH REACT

(Projected Date of Completion: July 2022)

HTML icon
CSS icon
JS icon
React icon
API icon
GitHub icon
Bootstrap icon
Netlify hosting icon

I will complete this weather application search engine with React as part of my advanced trajectory for SheCodes Pro on my way to becoming a professional engineer. Building cumulatively on all I have learned so far, I will gain valuable experience using React, which is an in-demand and popular framework for developing interactive applications. Using more sophisticated coding techniques and a broader base of knowledge, I will re-envision from top to bottom the vanilla JavaScript weather app that I built before. Stay tuned and check back in over the summer to see this capstone project (and find out if those dark clouds mean rain...).

ABOUT THIS WEBSITE:

(Date of Completion: May 16, 2022)

HTML icon
CSS icon
Responsive design icon
Flexbox icon
SEO icon
GitHub icon
Bootstrap icon
Netlify hosting icon

Final project submitted for SheCodes Responsive, a professionally-oriented workshop that teaches advanced techniques for responsive web development. Responsive design ensures that a website will look good on nearly any device--a desktop, tablet, mobile phone, and so on--without breaking any features, introducing bugs, or rendering the text, images, or other content illegible to different users. It requires a more sophisticated grasp of CSS and HTML. To code this website, I used new techniques I learned, such as CSS media queries, Flexbox, SEO (Search Engine Optimization) strategies, and Bootstrap's utility classes, grids, and navigation. I also made extensive use of professional tools for web developers: Google Chrome's Device Mode for Responsive Design, Live Server for VS Code, InVision Freehand and Figma for project/product design, GitHub for continuous deployment, and Netlify for multiple-page hosting.

The goal of this project was to create a responsive, multi-page website that features my coding portfolio, but I also set new challenges for myself. Beyond all that I was taught, I also had fun teaching myself how to include Bootstrap's carousel feature (i.e. the projects preview on the Home page), how to crack Bootstrap's code and gain creative control over their responsive navigation bar, and more! I am meticulously attentive to detail, so I love using Google Chrome's developer tool (right click on any webpage and select "Inspect") to experiment, further my learning, and discover new possibilities. Finally, rather than reproducing a "pixel-perfect" copy of the Figma template provided by SheCodes, I created an original design that more accurately reflects who I am to my site's visitors.

Background Image Credits:

Thank you for taking an interest in my coding portfolio and in this website. Please check back in from time to time to see my latest work!