Building a Modern Portfolio

I built a responsive, accessible personal site built from scratch.

Project Hero Banner

The Challenge

I needed a fast, lightweight portfolio to showcase my work and document my learning journey from a beginners perspective. I wanted to avoid Wordpress or a 'drag and drop' style web builder so I can learn on the job.

The Solution

I chose to build this site initially using simple HTML and CSS. This also give me complete control over the design.

Wireframe sketch of the layout
Wireframe sketch of the layout.

Key Learnings

One of the biggest challenges was mastering CSS Grid for the project layout. I learned how to use `minmax` to make the cards responsive without media queries.

Code Snippets

Here's an example CSS code snippet for code I used to set the hover style for my skills. 

.site-nav a:hover { 
            color: var(--color-orange); 
            transition: color 0.2s;
}