zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 清理无用资源并更新项目配置

Browse Source 
删除大量未使用的图标、图片和组件文件
更新.gitignore、tsconfig.json和astro配置
添加新的工具函数和UI组件
修改项目元数据和依赖项
This commit is contained in:
joyzhao
2025-06-13 12:03:15 +08:00
parent 43d830aa27
commit c1bfb0915e
145 changed files with 1901 additions and 13996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
README.md
View File

@@ -1,224 +1,186 @@
# Modern Portfolio Template
# NeonMint Template Documentation
A sleek, responsive portfolio website built with **Astro**, **React**, and **Tailwind CSS**, featuring modern animations and stunning glassmorphism effects.
![neonmint](https://github.com/user-attachments/assets/068da5e4-50c0-4134-99d3-8cb8ec867d9f)
![Portfolio Screenshot](https://github.com/user-attachments/assets/4f2466f1-1ebe-4cbe-857c-40eccd63c384)
## 🎯 Overview
## ✨ Features
**NeonMint** is a minimalist and modern template designed for developers and digital creatives. Its dark-toned aesthetic with mint green accents offers a clean, elegant, and functional visual experience, ideal for portfolios, dashboards, or tech landing pages.
- **Modern Design** – Clean, professional layout with elegant glassmorphism
- **Animations** – Smooth transitions and interactive UI via Framer Motion
- **Dark/Light Mode** – Automatic theme switching with system preference detection
- **Fully Responsive** – Optimized for mobile, tablet, and desktop
- **Blazing Fast** – Powered by Astro for superior performance
- **Modular Structure** – Built for easy customization and scalability
- **SEO Friendly** – Structured content and meta tags for better visibility
## 📁 Project Structure
## 🚀 Demo
👉 [Live Demo](https://rishilol.vercel.app/)
## 🛠 Getting Started
### Prerequisites
- Node.js (v18+ recommended)
- npm / yarn / bun
### Installation
```bash
└── 📁NeonMint
└── 📁public
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
└── 📁images
├── 📁posts # Post images
└── 📁projects # Project images
└── site.webmanifest # PWA configuration file
└── 📁src
├── 📁components # Reusable UI components
│ ├── 📁blog # Blog components
│ ├── 📁layout # Layout components
│ ├── 📁portfolio # Portfolio components
│ └── 📁ui # UI components
├── 📁icons # Icons (.svg)
├── 📁layouts # Site layouts
│ ├── Layout.astro # Main application layout
│ ├── MarkdownAbout.astro # About-me page layout
│ ├── MarkdownPostLayout.astro # Posts page layout
│ └── ProjectLayout.astro # Projects page layout
├── 📁pages # Site pages
│ ├── about-me.md # About-me page
│ ├── 📁blog # All posts page
│ │ ├── index.astro # Blog home page
│ │ ├── 📁posts # Blog posts
├── │ ├── └── index.astro # All posts page
│ │ ├── 📁tags # Blog tags
│ │ └── 📁techs # Blog technologies
│ ├── index.astro # Home page
│ ├── 📁portfolio
│ │ └── 📁projects # Portfolio projects
│ ├── robots.txt.ts # robots.txt configuration
│ └── rss.xml.js # RSS configuration
├── 📁scripts
│ └── menu.js # Menu script
├── 📁styles
│ └── global.css # Global styles
└── 📁utils
└── languages.ts # Technology tools configuration
├── .gitignore
├── astro.config.mjs
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio
# Install dependencies
npm install
# or
yarn install
# or
bun install
# Start development server
npm run dev
# or
yarn dev
# or
bun dev
```
## 🛠️ Technology Stack
Visit `http://localhost:4321` in your browser to see it in action.
- **Framework**: Astro v5.6.1
- **UI Library**: Preact v10.26.2
- **Styling**: TailwindCSS v4.0.8
- **Icons**: astro-icon v1.1.5
- **Syntax Highlighting**: PrismJS v1.30.0
- **Animations**: tailwindcss-animated v2.0.0
- **Analytics**: @vercel/speed-insights v1.2.0
## 🧩 Customizing the Portfolio
## ✨ Key Features
All your content lives inside `src/lib/data.ts`. Update the following to make it yours:
1. **🚀 Performance Optimized**
- Static site generation
- Partial hydration with Preact
- Optimized images and assets
### 1. Personal Info
2. **💻 Modern Development Experience**
- TypeScript support
- Hot module replacement
- ESLint integration
```ts
export const personalInfo = {
name: "Your Name",
location: "Your Location",
email: "your.email@example.com",
github: "https://github.com/yourusername",
linkedin: "https://www.linkedin.com/in/yourusername/",
};
```
3. **🔍 SEO & Analytics**
- Built-in sitemap generation
- RSS feed support
- Vercel Speed Insights
### 2. Work Experience
4. **🎨 Styling & UI**
- TailwindCSS for utility-first styling
- Animated components
- Responsive design
- Dark mode support
```ts
export const workExperience = [
{
company: "Company Name",
location: "Location",
position: "Your Position",
period: "Start Date - End Date",
achievements: [
"Achievement 1",
"Achievement 2",
],
},
];
```
## 🚀 Getting Started
### 3. Education
1. **📦 Installation**
```ts
export const education = [
{
institution: "University Name",
location: "Location",
degree: "Your Degree",
period: "Start Date - End Date",
achievements: [
"Achievement 1",
"Achievement 2",
],
},
];
```
### 🚀**Astro Installation**
```bash
npm create astro@latest -- --template EFEELE/neonmint
```
or
### 🔧**Manual Installation**
#### Clone Repository
```bash
git clone https://github.com/EFEELE/NeonMint.git
```
#### Install Dependencies
```bash
npm install
```
### 4. Skills
```ts
export const skills = {
programmingLanguages: ["TypeScript", "Python"],
frontendDevelopment: ["React", "Next.js"],
// and more...
};
```
3. **⚡ Development**
```bash
npm run dev
```
### 5. Projects
4. **🏗️ Build**
```bash
npm run build
```
```ts
export const projects = [
{
title: "Project Name",
github: "https://github.com/yourusername/project",
description: [
"What it does",
"Technologies used",
],
},
];
```
5. **👀 Preview**
```bash
npm run preview
```
### 6. Awards
## ⚙️ Configuration
```ts
export const awards = [
{
name: "Award Name",
issuer: "Issuer",
date: "Date",
type: "Type",
position: "Position",
},
];
```
The project is configured through several key files:
## 📦 Build for Production
- `astro.config.mjs`: Main Astro configuration
- `tailwind.config.js`: TailwindCSS configuration
- `tsconfig.json`: TypeScript configuration
```bash
npm run build
# or
yarn build
# or
bun run build
```
## 🎨 Customization
To preview the production build locally:
### 📄 Adding New Pages
```bash
npm run preview
# or
yarn preview
```
Create new `.astro` files in the `src/pages` directory. The file name will determine the route.
## 📤 Deployment
### 🔧 Adding New Languages or Technologies
Easily deploy to platforms like **Vercel**, **Netlify**, **GitHub Pages**, or any static host of your choice.
To incorporate a new programming language or technological tool into the site's capsules, follow these steps:
## 📝 License
1. **🖼️ Add the SVG icon**: Place the SVG file of the language or tool in the `src/icons` folder.
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
> **💡 Recommendation**: For SVG icons, I recommend using [SVGL](https://svgl.app/), an excellent library of high-quality vectors that offers optimized icons for most popular languages and technologies.
## ©️ Copyright
2. **📝 Register the language**: Open the `utils/languages.ts` file and add a new entry to the languages object following this format:
© 2025 **Rishikesh S.** All rights reserved.
```typescript
html: {
name: "HTML 5",
iconName: "html",
},
```
Where:
- `html`: Is the unique identifier for the language
- `name`: Is the name that will be displayed visibly in the interface
- `iconName`: Is the name of the SVG file without the extension (must match exactly with the file name in `src/icons`)
Once these steps are completed, the new language or technology will be available for use in the site's capsules. You can select it when creating or editing projects or posts, and the corresponding icon will be displayed correctly in the interface.
If you encounter any issues during this process, try restarting the development server. In some cases, changes to configuration files or static resources require a restart to be detected correctly.
To verify that the new language has been added correctly, check the list of available technologies in the user interface after restarting the server.
You’re welcome to use this template for your own portfolio — just update `data.ts` and tweak the design as needed. Please keep attribution to the original author.
---
### 🧷 Favicon Setup
## 🌟 Like it?
To customize your site's favicon and web app icons, you can generate all the necessary variants using [favicon.io](https://favicon.io/favicon-converter/). Upload your logo or icon, and the tool will create a full set of optimized files for various devices and platforms.
Place the generated files in the `📂 public` directory as follows:
```bash
📂 public
├── 📄 android-chrome-192x192.png
├── 📄 android-chrome-512x512.png
├── 📄 apple-touch-icon.png
├── 📄 favicon-16x16.png
├── 📄 favicon-32x32.png
├── 📄 favicon.ico
└── 📄 site.webmanifest
```
> 💡 Don’t forget to update the contents of `site.webmanifest` to match your app’s name, description, and theme color for a complete PWA experience.
If you found this helpful or inspiring, **please consider leaving a star** ⭐ on the repo — it helps others discover it too!
---
### 🎨 Styling
- Use TailwindCSS classes for styling
- Add custom styles in `src/styles/global.css`
### 🧩 Components
- Create reusable components in `src/components`
- Import icons using `astro-icon`
## 🚀 Deployment
The site is configured for deployment on Vercel, but can be deployed to any static hosting service.
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request
## 📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 🙏 Acknowledgments
- [Astro](https://astro.build/)
- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [Lucide Icons](https://lucide.dev/)