Implemented in pure HTML/CSS/JavaScript, with no framework or build step required
HTMLPortfolio
portfolio (DaTaklaCatto) — HTML Portfolio Template
By DaTaklaCatto
A personal portfolio website template built with pure HTML/CSS/JavaScript, featuring theme switching, Lenis smooth scrolling, and GSAP scroll animations.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage
Desktop captureTop of page
Actual screenshot captured by the server browser.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-13View source
What stands out
A quick read of the recorded project description.
Dark-first light/dark theme toggle
Lenis smooth scrolling integrated with anchor links
GSAP scroll-triggered animations, text splitting, and first-screen entrance effects
Preloader sequence, mobile drawer navigation, magnetic hover, and one-click email copying
Includes Open Graph, Twitter Cards, and JSON-LD structured data
Template Details
This template is the source code for developer Nadid Wasique's personal portfolio website, written in native HTML5, CSS3, and ES6+ JavaScript, with no front-end framework or build tool dependencies. The page structure consists of index.html and style, script, and image assets in the assets directory, and can be run directly with any static server.
Functionally, the template provides a dark-first light/dark theme toggle, Lenis-based smooth scrolling (integrated with anchor links), GSAP scroll-triggered element reveals, text splitting animations, and first-screen entrance animations, as well as a preloader sequence, mobile drawer navigation, magnetic hover effects, and one-click email copying. For SEO, it includes Open Graph, Twitter Cards, and JSON-LD Person structured data.
Usage limitations: The template content and personal information (such as author name, social links, and demo domain) are bound together, so replacing them with your own content requires modifying the HTML and asset files item by item; the licenses for third-party assets such as demo images, fonts, and icons must be checked separately and cannot be determined solely from the code's MIT license.
HTMLPortfolio
Is it right for your project?
Use Cases
- Personal developers or designers building a portfolio showcase page
- As a reference project for learning native JavaScript animation and smooth scrolling implementations
- Quickly deploying a single-page personal website on a static hosting service
Suitable For
- Front-end developers who need a lightweight, framework-free portfolio template
- Users who want to directly modify HTML/CSS/JS to control page details
- Scenarios where a personal site is deployed using a static server or static hosting
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, you can start a local static service with VS Code Live Server or npx http-server .
- 2
No framework or build tool installation is required; directly edit index.html and the styles and scripts under assets
- 3
When replacing personal information, social links, and image assets, you must also modify the corresponding files in the HTML and assets directory
- 4
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis 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 mean that external services or third-party assets are free.
Must comply with when using
- You are allowed to freely use, modify, commercially use, and distribute the code of this version.
- 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 under 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 additional charges.
- The README states at the end that the copyright belongs to the author and all rights are reserved, which conflicts with the scope of authorization under the MIT license; when using it, note that this statement may be interpreted as an additional restriction on copying, modification, and redistribution.
- The template relies on Google Fonts for the Inter and JetBrains Mono fonts, which are external service resources; you must confirm the font licenses and availability yourself when deploying.
- The animations depend on GSAP and its ScrollTrigger, ScrollToPlugin, and CustomEase plugins, which may be subject to GSAP's own license; their usage conditions must be checked separately.
- The smooth scrolling feature depends on the third-party library Lenis, whose license is independent of the code's MIT license and must be confirmed separately.
- The icons use the third-party Lucide Icons icon set, whose license is independent of this project's code license and must be checked separately.
- The demo site and domain in the README belong to the author's personal deployment; the template content is bound to the author's personal information and social links, so replacing them with your own content requires modifying them item by item.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
© NADID WASIQUE 2026 - ALL RIGHTS RESERVED
Original README
- **Google Fonts** — _Inter_ & _JetBrains Mono_
Original README
- **[GSAP](https://gsap.com/)** — Animation library (ScrollTrigger, ScrollToPlugin, CustomEase)
Original README
- **[Lenis](https://lenis.darkroom.engineering/)** — Smooth scroll engine
Original README
- **[Lucide Icons](https://lucide.dev/)** — Clean vector icon set
Original README
https://github.com/DaTaklaCatto/portfolio/blob/main/LICENSEhttps://github.com/DaTaklaCatto/portfolio/blob/main/README.md- **Primary Domain:** [https://nadid.is-cool.dev](https://nadid.is-cool.dev)
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-13. 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-09-17
- Screenshot last checked
- 2026-10-13
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: 588ebbf9d1e76eb6736b591cba8be2ca98d0a4d81ddde4a14029418591a6695a
2026-10-13T09:24:11.530Z
Source file / repository<p align="center"> <img src="/assets/images/_metadata/favicons/favicon.svg" width="50" alt="Logo" /> </p> <h1 align="center">Personal portfolio</h1> <span align="center"> [](https://github.com/DaTaklaCatto/portfolio/forks) [](https://discord.gg/7wvU7J8gYY) [](https://www.instagram.com/nadid.ws_57/) [](https://www.facebook.com/nadid.wasique/) [](https://www.x.com/nadid_wasique/) [](https://www.linkedin.com/in/nadid-wasique-96a2582b1/) [](https://t.me/nadidwasique) </span> [](https://nadid.is-cool.dev) Hi! I'm Nadid, a full-stack developer building clean, efficient, and user-focused web applications. This portfolio showcases my latest projects, technical skills, and software development journey. Built with modern tools and deployed on Netlify, it reflects my commitment to clean code and seamless design. Explore my work to see how I translate ideas into functional digital experiences. Feel free to get in touch—I’m always open to new projects, collaborations, and opportunities. ## 🌐 Live Demo - **Primary Domain:** [https://nadid.is-cool.dev](https://nadid.is-cool.dev) - **Alternate Domain:** [https://www.nadid.is-cool.dev](https://www.nadid.is-cool.dev) ## ✨ Features - **Theme Switcher:** Sleek dark-first visual styling with full dynamic light/dark theme toggling. - **Lenis Smooth Scroll:** Hardware-accelerated smooth scrolling integrated seamlessly with anchor links. - **GSAP Animations:** Scroll-triggered element reveals, text split animations, and dynamic hero section entrances. - **Interactive UI:** Preloader sequence, mobile drawer navigation, magnetic hover effects, and one-click email copying. - **SEO & Social Optimization:** Complete Open Graph, Twitter Cards, and JSON-LD Person Structured Data for search engines. ## 🛠️ Built With - **HTML5 & CSS3** — Native CSS Custom Properties (Variables) & modern layout modules (Grid/Flexbox) - **JavaScript (ES6+)** — Pure asynchronous JS - **[Lenis](https://lenis.darkroom.engineering/)** — Smooth scroll engine - **[GSAP](https://gsap.com/)** — Animation library (ScrollTrigger, ScrollToPlugin, CustomEase) - **[Lucide Icons](https://lucide.dev/)** — Clean vector icon set - **Google Fonts** — _Inter_ & _JetBrains Mono_ ## 📂 Project Structure ```text . ├── index.html # Main HTML markup & SEO metadata ├── assets/ │ ├── images/ # Hero background & image assets │ │ ├── _metadata # Favicons and Images related to metadata │ ├── scripts/ │ │ └── main.js # Core JS engine (GSAP, Lenis, Clock, Theme) │ └── style/ │ └── style.css # Design tokens, reset, & component styles ├── LICENSE # Project licensing └── README.md # Project documentation ``` ## 🚀 Getting Started Local Development No heavy framework or build tools are required. You can serve the site locally using any static server: ### 1. Clone the repository: ```code git clone [https://github.com/DaTaklaCatto/portfolio.git](https://github.com/DaTaklaCatto/portfolio.git) cd portfolio ``` ### 2. Serve locally: - Using Live Server extension in VS Code, or: - Using Node.js http-server: ```code npx http-server . ``` - Open http://localhost:8080 in your browser. ## 📄 License Distributed under the MIT License. See [LICENSE](https://github.com/DaTaklaCatto/portfolio/blob/main/LICENSE) for more information. --- © NADID WASIQUE 2026 - ALL RIGHTS RESERVED
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