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.
Hope you enjoy it!
App Link: https://abhinavchawla.com
Deployed on DigitalOcean (direct link)
Desktop (Larger screens)
Mobile (Smaller screens) [Stripped down]
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.
My Personal Portfolio: abhinavchawla.com
You can easily spin up a copy of the project using the deploy button below
Desktop (Primary channel)
Mobile (Stripped down)
Make sure you have Node.js (v12+, npm v6+) installed
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
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.
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.
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 💛