Personal Site - Stardance

Ship #1 ✨ Blessed

@polycarbohydrate on Personal Site · about 1 month ago

I created my personal website using the Rust Programming Langauge. Traditionally websites use HTML, CSS, and/or Javascript. I decided down a more questionable route…

I am using the egui Rust crate for the GUI library. The GUI framework is eframe. In order to bundle all of the Rust code into something a browser can render, I use trunk, which compiles my code and assets into a WebAssembly binary (.wasm).

When the site first launches, there is a loading screen which is HTML and CSS. Javascript loads the WASM.

Everything you see is rendered using textured triangles. There is no HTML, CSS, JS, or DOM. WebGL and WebGPU do the rendering. Every movement of the mouse causes the entire frame to be redrawn. This is not the most optimal way for a personal static site, but allows me to create fast interactive portions of my site in the future.

The majority of my time was spent in compilation and reading documentation. Compiling takes over 5 minutes for me (for a full rebuild).

I hope you enjoy!

3 devlogs
12h
11.29x multiplier
164 Stardust

Try project → See source code →

Open comments for this post

@polycarbohydrate on Personal Site · about 1 month ago

2h 14m 57s logged

I think I am done with the first version of the site. It obviously can have some additional features and polishing but for the most part, it doens’t look bad.

I added 2 sections in the middle that reflect my personal interests. I fixed a typo in the about website section and also added a version and time changed text at the bottom of the site.

Today’s challenge was layouting again. As you may tell, the last section has misalignment (as well as the top right section)… Next time I work on this, I am probably going to work on code restructuring and implementing functions to get rid of many lines of code.

Currently it takes me over 5 minutes to compile the 273 dependencies. The Cargo.lock file has over 5500+ lines of dependencies 💀. I am going to read trunk’s (the wasm packager I use) documentation to see if I can optimize my dev and release builds more.

The .wasm size is 12MB. The HTML is only 107 lines.

I added both horizontal and verticle scrolling just in case someone viewed the page on a small screen. In the future I plan to add text wrapping on window resizing. Currently it just disappears and the scroll bars appear.

As simple as it may appear, this took way too long. I assume if one used html and css to do this would take maybe a quarter of the time I spent on this.

Open comments for this post

@polycarbohydrate on Personal Site · about 1 month ago

1h 40m 44s logged

Today I added a horizontal seciton with a GitHub button and started on my own activities section.

As shown in the image, I am having trouble load an external .png to the site. Maybe I need to configure my image loaders differently. That is what I will figure out tommarrow. Hopefully I will finish the site this weekend.

I spent many minutes compiling additional dependencies due to the svg in the GitHub button needed to be loaded.

These sections will be most of the site and then in the empty space in the top section I will put something fun/interactive.

In the about site section, I may change the formatting or add some additional details.

Next steps are to finish the 2 columns.

Open comments for this post

@polycarbohydrate on Personal Site · about 1 month ago

8h 10m 5s logged

Most sites use HTML, CSS, and/or JavaScript. However most people don’t even realize our browsers can run also run WebAssemby (wasm).

I decided to create my personal website in pure Rust. This is a difficult endeavour as Rust is typically used for backend, not frontend.

I am using egui for the GUI library. I use trunk to bundle my application into a .wasm file along with bare html and js (to load wasm into the browser).

I have spent countless hours reading documentation and experimenting with layouts (egui is wonky with this), and have successfully done the layout to my liking.

Currently, my site is looking half-finished. I am going to add a few more sections and some fun simulations that will render in the browser.

Everything you see is textured triangles. There is no HTML, CSS, JS, or DOM. Everytime the cursor is moved the page is redrawn. Rendering is done with WebGL or WGPU. JavaScript is required for the site to work (in order to load WebAssembly).