https://github.com/stackofsugar/personal-website
Portofolio & blog website using NextJS + Boostrap with (privacy conserving) analytics
https://github.com/stackofsugar/personal-website
Last synced: 14 days ago
JSON representation
Portofolio & blog website using NextJS + Boostrap with (privacy conserving) analytics
- Host: GitHub
- URL: https://github.com/stackofsugar/personal-website
- Owner: stackofsugar
- License: gpl-3.0
- Created: 2023-06-28T12:31:11.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-23T17:20:57.000Z (about 1 year ago)
- Last Synced: 2025-05-23T18:37:52.987Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://www.stackofsugar.com/
- Size: 1.54 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: COPYING
Awesome Lists containing this project
README
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](#about)
- [Getting Started](#getting-started)
- [Deployment](#deployment)
- [Roadmap](#roadmap)
- [Author(s)](#authors)
- [Acknowledgements](#acknowledgements)
I created this project back in June 2023 to replace my old website (now resides [here][old website]) 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.
### Technologies Used
- Javascript Framework: [Next.js][nextjs]
- CSS Frameworks / Manipulators: [Bootstrap][bootstrap], [Boostrap Icons][bootstrap icons], [PostCSS][postcss]
- CSS Preprocessor: [Sass (in SCSS format)][sass]
- Analytics: [Umami][umami]
- Miscellaneous: [Framer Motion][framer motion]
1. First of all, **clone this repository** into your machine.
```sh
# 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.
```sh
npm run install
```
3. After the NPM package installation completed, you can **run the website** on your local machine.
```sh
# 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
```
If you're interested in deploying this website yourself, you can refer to [the Next.js deployment guide][nextjs deploy 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
[][vercel direct deploy]
For reference purposes, this is the setup that I use:
- Hosting: Managed Next.js hosting with [Vercel][vercel new]
- Domain name: I found a cheap `.com` domain in [Namecheap][namecheap]
- [x] Implement core features
- [x] Implement projects page
- [x] Implement hire me page
- [ ] Implement blog features
- [x] Add ~~MDX~~ markdown parsing using [Remark][remark]
- [x] Implement front matter
- [x] Implement static path generations
- [ ] Work on styling and workflow enhancement
- [x] Rewrite README
- [@stackofsugar][stackofsugar-gh] The Benevolent Dictator
See also a list of [contributors](https://github.com/stackofsugar/personal-website/graphs/contributors) who has participated in this project.
Hats off to these amazing people below who has inspired me on this project:
- Personal website inspiration: [@michaelrk02's website][michaelrk02], [@drithh's website][drithh]
- GitHub Community Standards inspiration: [@othneildrew's BEST readme template][best readme template], [@kylelobo's The Documentation Compendium][the doc compendium]
- Plugins I use along the way: [PurgeCSS][purgecss] for unused CSS rules removal, [Remark][remark] for markdown transformations.
[old website]: https://projects.stackofsugar.com/
[nextjs]: https://nextjs.org/
[bootstrap]: https://getbootstrap.com/
[bootstrap icons]: https://icons.getbootstrap.com/
[postcss]: https://postcss.org/
[sass]: https://sass-lang.com/
[umami]: https://umami.is/
[stackofsugar-gh]: https://github.com/stackofsugar
[michaelrk02]: https://michaelrk02.github.io/
[drithh]: https://www.adriel.bio/
[best readme template]: https://github.com/othneildrew/Best-README-Template
[the doc compendium]: https://github.com/kylelobo/The-Documentation-Compendium
[purgecss]: https://purgecss.com/
[framer motion]: https://www.framer.com/motion/
[remark]: https://github.com/remarkjs/remark
[nextjs deploy guide]: https://nextjs.org/docs/pages/building-your-application/deploying
[vercel new]: https://vercel.com/new
[namecheap]: https://www.namecheap.com/
[vercel direct deploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fstackofsugar%2Fpersonal-website