"Spacetime tells matter how to move; matter tells spacetime how to curve."
— John Archibald Wheeler
A comprehensive, beautifully designed interactive web portal for exploring frontier physics — from Riemann's 1854 lecture on the foundations of geometry, through Einstein's general relativity and the Ricci tensor, to quantum gravity, black holes, dark energy, and the latest DESI results challenging the cosmological constant.
Built as a zero-dependency, static web application using vanilla HTML, CSS, and JavaScript with a premium glassmorphism dark-mode design system.
The landing page provides curated entry points into three major domains: Riemannian Geometry & Curved Spacetime, Quantum Gravity & the Edge of Knowledge, and Black Holes, Dark Energy & Cosmic Frontiers. Each card links directly into the deep-dive Digital Library.
Three full-length, interactive "books" with multiple chapters each, rendered in a modal reader:
- The Geometry of Curved Spacetime — From Euclid's broken rules through Riemann's 1854 revolution to the Ricci tensor and Einstein's field equations.
- Quantum Gravity & the Edge of Knowledge — The incompatibility problem, string theory, loop quantum gravity, and the holographic principle.
- Black Holes, Dark Energy & Cosmic Frontiers — Schwarzschild/Kerr solutions, Hawking radiation, dark matter evidence, and the accelerating universe.
An interactive Canvas-based visualization demonstrating how curvature affects geometry:
- Switch between flat (Euclidean), sphere (positive curvature), and saddle (negative curvature) surfaces.
- Adjust curvature intensity with a slider and observe real-time effects on:
- Triangle angle sums (= 180° / > 180° / < 180°)
- Geodesic behavior (parallel / converging / diverging)
- Circle circumferences (exact / shrinking / expanding)
Six foundational equations of modern physics with click-to-expand symbol annotations:
- Einstein Field Equations
- Geodesic Equation
- Schwarzschild Metric
- Friedmann Equation
- Hawking Temperature
- Bekenstein-Hawking Entropy
A visual timeline of 19 key milestones in humanity's understanding of spacetime and gravity — from Newton's Principia (1687) through LIGO gravitational waves (2015) to DESI dark energy results (2024).
16 curated quotes from the architects of modern physics (Einstein, Hawking, Feynman, Wheeler, Bohr, and more) displayed in a card grid with a "Random Axiom" generator widget.
Curated external resources across five categories:
- YouTube Channels & Lecture Series — PBS Space Time, 3Blue1Brown, Stanford lectures, Eigenchris
- Online Courses & MOOCs — MIT OCW, Perimeter Institute, Coursera, ICTP, Frederic Schuller
- Textbooks & References — Carroll, MTW, Schutz, Greene, Penrose, Rovelli, Wald
- Research & News Sources — Quanta Magazine, arXiv (gr-qc, hep-th), LIGO, EHT, DESI, Planck
- Interactive Tools & Simulations — GeoGebra, NASA SVS, Curved Spaces, Symbolab
Global search across all content: book chapters, timeline milestones, equations, axioms, and learning resources. Results are color-coded by type with direct navigation links.
| Layer | Technology | Purpose |
|---|---|---|
| Structure | HTML5 | Semantic layout with sidebar navigation, tab routing, and modal reader |
| Styling | Vanilla CSS | Glassmorphism design system, starfield background, responsive grid layouts |
| Logic | Vanilla JavaScript | Tab routing, search engine, modal controls, canvas visualization |
| Visualization | HTML5 Canvas API | Real-time curvature surface rendering with geodesics and triangle overlays |
| Fonts | Google Fonts | Outfit (headings), Inter (body), Fira Code (mono), Lora (serif quotes) |
| Dependencies | None | Zero external frameworks — fully static, deploys anywhere |
fphysics/
├── index.html # Main application shell — sidebar nav, tab screens, modal reader
├── style.css # Complete design system — glassmorphism, responsive, animations
├── app.js # Tab routing, search, rendering, mobile menu, modal controls
├── contentData.js # All content: books/chapters, milestones, axioms, equations, resources
├── curvatureViz.js # Interactive Canvas curvature visualizer (flat/sphere/saddle)
└── README.md # This file
No build step required. Open index.html in any modern browser:
# Clone and open
git clone https://github.com/nbajpai-code/fphysics.git
cd fphysics
open index.html # macOS
# or
xdg-open index.html # LinuxOr serve locally with any static file server:
# Python
python3 -m http.server 8080
# Node.js (npx)
npx serve .Then visit http://localhost:8080.
The portal is fully responsive:
- Desktop (> 1024px): Fixed sidebar navigation + full content area
- Tablet (≤ 1024px): Hamburger menu with animated slide-in sidebar + overlay
- Mobile (≤ 768px): Single-column stacked layouts, full-width search, stacked cards
| Shortcut | Action |
|---|---|
Escape |
Close the reader modal |
| Click outside modal | Close the reader modal |
The visual identity uses a curated dark-mode palette:
| Token | Value | Usage |
|---|---|---|
--color-violet |
#8b5cf6 |
Primary accent, Riemannian geometry theme |
--color-cyan |
#06b6d4 |
Secondary accent, quantum gravity theme |
--color-amber |
#f59e0b |
Tertiary accent, cosmic frontiers theme |
--color-emerald |
#10b981 |
Success states, observational milestones |
--color-rose |
#f43f5e |
Alert states, resource highlights |
--bg-main |
#020617 |
Deep space background |
--panel-bg |
rgba(15,23,42,0.7) |
Glassmorphism panel fill |
This project is released under the MIT License.
© 2026 Niraj Bajpai