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

Defeating the fear of the terminal with React!

-
Image
Today is the day I did it! I opened the ever-feared terminal in my VS code. The final push was looking at React/Angular videos and seeing that following the project all required terminal commands. Since package management is elementary knowledge in this field, I decided I could no longer avoid getting comfortable with it. Aaand of course nothing went smoothly from the beginning. As soon as I tried to create a new file with touch index.html, this happened: Luckily my awesome Facebook coding community quickly came to rescue and pointed out that Window's native terminal "does not speak that lingo". So I had to switch to Git Bash terminal instead, which knows how to touch things. He. He. He. I dove into a React video next, but as if doomed, another problem showed within the first minutes. I was able to install react by: npx create-react-app, but when doing npm start, another error popped up *sigh* A bit discouraging to say the least, just wanting to learn a new ...
Read more

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

Job offer and Vue

-
Image
Really exciting news - I got an offer of a position to work with an awesome startup! After getting a few rejections due to my lack of professional workplace experience and some frameworks, I was feeling a bit hopeless in regards to what learning curve I still have ahead to be employable, but then I got an unexpected callback by 3 lovely gentlemen who deemed me a good match for my illustration skills, willingness to learn and potentially my startup culture background helped too. We agreed on a 80% mini "internship" for 2 months during which I'll try to wrack up my Vue skills and help make the webapp interactive and visually appealing. It's scary. It's new! But I'll give my very damn best at my first job opportunity in the frontend field! Words can not accurately describe how grateful I am to them for taking this leap of faith in me :) My tasks revolve around using Vue and Vuetify.js with their webapp. They've been in my bucketlist for ages, so what be...
Read more