How to Use This Site as a Template
I published this site as a template so anyone can use it as a starting point for their own portfolio. It's built with plain HTML, CSS, and JavaScript — no frameworks, no build tools, no dependencies. It deploys for free on GitHub Pages.
The template is on GitHub. Click "Use this template" to create your own copy, or fork it and follow along.
What you get
Four pages — Home, Resume, Projects, and Notes — all fully styled and responsive. The home page has a quote carousel, email obfuscation, and a parallax effect. The resume page uses a two-column editorial layout with a sticky sidebar for education, skills, and activities. The projects page uses a numbered list layout. The notes section has a grid with a featured card and square cards, plus an article template for individual posts.
Dark mode is included out of the box. Everything comes with placeholder content so you can see the structure immediately and swap in your own text.
Getting started
Go to the template repo and click the green "Use this template" button. Name your new repo yourusername.github.io and it will automatically deploy to GitHub Pages.
Clone it to your machine, open the files in any text editor, and start replacing the placeholder content with your own.
File structure
├── index.html ← Home page (stays at root)
├── 404.html ← Error page
├── resume/
│ └── index.html ← yourusername.github.io/resume
├── projects/
│ └── index.html ← yourusername.github.io/projects
├── notes/
│ ├── index.html ← yourusername.github.io/notes
│ ├── example-note/
│ │ └── index.html ← yourusername.github.io/notes/example-note
│ └── another-note/
│ └── index.html
└── assets/
├── css/
│ ├── main.css ← Shared styles (nav, footer, variables, dark mode)
│ ├── home.css ← Home page only
│ ├── resume.css ← Resume page only
│ ├── resume-print.css← Print styles for resume
│ ├── projects.css ← Projects page only
│ ├── notes.css ← Notes index only
│ ├── note-page.css ← Individual note layout
│ └── 404.css ← Error page only
├── js/
│ ├── main.js ← Shared (scroll, nav, animations)
│ ├── dark-mode.js ← Dark mode toggle
│ ├── home.js ← Email obfuscation, parallax
│ └── quotes.js ← Quote rotation
├── documents/ ← PDFs (resume, papers)
└── images/
├── logos/ ← Placeholder logo
└── personal/ ← Profile photo
Each page lives in its own folder as index.html. This is what gives you clean URLs like /resume instead of /resume.html — GitHub Pages serves a folder's index.html automatically. The home page is the one exception: index.html at the root already gets a clean URL, so it stays there.
Each page has its own CSS file. main.css handles everything shared — the nav bar, footer, colors, dark mode, and base typography. If you want to change the look of just one page, you only touch that page's CSS file.
Because pages are nested in folders, asset paths use ../ or ../../ prefixes depending on depth. A page at resume/index.html references assets as ../assets/css/main.css. A note at notes/example-note/index.html uses ../../assets/css/main.css. Nav links use absolute paths like /resume and /notes so they work correctly from any depth.
Customization
Colors
Open assets/css/main.css and find the :root block at the top. All the colors live here as CSS variables:
:root {
--wine: #7d1e3e;
--wine-light: #9d3a5a;
--wine-dark: #5a1529;
--cream: #faf8f5;
--charcoal: #2a2a2a;
--gray: #6a6a6a;
--light-gray: #e8e6e3;
}
Change --wine to whatever accent color you want and the whole site updates. The light and dark variants are used for hover states, so adjust those to match.
Fonts
The template uses two Google Fonts: Cormorant Garamond for headings and Work Sans for body text. To change them, pick your fonts on Google Fonts, replace the import URL in each HTML file's <head>, and update the font-family references in the CSS.
Content
Everything is in the HTML files — there's no CMS or markdown processing. To update the resume, open resume/index.html and edit the entries directly. Same for projects. Each entry follows a consistent structure with classes like .exp-entry, .exp-org, .exp-role, so adding new ones is just copying an existing block and changing the text.
Profile photo
Drop your photo in assets/images/personal/ and update the <img> src in index.html. The photo is displayed as a square crop, so a roughly square image works best.
Open assets/js/home.js and change the user and domain variables to your email address. It's split into two parts in JavaScript so bots can't scrape it from the HTML.
Dark mode
Dark mode is handled by assets/js/dark-mode.js and the dark mode styles at the bottom of main.css. The toggle button is included on every page — it saves the user's preference to localStorage so it persists across visits. You don't need to change anything for it to work.
Adding a note
To add a new note, create a new folder inside notes/ and add an index.html inside it. For example, notes/my-new-note/index.html will be live at /notes/my-new-note. Copy the example note file as your starting point — it already has the right asset paths (../../assets/) and nav links set up.
Then add a card for it in notes/index.html inside .notes-grid. The first card uses the featured class to span two columns. Regular cards are square. The grid looks best with a featured card plus three regular cards, or a featured card plus one regular card — anything that fills the row.
Deploying
If you named your repo yourusername.github.io, it will deploy automatically. If you used a different name, go to Settings → Pages, set the source to "Deploy from a branch," and select main. Your site will be live within a few minutes.
For a custom domain, add a CNAME file to the root of the repo with your domain name and configure DNS with your provider. GitHub has good documentation on this.
Things to know
There's no build step. You edit the files and push — that's the whole workflow. No npm, no bundlers, no compilers. You should be able to come back to this six months later and still understand how everything works.
To test locally, don't open the HTML files directly in your browser — clicking links won't work because clean URLs require a server. Instead, run python3 -m http.server 8000 from your repo root and open http://localhost:8000. Everything will work exactly as it does on GitHub Pages.
The JavaScript is minimal. main.js handles the scroll progress bar, back-to-top button, and intersection observer for fade-in animations. dark-mode.js handles the theme toggle and persistence. home.js does the email obfuscation and a subtle parallax effect on the hero section. quotes.js rotates the quotes on the home page.
If you use this template, I'd appreciate a link back in your footer or README, but it's not required. Good luck with your site.