Split Index is a free single-page HTML CSS portfolio template that divides the viewport into a left panel for Work, About, and Contact sections and a right panel that stays a full-height image canvas. It is published by TemplateMo and distributed as a single HTML file with no build step or server-side dependencies.
What is Split Index?
Split Index is a free one-page portfolio template from TemplateMo that uses a distinctive split-panel layout. The left column lets visitors switch between Work, About, and Contact views, while the right column remains a fixed image canvas that updates when project titles are hovered. Because all styles and scripts are embedded in one HTML file, the template runs on any static web host and can be edited in any text editor.
What makes Split Index stand out?
- Split-panel interaction — The layout divides the viewport into two halves; hovering project titles on the left swaps the right-side image preview with a fade-and-scale transition, all without page reloads.
- Typography system — The design pairs Playfair Display serif headings with DM Mono monospace for metadata and Instrument Sans for body text.
- Paper grain aesthetic — A warm paper background with subtle grain texture gives the page a non-digital, cinematic feel.
- Black-fill hover effects — Interactive elements use black-fill wipe transitions on hover instead of simple color changes.
- Contact form included — The Contact section contains a minimal underline-style form, ready for you to connect to any backend or mail service.
- Mobile tap support — Touch-friendly tap interactions replicate the hover previews on phones and tablets.
- Single-file dependency — Everything lives in one HTML file, so you can host it anywhere and customize it manually or with AI tools.
Who should use Split Index?
- Photographers who want an image-first portfolio where project previews are the main interaction.
- Architects and interior designers who need a gallery that shows large project images with minimal text.
- Visual artists and designers looking for a free, editable one-page template for a personal or commercial site.
What can you do with Split Index?
- Photographers: build a portfolio where each project title reveals a separate photo on the right side, creating a curated viewing experience.
- Architects: present project case studies in the left panel while keeping a hero image visible on the right at all times.
- Designers: adapt the single HTML file to a personal showcase, changing fonts and colors to match their identity.
FAQ
Is Split Index free to use?
Yes, the template is 100% free to download for anyone. You are allowed to download, edit, and use it for both commercial and non-commercial sites without paying a license fee.
What does Split Index include in the download?
The download is one HTML file containing all styles and scripts. It includes the Work, About, and Contact sections, the image preview logic, and the responsive layout.
Does Split Index use a CSS framework or JavaScript library?
No. The template is built with pure CSS transitions and minimal vanilla JavaScript. No frameworks, libraries, or build tools are required to run or edit it.
Yes, because the entire template is contained in a single HTML file, it is easy to edit manually or customize with AI tools like ChatGPT and Claude.
