My Portfolio project! (Finally lol)

Hello everyone! I’m happy to announce that I finally finished it!

The original project itself wasn’t that hard, but I overcomplicated it to myself once I decided that I wanted to add a couple features of my own :sweat_smile:
Still, it was a really fun project to work on, this has been the largest project I have made so far but not the last one, and it was great to see it coming together, and see how the final result was taking shape as I started moving towards the end goal.

In terms of how long it took me… The repository on GitHub have files that are 2 months old, but I’m pretty sure I’m closer to 3 months than 2, and not only that, but before I even made the repository I spent at least 2 weeks making the wireframes, and attempting to make a high-fidelity model too (I may attach some images), so I think it took me about 2 to 3 months and a half or so.

Here is the link to the Live Page
And here is the link to the Repository itself.

Feedback is always appreciated! :sparkles:


Images

Wireframe I built on

Full design process

Idea to make the original skill section abstracted

Idea to make the information section abstracted

Final idea to make the information section abstracted

Additional credits

I can’t help but also thanks to my boyfriend for helping me brainstorm the designs for my page, he was the one who help me to kickstart with the “abstract” theme of the page, and two designs I coded are direct contributions (designs) by him:

Box used on the Selected Projects section made by him
Box for project-showcase

Effect on hover for said boxes on the Selected Projects section, also by him
Effect for project-showcase

So a huge thanks to, and I quote, “my super duper cool and smart boyfriend” for coming up with those designs :joy:

2 Likes

Wow your design is amazing!!

I love all the cool animations! :smile:

Do you have a background in web design or are you starting from a blank slate on codecademy? Either way, the end product is amazing, could pass for professional!!

Thank you! ^w^

As for my background: I just started learning here on Codecademy this year. I hadn’t done anything related to web design until then, but I liked it and thought it would be cool to create things my way :smile:

1 Like

Wow, that was really impressive! Honestly, I wasn’t expecting to see something of this level. Amazing job; I truly enjoyed visiting the website.

1 Like

The animations are cool!

I can share my thoughts as I scroll:

Homepage:

  • When I try to read the JavaScript/Design/SEO info, the fast-moving hexagons distract me as a neurodivergent reader. Maybe slow them down or have them stop after a rotation or two?
  • I’d reduce the delay on the fade in for the JavaScript/Design/SEO text. For a moment there, I was wondering what was going on instead of experiencing what was going on.
  • The hexagons appearing behind a project on hover are so cool.
  • You have a typo: “Code Cheatseet” instead of “Code Cheatsheet.”
  • I especially loved the way the icons popped in on your “skills” section.
  • A photo or drawing of you somewhere on the website would be a nice feature so we can imagine what you look like.
  • tl;dr: “Do you like what you see?” Yes.

Contact:

  • I looked at your contact info page on a wide monitor, and there was a ton of negative space to the right. I’d suggest adding a max-width so the page is a little more centered.

Toolbox:

  • The horizontal scrolling tools are so cool!
  • I think your Toolbox Corp callout text should say “Here at Toolbox Corp,” not “Here on Toolbox Corp.”
  • Toolbox Corp could also use a fixed width to help with fullscreen on wide monitors. This way, the amount of characters per line doesn’t get too long.
  • I enjoyed reading the reviews.

Bash:

  • A typo: “dissapoint” instead of “disappoint.”
  • I would like the ability to turn the music back off on your bash page. I had to close and reopen the tab.

Photo club:

  • Typo: “your owns” should be “your own.”
  • The page’s features are a little minimal, but you can fix that. Maybe on hover, an overlay with the artist name appears, and on click, it takes you to an external link where the photo is? (If you want, for realism, you can make me a pretend club member and put in a photo or two of mine. Or just stick to stock artists.)
  • Try adding an action, even just an alert saying “Sorry, club memberships are full,” to your “Sign up” button.

Summary:

  • Strong animations and cool design (congratulate your boyfriend too!)
  • Running your code through a spell checker would be helpful
  • The photo page is a little plain right now but can be spiced up
1 Like

OMG! Thanks for the feedback! (And catching all the spelling errors too lol)

I appreciate the time you took to detail everything. I have to be honest: the reason why the photo club and the contact page don’t look as good is the same: I was rushing them :joy:

I’ll make those adjustments and maybe rework the photo club page entirely (I can add some of your photos if you like the idea).

Once again, thanks for all the feedback! I hope we can stay in touch in the future :sob:

Happy to help! I also know the feeling of rushing pages, but the nice part is that you can always come back to them and touch them up.

And feel free to grab a photo of mine or two because I am proud of my best ones. Instagram tries to prevent image downloads, but I’ve grabbed my own pics from Inspect Element plenty of times. I bet you could also showcase your friends’/family’s best photos if you wanted for a personal touch.