DEV Community

Cover image for Personal Portfolio: Final Submission
Abhinav Chawla
Abhinav Chawla

Posted on • Updated on

Personal Portfolio: Final Submission

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:

Deployed on DigitalOcean (direct link)

Screenshots (and videos)

Desktop (Larger screens)

Screenshot: Desktop

Video Demo: Desktop

Mobile (Smaller screens) [Stripped down]

Screenshot: Mobile

Video Demo: Mobile


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

GitHub logo abhinavchawla13 /

This project is my personal portfolio!

My Personal Portfolio:


Deployed off the master branch at via DigitalOcean (direct DO link)

You can easily spin up a copy of the project using the deploy button below 🚀

Deploy to DO

Sneak peek

Desktop (Primary channel)


Mobile (Stripped down)

Project setup

Install dependencies

Make sure you have Node.js (v12+, npm v6+) installed

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Permissive License

MIT License


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:

  name: abhinavchawla
  - build_command: npm build
    environment_slug: node-js
      branch: master
    name: abhinavchawla
Enter fullscreen mode Exit fullscreen mode

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 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 💛

Top comments (18)

ironcladdev profile image
Conner Ow

Jaw hits the floor
I have never seen such a creative portfolio before!
This is so unique, so amazing, fast, and just...


abhinavchawla13 profile image
Abhinav Chawla

Thanks a lot! Comments like these just make all the effort worth it 🙏

ninadd profile image

I loved it!!!

aspiiire profile image

Wow really cool like it!

abhinavchawla13 profile image
Abhinav Chawla

Thank you :)

arndom profile image
Nabil Alamin

Very nice, the detail is amazing!

abhinavchawla13 profile image
Abhinav Chawla

Thanks 😃

adrianbdesigns profile image
Adrian Bece

This is wonderful! I love the attention to detail. Great work!

abhinavchawla13 profile image
Abhinav Chawla

Thanks Adrian, I love your work as well. It's incredible!

jaw1 profile image
Jacob Welling

Very nice!

abhinavchawla13 profile image
Abhinav Chawla

Thanks Jacob :)

abhinavchawla13 profile image
Abhinav Chawla

Thanks Vitali, I'm glad you enjoyed it!

devsmranjan profile image
Smruti Ranjan Rana

This is amazing. 👌🏻

adiatiayu profile image
Ayu Adiati

This is awesome!
I love it, and I loved Farmville! 🤩

And congrats for winning!!!

abhinavchawla13 profile image
Abhinav Chawla

Thanks a lot, Ayu :)

nirbhayparmar profile image
Nirbhay Parmar

Very cool and unique portfolio.
Hope to learn from my your experience.

abhinavchawla13 profile image
Abhinav Chawla

Thank you, if you have any questions, feel free to reach out to me. I'll be glad to help.