My Personal Website

The 2nd iteration of my personal portfolio and blog website.
Report Bug · Ask for Help · Report a Vulnerability
Code of Conduct

📝 Table of Contents

• About The Project
• Getting Started
• Deployment
• Roadmap
• Author(s)
• Acknowledgements

💭 About The Project

I created this project back in June 2023 to replace my old website (now resides here) built in React, with a more robust framework, Next. I originally created a personal website to showcase my projects as well as being a valuable portfolio and a great learning platform in itself.

My website is divided into few main pages with its own unique purposes, which are:

• Home/main page: Introducing myself and my social medias, showcasing all of the tech stacks I master, my experiences, publications, and certifications.
• Projects page: Displaying some of my most cherished projects, along with their own description and links.
• Hire me page: Branding myself up for potential employers who might be interested in hiring me.
• Blog page: Still under construction, will be a home to my awesome stories.

(back to top)

Technologies Used

• Javascript Framework: Next.js
• CSS Frameworks / Manipulators: Bootstrap, Boostrap Icons, PostCSS
• CSS Preprocessor: Sass (in SCSS format)
• Analytics: Umami
• Miscellaneous: Framer Motion

(back to top)

🛫 Getting Started

1. First of all, clone this repository into your machine.

# Using terminal/shell
git clone https://github.com/stackofsugar/personal-website.git

# Using GitHub CLI
gh repo clone stackofsugar/personal-website

2. Navigate to repository root folder in your machine, then install NPM packages below.

npm run install

3. After the NPM package installation completed, you can run the website on your local machine.

# Start a development server
npm run dev

# Create an optimized production build
npm run build

# Start a local production server after build
npm run start

# My own script: Create an optimized production
# build and then start a local production server
npm run buildstart

(back to top)

🚀 Deployment

If you're interested in deploying this website yourself, you can refer to the Next.js deployment guide. You can choose various ways to deploy this Next.js project, ranging from self-hosting, static deployment, and managed deployment using Vercel, that I personally use to host my website.

You can also click the button below to directly clone and deploy this project via Vercel's direct deployment

For reference purposes, this is the setup that I use:

• Hosting: Managed Next.js hosting with Vercel
• Domain name: I found a cheap .com domain in Namecheap

(back to top)

📌 Roadmap

• Implement core features
• Implement projects page
• Implement hire me page
• Implement blog features
  • Add MDX markdown parsing using Remark
  • Implement front matter
  • Implement static path generations
  • Work on styling and workflow enhancement
• Rewrite README

📚 Author(s)

• @stackofsugar The Benevolent Dictator

See also a list of contributors who has participated in this project.

(back to top)

🎉 Acknowledgements

Hats off to these amazing people below who has inspired me on this project:

• Personal website inspiration: @michaelrk02's website, @drithh's website
• GitHub Community Standards inspiration: @othneildrew's BEST readme template, @kylelobo's The Documentation Compendium
• Plugins I use along the way: PurgeCSS for unused CSS rules removal, Remark for markdown transformations.

(back to top)