← Back to all products
$19
Portfolio Template
Professional portfolio website template with responsive design, dark mode, and smooth animations.
JavaScriptMarkdownJSON
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 7 files
portfolio-template/
├── LICENSE
├── README.md
├── assets/
│ └── README.md
├── index.html
├── script.js
└── style.css
📖 Documentation Preview README excerpt
Portfolio Template
A clean, professional portfolio website template for developers, designers, and freelancers. Showcase your projects, skills, and testimonials with a modern, responsive layout.
Price
$19 -- one-time purchase, lifetime updates.
Features
- Fully responsive -- Mobile-first design with tablet and desktop breakpoints
- Dark/Light mode -- Built-in theme toggle, persists to localStorage
- No dependencies -- Pure HTML, CSS, and vanilla JavaScript
- Under 400KB -- Lightweight and fast-loading
- Scroll animations -- Reveal-on-scroll using Intersection Observer
- SEO ready -- Semantic HTML5, meta tags, Open Graph tags
- Accessible -- ARIA labels, keyboard navigation, proper contrast ratios
- CSS custom properties -- Easy color, font, and spacing customization
Sections
- Hero with name, title, and call-to-action
- Project grid with hover effects
- Skills and technologies
- Testimonials carousel
- Contact form
- Footer with social links
What's Included
portfolio-template/
├── index.html # Semantic HTML5 with all sections
├── style.css # Mobile-first styles, light + dark themes
├── script.js # Theme toggle, scroll reveal, carousel, form validation
├── manifest.json # Product metadata and file listing
├── assets/
│ └── README.md # Instructions for adding your own images
├── README.md # This file
└── LICENSE # MIT License
Installation
1. Download and unzip the template
2. Open index.html in your browser
3. Edit the HTML content with your information
4. Deploy to any static hosting provider
# Open locally
open index.html
# Or use a local server
python -m http.server 8000
Customization
Colors
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
script.js
/**
* Portfolio Template — script.js
* ==============================
* Vanilla JavaScript — zero dependencies.
*
* This file implements four shared mechanics used across every
* Starter Templates Pro template:
*
* 1. THEME TOGGLE — light / dark, persisted to localStorage
* 2. SCROLL REVEAL — IntersectionObserver on [data-reveal] elements
* 3. MOBILE NAV — hamburger toggle with aria-expanded + Escape key
* 4. SMOOTH SCROLL — in-page anchor links with reduced-motion respect
*
* Plus template-specific features:
* 5. TESTIMONIALS CAROUSEL — prev / next / dots, keyboard accessible
* 6. CONTACT FORM VALIDATION — client-side with inline error messages
*/
(function () {
'use strict';
/* ===========================================
1. THEME TOGGLE
=========================================== */
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;
/** Determine initial theme: localStorage > OS preference > light */
function getInitialTheme() {
const stored = localStorage.getItem('theme');
if (stored === 'dark' || stored === 'light') return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
/** Apply theme to <html> and update toggle button ARIA */
function applyTheme(theme) {
root.setAttribute('data-theme', theme);
if (themeToggle) {
const isDark = theme === 'dark';
themeToggle.setAttribute('aria-pressed', String(isDark));
themeToggle.setAttribute(
'aria-label',
isDark ? 'Switch to light theme' : 'Switch to dark theme'
);
}
}
// Apply on load
# ... 247 more lines ...