Skip to content

moonlighter-dev/moonlighter-dev.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

moonlighter-dev.github.io

My Portfolio

I developed this portfolio as a landing page for my online presence, as well as a way to showcase my full stack web applications and other software engineering projects.

Link to project: http://danaarroway.com

portfolio gif

How It's Made:

Tech used: HTML, CSS

I enjoy the front end because of the instant gratification of crafting a page to look like I want. I got to hone my float skills, as well as CSS grid and flexbox. I used Canva to design the logos that represent my projects (another little hobby of mine). I tested my media queries in Chrome Dev Tools, and used Lighthouse to make my site as responsive and efficient as possible.

Optimizations

I really want to come back and write some JavaScript to add some extra styling to the project icons and help them stand out. I'm also studying creative coding in my free time and would like to replace the background image with an HTML canvas - I really like that this functionality was added with HTML5.

Lessons Learned:

I struggled with the navbar the most, especially getting it to look exactly as I wanted. In the end, I realized that I needed a better understanding of block formatting context and used dev tools to inspect my code and see exactly what I was styling. It turned out great, and the navbar looks like I intended -- the icons are the right size, the hover highlight is a perfect square. Yaaas!

Releases

No releases published

Packages

No packages published