Portfolio-v2 — Vite 作品集模板

SHA-256: c4cbbc6eec0c233c7b1d1d82ece8f08c5bba706fd299912fa87a2bf95d1cc611

2026-10-13T02:12:44.487Z

<div align="center">
   
# ✨ Andy Sarne Portfolio

</div>


<div align="center">

### A Modern Dark-Themed Portfolio Website

[![GitHub Stars](https://img.shields.io/github/stars/Auvryy/Portfolio-v2?style=for-the-badge&logo=github&color=yellow)](https://github.com/Auvryy/Portfolio-v2/stargazers)
[![GitHub Issues](https://img.shields.io/github/issues/Auvryy/Portfolio-v2?style=for-the-badge&logo=github&color=red)](https://github.com/Auvryy/Portfolio-v2/issues)
[![GitHub Forks](https://img.shields.io/github/forks/Auvryy/Portfolio-v2?style=for-the-badge&logo=github&color=blue)](https://github.com/Auvryy/Portfolio-v2/network)
[![Repository Views](https://komarev.com/ghpvc/?username=Auvryy&style=for-the-badge&color=brightgreen)](https://github.com/Auvryy/Portfolio-v2)

[🌟 Live Demo](https://your-portfolio-url.com) • [📁 View Code](https://github.com/Auvryy/Portfolio-v2) • [🐛 Report Bug](https://github.com/Auvryy/Portfolio-v2/issues)

</div>

---

## 🎯 About The Project

A sleek, modern portfolio website showcasing my work as a Front-End Developer and UI/UX Designer. Built with a focus on performance, accessibility, and stunning visual effects including an animated starry background and smooth scroll animations.

### ✨ Key Features

- 🌌 **Animated Starry Background** - Mesmerizing twinkling stars created with pure CSS
- 🎨 **Dark Theme Design** - Easy on the eyes with carefully chosen color palette
- 📱 **Fully Responsive** - Seamless experience across all devices
- 🌟 **Custom Cursor** - Interactive star cursor that follows mouse movement
- 🎭 **Smooth Animations** - Intersection Observer powered scroll animations
- ⚡ **Fast Performance** - Optimized with Vite for lightning-fast loading
- 🎪 **Interactive Components** - Dynamic work/education switcher and project showcase

---

## 🛠️ Tech Stack

<div align="center">

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)

</div>

### 🎨 Design Features

- **Tailwind CSS 4** - Utilizing the latest features for modern styling
- **Custom CSS Variables** - Consistent theming throughout the application
- **Font Awesome Icons** - Beautiful iconography for social links and UI elements
- **Google Fonts (Poppins)** - Clean, modern typography
- **CSS Animations** - Smooth transitions and micro-interactions

---

## 🚀 Getting Started

### Prerequisites

Make sure you have Node.js installed on your machine.

```bash
node --version
npm --version
```

### Installation

1. **Clone the repository**
   ```bash
   git clone https://github.com/Auvryy/Portfolio-v2.git
   ```

2. **Navigate to project directory**
   ```bash
   cd Portfolio-v2
   ```

3. **Install dependencies**
   ```bash
   npm install
   ```

4. **Start development server**
   ```bash
   npm run dev
   ```

5. **Build for production**
   ```bash
   npm run build
   ```

---

## 📂 Project Structure

```
Portfolio-v2/
├── 📁 src/
│   ├── 📁 images/           # Project and profile images
│   ├── 📄 style.css         # Main stylesheet with Tailwind
│   └── 📄 main.js          # JavaScript functionality
├── 📄 index.html           # Main HTML file
├── 📄 package.json         # Dependencies and scripts
└── 📄 README.md           # Project documentation
```

---

## 🎪 Features Showcase

### 🌟 Interactive Elements

- **Dynamic Experience Switcher** - Toggle between Work and Education sections
- **Smooth Scroll Navigation** - Click navigation items to smoothly scroll to sections
- **Hover Effects** - Subtle animations on all interactive elements
- **Custom Star Cursor** - Desktop users get a unique star-shaped cursor

### 📱 Responsive Design

- **Mobile First** - Designed with mobile users in mind
- **Tablet Optimized** - Perfect experience on iPad and similar devices
- **Desktop Enhanced** - Takes advantage of larger screens with advanced effects

### 🎨 Visual Effects

- **Starry Background Animation** - Over 100 twinkling stars with CSS box-shadow
- **Scroll Animations** - Elements fade in as they enter the viewport
- **Gradient Backgrounds** - Subtle gradients for depth and visual interest

---

## 🎯 Sections Overview

### 👤 About Section
Professional introduction with profile image, location, and role information.

### 💼 Experience Section
Interactive switcher between:
- **Work Experience** - Professional background and roles
- **Education** - Academic achievements and institutions

### 🚀 Projects Section
Showcase of key projects including:
- Inventory Management System
- Bullet Quiz Application
- Portfolio Website (this project!)

### 📞 Contact Section
Multiple ways to get in touch:
- Email: [email protected]
- Social media links (LinkedIn, Facebook, Twitter, GitHub)
- Location information

---

## 🤝 Contributing

Contributions make the open source community amazing! Any contributions you make are **greatly appreciated**.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

---

## 📝 License

This project is open source and available under the [MIT License](LICENSE).

---

## 📞 Contact

**Andy Sarne** - Front-End Developer & UI/UX Designer

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/andy-sarne)
[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Auvryy)
[![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])

**Project Link:** [https://github.com/Auvryy/Portfolio-v2](https://github.com/Auvryy/Portfolio-v2)

---

<div align="center">

### 🌟 If you found this project helpful, please give it a star! 🌟

**Made with ❤️ in the Philippines**

![Profile Views](https://komarev.com/ghpvc/?username=Auvryy&style=flat-square&color=brightgreen)

</div>