A lightweight, static template for an academic program microsite with pages for Welcome, Paid Mentorships, Sessions/Proposals, and FAQ & Contact. Includes accessible UI patterns (hero/CTAs, proposal cards, accordions, badges), responsive spacing, and print-friendly styles.
Reference site (real program): https://www.math.lsu.edu/mathcircle
This repo is a neutral demo for portfolio/teaching purposes and is not affiliated with LSU.
- Pure HTML/CSS + a touch of vanilla JS (no build step).
- Accessible UI patterns: hero/CTAs, proposal cards, accordions, badges.
- Responsive spacing and print-friendly styles.
- Easy to theme via a small set of CSS variables.
index.html— Welcome (hero, CTAs, “Past Sessions,” “Public Archives”).mentor.html— Paid Mentorships (compensation, eligibility, proposal guidelines + sample).2026.html— Upcoming session “In planning” callout with KPIs.2025.html— Session page with demo-safe research proposals (accordion + “proposal box”).contact.html— FAQ & Contact with client-side search + quick filter chips.
- Proposal box card (definition-list layout with print styles)
- Hero/CTA pattern and stats chips
- Accordion sections and badge chips
- FAQ search with quick-filter chips
- Responsive layout and print-friendly styles
- Initial public demo of the Academic Program Site template.
- Added GitHub Pages quick-start notes and subpath-safe linking tips.
- Clarified non-affiliation notice and education/demo focus.
No tooling required—just open the files.
# Clone
git clone https://github.com/isaacbmichael/academic-program-site-template.git
cd academic-program-site-template
# Optional: serve locally
python -m http.server 8080
# Visit http://localhost:8080index.html— Welcome / overview / CTAs / Past Sessions / Archives.mentor.html— Paid Mentorships page.2026.html— Upcoming session “In planning” page.2025.html— Session page with demo-safe proposals.contact.html— FAQ & Contact with client-side search.LICENSE— MIT license.README.md— This file.
You can host this template on GitHub Pages:
- Go to Settings → Pages.
- Under Build and deployment, set Source to Deploy from a branch.
- Choose branch main and / (root), then Save.
Your site will publish at a URL like:
https://isaacbmichael.github.io/academic-program-site-template/
If your Pages URL ends with a subpath, update any root-relative links in your HTML
(e.g.,href="2026.html"is safe; avoidhref="/mathcircle/...").
Most changes are quick edits in each page’s <style> block.
- Brand & colors: tweak CSS variables in
:root(--accent,--accent-ink,--muted,--card,--ring, etc.). - Left menu: update the nav list in each file to show your desired pages.
- Copy/content: replace text, badges, and links with your program details.
- Proposal cards: re-use the “proposal box” definition-list pattern.
- Accessibility: headings are structured; buttons have focus outlines; chips use ARIA states.
- CTA: Call to Action (primary buttons/links that drive user flow).
- KPI: Key Performance Indicator (e.g., # proposals, acceptance rate).
- ARIA: Accessible Rich Internet Applications attributes for assistive tech.
This project is for educational and demonstration purposes only. It does not constitute financial advice. Past performance is not indicative of future results.
Additionally, this repository is a neutral demo for portfolio/teaching purposes. It is not affiliated with LSU or any of its programs.
Released under the MIT License. See LICENSE.