Build a personal site with a dark editorial design for writing and projects
If you want to gather writing, project introductions, and reading lists in one place with a clean editorial design on a dark background, this repository is a good starting point. This project is a Next.js-based personal website that organizes articles and design elements in a consistent tone. It creates an environment where visitors can focus on the core content without unnecessary elements when reading articles or viewing projects.
Editorial design and automatic covers
The site features an editorial atmosphere combining a dark background with thin lines and monospace fonts. A contour mark is automatically generated based on the article title, eliminating the need to create separate cover images. The logo and favicon also use the same contour identity mark to maintain visual consistency. The article list displays a table of contents on the left, and each article has distinct design elements applied to aid the reading flow.
MDX writing and design system
Articles are written in MDX format, allowing easy use of code blocks and emphasis elements. The design is managed through Tailwind CSS token layers to apply colors and spacing consistently. Reusable design system primitives and domain blocks are separated, making it easy to add new elements or modify existing ones. The font choices are Geist Sans for reading and Geist Mono for code to improve readability.
Local execution and management commands
To run locally, you need Node.js 20 or higher and Bun. No environment variable configuration is required. Install dependencies with bun install and start the development server with bun dev. Perform production builds with bun run build and code quality checks with bun run check. Biome is used to automate linting and formatting to maintain code style.
License and content distinction
This repository applies the MIT license to the code, but all rights are reserved for blog content and images. Therefore, you should be careful to reuse the code but not take the content as is. Specific project card marks or animation elements follow or are inspired by the identity of external projects, so it is recommended to check the license terms of the original projects. It supports reduced motion settings to consider accessibility and includes a script to verify the continuity of animation loops.