Personal Website Template - Geek Style

A terminal-themed personal website template with a geek aesthetic. Built with React, Vite, and Tailwind CSS.

No coding required - customize everything by editing a single Markdown file!

Quick Start

1. Install

git clone https://github.com/YOUR_USERNAME/personal-website-template-geek.git
cd personal-website-template-geek
npm install

2. Customize

Edit CUSTOMIZE.md to add your own content. No code changes needed!

3. Preview

npm run dev

Open http://localhost:5173 to see your website.

4. Deploy

Push to GitHub and enable GitHub Pages (see Deployment below).

---

Customization

All website content is configured in CUSTOMIZE.md. Simply edit this file to personalize your site:

What You Can Customize

Setting	Description
Page Title	The browser tab title
Terminal Title	The title shown in the terminal header
User Name	The username in command prompts (e.g., guest@portfolio:~$)
Status Line	The line below the title (e.g., "Last modified: Jan 2025")
Footer Text	The footer messages at the bottom
Sections	Each section becomes a tab in the navigation menu

Section Structure

Each section in CUSTOMIZE.md follows this format:

## Section: section_name

### Command
fake_terminal_command

### Content
Your content here...
Line 2
Line 3

Adding a New Section

Just copy and paste a new section block in CUSTOMIZE.md. The navigation menu updates automatically!

Removing a Section

Delete the entire ## Section: ... block from CUSTOMIZE.md.

Tips

• Use ASCII art generators for custom headers
• Use box-drawing characters (═, ║, ╔, ╗, ╚, ╝) for borders
• Use progress bars (█, ░) for skill levels
• Keep lines under 80 characters for best terminal appearance

---

Deployment

GitHub Pages (Recommended)

This repo includes automatic deployment via GitHub Actions:

1. Push your code to GitHub

2. Enable GitHub Pages:

   • Go to repo Settings → Pages
   • Under "Build and deployment", select GitHub Actions

3. Deploy:

   • Push to main branch
   • Site builds and deploys automatically

4. Access your site:

   https://<username>.github.io/<repo-name>/
   

Note: If you rename your repo, update the base path in vite.config.ts:

base: '/your-new-repo-name/',

Other Platforms

Run npm run build and deploy the dist/ folder to:

• Netlify
• Vercel
• Any static hosting service

---

Project Structure

.
├── CUSTOMIZE.md          # Edit this to customize your website
├── src/
│   ├── app/components/   # React components
│   ├── config/           # Config parser (reads CUSTOMIZE.md)
│   └── styles/           # CSS styles
├── index.html
├── package.json
└── vite.config.ts

---

Commands

Command	Description
npm install	Install dependencies
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build

---

Acknowledgement

Made with Figma AI and Claude Code.

License

MIT License - see LICENSE for details.