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 supports company logos, sub-entries, and a skills section. The projects page uses the same card layout. The notes section has a grid with featured and square cards, plus an article template for individual posts.
Everything comes with placeholder content so you can see the structure immediately and just 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
Here's how the template is organized:
├── index.html ← Home page (stays at root)
├── 404.html ← Error page
├── resume/
│ └── index.html ← cynthianiaz.github.io/resume
├── projects/
│ └── index.html ← cynthianiaz.github.io/projects
├── notes/
│ ├── index.html ← cynthianiaz.github.io/notes
│ ├── example-note/
│ │ └── index.html ← cynthianiaz.github.io/notes/example-note
│ └── another-note/
│ └── index.html
└── assets/
├── css/
│ ├── main.css ← Shared styles (nav, footer, variables)
│ ├── home.css ← Home page only
│ ├── resume.css ← Resume page only
│ ├── 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)
│ ├── home.js ← Email obfuscation, parallax
│ └── quotes.js ← Quote rotation
├── documents/ ← PDFs (resume, papers)
└── images/
├── logos/ ← Company logos
└── 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, and base typography. If you want to change the look of just the resume page, you only touch resume.css.
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 and subtle backgrounds, 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 .entry, .entry-title, .entry-subtitle, so adding new ones is just copying an existing block and changing the text.
Profile photo
The template comes with a placeholder image. Drop your own photo in assets/images/personal/ and update the <img> src in index.html.
Company logos
The resume page shows logos next to each experience entry. Replace the placeholder SVGs in assets/images/logos/ with your own. Transparent PNGs work best, and they'll be scaled to fit a 56×56px container.
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.
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 an existing 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 on notes/index.html. Each card is an <a> tag with class note-card inside the .notes-grid, with the href set to /notes/my-new-note. The first card can use the featured class to span two columns. Regular cards are square.
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 just open the HTML files directly in your browser — clicking links won't work because clean URLs require a server to resolve them. 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. home.js does the email obfuscation and a subtle parallax effect. 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.