Cozy website template by Floguo design engineer paradigmai

2 days ago 1

Personal website template with resizable panels & MDX content management.

Resizable Panels: Drag the dithered borders between panels to create your perfect layout
Double Border Aesthetic: Distinctive double border design on the sidebar
Decorative Ribbon: Book-inspired ribbon bookmark detail
Mobile Responsive: Seamless hamburger menu for mobile devices
MDX Content System: Write notes and book reviews in Markdown with frontmatter metadata
Build-time Generation: Lightning-fast performance with pre-processed content
Custom Typography: Beautiful font stack featuring Zalando Sans, STIX Two Text serif, and JetBrains Mono
Paper Grain Texture: Subtle background texture for a tactile, analog feel

Clone this repository

git clone https://github.com/yourusername/minimalist-portfolio-template.git cd minimalist-portfolio-template

Install dependencies

npm install # or pnpm install # or yarn install

Start the development server

Visit http://localhost:3000 to see your site.

Customize your content (see sections below)

Update Your About Section

Edit components/about-section.tsx to personalize your homepage:

Change your name and pronunciation
Update your bio and work history
Add your social media links (GitHub, Twitter, etc.)

Create new .mdx files in the content/notes/ directory:

--- title: "Your Note Title" date: "Month Year" excerpt: "Optional brief description" --- Your content goes here. Use standard Markdown syntax! ## Headings work - Lists work too - **Bold** and *italic* text - [Links](https://example.com)

Notes automatically appear in your site after restarting the dev server.

Create .mdx files in the content/books/ directory:

--- title: "Book Title" author: "Author Name" year: 2024 lastUpdated: "Month Year" isReading: true hasNotes: true --- Your book notes and thoughts go here...

Frontmatter Options:

isReading: true - Shows in "Now reading" section
isReading: false - Shows in "On my shelf" section
hasNotes: false - Hides the note icon (defaults to true if content exists)

npm run dev # Start dev server (auto-generates content) npm run build # Build for production npm run generate-content # Manually regenerate content from MDX npm run lint # Run ESLint

This template uses a build-time content generation system:

Write: Create .mdx files in content/notes/ or content/books/
Generate: scripts/generate-content.mjs converts MDX to static TypeScript files
Build: Next.js builds your site with pre-processed HTML content
Deploy: Static, performant site ready to ship

No runtime parsing means blazing-fast page loads!

This template is ready to deploy to: