Personal project after a long time, the interface is made on Next.JS, React.JS and uses docker to support construction.
Key Features
Component Library: Built a set of modular, reusable UI components using React and styled-components in Next.js, focusing on accessibility and responsiveness.
Theming and Customization: Integrated a theming system that allows easy switching and customization of color palettes, typography, and layout styles using CSS variables and Figma tokens.
Reusable: Use docker for scalability, CI/CD support, easy to change and move to other servers.
Technologies Used
Next.js: For fast, server-rendered React applications. Act as an user interface.
Docker: For acceleration, better CI/CD support, Easier to change and move.
NGINX: Acts as a webserver, helping reverse proxy to navigate apps on the server, and portfolio is one of those apps.
VPS (Virtual Private Server): Acts as a storage, storing everything and keeping evertything always online.
Challenges and Learnings
First, I want to reuse the source code with any web server. Then, I want to build a website from scratch. I used template from Magic Portfolio for Next.js then, I took advantage of current microservice and docker technology to build my programming environment and build it on my server.
The cycle of coding, committing code to github, running CI/CD, server building code, docker building containers and publishing is completely automatic, which has greatly improved the design time.
In addition, using Next.js with SSR technology supports SEO well and has Server Component, suitable for expanding the Backend service later.
Outcome
-A personal portfolio page was born.
-Using Next.js is good for SEO and also suitable for future BE expansion.
-CI/CD mechanism automatically builds code but does not affect other apps.
