My Portfolio for the Front-end path 🦄

I’d like to thank Lisa Frank for the inspiration on my portfolio :gem:I can’t wait to learn some framework things bc writing vanilla everything from scratch takes a very long time! I learned so much from this project and also have a new appreciation for how much goes into making a dynamic site not even counting the middleware/backend things I omitted.

  • I started out trying to make this kinda jokey and then it morphed into a whole ordeal haha.

  • I’d estimate 12-15hrs on this, 5hrs was getting the static site up and working on all the custom bits. The rest was writing a proper README.md, several hours on JavaScript functionality. A bunch of the sites I made are challenges from Codewell btw. There are a few easter eggs on the site so click around :slight_smile:

  • live code

  • raw code

Portfolio v1.0

This project was a Codecademy Pro challenge on the front-end development career path.

Table of Contents

General Information

  • The aim was to create a custom, responsive site that integrated at least one functional feature utilizing JavaScript.

Technologies Used

  • HTML5/CSS3
  • vanilla JavaScript
  • party.JS
  • VS Code

Features

  • Multipage responsive site
  • Real-time header greeting
  • Light/Dark mode toggle
  • Party confetti click on grid items

Screenshots




Project Status

Project is: complete but always making small tweaks

Room for Improvement

Room for improvement:

  • Launch featured projects from grid clicks as links OR
  • Create slide out image preview of featured project
  • Consider using Less to refactor CSS
  • Consider using React or Angular

To do:

  • Organize code into more modular stylesheets for readability
  • Create a backend using a lightweight node.js app like Express
  • Use get/set methods and local storage to maintain user preference for light or dark mode across pages

Acknowledgements

  • This project was inspired by Lisa Frank :unicorn: and Jem :drum:
  • This project was based on my imagination and some CSS tricks I picked up from Kevin Powell

Contact

Created by Melissa feel free to send a DM

2 Likes

This looks awesome, really well done! I like the little extra touches like the confetti, clock and color mode toggle. It’s also great that you’ve written up such a detailed README, which not nearly enough projects have imo.

The only very small bit of feedback I would have is that the header doesn’t seem to display as intended, by your screenshots it should display as this:

But actually ends up looking like this for me (on a standard 1080p monitor):


I tested it out a little and it seems like that’s only an issue on widths >1500px :smile:

thank you so much for the feedback! i’ll likely need to add a media query to address and push the change to github. appreciate you trying to break things honestly haha.

1 Like