Video Demo: https://youtu.be/YFQ9Bv8j40Y
Description: This is my current portfolio website, it is now live at glen.work
It is a dynamic website created in ExpressJS, templated using handlebars, and hosted in Heroku.
I first designed all the objects such as the sakura tree and the mountain in Adobe Illustrator as it is my strong point. After that, I brought all the objects into Figma where I do most of the prototyping. It is a good way to see what should I keep and what should I throw away.
After all the planning is done I create a static website first with mostly HTML and CSS as a proof of concept. Then I moved everything into expressJS and changed it into handlebars. I also convert my CSS to SCSS to make my work easier. For the first week, I spend most of the time making the mobile version until I am satisfied then adding the desktop version as a minor tweak.
With handlebars and expressJS, Header, Footer, and the Overlay menu is currently saved only one file and can be easily modified without bothering other pages.
It splits into 3 sections. Home, About, and Work.
The Home serves as eye candy and at the bottom right, the curving effect makes sure viewers scroll down.
The About section is a quote from the about page. To make sure it doesn't fill up the page there's a button that increases the height of the section(the effect is mostly visible on mobile). In the end, there's a button that brings the visitor to the about page.
The work section is a preview of the work list in work. The carousel uses a JS slider library called Flickity. At the bottom, there's a button that brings the visitor to the about page.
This page is about me in 3 languages, English, Japanese, and Indonesian. You can choose the language with the flag buttons. At the bottom, there's a Contact Me button that brings the visitor to contact.
This page is dynamically generated with ExpressJS and handlebars. There's a genre selection button that automatically sorts and displays work that is according to the genre selected.
If you select one of the works, it will bring it into the details page of the particular work that is also dynamically generated. Currently, the work data is saved in a JSON file that saves the folder location, genre, title, image name, etc.
work.js takes the JSON file and output a javascript object that can be used in the website to dynamically generate contents into HTML.
All the image in the folder is served into a handlebars template that automatically put it into a Flickity carousel.
The contact form is using Nodemailer, a nodeJS application that directly emails the contact into my email. After the user sends the form they will be notified that their form is sent successfully.
Thank you for visiting my website.