Project Overview

Objective

Build a portfolio page to showcase my projects, skills, and experience, while also showcasing my skills with the portfolio itself.

Hostinger (live version):

https://yblackbox.com

Planning

Logo Design

I wanted a logo that includes a cube in the perspective where the edges form the letter Y. I used illustrator to design and make the shadings.

Layout prototypes

I drew different layouts to see which would be the best. I decided on choice A because I felt it was cleaner, simpler and allowed the user to have a better overview of the contents right away.

Wireframes

Style Guide

Color Palette

I wanted a color that pops out on black which is why I decided to orient my color palette around neon colors.

Color 1:

#ffff00

Color 2:

#8cff32

Color 3:

#ff00ff

Color 4:

#00ffff

Typography

Raleway

Google Font:

Y BlackBox

Own Font:

This font was created by me.

Development

Technologies Used

Javascript: React
CSS: SCSS
Packages used:

react-spring/parallax

Used for the animated background and scroll effect

emailjs-com, sweetalert2

Used to forward messages from the contact form to my email inbox.

react-router-dom, react-router-hash-link

Link the navigation links to the correct section in the page

react-spring, use-gesture/react, nuka-carousel

For the project section the card design and animation

Challenges:

A challenge I encountered was that the navigation that is spinning around the cube was working in the Chrome browser and Firefox but it was not working in Safari.

I examined the problem with the inspector for each browser and saw that for some reason the 'li' element was not moving in Safari. I researched online and asked others for help but I found no answer. Finally I realized that the first animation that has the elements move from the center to the circle was working so I compared them to see what was different. I realized for some reason safari does not like an animation at 100% transform 360deg so I split this up in increments and this worked.

I had problems creating links in the Navigation so that when they were clicked they would scroll to the right section.

I tried this various ways till I found 'Hashlink' which works similarly to an anchor link in HTML. I didnt understand this correctly at first but after trying it out at various places in the code I was able to figure out how to correctly ultilize it.

Another challenge was having the text at the side change depending on the section the user is in.

My first solution was to use the x-offset to see how far down the user has scrolled. This did not work as I quickly realized this drastically changed depending on screen height, which caused the text to show up at the wrong time

I finally found a solution that works and that was to use the IntersectionObserver which let me determine when to blend in the text and when to blend it out.