me

A personal portfolio website built with Svelte 5 and Tailwind CSS, featuring a clean design with an avatar, work experience timeline with hover tooltips, and a WeChat QR code for easy connection.

Features

• Avatar display with status indicator
• Work experience list with interactive tooltips
• WeChat QR code section for networking
• Social media links (GitHub, LinkedIn, Email)
• Responsive design
• Clean, modern UI with shadcn/ui components

Tech Stack

• Framework: Svelte 5
• Build Tool: Vite
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (bits-ui)
• Icons: Lucide Svelte

Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

The built files will be in the dist/ directory.

Preview Production Build

npm run preview

Customization

Profile Information

Edit src/App.svelte to customize:

1. Avatar: Replace /public/avatar.svg with your photo
2. Name & Title: Update the <h1> and <p> elements
3. Experience: Modify the experiences array with your work history
4. Social Links: Update the socialLinks array with your profiles

WeChat QR Code

Replace /public/wechat-qr.svg with your actual WeChat QR code image.

Project Structure

me/
├── public/
│   ├── avatar.svg      # Profile avatar image
│   └── wechat-qr.svg   # WeChat QR code image
├── src/
│   ├── App.svelte      # Main application component
│   ├── app.css         # Global styles with Tailwind
│   ├── main.js         # Application entry point
│   ├── components/
│   │   └── ui/         # shadcn/ui components
│   └── lib/
│       └── utils.js    # Utility functions
├── index.html
├── package.json
├── vite.config.js
└── jsconfig.json

License

MIT