next-lumina-dev-portfolio — Next.js 作品集模板

SHA-256: 5e346345e16143fd5167b11b1fa7293c77c345ca471efe6777167eaf44636652

2026-10-14T20:39:54.762Z

# Next Lumina Dev Portfolio

Next Lumina Dev Portfolio is a high-performance, visually stunning developer portfolio and project showcase template built using **Next.js 16 (App Router)**, **React 19**, and **Tailwind CSS 4**. It features an elegant dark-theme design aligned with **"The Digital Observatory"** design system.

The project decouples user-specific content from the presentation layers, adhering to Clean Architecture principles. Developers can customize the entire template without touching the React code.

---

## 🎨 Design System: The Digital Observatory

This portfolio is styled under **The Digital Observatory** guidelines, prioritizing visual precision, clean hierarchies, and semantic feedback:

*   **Restrained & Purposeful Accent Colors**: Color is used as a functional tool rather than raw decoration. Observatory Cyan (`#22d3ee` / `#0891b2`) and Telemetry Emerald (`#34d399` / `#10b981`) accents are restricted to <= 10% of any layout to steer visitor focus.
*   **Volumetric Glassmorphism**: Cards and navigation containers use custom translucent panels (`glass-surface`) combined with code-driven borders (`gem-border`). Hovering on elements shifts them into a floating state with a soft, color-tuned ambient shadow.
*   **Grotesque & Monospace Typographic Rhythm**: Displays use bold, tight-grotesque styles with letter-spacing constraints (>= -0.04em) to prevent characters from overlapping, paired with high-precision monospace labels (`Geist Mono`) for technical telemetry.
*   **Full Keyboard & Screen Reader Accessibility**: Built with WCAG 2.1 AA compliant color contrast. The project grid supports native keyboard focus states and sequencing via Arrow keys (`Left`/`Right`/`Up`/`Down`/`Home`/`End`).
*   **Respects Motion Preferences**: All animations respect `prefers-reduced-motion` settings, falling back to clean crossfades or instant state transitions.

---

## ✨ Features

*   **🚀 React 19 & Next.js 16 (App Router)**: Leverages React Server Components (RSC), optimized edge rendering, and Next.js Turbopack dev speeds.
*   **🛠️ Configuration-Driven Architecture**: Decouples data from visual logic. The entire application—personal bio, social links, technology stack icons, metrics, and project logs—is managed inside [config/site.ts](config/site.ts) and [config/projects.ts](config/projects.ts).
*   **📊 Live VPS Tracker**: Renders an interactive server health tracker that pings infrastructure targets (configured via IP in environmental variables) to show connection status and latency.
*   **🌗 Hydration-Safe Dark Mode**: Sleek theme persistence using `next-themes` with zero layout shift or hydration mismatch flashes.
*   **📂 Dynamic Routing**: Automatically generates dedicated project detail pages for an arbitrary list of projects via Next.js dynamic routing segments (`/projects/[slug]`).

---

## 🏗️ Quick Start

This repository is designed as a GitHub template, allowing you to bootstrap your portfolio in seconds.

### 1. Generate Your Repository
Click the **"Use this template"** button at the top of the GitHub repository page to create a new copy in your personal GitHub account.

### 2. Install & Run Locally
Clone your new repository, install dependencies, and start the development server:

```bash
git clone https://github.com/your-username/your-portfolio-repo.git
cd your-portfolio-repo
npm install
npm run dev
```

The app will start at `http://localhost:3000`.

### 3. Configure Environments
Copy the example environment file to `.env.local` and add your VPS IP address (or any public server API) to enable the VPS status tracker:

```bash
cp .env.example .env.local
```

Inside `.env.local`:
```env
# IP or URL to target for VPS status telemetry
VPS_TARGET_IP=https://your-server-ip-or-api
```

### 4. Customizing Your Portfolio
Modify the central config files to update the data rendered on your site:
*   **Personal Branding & Stack**: Edit [config/site.ts](config/site.ts) to change your role, biography, statistics list, navigation links, and tech stack icons. (Find available icons at [Google Fonts Material Symbols](https://fonts.google.com/icons)).
*   **Projects Details**: Add or remove entries in [config/projects.ts](config/projects.ts). Each entry automatically populates the grid and generates a dynamic detailed page.

---

## 📜 Project Structure

```text
├── app/                  # App Router routes, layouts, and styles
│   ├── api/              # API endpoints (VPS telemetry checks)
│   ├── projects/[slug]/  # SSG dynamic project detail pages
│   ├── globals.css       # Core Tailwind CSS & custom scrollbar directives
│   └── layout.tsx        # Global shell and font providers
├── components/           # UI Components
│   ├── layout/           # Global Navbar & Footer components
│   ├── ui/               # Reusable UI elements (ProjectCard)
│   └── domain/           # Feature components (VpsStatusTracker)
├── config/               # Centralized Data Configuration (Content & Projects)
├── public/               # Static assets & placeholders
└── PRODUCT.md / DESIGN.md # Strategic and Visual Design Guidelines
```

---

## 📄 License
This project is open-source and licensed under the MIT License. See [LICENSE](LICENSE) for details.