Crafted for Developers, Designers, Creators, Marketers, and Tech Professionals.
Explore Templates • What's Included • Milestone Roadmap • How to Support • Contributing
Important
Community Release Goal: 69 Stars (⭐)
When this repository reaches 69 Stars, the entire production source code — including all 10 Homepage templates in Dark & Light modes, 12+ inner pages, SCSS styles, and animation assets — will be unlocked and published publicly for everyone!
Progress to Full Source Code Drop:
[-----------------------------------------] 0 / 69 Stars ⭐
👉 Star this repository on GitHub to help accelerate the release!
Sagario is a free collection of 10 modern HTML5 personal portfolio templates, engineered for developers, designers, creators, marketers, and professionals who want a polished, high-converting personal website without building from scratch.
- Pure HTML5 & SCSS Power: Standalone, lightweight, and zero complex dependencies. Just open and customize.
- Zero Bloat & Blazing Fast: Optimized assets, clean semantic HTML5 markup, and lightweight 60fps animations.
- World-Class Aesthetics: Bespoke design systems with harmonious color grading, sleek typography, micro-interactions, and glassmorphism accents.
- Native Dark & Light Modes: Every single template features dedicated, handcrafted Dark and Light mode themes.
- Pixel-Perfect Responsiveness: Fully responsive across mobile screens, tablets, laptops, and ultra-wide displays.
Sagario provides 10 purpose-built templates, each tailored with distinct typography, layout grids, and interactive components:
| # | Profession | Design Highlights & Focus Areas | Key Components |
|---|---|---|---|
| 01 | 💻 Web Developer | Technical stack display, GitHub activity showcases, interactive code snippets, and live demo modals. | Tech Badges, Project Filter, Experience Timeline, Contact Form |
| 02 | 🎨 Graphic Designer | High-impact visual gallery with masonry layouts, case study presentations, and brand identity grids. | Masonry Grid, Lightbox Modal, Client Testimonials, Award Badges |
| 03 | 🎬 Video Editor | Cinematic media reels, video thumbnail popups, client showreels, and creative direction showcases. | Video Popup Player, Reel Slider, Client Logos, Service Packages |
| 04 | ⚡ Software Developer | Architecture breakdown, system design case studies, open-source repositories, and performance metrics. | Code Blocks, Skill Meters, System Architecture, Resume Download |
| 05 | 📄 CV / Resume | Minimalist executive curriculum vitae, chronological career milestones, academic history, and certifications. | Interactive Timeline, Skills Matrix, Certification Cards, PDF Export |
| 06 | ✍️ Content Writer | Editorial typography, publication showcase, thought leadership articles, and content marketing case studies. | Article Cards, Publication Logos, Reading Time, Newsletter Box |
| 07 | 📈 Digital Marketing | Growth case studies, ROAS & conversion metrics, campaign breakdowns, and interactive counter stats. | Odometer Stats, Metric Cards, Strategy Steps, Booking CTA |
| 08 | 🔍 SEO Specialist | Search visibility case studies, organic growth benchmarks, keyword audit breakdowns, and client reviews. | Growth Charts, Audit Badges, Client Marquee, SEO Packages |
| 09 | ✨ UI/UX Designer | End-to-end product design flows, user research highlights, interactive wireframe galleries, and Figma showcases. | Process Slider, Interactive Prototypes, Design System Highlights |
| 10 | 💼 IT Consultant | Strategic advisory presentation, enterprise solutions, digital transformation testimonials, and consultation booking. | Consulting Services, Schedule Call CTA, Client Trust Badges |
Note
All 10 templates include both Dark Mode and Light Mode variations (20 total homepage variants).
Upon unlocking at 69 Stars ⭐, this repository will contain the complete package:
sagario/
├── 📁 10 Unique Homepage Templates (Dark & Light)
│ ├── index-1-dark.html / index-1-light.html (Web Developer)
│ ├── index-2-dark.html / index-2-light.html (Graphic Designer)
│ ├── index-3-dark.html / index-3-light.html (Video Editor)
│ ├── index-4-dark.html / index-4-light.html (Software Developer)
│ ├── index-5-dark.html / index-5-light.html (CV / Resume)
│ ├── index-6-dark.html / index-6-light.html (Content Writer)
│ ├── index-7-dark.html / index-7-light.html (Digital Marketing)
│ ├── index-8-dark.html / index-8-light.html (SEO Specialist)
│ ├── index-9-dark.html / index-9-light.html (UI/UX Designer)
│ └── index-10-dark.html / index-10-light.html (IT Consultant)
├── 📁 12+ Reusable Inner Pages
│ ├── about.html / about-light.html
│ ├── services.html / services-light.html
│ ├── portfolio.html / portfolio-light.html
│ ├── blog.html / blog-light.html
│ ├── blog-details.html / blog-details-light.html
│ └── contact.html / contact-light.html
├── 📁 assets/
│ ├── css/ (Bootstrap 5, Animations, Swiper, Lightbox, Core Themes)
│ ├── js/ (GSAP, ScrollTrigger, Lenis, Swiper, Odometer, WOW.js)
│ ├── sass/ (Modular SCSS source code & utility mixins)
│ ├── img/ (Optimized webp/png graphics, icons, and hero avatars)
│ ├── fonts/ (Modern web typography and icon fonts)
│ └── mail/ (Working PHP AJAX contact form handler)
└── 📄 README.md, ROADMAP.md, CONTRIBUTING.md, LICENSE
| Technology | Purpose |
|---|---|
| HTML5 & CSS3 | Semantic layout structure and clean markup standards |
| SCSS (Sass) | Modular design tokens, theme variables, and utility mixins |
| Bootstrap 5 | Mobile-first grid, responsive breakpoints, and utilities |
| GSAP & ScrollTrigger | High-performance timeline animations and scroll-based motion |
| Lenis | Smooth momentum scrolling experience |
| Swiper.js | Touch-enabled sliders, client marquees, and portfolio carousels |
| Odometer.js | Animated statistics and milestone counters |
| Font Awesome Pro & Flaticon | Clean, scalable vector iconography |
| Milestone | Target | Description | Status |
|---|---|---|---|
| Phase 1 | Genesis | Public repository announcement & documentation release | ✅ Live |
| Phase 2 | 25 Stars ⭐ | High-resolution UI showcase & responsive mobile previews | ⏳ In Progress |
| Phase 3 | 50 Stars ⭐ | SCSS architecture overview, customization & setup guide | 🔒 Locked |
| Phase 4 | 69 STARS ⭐ | 🔓 FULL SOURCE CODE RELEASE (All 10 Templates + Full Assets) | 🚀 THE GOAL |
| Phase 5 | Post-Release ⭐ | Continuous enhancements, performance optimizations & updates | 🎯 Ongoing |
For the complete release plan, check out ROADMAP.md.
- ⭐️ Star this repository to unlock the complete source code for everyone.
- 📢 Share on Social Media: Post on Twitter/X, LinkedIn, Reddit, and developer Discords.
- 👁️ Watch the repository: Select Watch ➔ All Activity to get notified the second the codebase drops!
- Distributed under the MIT License. Free for personal and commercial portfolio projects.
- Read our Contributing Guidelines and Code of Conduct.
Crafted with ❤️ by Sagar Kewat