Florian's portfolio/resume site project

-
Today has been an immensely rewarding day! My partner was having a bit of a low day at work, since he is currently actively seeking better fitting employment, and he casually said whether perhaps a website would make his applications stand more out. I reckon he did not expect me to dive headfirst into Bootstrap templates to build him one in a few hours by the time he got back!

Since he is a technical engineer, I wanted to make it a bit thematic and include some animated gears. That was hell of a lot of fun, since my partner immediately stepped into the "client" shoes and demanded the cogwheels to turn fast and ferociously. Luckily I managed to convince him that it would be counterproductive, since it would distract the viewer from the actual content. Now there are slowly, yet surely rotating gears on his personal site, and I swore on my pinky that these gears will be the reason he secures an interview, because they beat boring resumes any day!

Domain shopping went smoothly as ever, .pro domain only cost 3 dollars and hey, why not stroke a technical engineer's ego a bit by making their website PRO by default? :P

Here's the end product: https://florianhaeberli.pro



Things I learned:

  • Bootstrap template modification. This was proper headache at times, I've never had to use so much !important for basic things such as font color. But I guess it's simply one of those things you eventually learn to automatically do. 
  • JS animations. Website implements rotating cogwheels for that thematic touch!
  • responsiveness: font sizes on desktop were entirely too small, so I had to manually go over all of the content to make sure it was easy on the eyes
As a conclusion however, I was pleasantly surprised how quickly and with a few styling additions you can make a beautiful site. Definitely great for customers who don't have a specific artistic vision and just want a functional responsive site. I will however aim to personalise every template I use (such as doing with the gear animations and color scheme on this project), otherwise it feels as impersonal copy-paste. 

This project etched my love for Front End even deeper. I know that a rotating gear animation may seem arbitrary, but when I saw the smiling face of my partner seeing his OWN website incorporating elements that truly make it HIS, I knew it's a job for me. 

Creating joy from pixels!

Comments

Post a Comment

Popular posts from this blog

Github and Godaddy domain

-
Image
Today is the day I finally decided to learn the inevitable - Github! A brand new world to be honest. It was intimidating to dive into Godaddy domain settings and Github terminology: "commit", "repository", "pull request" etc. For a newbie, it goes to the dark lands of backend. But combining some resources I actually managed my Godaddy domain anzudev.com  to be hosted by Github on the background, via this repository:  https://github.com/anzuj/anzuj.github.io . So, for the first time in my life, my own HTML+CSS is live with a custom domain. For this day at least, I am the queen. (I'm rejoicing in small things, okay?) Here are the 2 resources that helped me get there: This Youtube video explaining how to set up Github pages This article explaining how to tweak Godaddy settings (in the above video there are namecheap.com settings) I did not use the Git terminal for this, but Windows Powershell. For anyone following (I also commented this
Read more

Technical task continues!

-
Image
I've been elbow deep in a recently assigned technical task and I may see the light in the end of the tunnel here! I reached out to a friend (Per, if you're reading this:  ♡ ), and he was a really great teacher, guiding me how to achieve what I wanted without explicitly copy pasting me the solution. Here's what we achieved by the end of the day. See the Pen Tabulator project by Anzelika ( @anzuj ) on CodePen . UPSIDE: All the dictionaries now dynamically load upon page load, fetching the data from a nested array of all dictionaries! DOWNSIDE: Had to revamp the "add new pair" function I made for a single dictionary before, so that a form of 2 fields and a submit button would be generated for each and single dictionary within the loop. The above codepen solution works, but it is a bit lengthy, so I went back to the drawing board and tried out Tabulator's native "add row" method to reduce the amount of code. The results are pretty specta
Read more

My portfolio creation

-
Image
The time has come! To craft my very own site, my gem, my business card to the Front End world, my creative baby! *jumps around excitedly* I knew that I wanted my own site to incorporate all of this: animated backdrop of particles I fell in love with a few weeks ago (Github here ) mobile responsiveness dark backdrop and light text smooth animations for changing sections no CSS framework (Bootstrap/Semantics) to practice positioning the whole site from scratch one pager with a toggle menu to follow the contemporary trends fresh feel, big clear elements When browsing for inspiration I found  this  tutorial that pretty much covered all the above. It also involves practicing all of this: vanilla CSS, positioning all elements by yourself via flexbox. Good chance to practice the basic understanding of how positioning and display attributes work jQuery. Toggle menu and animations are supported by jQuery, allowing me to familiarise  myself with that syntax and techniques m
Read more