Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
Portfolio One-Pager Template
Present your work professionally with this clean, minimal portfolio template. Smooth scroll navigation, subtle animations, and a timeless design that puts your work front and center.
Feature Highlights
- Animated Skill BarsProgress bars per skill animate on scroll via Intersection Observer. Width and label fully editable.
- Project Gallery4-card grid with screenshot, tags, live demo link, and GitHub source button. Hover overlay reveal.
- Work TimelineAlternating left/right timeline with company, role, dates, and bullet responsibilities.
- Contact FormName / email / message with client-side validation. Works with Formspree out of the box.
- Typewriter HeroName cycles through roles with a blinking cursor. Instant first impression.
- Smooth Scroll NavFixed header with active-section highlighting based on IntersectionObserver.
- Dark / Light ModeSystem-preference-aware toggle, persisted in localStorage.
- Testimonials3 recommendation cards with avatar, name, company, and quote.
What’s Included
- index.html — full one-page portfolio
- style.css — responsive layout + dark/light theme
- portfolio.js — typewriter, skill bars, dark mode, smooth scroll
- /assets/ — demo project screenshots, avatar photo
- README.md — how to swap content, add projects, connect form
Tech Stack
- Pure HTML5 + CSS3
- Vanilla JS
- Google Fonts — Inter + Space Grotesk
- CSS Grid + Flexbox
- Intersection Observer
- Formspree-ready
Perfect For
- Freelance developers building a personal site
- Designers showcasing UX/UI case studies
- Junior devs landing their first job
- Agencies creating staff profile pages
- Creatives needing a portfolio without WordPress
Frequently Asked Questions
Can I add more project cards?
＋
Yes. Each project card is a self-contained HTML block. Duplicate the card markup, swap in your image and text, and the CSS grid will auto-reflow to accommodate it.
Is the contact form functional?
＋
The form is fully styled and validated on the front end. To send real messages you need to connect it to a service like Formspree, Netlify Forms, or your own mail endpoint.
Can I change the color scheme?
＋
All colors are defined as CSS custom properties at the top of style.css. Change the handful of root variables and the entire template re-themes instantly.
Does it work with GitHub Pages?
＋
Yes — it’s a static site with no build step required. Upload the files, set the branch as your Pages source, and your portfolio is live in seconds.
Do I need a design tool to customize it?
＋
No. The layout is built with standard CSS Grid and Flexbox. Any text editor is enough — no Figma or Photoshop required for routine content updates.
Emma R. –
The case-study grid layout is stunning — clients were immediately impressed when I showed them the live preview. The smooth scroll animations added a premium feel without bloating the page. Exactly what a creative agency needs.
Carlos V. –
Purchased this for a rebrand project and the client loved it on first sight. The portfolio hover effects are silky and the typography scale is perfectly chosen for an agency brand. Would buy again.
Lily S. –
Great structure with clear service cards and a solid testimonials section. The contact form is well-styled and easy to wire up to any backend. Only minor issue was a slight CLS on the hero image — fixed with a quick aspect-ratio utility class.