developer-portfolio-template — HTML 作品集模板

SHA-256: b503302871c6bb132f082622bf74e2b82102870fb11714539c3415b6a5108b76

2026-10-13T16:12:44.913Z

# Developer portfolio demo

A warm, modern, two-page developer portfolio built with plain HTML, CSS and JavaScript. The project is designed as a public demo portfolio that can be forked, customized and deployed without any framework setup.

The live content uses a fictional developer persona, **Aarav Mehta**, so the repository feels complete while staying safe to reuse as a starter portfolio.

## Preview

- `index.html` — home page with hero, about, skills, journey, experience, selected projects and contact section
- `project.html` — project showcase page with four case-study style project cards
- `style.css` — complete responsive styling, light/dark theme and animations
- `main.js` — theme toggle, mobile navigation, reveal animations, cursor interaction and terminal typing animation

## Demo persona

This repository uses sample content for a fictional frontend-focused developer named **Aarav Mehta**.

The demo includes placeholder education, journey, experience, project details, email, GitHub, LinkedIn and resume links. These details are included only to make the portfolio realistic and easy to customize.

Before using this as your own portfolio, replace the demo content with your real details.

## Features

- Responsive two-page portfolio layout
- Light and dark theme toggle
- Animated hero section with terminal-style typing
- Developer-focused project showcase
- Timeline-style journey section
- Professional experience roadmap
- SVG-based project mockups
- No build step required
- Easy deployment on Vercel, Netlify or GitHub Pages

## Project structure

```txt
.
├── assets/
│   ├── about-developer.svg
│   ├── project-ai-resume.svg
│   ├── project-components.svg
│   ├── project-ecommerce.svg
│   └── project-workflow.svg
├── index.html
├── project.html
├── style.css
├── main.js
├── README.md
├── LICENSE
└── robots.txt
```

## Customize the portfolio

Search and replace these demo values:

```txt
Aarav Mehta
[email protected]
github.com/aaravmehta-dev
linkedin.com/in/aaravmehta-dev
resume.pdf
```

Suggested updates:

1. Replace the name, role, location and contact links.
2. Update the hero headline and About section.
3. Replace the journey and experience timeline with your own story.
4. Update project names, descriptions and links.
5. Replace the SVG images in `assets/` if you want your own visuals.
6. Add your real resume PDF and update the resume link in `index.html` and `project.html`.

## Run locally

Because this is a static HTML/CSS/JS project, you can open `index.html` directly in a browser.

For a cleaner local development setup, use VS Code Live Server or run a simple local server:

```bash
python -m http.server 8000
```

Then open:

```txt
http://localhost:8000
```

## Deploy

This project can be deployed through Vercel, Netlify, GitHub Pages or any static hosting provider.

### Deploy with Vercel

Vercel is the easiest option for this project because there is no build step.

1. Push this repository to GitHub.
2. Go to Vercel and click **Add New → Project**.
3. Import the GitHub repository.
4. Use these settings:

```txt
Framework Preset: Other
Root Directory: ./
Build Command: leave empty
Output Directory: leave empty
Install Command: leave empty
Environment Variables: none
```

5. Click **Deploy**.

After the first deployment, future pushes to the connected GitHub repository will trigger new deployments automatically.

### Deploy with Netlify

1. Push this repository to GitHub.
2. In Netlify, choose **Add new site → Import an existing project**.
3. Connect your GitHub repository.
4. Use these settings:

```txt
Build command: leave empty
Publish directory: ./
```

5. Deploy the site.


## Attribution

Template maintained by [Mehul Bagaria](https://github.com/mehul-bagaria).

## License

This project is available under the MIT License. See `LICENSE` for details.