Personal Portfolio: Final Submission
Tags: dohackathon, showdev, webdev, vue
Published: 2021-01-08 15:48:58

## 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](https://dev.to/abhinavchawla13/personal-portfolio-inspiration-2fnf), thought process behind the [design](https://dev.to/abhinavchawla13/personal-portfolio-design-e18) and the grind to [develop](https://dev.to/abhinavchawla13/personal-portfolio-dev-23p8) 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](https://abhinavchawla.com)
Deployed on DigitalOcean ([direct link](abhinavchawla-bz8lh.ondigitalocean.app))

### Screenshots (and videos)

Desktop (Larger screens)
![desktop](https://i.imgur.com/uvXWuwz.png)<figcaption>Screenshot: Desktop</figcaption>

{% youtube 3EocI8lldiI %}
<figcaption>Video Demo: Desktop</figcaption>


Mobile (Smaller screens) [Stripped down]

![phone](https://i.imgur.com/ufskSxH.png)<figcaption>Screenshot: Mobile</figcaption>

{% youtube A9pLjX2ZMck %}
<figcaption>Video Demo: Mobile</figcaption>


### 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 abhinavchawla13/abhinavchawla.com %}


### Permissive License
[MIT License](https://github.com/abhinavchawla13/abhinavchawla.com/blob/master/LICENSE)

## Background
My [first post of the series](https://dev.to/abhinavchawla13/personal-portfolio-inspiration-2fnf) talked about what inspired me to for this design, so I'll refrain from repeating it all again. 
*TL;DR: My childhood favourite [FarmVille](https://www.zynga.com/games/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](https://heroku.com/) and [Firebase](https://firebase.google.com/) 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:
```yaml
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](https://abhinavchawla.com) for a few years (bought through [Namecheap](https://www.namecheap.com/)), so I connected it with my DO app.
![domain](https://i.imgur.com/ICGZr99.png)

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](https://greensock.com/docs/v3/GSAP) library for handling most of the leg work and optimization of the animations.


### Additional Resources/Info
[Setting up Vue + GSAP](https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a)
[Tool for image mapping](https://www.image-map.net/)
[Resize image mapping for responsive webpages](https://github.com/clarketm/image-map)
[Vue image loader](https://www.npmjs.com/package/vue-images-loaded)
[Mapita 3D map elements set](https://creativemarket.com/graphicpear0/2879587-Ultimate-3D-Map-Creator-Mapita)


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