Personal Portfolio

Course Project • Front-End Development
Project Overview
For my front-end development specialization course, I was tasked with creating a responsive portfolio using HTML, CSS, and JavaScript.
Tools
Atom
Github
W3C Validator

Context & Challenge

Building a portfolio from scratch was a fantastic way for me to develop basic front-end development skills.  I was able to familiarize myself with industry-standard systems, platforms and web development methodologies. I learned about HTML page structure, CSS stylesheets and layouts, text editors and linters, JavaScript data types, libraries, and plugins. Learning these coding skills was also extremely helpful in understanding Webflow, which I used to build my actual portfolio.

A major reason for me to learn front-end development was the ability to work effectively in cross-functional teams as a UX designer. Understanding coding languages would allow me to know the possibilities and limitations of development, and help me communicate more effectively with developers.

Portfolio Layout

Key Features
  • A homepage with a short introduction and work examples
  • An about page with some key information about you as a person, your skills, and the tools you use
  • A detailed project page for each project telling the story of the project
  •  A contact section on each page with contact information
Wireframes

The wireframes focused on three viewpoints: mobile, tablet, and desktop. Each layout was optimized for the differing sizes to keep everything responsive. For example, the two-column layout on desktop collapses on mobile view.

HTML, CSS, & JavaScript


Utilizing Atom and Github, I set up the Home, About, and Project pages using a mobile-first approach. I chose to use one main color and kept the rest minimal to keep the focus on my work, making sure to use hover states on the navigation menu and both styles of buttons. The same colors and fonts are used for this portfolio as well as my resume to maintain a cohesive style.

I also learned how to include transitions and animations and had some fun playing around with options. I was especially proud of figuring out how to animate the navigation menu and social media icons, as I had to do extra research.

I used JavaScript to add interactivity within the site, adding a collapsible hamburger menu on mobile.

I made sure to use linters and W3C markup validation to check for errors throughout the process of creating the portfolio.

Results

Check out the published website!

or check out the Github repository here.

Takeaways

Before this endeavor, I had zero knowledge about coding. Now, I feel well-equipped to work with developers. The Hack for LA team I volunteer with uses Github for project management, and when designing web pages, I am aware which components are viable using simple HTML and CSS and which elements need JavaScript. This makes handoff easier, and during team meetings I understand more of the jargon spoken and can give better input and feedback on designs.

Want to work together?

If you like what you see and want to work together, get in touch!