161 lines
3.7 KiB
Markdown
161 lines
3.7 KiB
Markdown
# Portfolio Website
|
|
|
|
A modern, minimalist portfolio built with Next.js, TypeScript, and shadcn/ui. Features a clean dark theme design with static site generation for optimal performance.
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework:** Next.js 16.0.10
|
|
- **Language:** TypeScript 5.9.3
|
|
- **UI Library:** React 19.2.1
|
|
- **Component Library:** shadcn/ui
|
|
- **Styling:** Tailwind CSS 4.1.18
|
|
- **Content:** Markdown files with gray-matter and react-markdown
|
|
|
|
## Getting Started
|
|
|
|
### Development
|
|
|
|
Run the development server:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) to view the site.
|
|
|
|
### Build
|
|
|
|
Create an optimized production build:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### Production
|
|
|
|
Start the production server:
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
├── app/ # Next.js app directory
|
|
│ ├── page.tsx # Landing page
|
|
│ ├── about/ # About page
|
|
│ ├── blog/ # Blog pages
|
|
│ │ ├── page.tsx # Blog listing
|
|
│ │ └── [slug]/ # Individual blog posts
|
|
│ └── projects/ # Projects page
|
|
├── components/ # React components
|
|
│ ├── navigation.tsx # Site navigation
|
|
│ ├── blog-card.tsx # Blog post card
|
|
│ └── project-card.tsx # Project card
|
|
├── content/ # Markdown content
|
|
│ ├── blog/ # Blog post markdown files
|
|
│ └── projects/ # Project markdown files
|
|
└── lib/ # Utility functions
|
|
└── content.ts # Content parsing utilities
|
|
```
|
|
|
|
## Adding Content
|
|
|
|
### Blog Posts
|
|
|
|
Create a new markdown file in `content/blog/`:
|
|
|
|
```markdown
|
|
---
|
|
title: 'Your Post Title'
|
|
date: '2025-12-12'
|
|
excerpt: 'A brief summary of your post'
|
|
---
|
|
|
|
Your post content here...
|
|
```
|
|
|
|
### Projects
|
|
|
|
Create a new markdown file in `content/projects/`:
|
|
|
|
```markdown
|
|
---
|
|
title: 'Your Project'
|
|
description: 'A brief description'
|
|
links:
|
|
github: 'https://github.com/username/repo'
|
|
live: 'https://example.com'
|
|
gitea: 'https://gitea.example.com/username/repo'
|
|
---
|
|
|
|
Detailed project description...
|
|
```
|
|
|
|
## Customization
|
|
|
|
### Personal Information
|
|
|
|
Update the following files with your information:
|
|
|
|
- `app/page.tsx` - Update the welcome message and name
|
|
- `app/about/page.tsx` - Update bio, photo, and social links
|
|
- `app/layout.tsx` - Update site metadata
|
|
|
|
### Styling
|
|
|
|
The site uses a dark theme by default. To customize colors, edit `app/globals.css` and modify the CSS variables in the `.dark` class.
|
|
|
|
## Dependencies
|
|
|
|
All dependencies are pinned to exact versions for reproducible builds. To update dependencies, modify `package.json` and run `npm install`.
|
|
|
|
## Docker Deployment
|
|
|
|
This project includes Docker support for easy deployment with Traefik.
|
|
|
|
### Prerequisites
|
|
|
|
- Docker and Docker Compose installed
|
|
- Traefik running in your environment
|
|
- A `traefik` external network created
|
|
|
|
### Setup
|
|
|
|
1. Update the domain in `compose.yaml`:
|
|
|
|
```yaml
|
|
- "traefik.http.routers.portfolio.rule=Host(`your-domain.com`)"
|
|
- "traefik.http.routers.portfolio-secure.rule=Host(`your-domain.com`)"
|
|
```
|
|
|
|
2. Build and start the container:
|
|
|
|
```bash
|
|
docker compose up -d
|
|
```
|
|
|
|
3. View logs:
|
|
|
|
```bash
|
|
docker compose logs -f
|
|
```
|
|
|
|
### Traefik Configuration
|
|
|
|
The compose file includes:
|
|
|
|
- Automatic HTTP to HTTPS redirect
|
|
- Let's Encrypt SSL certificate generation
|
|
- Load balancer configuration for port 3000
|
|
- Dockge labels for better organization
|
|
|
|
### Using with Dockge
|
|
|
|
Simply import the `compose.yaml` file into Dockge, or place this project directory in your Dockge stacks folder. The service will appear with the metadata labels for easy identification.
|
|
|
|
## License
|
|
|
|
This project is open source and available under the MIT License.
|