What I built

Howdy, I hereby submit my personal portfolio as part of the DO Hackathon. I have tried my best to add a level of uniqueness and excitement to the project. As a part of the series, I have shared my inspiration, thought process behind the design and the grind to develop it up.

I didn't want to build yet another website; rather an experience.

Hope you enjoy it!

Category Submission: Personal Portfolio

App Link: https://abhinavchawla.com

Deployed on DigitalOcean (direct link)

Screenshots (and videos)

Desktop (Larger screens)

Mobile (Smaller screens) [Stripped down]

Description

The portfolio is represented by a floating island with the landscape of a town marked down by some of the significant events of my life. I tried to gamify the website (a bit) and I hope the 🚗 shows you around my town! Feel free to click around on different items on the map to learn more about the corresponding events.

On a side note, since the website is asset and animation heavy, I built out a stripped out version for mobile screens and adjusted it to work only in landscape mode because of the layout. I have tested on only a couple of phones that I had access to, but can't promise the responsiveness throughout the spectrum of mobile sizes these days. Something that I'll be looking next few days after the hackathon ends.

Link to Source Code

npm install

npm run serve

npm run build

npm run lint

Permissive License

MIT License

Background

My first post of the series talked about what inspired me to for this design, so I'll refrain from repeating it all again.
TL;DR: My childhood favourite FarmVille inspired me!

As I mentioned above, I was pretty fixated that whenever I'll build my digital portfolio, I would make it a fun experience. And so I started this journey ideating, designing, and developing the project.

How I built it

I had mostly used Heroku and Firebase for different applications, and always wanted to try out DigitalOcean, but never got a chance to do so. Thanks to the credits, I set up my account and added a basic .do/deploy.template.yaml file and the "Deploy to DO" button in my Vue project:

spec:
  name: abhinavchawla
  services:
  - build_command: npm build
    environment_slug: node-js
    git:
      branch: master
      repo_clone_url: https://github.com/abhinavchawla13/abhinavchawla.com.git
    name: abhinavchawla

It took some trial and error to get it right, but thanks to the documentation (and old friend Google), I was able to get it right and deploy the app fairly quickly.
Lastly, I have had the domain abhinavchawla.com for a few years (bought through Namecheap), so I connected it with my DO app.

Also, it was my first time working heavily with animations on a website, more importantly, ensuring these animations work well on a responsive webpage. Huge shoutouts to the GSAP library for handling most of the leg work and optimization of the animations.

Additional Resources/Info

Setting up Vue + GSAP
Tool for image mapping
Resize image mapping for responsive webpages
Vue image loader
Mapita 3D map elements set

Final Words

I wish everyone a Happy New Year 2021 and good health considering the pandemic world we're living in. Feel free to reach out to me if you have any questions or just for a friendly introduction, what better time to meet new people online 😃

Lastly, I would really appreciate any suggestions or feedback you may have 💛