My portfolio creation

-
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
  • manual responsiveness attributes without Bootstrap doing the thinking for me!


I really liked the demo, so I decided to take it as a guide for my own portfolio site.
And so I pulled up my sleeves, loaded up my coffee machine for the night, gathered the cats on my table for company off I went! After finishing the styling of the landing page, I felt the need for that extra "oomph" and remembered text typer animations. Since I am not fully sure if I am set to be a web developer or designer (I''m a sponge for everything front-end right now!), then why not incorporate this uncertainty in a productive way? After some digging I found the perfect codepen to modify for myself. Now, the subheading of my landing page animatedly types Developer/Designer/Enthusiast. And Along with the animated particles and color scheme, I absolutely adore my site already!

Here's the progress so far. Obviously below content still needs to be styled :)




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