isayahdurst / portfolio-site

Challenge 02

This is my portfolio website which will showcase all of the cool things I build both inside and outside of class.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

User Story:

AS AN employer
I WANT to view a potential employee's deployed portfolio of work samples
SO THAT I can review samples of their work and assess whether they're a good candidate for an open position

Acceptance Criteria:

GIVEN I need to sample a potential employee's previous work
WHEN I load their portfolio
THEN I am presented with the developer's name, a recent photo or avatar, and links to sections about them, their work, and how to contact them
WHEN I click one of the links in the navigation
THEN the UI scrolls to the corresponding section
WHEN I click on the link to the section about their work
THEN the UI scrolls to a section with titled images of the developer's applications
WHEN I am presented with the developer's first application
THEN that application's image should be larger in size than the others
WHEN I click on the images of the applications
THEN I am taken to that deployed application
WHEN I resize the page or view the site on various screens and devices
THEN I am presented with a responsive layout that adapts to my viewport

Links

• Live Site URL: Github

My process

I started this site by building the HTML and CSS section-by-section. I broke the site down into a few main categories: nav bar, header, about section, portfolio, and contact section. I built the site with the future in mind and have ideas of how I'll change it to reflect my new skills as I go. One thing I plan to do is add a services section for when I start marketing my skills (if I decide to do that).

Built with

• Semantic HTML5 markup
• CSS
• JavaScript

What I learned

This was a challenging project because it made me combine everything I've learned so far into one project. I was a bit out of my element with a lot of the CSS and had to rely on Google multiple times for various mistakes I made. One of the things I'm happy to have made good use of during this project was custom variables for my accent colors on the site. Now if I want to change the colors I just need to change the variables at the top of the CSS file. I also learned more about CSS grids, though I do, admittedly, need to spend more time working with those to make them fully responsive and do exactly what I want them to do. For now, the grid is okay, but I will spend more time learning how to use them properly as I go. I also used the ::after selector quite a bit and made some fun effects with those. I made sure to add smooth transitioning throughout the site as well so that it feels more modern and polished.

Continued development

Again, I need to spend more time with CSS grids. I don't like the way mine resizes and would like to learn how to make them resize differently. I feel like it's relatively simple, though. I think it'll be something about learning grid areas and then setting a media query in the CSS file.

Author

• Github - @isayahdurst
• Twitter - @isayahdurst

Acknowledgments

Countless articles on the internet W3Schools Stackoverflow YouTube