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
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 🚀
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
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 💛
Top comments (17)
Jaw hits the floor
I have never seen such a creative portfolio before!
This is so unique, so amazing, fast, and just...
Awesome.
Thanks a lot! Comments like these just make all the effort worth it 🙏
I loved it!!!
Wow really cool like it!
Thank you :)
Very nice, the detail is amazing!
Thanks 😃
This is wonderful! I love the attention to detail. Great work!
Thanks Adrian, I love your work as well. It's incredible!
Very nice!
Thanks Jacob :)
Thanks Vitali, I'm glad you enjoyed it!
This is amazing. 👌🏻
This is awesome!
I love it, and I loved Farmville! 🤩
And congrats for winning!!!
Thanks a lot, Ayu :)
Very cool and unique portfolio.
Hope to learn from my your experience.
Thank you, if you have any questions, feel free to reach out to me. I'll be glad to help.