Hand-written HTML, CSS, and vanilla JavaScript with zero dependencies and no build step
HTMLPortfolioCorporate Website
Portfolio-Template-25 — HTML Portfolio Template
By Muhammad112233-creator
A single-page cinematic portfolio template for real-estate visualization studios, built with hand-written HTML, CSS, and vanilla JavaScript. No build step; deploy directly to GitHub Pages.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-12View source
What stands out
A quick read of the recorded project description.
Includes preloader animation, full-screen hero, draggable horizontal film reel, and render comparison slider
Sticky stacked project cards, client marquee, accordion FAQ, and project inquiry form
Cinematic details such as custom cursor, magnetic buttons, and site-wide film grain
Provides prefers-reduced-motion fallback, skip links, and ARIA labels
Self-hosted Inter variable font with no external requests
Template Details
Meridian Studio is a single-page portfolio template positioned as a showcase site for a real-estate visualization studio. The page uses a dark editorial typography style, paired with a custom cursor and a site-wide film grain overlay, for an overall cinematic feel.
The template includes a preloader animation, full-screen hero, draggable horizontal film reel, render-to-final comparison slider, sticky stacked project cards, client marquee, accordion FAQ, and a project inquiry form. All interactions are implemented in hand-written vanilla JavaScript, with no framework or bundler dependencies; open index.html and it runs.
The code structure is clear: styles are centralized in assets/css/style.css, interactions in assets/js/main.js, and images and fonts are placed under the assets directory, making it easy to replace content by filename. The template includes a privacy notice page and favicon, and the repository uses the MIT license.
Note: the form is currently a local demo and is not connected to a real submission endpoint; licenses for third-party assets such as demo images and fonts must be verified separately and cannot be determined solely from the code's MIT license.
HTMLPortfolioCorporate Website
Is it right for your project?
Use Cases
- Real-estate visualization studios showcasing renders and film work
- Architecture or spatial design teams creating a single-page portfolio
- Creative agency websites needing cinematic visuals and drag interactions
- As a reference template for learning hand-written HTML/CSS/JS interaction implementations
Suitable For
- Real-estate visualization and architectural rendering studios
- Developers who want zero dependencies and direct static-site deployment
- Designers who need a single-page portfolio and care about motion details
- Developers looking to reference vanilla JS implementations of drag, comparison sliders, and sticky cards
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
For local running, use python3 -m http.server 8080, npx serve ., or VS Code Live Server
- 2
When replacing images under assets/img, keep the original filenames and dimensions to avoid layout changes
- 3
To change the brand name, contact details, and form service options, search for the corresponding text in index.html
- 4
Form submission is currently a local demo; to receive real submissions, connect a real endpoint in the contact form module in assets/js/main.js
- 5
Licenses for third-party assets such as demo images and fonts must be verified separately
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize, and distribute this version's code for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be determined solely from the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
- The contact form is currently only a local demo and is not connected to a real submission endpoint; to actually receive user submissions, you must configure and connect a real form service in the contact form module in assets/js/main.js.
- The template includes a sample contact email and WhatsApp number; before production use, replace them with your own contact details in index.html, otherwise visitors will contact the sample account.
- Demo images and posters are located in assets/img/; when replacing them, keep the same filenames and dimensions; licenses for these assets must be verified separately and cannot be determined solely from the code's MIT license.
- The template self-hosts the Inter variable font, and the font files are distributed with the repository; before use, separately confirm whether the font's licensing terms apply to your publishing scenario.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Form endpoint | `assets/js/main.js` → `contact form` module (currently a local demo)
Original README
Contact e-mail / WhatsApp | search `[email protected]` and `923000000000` in `index.html`
Original README
Photos / posters | `assets/img/` — keep the same filenames & you change nothing else
Original README
https://github.com/Muhammad112233-creator/Portfolio-Template-25/blob/main/LICENSEhttps://github.com/Muhammad112233-creator/Portfolio-Template-25/blob/main/README.mdFonts Inter (variable, latin) served locally from /assets/fonts
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-12. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 85 / 100
- Technologies
- HTML
- Website type
- Portfolio · Corporate Website
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-10-12
- Screenshot last checked
- 2026-10-12
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-13
Inspect the recorded source material
SHA-256: 98f411e5195f9bcea8e06446ef350b09ba1bbf2a8734d34d30e42fd7d4a550f1
2026-10-12T14:24:55.836Z
Source file / repository<div align="center">
<img src="assets/readme/header.svg" alt="MERIDIAN — Visual engineering for real estate launches" width="900">
<br>
<b>A cinematic one-page portfolio for a real-estate visualization studio — hand-rolled HTML, CSS & vanilla JS. No frameworks. No build step. Just craft.</b>
<br><br>
[](https://developer.mozilla.org/docs/Web/HTML)
[](https://developer.mozilla.org/docs/Web/CSS)
[](https://developer.mozilla.org/docs/Web/JavaScript)
[]()
[](LICENSE)
[](https://pages.github.com)
</div>
<img src="assets/readme/divider.svg" alt="" width="880">
## 🎬 What is this?
**Meridian Studio** is a complete, production-ready portfolio website in the language of award-winning studio sites: a preloader with rising volumetric smoke, a full-bleed cinematic hero, drag-to-scroll film rows, a render-to-film comparison slider, sticky stacking project cards, a client marquee, an accordion FAQ and a working project-brief form — all in a dark editorial type system with a custom cursor and film grain over everything.
Everything is written by hand and commented like a human wrote it — because a template should teach you while you use it.
> 🔴 **Live demo:** `https://Muhammad112233-creator.github.io/Portfolio-Template-25/`
<img src="assets/readme/divider.svg" alt="" width="880">
## ✨ Feature reel
| # | Feature | How it's built |
| --- | ------------------------ | ----------------------------------------------------------------------------------------------- |
| 🌫️ | **Animated preloader** | Canvas smoke particles + real asset preloading + skip for returning visitors (`sessionStorage`) |
| 🖼️ | **Full-bleed hero** | Ken-Burns plate, drifting smoke canvas, masked line-by-line title reveal |
| 🎞️ | **Horizontal film row** | Drag-to-scroll, scroll-snap, custom progress rail, hover play buttons |
| 🎚️ | **Render → film slider** | Pointer-drag clip-path comparison with three staged presets (`@property`) |
| 🃏 | **Sticky project stack** | Three full-viewport case cards that pin and settle as you scroll |
| 📱 | **Vertical 9:16 reel** | Draggable portrait cards, live counter, arrow navigation, chapter group |
| 🏢 | **Client marquee** | Infinite belt + pause/play toggle + edge fade mask |
| ❓ | **FAQ accordion** | `grid-template-rows` height animation, one-open-at-a-time |
| 📽️ | **Film modal** | Letterboxed "player" with Ken-Burns motion, running timecode and scrub bar |
| 🖱️ | **Custom cursor** | Lerp-following dot + ring, context tags (`Play`, `Drag`, `Slide`, `Visit`) |
| 🧲 | **Magnetic buttons** | Hero & form CTAs lean toward the pointer |
| 🌾 | **Film grain** | Animated SVG-noise overlay across the whole site |
| 📊 | **Scroll furniture** | Reading hairline, back-to-top with progress ring, section rail |
| ♿ | **Respectful** | `prefers-reduced-motion` fallbacks, skip links, focus styles, ARIA labels |
| 📈 | **Self-contained** | Self-hosted Inter variable font — zero external requests |
<img src="assets/readme/divider.svg" alt="" width="880">
## 🧱 Tech stack
```txt
HTML5 semantic, accessible markup — one page, plus a privacy note
CSS3 custom properties, @property, clip-path, sticky, masks, keyframes
JavaScript one file, no libraries: smoke canvas, cursor, players, observers
Fonts Inter (variable, latin) served locally from /assets/fonts
Media optimized JPG plates generated for this template
```
No `npm`, no bundler, no framework. Open `index.html` and it runs.
<img src="assets/readme/divider.svg" alt="" width="880">
## 🗂️ Project structure
```txt
meridian-studio/
├── index.html # the whole experience
├── privacy.html # simple privacy note page
├── favicon.svg # monogram favicon
├── LICENSE # MIT
├── .gitignore
├── README.md
└── assets/
├── css/
│ └── style.css # design system + every section + responsive
├── js/
│ └── main.js # all interactions, hand-written vanilla JS
├── fonts/
│ ├── fonts.css # @font-face declarations
│ ├── inter-var.woff2
│ └── inter-italic-var.woff2
├── img/ # all plates & posters (replace with your own)
│ ├── hero-architecture.jpg
│ ├── film-*.jpg project-*.jpg create-*.jpg
│ ├── site-*.jpg vertical-*.jpg compare-building.jpg
│ └── og-cover.jpg # social share image
└── readme/ # animated SVGs for this README only
├── header.svg
└── divider.svg
```
<img src="assets/readme/divider.svg" alt="" width="880">
## 🚀 Quick start
**1 — Run it locally** (pick one):
```bash
# Python (pre-installed on macOS/Linux)
python3 -m http.server 8080
# or Node
npx serve .
# or VS Code → right-click index.html → "Open with Live Server"
```
**2 — Open** `http://localhost:8080` and scroll.
**3 — Make it yours** 👇
<img src="assets/readme/divider.svg" alt="" width="880">
## 🎨 Make it yours
| You want to change… | Where it lives |
| ------------------------- | -------------------------------------------------------------------- |
| Brand name & tagline | `index.html` → header, hero, footer; `favicon.svg` |
| Colors, spacing, easing | `assets/css/style.css` → `:root` tokens at the top |
| Films, projects, copy | `index.html` → every section is clearly commented |
| Photos / posters | `assets/img/` — keep the same filenames & you change nothing else |
| Contact e-mail / WhatsApp | search `[email protected]` and `923000000000` in `index.html` |
| Services in the form | `index.html` → `<select id="fService">` |
| Client logos | `index.html` → `.marquee__belt` inline SVGs |
| Form endpoint | `assets/js/main.js` → `contact form` module (currently a local demo) |
💡 **Swap-in tip:** export your own visuals at the same dimensions (`1672×941` hero/films, `1536×1024` projects/sites, `960×1706` verticals) and reuse the filenames — the layout, ratios and preloads stay perfect.
<img src="assets/readme/divider.svg" alt="" width="880">
## ⚡ Performance & care notes
- One preloaded font + one preloaded hero plate; everything else lazy-loads (`loading="lazy"`)
- Canvas smoke pauses when the tab hides; grain and motion honor `prefers-reduced-motion`
- Returning visitors skip the intro (`sessionStorage`), screen readers get real semantics
- All animation is compositor-friendly (`transform` / `opacity` / `clip-path`)
## 📄 License
[MIT](LICENSE) — use it for your portfolio, your studio, your clients. Attribution appreciated but not required.
---
<div align="center">
<img src="assets/readme/divider.svg" alt="" width="880">
**MERIDIAN** — the unseen, <i>becomes light.</i><br>
<sub>Built frame by frame. Ships as plain files.</sub>
</div>
<div align="center">
## 🌟 Support the Project
If you find this template useful, please consider giving it a star! It helps others discover the repository and supports future development.
</div>
<img src="assets/readme/divider.svg" alt="" width="880">
Explore similar templates
Compare previews and descriptions within the same stack and category.
simplefolio
Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.
HTML · Portfolio
mazer
Mazer is a free and open-source Bootstrap 5 admin dashboard and landing page template that does not depend on jQuery. It provides prebuilt releases, source builds, and CDN inclusion, and includes dark mode, perfect-scrollbar, and ApexCharts examples.
HTML · Admin dashboard
Freelancer
A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.
HTML · Portfolio
Resume
A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.
HTML · Portfolio
Creative
A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.
HTML · Corporate Website
startbootstrap-agency
Agency is a one-page Bootstrap portfolio theme from Start Bootstrap, MIT licensed. It includes a responsive portfolio grid with modal details and a preconfigured SB Forms contact form that requires an API token.
HTML · Corporate Website