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: https://abhinavchawla.com

Deployed on DigitalOcean (direct link)

Screenshots (and videos)

Desktop (Larger screens)

desktop
Screenshot: Desktop

Video Demo: Desktop

Mobile (Smaller screens) [Stripped down]

phone
Screenshot: Mobile

Video Demo: Mobile

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

GitHub logo abhinavchawla13 / abhinavchawla.com

This project is my personal portfolio!

My Personal Portfolio: abhinavchawla.com

Deployment

Deployed off the master branch at abhinavchawla.com 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)

screenshot

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

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
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 abhinavchawla.com for a few years (bought through Namecheap), so I connected it with my DO app.
domain

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 (17)

Collapse
 
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...

Awesome.

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

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

Collapse
 
ninadd profile image
ninad

I loved it!!!

Collapse
 
aspiiire profile image
Aspiiire

Wow really cool like it!

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

Thank you :)

Collapse
 
arndom profile image
Nabil Alamin

Very nice, the detail is amazing!

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

Thanks 😃

Collapse
 
adrianbdesigns profile image
Adrian Bece

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

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

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

Collapse
 
jaw1 profile image
Jacob Welling

Very nice!

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

Thanks Jacob :)

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

Thanks Vitali, I'm glad you enjoyed it!

Collapse
 
devsmranjan profile image
Smruti Ranjan Rana

This is amazing. 👌🏻

Collapse
 
adiatiayu profile image
Ayu Adiati

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

And congrats for winning!!!

Collapse
 
abhinavchawla13 profile image
Abhinav Chawla

Thanks a lot, Ayu :)

Collapse
 
nirbhayparmar profile image
Nirbhay Parmar

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

Collapse
 
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.