|
1 | | -<a href> https://cmlpolymath.github.io </a> |
| 1 | +# CML Polymath — GitHub Pages Landing Page |
| 2 | + |
| 3 | +This is the source for the `index.html` landing page hosted at [cmlpolymath.github.io](https://cmlpolymath.github.io). It serves as a stylized entry point directing visitors to the [Notebooks repository](https://github.com/cmlpolymath/Notebooks/tree/main). |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## File Structure |
| 8 | + |
| 9 | +``` |
| 10 | +/ |
| 11 | +├── index.html ← The entire page lives here (self-contained) |
| 12 | +└── README.md ← This file |
| 13 | +``` |
| 14 | + |
| 15 | +Everything — HTML, CSS, and JavaScript — is in a single `index.html` file. There are no build steps, no dependencies to install, and no frameworks. It just works. |
| 16 | + |
| 17 | +--- |
| 18 | + |
| 19 | +## Component Overview |
| 20 | + |
| 21 | +### 1. Falling Books Animation (`#rain-container` + `.book-drop`) |
| 22 | +A JavaScript `setInterval` loop spawns book emoji elements at random horizontal positions and lets them fall via a CSS `@keyframes fall` animation. They remove themselves after 11 seconds to avoid memory buildup. |
| 23 | + |
| 24 | +**To adjust:** Change the interval (`350`ms) to speed up or slow down the rain. Edit the `emojis` array to change which symbols fall. |
| 25 | + |
| 26 | +### 2. Page Card (`.card`) |
| 27 | +The main content container. It uses a parchment background (`#f5efe6`) and a layered `box-shadow` to create a raised, lit effect against the dark background. Animates in on page load via `@keyframes riseIn`. |
| 28 | + |
| 29 | +### 3. Header Band (`.card-header`) |
| 30 | +Dark ink background with a gold bottom border and a small gold chevron accent beneath it. Contains: |
| 31 | +- **Eyebrow text** — the small uppercase tagline |
| 32 | +- **Title** — in Playfair Display (loaded from Google Fonts) |
| 33 | +- **Subtitle** — italic descriptor line |
| 34 | +- **CTA Button** (`.cta-btn`) — the primary GitHub link. This is the most important navigational element on the page. |
| 35 | + |
| 36 | +### 4. Body Content (`.card-body`) |
| 37 | +Parchment-colored section with faint horizontal ruled lines (mimicking notebook paper) applied via a `repeating-linear-gradient` on a `::before` pseudo-element. |
| 38 | + |
| 39 | +Contains the intro paragraph, a decorative gold divider, and the four section cards. |
| 40 | + |
| 41 | +### 5. Section Cards (`.sections-grid` + `.section-item`) |
| 42 | +A 2×2 CSS Grid of cards, each describing one structural component of the notebooks (Book Info, Key Takeaways, Notes, Discussion). They have a subtle left gold border and a lift effect on hover. |
| 43 | + |
| 44 | +### 6. Card Footer (`.card-footer`) |
| 45 | +A muted aged-parchment strip at the bottom linking to the GitHub profile. |
| 46 | + |
| 47 | +--- |
| 48 | + |
| 49 | +## How to Update Content |
| 50 | + |
| 51 | +### Change the tagline or description |
| 52 | +Open `index.html` and find the `.card-body` section. The intro paragraph and footer note are plain HTML — just edit the text directly. |
| 53 | + |
| 54 | +### Update the repository link |
| 55 | +The CTA button and footer anchor both point to GitHub. Search for `github.com/cmlpolymath` and update any URLs as needed. |
| 56 | + |
| 57 | +### Add or remove section cards |
| 58 | +Find the `<div class="sections-grid">` block. Each card follows this pattern — copy, paste, and edit: |
| 59 | + |
| 60 | +```html |
| 61 | +<div class="section-item"> |
| 62 | + <strong>🔍 New Section</strong> |
| 63 | + <span>A brief description of what this section contains</span> |
| 64 | +</div> |
| 65 | +``` |
| 66 | + |
| 67 | +If you add a 5th card, you may want to change the grid to a single column for balance — update `.sections-grid` in the CSS: `grid-template-columns: 1fr;` |
| 68 | + |
| 69 | +### Change colors |
| 70 | +All colors are defined as CSS variables at the top of the `<style>` block: |
| 71 | + |
| 72 | +```css |
| 73 | +:root { |
| 74 | + --ink: #1a1410; /* Dark background */ |
| 75 | + --parchment: #f5efe6; /* Card background */ |
| 76 | + --gold: #c9a84c; /* Accents, borders, button */ |
| 77 | + --rust: #8b3a2a; /* Bold text highlights */ |
| 78 | + --forest: #2d4a2d; /* Section label color */ |
| 79 | + --muted: #7a6a5a; /* Subdued text */ |
| 80 | +} |
| 81 | +``` |
| 82 | + |
| 83 | +Edit these and every element using them will update automatically. |
| 84 | + |
| 85 | +### Change fonts |
| 86 | +Fonts are loaded from Google Fonts in the `<head>`. The two in use are: |
| 87 | +- **Playfair Display** — headings and section titles |
| 88 | +- **Crimson Pro** — body text, buttons, labels |
| 89 | + |
| 90 | +To swap them, replace the Google Fonts `<link>` href and update the `font-family` references in the CSS. |
| 91 | + |
| 92 | +--- |
| 93 | + |
| 94 | +## Deployment |
| 95 | + |
| 96 | +Any commit to the branch configured under *Settings → Pages* will automatically redeploy the page. There's no build process — GitHub serves `index.html` directly. |
0 commit comments