Sources

Images

Top banner bg: Mandelbrot Set image created by Wolfgang Beyer, 2005.

Interesting numbers bg: "Sierpinski Tetrahedron Variation" created 2011.

Games interest: "A Fabled Fruit morning" published by user XZidan.

Sci-fi interest: modified from "Sci-fi Fantasy Mashup Tattoo" design by Larry Wentzel.

Code interest: Variations of this image found unsourced on multiple websites.

Math interest: "L shaped pool table" photo by user McNabFish, 2017.

Travel interest: "Warsaw old town square HDR Panorama Rynek" by Rich pick, 2009.

This site uses Bootstrap 4. The overall design was inspired by the "Succinct" W3layouts template but was coded almost entirely from scratch. There is some PHP not detailed here that handles code repetition like the header and footer on every page, and an .htaccess file helps make the urls nicer (no .php or .html endings needed).

Parallax

The effect of the background image remaining still while the page is scrolled (or the image scrolling at a different rate) is called parallax. The CSS property background-attachment: fixed; is the most imporant ingredient, but what follows is the CSS and HTML used for the effect on this site.

HTML
<div class="parallax mandelbrot banner">
    ...
</div>
...
<div class="parallax sierpinski">
    ...
</div>

CSS
.parallax {
    /* NOTE: Set background-image separately. */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    margin: 2em 0;
    padding-top: 2em;
    padding-bottom: 2em;
}
.mandelbrot {
    background-image: url("../images/bg-mandelbrot.jpg");
    color: white;
}
...

/* Turn off parallax scrolling for all tablets and phones. */
@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
}

Navbar

The navigation bar at the top is based on a common bootstrap example.

L^aT_eX (Math)

Math papers nowadays are almost all formatted using LaTeX (based on Donald Knuth's program TeX). For example, Solve $y^2 = 3 \alpha_0 x$ for $x$ becomes formatted as "Solve y² = 3α₀x for x."

Typically people typeset entire documents with LaTeX, creating PDFs. Since this is a website, not a pdf, MathJax is used to process LaTeX code.

HTML – head
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

HTML – body
Did Gauss know $\sum_{k=1}^{100} k = 5050$ as a baby?

Result: Did Gauss know $\sum_{k=1}^{100} k = 5050$ as a baby?

Counters

The auto-counting of "interesting numbers" on the homepage was done with JQuery's Countup.js.

HTML – head
<script src='js/jquery-3.4.1.min.js'></script>
<script src='js/jquery.waypoints.min.js'></script>
<script src='js/jquery.countup.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
         $('.counter').countUp();
    });
</script>

HTML – body
<div id="numbers">
    <div class="interesting-number">
        <p class="counter">7,140</p>
        <p>...</p>
    </div>
    <div class="interesting-number">
        <p class="counter">945</p>
        <p>...</p>
    </div>
</div>