cyberpunk-portfolio — HTML 作品集模板

SHA-256: b071583f970a9baedb1697dfb767ff474b72fca8ff4a69e4498a943ed7461b80

2026-10-13T08:12:48.173Z

# 🤖 JOHN DEVELOPER // PORTFOLIO.EXE

A professional, fully-responsive cyberpunk-themed portfolio website for a Full-Stack Developer & Cloud Architect. Modern tech stack with stunning neon aesthetics and smooth animations.

**Version:** 2.0.77  
**Repository:** portfolio
**Status:** Production Ready

---

## 📁 Project Structure

```
portfolio/
├── index.html              # Main HTML file
├── css/
│   └── styles.css          # All styles (no inline CSS)
├── js/
│   └── main.js             # All JavaScript functionality
├── assets/
│   └── images/             # Image files (placeholder)
├── package.json            # Project metadata & scripts
├── .gitignore              # Git ignore rules
├── README.md               # This file
└── lock.json               # Optional dependency lock file
```

---

## 🚀 Quick Start

### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Python 3.x (for local server) OR Node.js with http-server
- Git (for version control)

### Installation & Running

#### Option 1: Using Python (Built-In)
```bash
cd portfolio
python -m http.server 5000
# Open browser to: http://localhost:5000
```

#### Option 2: Using Node.js HTTP Server
```bash
cd portfolio
npx http-server -p 8000
# Open browser to: http://localhost:8000
```

#### Option 3: Open Directly in Browser
Simply double-click `index.html` or open it in your browser:
```
file:///path/to/portfolio-refactored/index.html
```

---

## 📋 Features

✅ **Fully Responsive Design** - Works on desktop, tablet, and mobile  
✅ **Matrix Rain Background** - Animated canvas effect  
✅ **Interactive Robot** - Cursor-tracking animated SVG character  
✅ **Smooth Animations** - CSS + JavaScript powered animations  
✅ **Professional Styling** - Cyberpunk neon aesthetic  
✅ **Navigation Sidebar** - Fixed sidebar with smooth transitions  
✅ **Multiple Sections** - Hero, About, Skills, Experience, Projects, Certifications, Contact  
✅ **Form Handling** - Contact form with submit feedback  
✅ **No External Framework Dependencies** - Pure HTML, CSS, JavaScript  

---

## 🎨 Customization Guide

### Colors
Edit the CSS variables in `css/styles.css`:
```css
:root {
  --green: #00FF41;           /* Primary neon green */
  --green-dim: rgba(0,255,65,0.4);
  --green-deep: #003B00;
  --black: #000000;
}
```

### Content Updates

#### Update Your Name & Info
Edit `index.html` line sections:
```html
<h1 class="hero-name">YOUR NAME HERE</h1>
<div class="logo-name">Your Name</div>
<a href="https://github.com/yourusername"><!-- GitHub link --></a>
```

#### Update Experience
Find the "EXPERIENCE" section in `index.html` and modify the experience items:
```html
<div class="exp-role">Your Job Title</div>
<div class="exp-company">Company Name</div>
<div class="exp-date">START DATE — END DATE</div>
<div class="exp-desc">Your description</div>
```

#### Update Projects
Modify the "PROJECTS" section cards with your project details:
```html
<div class="proj-title">Project Name</div>
<p class="proj-desc">Project description</p>
<span class="tech-pill">Technology</span>
```

#### Update Skills
Edit the skills array in `js/main.js`:
```javascript
const skills=[
  {name:'HTML5',icon:'⬡'},
  {name:'Your Skill',icon:'✦'},
  // Add more...
];
```

---

## 📦 File Descriptions

### `index.html`
- Pure semantic HTML structure
- Links to external CSS and JavaScript files
- Contains all page content and layout
- No inline styles or scripts

### `css/styles.css`
- All visual styling for the website
- CSS variables for theming
- Responsive media queries for mobile
- Animations and transitions

### `js/main.js`
- Matrix rain canvas animation
- Ticker scrolling effect
- Typing animation for hero title
- Hex grid skill generation
- Robot SVG cursor tracking
- Intersection Observer for scroll animations
- Contact form handling

### `package.json`
- Project metadata
- NPM scripts for starting server
- Project description and links
- License information

### `.gitignore`
- Ignores node_modules and build files
- Ignores IDE and editor files
- Ignores OS-specific files
- Development files excluded from git

---

## 🔧 Development

### Adding New Sections
1. Create new `<section>` in `index.html`
2. Style in `css/styles.css`
3. Add any JavaScript logic to `js/main.js`
4. Test responsiveness on mobile

### Adding New Images
1. Place images in `assets/images/`
2. Reference in HTML: `<img src="assets/images/filename.ext" alt="description">`

### Deploying to Production
1. Ensure all links use relative paths (not absolute)
2. Optimize images for web
3. Minify CSS and JavaScript (optional)
4. Deploy to hosting service (Netlify, Vercel, GitHub Pages, etc.)

---

## 📱 Browser Compatibility

- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

---

## 🔒 Version Control Setup

Initialize Git repository and push to GitHub:

```bash
# Initialize git
git init

# Add all files
git add .

# Create initial commit
git commit -m "Initial portfolio setup"

# Add remote (replace with your repository URL)
git remote add origin https://github.com/yourusername/portfolio.git

# Push to GitHub
git branch -M main
git push -u origin main
```

---

## 📄 License

MIT License - Feel free to use, modify, and distribute this portfolio template.

---

## 🤝 Support & Contributions

For issues, questions, or improvements:
- Create an issue on GitHub
- Submit a pull request with changes
- Email contact information in the portfolio

---

## ✨ Credits

**Design & Development:** John Developer  
**Theme:** Cyberpunk Neon  
**Fonts:** Google Fonts (Orbitron, IBM Plex Mono)  
**Icons:** Unicode symbols  
**SVG:** Custom animated robot with cursor tracking  

---

## 📜 Changelog

### v2.0.77 (Current)
- Refactored single-file portfolio into modular structure
- Separated HTML, CSS, and JavaScript
- Added comprehensive documentation
- Professional folder structure
- Git-ready setup

---

**Last Updated:** April 7, 2026  
**Status:** Production Ready ✓