OptiFolio is a high-performance, modern portfolio template for developers, built with Eleventy (11ty). It features a sleek dark theme, mobile-first responsive design, and CSS-only animations for a delightful user experience.
If you like this project, please ⭐ star and fork the repository to support its development!
- Perfect Lighthouse scores (100/100)
- Sleek dark theme with purple accents
- Mobile-first responsive layout
- CSS-only animations and interactions
- Semantic HTML5 and accessible markup
- Minimal vanilla JS (only 2.6KB)
- Easy content customization via Nunjucks templates
Customization:
To enable, disable, or tweak features, modify the relevant partials undersrc/_includes/partials/. For example, to switch color accents or adjust performance features, editsrc/styles/style.cssor the animation code in HTML/CSS partials.
# 1. Clone repository
git clone https://github.com/pranav89624/OptiFolio.git
cd OptiFolio
# 2. Install dependencies
npm install
# 3. Start development server
npm run start
# 4. Build for production
npm run buildCustomization:
Use your own repository link in thegit clonestep.
If you wish to deploy to a different output directory, adjust theoutputin.eleventy.js.
You can add custom npm scripts in yourpackage.jsonfor additional workflows.
src/
├── _includes/
│ ├── layouts/
│ │ └── base.njk # Main template
│ └── partials/ # Component library
│ ├── header.njk # Navigation bar
│ ├── hero.njk # Introduction section
│ ├── skills.njk # Skills matrix
│ ├── projects.njk # Work showcase
│ ├── testimonials.njk # Client feedback
│ ├── cta.njk # Contact CTA
│ └── footer.njk # Footer content
├── styles/
│ └── style.css # Global stylesheet
├── index.njk # Homepage content
.eleventy.js # 11ty configuration
Customization:
- Add, remove, or rename sections by editing, duplicating, or deleting partials in
src/_includes/partials/.- To reorganize the site structure, modify
base.njkand update navigation inheader.njk.- Add global styles or new CSS files in
src/styles/.- Place your favicon or other static assets in the appropriate directory and update HTML references.
Edit the hero section with your name and tagline:
<!-- src/_includes/partials/hero.njk -->
<h1 class="hero-title">Your Name Here</h1>
<p class="hero-subtitle">Your professional tagline</p>Customization:
Change the text, add images, or insert extra markup for social links or call-to-action buttons as needed.
Tweak theme colors and fonts in src/styles/style.css:
:root {
--color-primary: #6366f1;
--color-dark: #0f172a;
--color-light: #f8fafc;
--font-base: 'Inter', sans-serif;
--font-mono: 'Space Mono', monospace;
}Customization:
Adjust the hex values for your brand, import your own fonts, or add new CSS variables for additional theming.
Add project cards in src/_includes/partials/projects.njk:
<article class="project-card">
<div class="project-image">
<img src="/your-project.webp" alt="Project" loading="lazy">
</div>
<div class="project-content">
<h3>Project Title</h3>
<p>Project description...</p>
<ul class="project-tech">
<li>React</li>
<li>Node.js</li>
</ul>
</div>
</article>Customization:
Duplicate the<article>block for more projects, update image sources, edit descriptions, and list relevant technologies.
You can also add new fields or links (e.g., demo, case study) as needed.
| Technique | Implementation Details |
|---|---|
| Critical CSS | Inlined in base template (base.njk) |
| Image Loading | Native lazy loading (loading="lazy") |
| Font Handling | Preload in <head> with crossorigin |
| JavaScript | Minimal, inlined in base.njk |
| Animations | Hardware-accelerated CSS transforms |
Customization:
- To add or remove optimizations, tweak the
<head>section in your layout, the CSS instyles/, or the minimal JS at the bottom ofbase.njk.- Replace or add font providers, change preload strategies, or use your own image CDN.
- Edit
src/_includes/partials/header.njkto update nav links. - To add a new section, create a new partial and add a link in this file.
- Update your skills in
skills.njkby editing the list items or adding/removing cards.
- Add your degrees and certifications by editing or duplicating the
<article>blocks in the education section partial.
- See above in "Add Projects" for details.
- Edit
testimonials.njkto add, update, or remove testimonials. - Each testimonial is a
<blockquote class="testimonial-card">block.
- Update your contact details or call-to-action text in
cta.njk. - Add direct email, social links, or forms as needed.
- Edit
footer.njkfor copyright, attribution, and additional links.
- Sign up and connect your GitHub account.
- Click New Site from Git and select your OptiFolio repository.
- Set build command:
npm run build - Set output directory:
_site - Click Deploy Site.
- Sign up and import your repo.
- Set build command:
npm run build - Set output directory:
_site - Click Deploy.
- Not recommended for 11ty-based dynamic sites, but possible with some workarounds.
- If you see a blank page, check the output directory and asset paths.
- Review the deploy logs for missing dependencies or build errors.
- Eleventy (11ty): A fast, modern static site generator.
- Nunjucks: A powerful templating engine for HTML.
- CSS: Custom styles with variables, responsive design, and animations.
- Vanilla JS: Minimal JavaScript for interactions.
Learn more about static site generators and CSS animations through 11ty resources and CSS Tricks.
OptiFolio is designed with accessibility in mind:
- Semantic HTML5 ensures screen readers can parse content effectively.
- ARIA roles are applied where necessary for better navigation.
- High contrast colors are used for readability.
- Maintain sufficient color contrast when changing theme colors.
- Test your site’s accessibility using tools like Lighthouse or axe.
- Ensure all interactive elements (e.g., buttons, links) are keyboard-navigable.
- 🛠 Built with Eleventy by Pranav
- 🎨 Designed for developers
- 📱 Fully responsive on all devices