A portfolio for myself at michaelleonffu.com.
To consolidate all my projects in a nice and presentable way. This includes links to many projects I've worked on and a CV.
My developer goals for this portfolio:
- Easily maintainable and expandable
- Static single page site
- Cloud hosted
- Testable
My vision: to make this as easy to develop as possible so I can keep it up to date as often as possible. This also means I'll keep it as simple as possible with only essential features. All other features are deferred to separate projects.
Implemented using:
- Frontend Framework: Next.js based on React
- Styles: MUI
- Hosted on: Vercel.com
- IDE: VSCode
- Version Control: Github/michaelleonffu
- Testing: Jest (todo)
- CI/CD: (todo)
I usually always prefer self-hosted solutions; why host on a cloud provider?
Firstly, I want the practice hosting on a cloud provider, CI/CD, building static sites, and learning the toolchain/workflow overall. I realize I have always self hosted and that it doesn't hurt to use a cloud provider.
Secondly, I want the uptime to be closer to 99.99% compared to my self-hosted uptime of 98.99% haha. I upgrade my servers or services and it falls apart when I relocate my servers. But shouldn't my self hosted solutions include redundancy?: yes it should. Right now I'm not focusing on that. Later I'll make a series on Docker and distributed style software systems.
Lastly, I will update this semi-infrequently making it a great use case for a static single-page cloud hosted webpage.
Other services I've created and how I'm hosting them:
- Portfolio: React/Next.js hosted on Vercel
- cookieandrock.com: self-hosted on rasberrypi
- blog.cookieandrock.com: React/Next.js hosted on Vercel, no database yet
- img.cookieandrock.com: self-hosted on raspberrypi, database on MongoDB Atlas
- Annali Discord Bot: self-hosted on raspberrypi, database on MongoDB Atlas
Check out my progress at PROGRESS.md
The changelog is really just a git log. Progress is a record of the method I used to build this project. I do this because I want to keep track of what I work on, how I worked on it, and for how long.
Installing
Clone this repo, then run: npm install.
Development mode
Use npm run dev; Then go to localhost:3000.
Pushing to production
Test a production version with npm run build.
Commit to main and git push so Vercel can see the changes.
Some references I used for designing and building the website.
- W3 HTML Tutorial
- W3 CSS Tutorial
- MDN docs
- Looking at really detailed APIs, eg: linear-gradient() or clamp()
- CSS-Tricks
- Next.js v13