Pure CSS animated starry background with numerous twinkling stars
ViteHTMLPortfolio
Portfolio-v2 — Vite Portfolio Template
By drexstock
A dark-themed personal portfolio website template built with Vite and HTML, featuring an animated starry background, custom cursor, and scroll animations. Suitable for front-end developers or designers to showcase their profile and projects.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Custom star-shaped cursor that follows the mouse on desktop
Scroll-triggered fade-in animations via Intersection Observer and smooth scrolling navigation
Interactive toggle component between work experience and education
Dark theme with unified color scheme using TailwindCSS and custom CSS variables
Uses Vite as the development and build tool
Template Details
This is a dark-themed personal portfolio website template built with HTML5, TailwindCSS, JavaScript, and Vite. The page is organized around personal presentation, including an About section, Experience section, Projects section, and Contact section. The Experience section provides a toggle between work experience and education, the Projects section displays project entries, and the Contact section lists email, social links, and location information.
Visually and interactively, the template uses pure CSS to draw a starry background, with a star-shaped cursor that follows the mouse on desktop. Content entering the viewport on scroll triggers fade-in animations via Intersection Observer, and navigation items support smooth scrolling. Styling relies on TailwindCSS and custom CSS variables, icons use Font Awesome, and the font is Poppins from Google Fonts.
Usage restrictions: The personal information, project entries, email, and social links in the template are the original author's content and need to be replaced with your own. The licenses for third-party assets such as demo images, fonts, and icons must be verified separately; they cannot be assumed based solely on the code's MIT license.
ViteHTMLPortfolio
Is it right for your project?
Use Cases
- Front-end developers or UI/UX designers building a personal portfolio homepage
- Personal sites requiring a dark visual style and scroll animations
- As a reference project for learning TailwindCSS and native JavaScript interactions
- Quickly replace text and images for use as a personal resume-style page
Suitable For
- Individual developers who want to modify content directly and launch
- Developers who prefer HTML and native JavaScript without front-end frameworks
- Users needing a single-page portfolio structure (about, experience, projects, contact)
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Node.js must be installed first; after cloning the repository, run npm install to install dependencies
- 2
Use npm run dev to start the development server and npm run build to build the production version
- 3
Before going live, replace personal information, project entries, email, and social links in index.html and src
- 4
Third-party assets such as demo images, fonts, and icons require checking their respective licenses
- 5
The code is under the MIT license; when distributing, retain the original author's copyright notice and license statement
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not imply that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license statement.
- The code is provided as is; warranties and liability limitations are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be assumed based solely on the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
- The template content is the original author's personal portfolio, including their personal identity, experience, and project information; users must replace it with their own information before using it as a personal site.
- The contact section pre-fills the original author's email address; users must replace it with their own contact information to avoid misusing someone else's email.
- The projects section pre-fills the original author's specific project entries; users must replace them with their own project content.
- Page attribution and social links point to the original author; users must replace them with their own name and account information.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
A sleek, modern portfolio website showcasing my work as a Front-End Developer and UI/UX Designer.
Original README
- Email: [email protected]
Original README
Showcase of key projects including: - Inventory Management System - Bullet Quiz Application - Portfolio Website (this project!)
Original README
https://github.com/drexstock/Portfolio-v2/blob/main/LICENSEhttps://github.com/drexstock/Portfolio-v2/blob/main/README.md**Andy Sarne** - Front-End Developer & UI/UX Designer
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 79 / 100
- Technologies
- Vite · HTML
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2025-08-07
- Screenshot last checked
- 2026-10-13
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: c4cbbc6eec0c233c7b1d1d82ece8f08c5bba706fd299912fa87a2bf95d1cc611
2026-10-13T02:12:44.487Z
Source file / repository<div align="center"> # ✨ Andy Sarne Portfolio </div> <div align="center"> ### A Modern Dark-Themed Portfolio Website [](https://github.com/Auvryy/Portfolio-v2/stargazers) [](https://github.com/Auvryy/Portfolio-v2/issues) [](https://github.com/Auvryy/Portfolio-v2/network) [](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">      </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 [](https://www.linkedin.com/in/andy-sarne) [](https://github.com/Auvryy) [](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**  </div>
Explore similar templates
Compare previews and descriptions within the same stack and category.
Resumify
Resumify is a browser-based resume builder built with React, TypeScript, and Vite.
Vite · Portfolio
showlit
Showlit is a personal website template built with React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.
Vite · Portfolio
folium
A developer portfolio template built with Vite, React, TypeScript, and Tailwind CSS.
Vite · Portfolio
kurizu-discord
A personal portfolio website built with React and Vite that mimics the Discord desktop app, organizing projects, skills, and experience into customizable channels, threads, a member list, and emoji reactions.
Vite · Portfolio
about-me-personal-portfolio-website-template
AboutMe is a free personal website template built with Bootstrap and Vite, released under the MIT license. It provides a single-page index.html with organized src directories for images, JavaScript, and SCSS, along with npm scripts for development and build.
Vite · Portfolio
HackFolio
HackFolio is a hacker-style personal portfolio template for ethical hackers, penetration testers, bug bounty hunters, red teamers, and cybersecurity professionals.
Vite · Portfolio