HTMLPortfolio

Demo-Portfolio-HTML — HTML Portfolio Template

By Frtsnts10

A developer portfolio template built with vanilla HTML, CSS, and JavaScript, featuring a Neo-Brutalist style and Bento Grid layout, with dark mode support and content maintained in data.js.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews

Desktop homepage1 / 2

Visit websiteOpens in a new tab

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-11View source

What stands out

A quick read of the recorded project description.

Bento Grid dashboard-style grid layout, adaptable to different screen sizes

Neo-Brutalist visual style: high-contrast borders, hard shadows, pill elements, and large typography

Zero dependencies, using only vanilla HTML, CSS, and JavaScript, with no build step required

Scroll fade-in-up animations via Intersection Observer, background marquee in pure CSS

Built-in dark/light theme toggle based on CSS custom properties and localStorage

All portfolio content is maintained in data.js and dynamically rendered to the page by scripts

Template Details

Demo-Portfolio-HTML is a static webpage template for showcasing developer portfolios. The repository uses HTML as its tech stack and does not depend on React, Tailwind, jQuery, or external font icon libraries. The page structure is provided by index.html with semantic markup and inline SVG, style.css defines Neo-Brutalist design variables, Bento Grid layout, and animations, mediaqueries.css handles responsive rules for mobile and tablet, script.js manages scroll reveal animations, dark mode toggling, and dynamic DOM rendering, and data.js serves as a global data source centrally storing personal profile, skills, and project content.

The template's visual features include high-contrast borders, hard shadows, pill-shaped elements, and large typography. The homepage organizes information in a dashboard-style grid and includes a floating navigation bar and dark/light theme toggle. For interaction, the Intersection Observer API is used to implement fade-in-up animations on scroll, and the background marquee effect is done purely with CSS.

Regarding usage limitations, this template is a static front-end page and does not include backend, database, or form submission logic; content updates require manual editing of data.js. The repository is under the MIT license, but the licensing of third-party assets such as demo images, fonts, and icons must be checked separately and cannot be determined solely by the code license.

HTMLPortfolio

Is it right for your project?

Use Cases

Developers building a personal portfolio page to showcase bio, skills, and project list
As a reference example for learning vanilla HTML, CSS, JavaScript layout and interaction
Personal projects that need to quickly deploy a static site to GitHub Pages, Netlify, or Vercel
Scenarios where you want to manage portfolio content with a single-file data source and avoid introducing front-end frameworks

Suitable For

Developers who want to publish a personal portfolio with zero dependencies and no build step
Independent developers and designers who prefer Neo-Brutalist or high-contrast visual styles
Personal site projects that require static hosting and do not involve backend logic
Users who want to centrally maintain page content through a single data.js file

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
After downloading or cloning the repository, simply double-click index.html to open it in a browser; no local server is required
2
Edit the portfolioData object in data.js to replace it with your own bio, skills, and project information
3
To adjust themes, layout, or animations, modify style.css, mediaqueries.css, and script.js respectively
4
For deployment, you can host directly on GitHub Pages, Netlify, or Vercel without a build step
5
Before use, please confirm the licensing of third-party assets such as demo images, fonts, and icons

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not imply that external services or third-party assets are free.

Must comply with when using

Free use, modification, commercial use, and distribution of this version's code are permitted.
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 judged solely by the code's MIT license.
External services such as domains, hosting, databases, payments, or AI may incur additional charges.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

https://github.com/Frtsnts10/Demo-Portfolio-HTML/blob/main/LICENSE https://github.com/Frtsnts10/Demo-Portfolio-HTML/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-11. 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 · 80 / 100
Technologies: HTML
Website type: Portfolio

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-11
Screenshot last checked: 2026-10-11

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: cca766679ae8a8102d011ace4ad4f69fba1cc6e432bcd116a32e434276219644

2026-10-11T14:21:12.174Z

Source file / repository

# Minimalist Dev Portfolio Template (Neo-Brutalist Edition)

A hyper-fast, zero-dependency minimalist developer portfolio template featuring a modern Neo-Brutalist Bento Grid layout, floating navbar, and dark mode. Built purely with Vanilla Web Tech (HTML, CSS, JS).

## 🚀 Features
- **Bento Grid Architecture**: Modern dashboard-style grid layout that seamlessly adapts to different screen sizes.
- **Neo-Brutalist Aesthetics**: High contrast borders, hard drop shadows, pill-shaped elements, and fluid giant typography.
- **Zero Dependencies**: Absolutely no React, no Tailwind, no jQuery, and no external font/icon libraries required.
- **Native Interactivity**: Smooth "Fade-Up" scroll reveals using the Intersection Observer API and a pure CSS marquee background.
- **Dark/Light Mode**: Built-in, high-contrast theming powered by native CSS Custom Properties and `localStorage`.
- **Easy Content Management**: Update your profile, skills, and projects by editing a single global `data.js` file.

## 🛠 Getting Started

1. **Clone or download** this repository.
2. **Open `index.html`**: Simply double-click the `index.html` file to open it in your browser. (No local server required!).
3. **Edit `data.js`**: Update the `portfolioData` object with your own information. The DOM will automatically render your changes into the Bento Grid.
4. **Deploy**: Host it for free on GitHub Pages, Netlify, or Vercel. No build step required!

## 📂 File Structure
- `index.html`: Semantic HTML structure and inline SVGs.
- `style.css`: Core styling, Neo-Brutalist design tokens, Bento Grid layout, and animations.
- `mediaqueries.css`: Responsive design rules for mobile and tablet views.
- `script.js`: Vanilla JS for scroll animations, dark mode logic, and dynamic DOM rendering.
- `data.js`: The central data store (loaded globally) for your portfolio content.

## 📄 License
This project is open-source and available under the [MIT License](LICENSE).

Report a correction

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

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

Grayscale

A dark single-page Bootstrap template from Start Bootstrap for photography, events and brand storytelling, with a large hero and clearly separated sections.

HTML · Corporate Website

startbootstrap-stylish-portfolio

A one-page Bootstrap portfolio theme from Start Bootstrap with multiple content sections and an off-canvas navigation menu. Basic use means editing HTML/CSS under dist and opening index.html; advanced use relies on npm with Pug and SCSS build scripts.

HTML · Portfolio