portfolio
🖥️

Portfolio

Built with

html5
css
javascript

Overview

For the final project of Freecodecamp responsive Design I built a Single page application portfolio that contains all my socials and links to my work. I used a purple, pink and blue color scheme that is similar to my twitter. The focus was on applying Visual Designs with a combination of typography, color theory, graphics, animation, page layout, and to deliver my message. To apply accessibility to include people with visual, auditory, mobility, or cognitive disabilities. Then make a responsive web design that works and looks great on all devices.

Goals

The goal of this project was to build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNBOYG. I decided to alter the design a lot. I listed my projects in a portfolio section by making card components. I included a contact form, added a testimonial section, listed my technical skills with logos and put social icons on my jumbotron.

Lessons Learned

There was so much custom CSS I had to resort to using a preproccesor SASS to make the CSS more modular.

portfolio-mobile
Fig.1 - Mobile View of App

Process

I followed the freecodecamp user story:

  • User Story #1: My portfolio should have a welcome section with an id of welcome-section.
  • User Story #2: The welcome section should have an h1 element that contains text.
  • User Story #3: My portfolio should have a projects section with an id of projects.
  • User Story #4: The projects section should contain at least one element with a class of project-tile to hold a project.
  • User Story #5: The projects section should contain at least one link to a project.
  • User Story #6: My portfolio should have a navbar with an id of navbar.
  • User Story #7: The navbar should contain at least one link that I can click on to navigate to different sections of the page.
  • User Story #8: My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.
  • User Story #9: My portfolio should have at least one media query.
  • User Story #10: The height of the welcome section should be equal to the height of the viewport.
  • User Story #11: The navbar should always be at the top of the viewport.

Then decided on the best layout of the content and made a design in figma. Finally I scaffolded the HTML and started to style it then finished with adding SEO

portfolio-tablet
Fig.2 - Tablet View of App