Documentation of Broadsheet

1. Overview

Broadsheet is a static HTML, CSS, and JavaScript portfolio and blog template.

It requires no framework, no build step, and no dependencies.
It works natively on any static hosting platform.

2. What’s Included

Portfolio and blog are independent but share the same design system.

repo/
│   index.html          (Portfolio)
│   styles.css          (Portfolio styles)
│   main.js             (Shared theme logic)
│
├───assets/
│   └───fonts/
│       ├── eb-garamond.woff2
│       ├── ibm-plex-sans.woff2
│       ├── resume.docx (Editable template)
│       └── resume.pdf  (Sample export)
│
├───blog/
│   │   index.html      (Blog list page)
│   │   styles.css      (Blog styles)
│   │
│   └───entries/
│       └── sample-post.html
│
└───docs/
        index.html      (Documentation)

3. Setup

Option 1 — Use as a Template (Recommended)

Click the green "Use this template" button at the top of the GitHub repository. This creates a fresh copy in your own GitHub account, which is the fastest way to deploy using GitHub Pages.

Option 2 — Download Manually

If you prefer not to use Git, you can Download the ZIP, extract it, and edit the files directly. This is perfect if you plan to drag-and-drop your folder into a host like Netlify.

Run Locally

Use any static server to view your site locally:

npx serve .

or

python -m http.server

Note: Avoid opening files directly with file:// in the browser, as relative paths and local storage may not resolve correctly.

4. Customization

All visual configuration is controlled through CSS variables defined at the top of styles.css (and
/blog/styles.css).

Modify these variables to change colors, typography, and spacing:

:root {
  --bg: #FFFFFF;
  --text: #1A1C1E;
  --text-sec: #5F6368;
  --text-muted: #555;
  --accent: #f3007e;
  --border: rgba(0,0,0,0.08);

  --font-display: "EB Garamond", serif;
  --font-body: "IBM Plex Sans", sans-serif;

  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;

  --radius: 4px;
}

Dark mode overrides are handled below the root variables:

html[data-theme="dark"] {
  --bg: #121417;
  --text: #f5f5f5;
  --text-muted: #aaa;
  --border: rgba(255,255,255,0.1);
}

5. Using the Blog Skeleton

To create a new blog post:

1. Copy /blog/entries/sample-post.html
2. Rename the file (e.g., my-post.html)
3. Update the inner text for:
   • Date
   • Title
   • Author
   • Content
4. Add a link to the new post inside /blog/index.html

That’s it.

6. Navigation Structure

All paths are relative and designed for static hosting.

• index.html → Portfolio homepage
• /blog/index.html → Blog list
• /blog/entries/*.html → Individual posts
• /assets/ → Fonts and resume files

7. Deployment

GitHub Pages

1. Push your project to a GitHub repository.
2. Go to Repository Settings → Pages.
3. Select:
   • Branch: main
   • Folder: / (root)
4. Save. Your site will be live in a few minutes.

AWS S3

Follow the official AWS guide for static website hosting:

AWS S3 Static Website Hosting Guide

---