It's about time I start applying to jobs and I thought that a website version of my resume would be a good project to include ...in my resume...
This website is a Frankenstein of several ideas and CodePens I gathered throughout the internet and my personal twist. Yes I had some original ideas, I'm not just some code thief.
I've also shed some tears making it (as best as I can tell) responsive and compatible with all browsers that matter (sorry IE). It should work on most screen sizes and be touch-friendly.
Feel free to take inspiration/code from the website as I did from others.
I developed the website using Jekyll because I thought it was the most straightforward way to integrate with github-pages (I've come to realize that there are other, possibly better, options). It also facilitates blog-style content. Who knows someday I'll start posting updates on my projects on here or something...
- The background of the website was taken from this CodePen by Nazar The Vis Azhar. I messed around with the animation timings and simplified the PNGs.
- The header navigation bar was inspired by this Youtube tutorial by Kevin Powell. I messed around with quite a lot and added a personalized active navbar effect of a cursor blinking.
- The shape of the cards from the Education section was inspired by this Youtube video by Online Tutorials. I believe I improved the original design, as the one from the video relies on inverted borders and therefore is not a real "irregular shape". It needs the background color to fill in the "hole part". I drew the shape in an SVG making it independent of the background.
- The blob shape idea was also inspired by an Online Tutorials's Youtube video. It was just an inspiration however, as I decided to go deep into SVG programming to accomplish the SVG shape animation on hover and the gradient and glow effects. The SVG blob paths were randomly generated using blobs.app.
- The retro contact form idea came to me when I stumbled on this CodePen by AlexKP.
I think these are all the inspos. Of course, thank you StackOverflow, I stole shamelessly from you.
The rest of the website's vibe and functionality came purely from my head. I am particularly proud of the Skills section. The word-cloud that can be randomized through a button and the spinnable 3D cube that can be textured with any skill you click on was pretty fun to make. It most certainly is the least efficient thing I ever programmed. But it looks and feels cool.
- Custom Error 404 page;
- Loading page for better mobile performance;
- A pop-up button on the side that asks you if you want to download my resume;
- I intend to model and rig a robotic arm in Blender. Then add it to the landing section of the website, behind the text. I'll use inverse kinematics and the ThreeJS library to make it look like it is trying to follow and grab the user's cursor. Let's hope I have the time...
Feel free to open an issue.