This Website

This website is an Astro website where the content is generated from markdown files. It is customized with custom plugins to support the different features that I wanted to have such as images with lightbox support (fullscreen) and 3D model rendering with exploding.

The goal is to be able to write simple presentation of different projects that are easily editable and readable even in “raw” format.

Images

The image support is really standard with the basic markdown implementation :

![Example image from cover](./cover.png)

Although it can be a little bit customized by specifying max height and width :

![Example image from cover](./cover.png=HEIGHTxWIDTH)

And only one of the two arguments is actually needed :

![Example image from cover](./cover.png=x150)

Carousel

Several images can be grouped into a carousel by wrapping them in a [!GALLERY] blockquote. In the article only the first image is shown, with the other one as thumbnails. They open as a fullscreen carousel in the lightbox and following the same rules as before, the carousel max dimensions can be specified with [!GALLERY=WxH] :

> [!GALLERY=x400]
> ![Example image #1](./Image1.webp)
> ![Example image #2](./Image2.webp)
> ![Example image #3](./Image3.webp)

3D Models

3D Models are important since I do a some 3D printing and PCB design, I think they are a beautiful way to showcase a design. The 3D renderer uses .glb files that imbed models and textures and are compressed and decompressed on the page using Draco if needed.

Models can be moved, spun, zoomed in or out. On computer using left click to rotate, right click to move the model or scroll to zoom. On mobile it works with touch control : 1 finger to rotate, 2 finger to move or pinch to zoom. It also works with AR if the browser supports it.

They can be simply invoked with :

[Cube](/models/3D_cube_example.glb)

Or with more features and personalization with a yaml glb code block :

src: /models/3D_cube_example.glb
alt: Cube

Lighting and camera

Lightning and camera can be customized using the standard model-viewer fields, tweaking camera position, settings and using a custom HDRI Map.

src: /models/3D_cube_example.glb
alt: Cube with camera and lighting
environment-image: /models/basic_lights.hdr
camera-orbit: 45deg 45deg 30m
camera-target: 1m 0.5m 1m
field-of-view: 10deg
exposure: 0.9
shadow-intensity: 1.3
shadow-softness: 0.8

Exploded views

For a .glb with multiple separate objects, add data-explode: true to get a slider that smoothly slides parts apart. You can choose the direction with explode-axis and control the spread with explode-max. By default parts are ranked along the axis and spread evenly (explode-dist: order): the backmost lands furthest back, the frontmost furthest forward, everyone else evenly in between, keeping the original order along the axis.

src: /models/3D_cube_example.glb
data-explode: true
explode-axis: x
explode-max: 2

They can also be exploded proportionally with distance to reference point :

src: /models/3D_cube_example.glb
data-explode: true
explode-axis: x
explode-max: 2
explode-dist: proportional

Instead of using an axis, the explosion can be radial where the reference point is either the center of objects or the origin of the 3D scene :

src: /models/3D_cube_example.glb
data-explode: true
explode-dist: proportional
explode-axis: radial center

Combining camera settings, lighting and model explosion settings allows to create this kind of scene :

src: /models/3D_cube_example.glb
alt: Cube exploding
environment-image: /models/basic_lights.hdr
camera-orbit: 30deg 60deg
field-of-view: 8deg
data-explode: true
explode-dist: proportional
explode-axis: radial center
explode-max: 1

Note and alert blockquotes

The markdown processor also supports GitHub styled blockquotes :

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Titles can simply be replaced by adding a name next to the blockquote type :

> [!TIP] Renaming callout
> You can rename a blockquote callout by adding a custom name.

Renaming callout

You can rename a blockquote callout by adding a custom name.

Conclusion

All those features implemented allows writing pure markdown files with a high level of customization to showcase different projects. Articles are easy to write, support version control with git since they are text based and can be easily edited with or without a special IDE.