"The people who make sure nothing falls down — and everything stands beautifully."
An interactive, open-source showcase of what structural engineers do — from the fundamentals of beams and trusses to cutting-edge phononic metamaterials research. Built with pure HTML/CSS/JS and Jupyter notebooks. No frameworks, no build tools, no barriers.
Every structure humans rely on — bridges, buildings, dams, stadiums — has a structural system designed by a structural engineer. The Eiffel Tower has stood for 130 years. The Burj Khalifa doesn't sway in the wind. The concert hall you sit in doesn't collapse under the weight of the roof above you.
When structural engineers get it right, nobody notices. When someone gets it wrong, people die.
This showcase exists to make that invisible work visible.
| Chapter | Topic | What's interactive |
|---|---|---|
| 01 — What We Do | The discipline, famous structures, human stakes | — |
| 02 — Loads & Forces | Dead, live, wind, seismic loads | Animated load diagrams |
| 03 — Beams & Trusses | Core structural elements | Beam calculator + truss analyzer |
| 04 — Materials | Steel, concrete, timber, CFRP | Properties comparison table |
| 05 — FEM & Computation | How modern SE works | Natural frequency calculator + animation |
| 06 — The Frontier: Metamaterials | Phononic crystals & bandgaps | Live dispersion diagram with sliders |
| Notebook | Topics covered |
|---|---|
| 01 — Beam Deflection | Euler-Bernoulli theory, deflection formulas, BMD plots, L/δ serviceability check |
| 02 — Truss Analysis | Direct stiffness method from scratch, force visualisation, parameter studies |
| 03 — Natural Frequencies | SDOF and 2DOF modal analysis with SciPy, mode shape animation, stiffness sweep |
| 04 — Phononic Bandgap | Diatomic chain dispersion, bandgap edges, mass ratio study, research context |
git clone https://github.com/StructuredSpace/struct-eng-showcase.git
cd struct-eng-showcase
# Open in any browser — no server needed for basic browsing
start index.html
# Or serve properly (enables ES6 module imports)
python -m http.server 8000
# then open http://localhost:8000For notebooks:
pip install -r notebooks/requirements.txt
jupyter notebook notebooks/Each calculator follows a consistent pattern — easy to fork and extend:
- Add a pure-function module to
js/calculators/your-calc.jswith named exports - Import and wire up in the relevant page with
<script type="module"> - Render results to a
<canvas>element using the Canvas API
See js/calculators/beam.js as the reference implementation.
The metamaterials chapter (page 06) and notebook 04 are based on research conducted for a Master's thesis in structural engineering at TU Dortmund, focused on phononic metamaterials for vibration and acoustic isolation in structures. Computational models were developed in COMSOL Multiphysics. The diatomic chain model used in the interactive calculator reflects the same bandgap physics studied computationally in the thesis.
- Frontend: Vanilla HTML5, CSS custom properties, ES6 modules — no frameworks
- Calculators: Canvas API, pure JS math — no external libraries
- Notebooks: Python 3, NumPy, SciPy, Matplotlib
- Hosting: GitHub Pages (static, free, always-on)
- Notebooks: Binder (one-click, no install)
MIT — free to use, fork, and extend. If this helped you learn something, a ⭐ on GitHub is appreciated.