Site Design Work
I created this portfolio site from scratch using CSS, HTML, and a little bit of Javascript. I started teaching myself how to build websites in about 2021, and I've been very interested in bettering my ability to write CSS so that I can apply my UI skills and bring my graphic designs to life.This site was my first time trying to build something using Figma! I first created a prototype using my laptop's aspect ratio.
After landing on this layout, I began to transfer this structure to CSS using Figma's dev tools and their integrated plugin in my IDE.
I had a few main components I knew I needed for my portfolio. One was a gallery with a modal; I was lucky enough to have code for a gallery I'd made in the past, and took snippets from that code while tweaking it to display the images how I liked.
I also wanted horizontal banners to divide topics into, and was able to build those fairly easily just using a series of nested CSS classes.
I knew I wanted buttons to be responsive and attention grabbing, so I used CSS animation to make them respond on mouse over events.
The biggest challenge with building this site for me was making sure it would be dynamic, working on both mobile and desktop with the same layout. I had no experience with this previously, all of my sites only working on desktop, so this was my first time learning about media queries and how they work.
Additionally, I wanted to incorporate personality into the site, and started playing around with ideas for its pallete. I decided to incorporate a landscape into the background of the sidebar, referencing photography of the Northern California hills I grew up around.
Another way I incorporated personality was through the use of an animated starfield background. I built this from scratch for another project, but decided to take it and tweak it slightly to fit into my portfolio. I love space and sci-fi, and thought incorporating this element would be a great way to make the site my own and also display my CSS abilities.
You can see the starfield effect here (use the back button if you get lost!) or on my about page.
