Back to templates

Template details

aayushagrawal.codes

A minimal, typographic personal portfolio website built with pure HTML, CSS and JavaScript with light and dark themes.

About this template

aayushagrawal.codes is a minimalist, typographic personal portfolio website template built with pure HTML, CSS and JavaScript, requiring no build step and deployable to any static host. It was created by Aayush Agrawal, an AIML student at BMS College of Engineering, Bangalore.

What is aayushagrawal.codes?

aayushagrawal.codes is a static personal portfolio template that ships as a single folder of plain HTML, CSS and JavaScript files with no build step. It takes your content in hand-edited HTML and produces a deployed portfolio site that renders on any static host, and it is authored by Aayush Agrawal.

Key Features

  • Pure HTML/CSS/JS stack — no framework, bundler, or dependency install; the folder is dropped onto a host as-is.
  • Two pages included — index.html (hero, work, tools, about, contact) and shortcuts.html (iOS Shortcuts, Attendance Calculator).
  • Typographic design system — Geist for UI and body text, Geist Mono for labels, Instrument Serif italic for accent phrases, with an orange accent and hairline borders.
  • System-aware theming — follows the OS setting plus a manual toggle that is remembered between visits.
  • CSS custom property tokens — colours, spacing and radii defined at the top of style.css for quick restyling.
  • Accessibility built in — visible focus rings, reduced-motion support, and AA text contrast in both light and dark themes.
  • Scroll reveal and nav behaviour — handled by assets/js/main.js, which also drives the theme toggle.
  • Static-host deploy — documented for GitHub Pages, Vercel, Netlify drag-and-drop, and Cloudflare Pages; the repo also carries a resume PDF under assets/docs/.

Who is it for?

  • Developers and students building a personal site: edit the HTML sections directly to publish a portfolio with a resume PDF link and contact details.
  • Designers wanting a typographic starting point: adjust the CSS custom property tokens to re-skin colours, spacing and radii without touching markup.
  • Anyone without a build pipeline: deploy by dragging the folder into Netlify or Vercel, or pushing to GitHub Pages.

What can you do with aayushagrawal.codes?

  • Job seekers: publish a one-page portfolio listing work, tools and an about section, with a resume PDF served from the assets folder.
  • Indie developers: fork the repo as a starting point and replace the content blocks while keeping the theme toggle and scroll reveal scripts.
  • Template collectors: use it as a reference for a no-build, accessible HTML/CSS portfolio structure.

How does aayushagrawal.codes work?

Download or clone the aayushagrawal.codes/ folder, edit the HTML in index.html and shortcuts.html, adjust design tokens in assets/css/style.css, then upload the folder to any static host. No compilation step runs between editing and deployment.

Screenshot of aayushagrawal.codes