This is a static HTML/CSS website. It is intentionally simple: each page is a separate .html file, styling is in css/style.css, and there is only minimal JavaScript in js/main.js for the mobile menu and publication filters.
index.html- homepage with hero, core expertise, research themes, research highlights, featured MONKI block, and recent news.research.html- research overview organised around three application themes: Earth observation, Venus, and Earth-like exoplanets, with polarised radiative transfer as the methodological foundation.software.html- MONKI and numerical methods.publications.html- publication cards with filters, a short summary, and one figure placeholder per paper.news.html stories.html- news cards with one figure placeholder per news item.talks.html- selected talks and public lectures.cv.html- short web CV.contact.html- contact details and profile links.credits.html- image credits and source tracking for background images, theme images, news thumbnails, and publication figures.
- Put the image in
img/papers/, for example:
img/papers/monki.jpg
- In
publications.html, replace this block:
<div class="figure-placeholder">Add figure<br>img/papers/monki.jpg</div>with:
<img src="img/papers/monki.jpg" alt="Short description of the figure">- Edit the
<figcaption>below the image.
Use the same approach, but put images in img/news/.
Homepage research-highlight images belong in img/discoveries/, for example:
img/discoveries/eclipse-clouds.jpg
img/discoveries/monki.jpg
img/discoveries/ocean-exoplanets.jpg
In index.html, replace the matching placeholder block with an <img> tag and edit the alt text.
Theme images belong in img/themes/, for example:
img/themes/venus.jpg
Then replace the matching placeholder block in index.html or research.html with an <img> tag.
Duplicate an existing <article class="paper-card with-figure" ...> block in publications.html, edit the title, authors, summary, tags, links, and figure path.
The filter buttons use the data-tags attribute, for example:
<article class="paper-card with-figure" data-tags="earth methods">Available filters are currently: methods, earth, venus, and exoplanets.
This website now has a dedicated credits page: credits.html.
Use the following workflow whenever you add or replace an image:
- Put the image in the appropriate folder, for example
img/themes/,img/discoveries/,img/software/,img/papers/, orimg/news/. - Add or update the short figure caption near the image if it is a scientific figure.
- Add or update the full credit on
credits.html. - If the image comes from NASA, ESA, a journal, Wikimedia, or another external source, copy the exact credit line from the source page.
- For your own figures, a useful default is:
Figure by Victor J. H. Trees, adapted from Trees et al. (year).
The footer of each page links to credits.html. This keeps the website visually clean while still making the image sources transparent.
The solar-eclipse clouds research-highlight card contains buttons for major media and institutional coverage, including CNN, The New York Times, NRC, BBC Sky at Night, KNMI, TU Delft, AGU Eos, USA Today, and Forbes. Edit these directly in index.html.
From this folder:
python3 -m http.server 8000Then open http://localhost:8000 in a browser.
This version is prepared for a background image behind all panels.
- Put your chosen image here:
img/backgrounds/background.jpg
-
Recommended export size: about 2400 x 1400 px or 2560 x 1440 px. Try to keep the file below about 1 MB.
-
The background is controlled in
css/style.cssby this variable:
--site-bg-image: url("../img/backgrounds/background.jpg");-
If you want to use another filename, either rename your file to
background.jpgor change the CSS variable. -
The current background is NASA SVS ID 11901,
c-1920.jpg. The public credit incredits.htmlfollows the NASA SVS wording:NASA Goddard Space Flight Center Cover image courtesy of NASA/JSC
The credits page also lists the NASA SVS contributor credits for the item.
The homepage Research highlights section uses full-width cards. Replace the placeholder images in img/discoveries/ and edit the media/news links directly in index.html.
For the Earth-like exoplanets theme image, download the image locally and save it as:
img/themes/exoplanets.jpg
Do not hotlink the Delft Planetary URL. The public credit is already prepared in credits.html and in img/IMAGE_CREDITS.txt:
Artist's impression of the TRAPPIST-1 planetary system. Credit: ESO/M. Kornmesser.
If you also want to use the same image in the ocean-detection research highlight card, save a copy as:
img/discoveries/ocean-exoplanets.jpg
Alternatively, use one of your own Trees & Stam ocean-polarisation figures for the research highlight card and keep the ESO image only as the general exoplanets theme image.
The ESO/M. Kornmesser exoplanet image is included as:
img/themes/exoplanets.jpg
img/discoveries/ocean-exoplanets.jpg
The homepage now uses real <img> elements for these two cards. Figure captions are kept in normal document flow so they should not overlap with card headings.
This version uses the blue-toned NASA SVS Earth limb image as the site-wide background:
img/backgrounds/background.jpg
The colour palette in css/style.css has been shifted from green/teal to a blue atmospheric palette so it matches the background better. The relevant variables are --accent, --accent-dark, and --accent-soft.
Public image credits are kept in credits.html. Internal tracking notes are kept in img/IMAGE_CREDITS.txt.
The figures in img/software/ are web-ready PNG renders made from the cropped PDF figure files in img/software/source-pdfs/. Use the PNG files in the HTML pages for reliable browser display; keep the PDFs as the original figure sources.
The publication page is now written as a selected-publications page with short context notes. Use the paper-summary paragraph for the one-line result, and the paper-details block for two short notes: what the figure shows and why the result matters. Longer narrative pieces should live on the News & stories page rather than in the main navigation.
Additional story pages added:
story-rainbows-planets.html/nl/story-rainbows-planets.html— Quest reader question about rainbows on other planets.