Personal Portfolio

Overview

I will create a portfolio that showcases my talents, abilities, and application of recent skills such as flexbox, media queries, and CSS variables. This will allow me to demonstrate my expertise and use my newly acquired skills while creating something that will be useful in my job search. The portfolio will be a powerful tool that demonstrates my capabilities and helps me stand out in the job market.

The challenge

• When the page is loaded the page presents your name, a recent photo or avatar, and links to sections about you, your work, and how to contact you
• When one of the links in the navigation is clicked then the UI scrolls to the corresponding section
• When viewing the section about your work then the section contains titled images of your applications
• When presented with the your first application then that application's image should be larger in size than the others
• When images of the applications are clicked then the user is taken to that deployed application
• When the page is resized or viewed on various screens and devices then the layout is responsive and adapts to my viewport

Screenshot

Link:

• Live Link: https://kingjessie.github.io/Portfolio

Built with:

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned:

I have gained experience in using CSS grid and flexbox to design visually appealing layouts. This includes creating CSS Flexbox containers and setting them to display as a row or column, positioning CSS flexbox items inside containers to create clean and fluid layouts, and implementing responsive CSS styles that respond to page changes. I also learnt how to create media queries so that content rendering may adjust to various screen resolutions.

<section id="categoryGrid">
      <div id="TimelessTreasure" class="categoryGridArea">

.categoryGridArea {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 5px;
  cursor: pointer;
  display: grid;
  align-content: end;
}

Useful resources:

• Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS
• W3schools: https://www.w3schools.com/css
• EvLearn: https://youtu.be/dIFNHeHTja0
• Kevin Powell: https://youtu.be/hwbqquXww-U

Author:

• Jessie K