Chomtana Portfolio - Final submission
Tags: dohackathon, svelte, showdev, chatbot
Published: 2021-01-11 06:52:42

## What I built
A personal portfolio/resume website with custom design that help HR to do their work faster and easier due to unique QUESTIONS and CHATBOT FEATURE that answer their question directly and with  FAST PAGE LOAD SPEED they do not have to wait for long time and with DETAILED INFORMATION they know me better.

### Category Submission: 
Personal Site/Portfolio

### App Link
Custom domain link: https://chom.dev
Digital Ocean link: https://personal-site-g98u5.ondigitalocean.app

### Screenshots

#### Desktop

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k0eif6zhyti7he4txzl3.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9s6fv77b9ohev2pkiem.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0qqr2r546hc7g7y8q2fk.png)

#### Mobile

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mdmdf5z24w1v5hp6ryn6.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0l1auiz98v67gnp3s15z.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1954ayxjeyorhiuzrjgp.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sgzprig96gnj3gu2vkoc.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oa5197wkxd0x3ngp56qj.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rphdhepv0e30ollug47l.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vv9fk4qn2a3btsof75p8.png)

### Description
A personal portfolio/resume website with custom design that help HR to do their work faster and easier due to unique features such as.
* QUESTIONS FEATURE that help HR answer their question directly
* SEE MORE FEATURE that make portfolio not boring because of too many details. HR can choose what they want to see.
* E-BUSINESS CARD FEATURE let interested people send their contact and message to me directly from my portfolio/resume.
* CAN HELP PEOPLE FIND JOB if they contact me though E-Business card and choose purpose to "Looking for job".
* CHOMTANA ASSISTANT CHATBOT to assist HR in finding and answering what they want.
* UNIQUE COLOR AND DESIGN

More over this portfolio/resume is very fast and come with many optimizations.

I also built many advance components such as Modal, Dialog and Scroll tracking by myself.

### Link to Source Code
Chomtana Portfolio: https://github.com/Chomtana/personal-site
dialogflow-proxy: https://github.com/Chomtana/dialogflow-proxy

### Permissive License
Chomtana Portfolio: Apache License 2.0
dialogflow-proxy: MIT

## Background

### Why not using game-like portfolio
* Game-like portfolio is very great. 
* But it lack ability to add new information such as new open source project or new work experience easily. 
* It not only take too much time to make but also take too much time to edit or add something.
* I want to use this in the future, so I always has something to add to my portfolio.
* HR will need too much time to see my portfolio (As HR need to waste time on gameplay) and are likely skip my portfolio if they are not looking for frontend or game developer.
* HR is used to classical resume.
* My portfolio is designed to let HR see what they want by using minimum time.

### How I built it 

#### Framework used
* Svelte
* Sapper
* Firebase Firestore
* Dialogflow
* Express

#### Why these framework
* Svelte is very fast compare to the popular framework such as React and Vue.
* Sapper is a server side rendering framework used to improve code splitting, page loading speed and improve SEO.
* There is an image optimization library built for Svelte (See https://github.com/matyunya/svelte-image)
* Svelte has complete built in components such as Context, Store and Transition while keeping code size small and still run very fast.
* Even though Svelte community is not as large as the other popular framework. With my deep understanding of how each components work we can build it and open source it to help build Svelte community and Open source community.

#### How this portfolio show my full stack developer skill?
* I have made many advance components myself such as Modal, Dialog and Scroll tracking.
* Show deep understanding of HTML, CSS and Javascript.
* Although I have made many advance components myself, I also show skill to use packaged library in the projects.
* Show understanding of common concept in React, Vue, Angular and Svelte.
* Show the skill of optimizing the website to reduce load speed and increase SEO efficiency
* Show backend integration skill (in this case we integrate with firebase in E-Business Card feature)
* Show chatbot (dialogflow) integration skill.

#### How this portfolio show my chatbot skill?
* I use Dialogflow to build chatbot for my portfolio.
* Show understanding of NLP concepts such as entity and intent which are used in Dialogflow.

#### How this portfolio show my UX/UI skill?
* I design unique UI and choose theme color by myself.
* I have experienced that sometime HR want to know just some deep detail that they want. If your portfolio/resume has too much detail HR will get bored and not remember all, so we introduce two features to help this.
    * When HR enter https://chom.dev they will see "Questions" as first section. The "Questions" section is designed for HR to ask commonly asked question and get answer quickly
    * We hide deep detail and show the topic that lead to that deep detail. If HR want to see that detail they can click "See More...". But if they don't they can just pass though without getting bored because of too many unwanted details.
* I have experienced from many event that HR would like to give their business card to competition winners. I got many but it is hard to store and organize, so I build E-BUSINESS CARD feature to handle this problem.

### Additional Resources/Info
* https://svelte.dev/tutorial/basics
* https://github.com/matyunya/svelte-image
* https://dialogflow.cloud.google.com/