junongx/junongxdotcom

My portfolio website

Portfolio Website

My centralised portfolio website, where my works across fields and medium gather in one single place.

Current deployment

The website is currently deployed at JunoNgx.com via Vercel.

Tech stack

• Vite
• Svelte
• SASS (using BEM naming convention and indented syntax)
• TypeScript

Environment variables

This project doesn't require any environment variable and no setup is neccessary for deployment.

Local deployment

First, clone the repository and move into the directory:

git clone [email protected]:JunoNgx/junongxdotcom.git
cd junongxdotcom

Then install the packages (yarn is required):

yarn

Then run the development server:

yarn dev

Alternatively, run the network-exposed development server with the flag --host:

yarn dev --host

Open http://localhost:3000 (by default) with your browser to see the result.

This is a self-contained static site and doesn't require any data fetching.

Previous versions

This website has gone through several major overhauls, including usage of other tech stacks. Previous versions can be found in other branches. Current domain is generally always deployed with the branch production.

Acknowledgement

This website uses the typeface Jost by Owen Earl, who has also influenced its overall design. Icons are from the Feather project. The layout in the current iteration is heavily inspired by Tim Holman.

Contribution

For suggestions and criticism, please feel free to open issues for this repository.

junongxdotcom's Issues

Improve expand button

Improve name salutaion animation

Main issue: eliminate content movement.

Re-inspect CSS

CSS codes should be reviewed. I have gained much experience from the last time this was written and could likely improve them.

Rewrite classes structure

Classes are not correctly following the BEM guidelines.

Store contact urls as an object and iterate to avoid repetition

Contact me content not user-selectable

Solution:

• Write actual <span> instead of using ::after to create better consistency.

Content shifting to left upon the appearance of the scrollbar

Replication:

• Uncheck All and Check all tags.

Solution:
Add overflow-y: scroll to html.

Navigation component is duplicated

This was for an easy implementation for desktop and mobile, but this likely could have been done better.

2024 refresh

Fix incorrect button semantic

<button> should be used for interactive elements with on:click events, not <div>.

Improve mobile navbar

Navbar in mobile layout does not always fill the height of the device height.

Solution for consideration:

• Wrap the navbar as column flexbox with space-between to better use the vertical space.

Implement OS settings dark mode