css and posts

src/main.rs

@@ -16,10 +16,11 @@ fn load_posts() -> Result<HashMap<String, Post>, Error> {
 
     let re_title = Regex::new(r#"#let\s+post_title\s*=\s*"([^"]*)""#).unwrap();
     let re_summary = Regex::new(r#"#let\s+post_summary\s*=\s*"([^"]*)""#).unwrap();
+    let re_img = Regex::new(r#"#let\s+post_preview_image\s*=\s*"([^"]*)""#).unwrap();
     
     let mut posts: HashMap<String, Post> = HashMap::new();
     for dir in dirs {
-        let typst_path = dir?.path().join("post.typ");
+        let typst_path = dir.as_ref().unwrap().path().join("post.typ");
         let typst = fs::read_to_string(typst_path).expect("Failed reading post");
         let title = re_title.captures(&typst)
             .expect("Post title not found")
@@ -27,16 +28,19 @@ fn load_posts() -> Result<HashMap<String, Post>, Error> {
         let summary = re_summary.captures(&typst)
             .expect("Post summary not found")
             .get(1).unwrap().as_str().trim().to_string();
+        let img = dir?.path().join(
+            re_img.captures(&typst)
+            .expect("Post preview image not found")
+            .get(1).unwrap().as_str().trim().to_string());
         let slug = title.clone().replace(" ", "-").to_lowercase();
         posts.insert(
             slug.clone(),
             Post {
                 title: title.clone(),
                 slug: slug,
-                preview_image: "NA".to_string(),
+                preview_image: img.to_str().expect("Failed converting path to string").to_string(),
                 summary: summary,
                 render: Html(PostTemplate {
-                    title: title,
                     content: typst_to_html(typst),
                 }.render().expect("Failed rendering post")),
             }
@@ -48,7 +52,6 @@ fn load_posts() -> Result<HashMap<String, Post>, Error> {
 #[derive(Template)]
 #[template(path = "post.html")]
 struct PostTemplate {
-    title: String,
     content: String,
 }
 
@@ -126,11 +129,7 @@ async fn main() {
         .route("/", get(home_html))
         .route("/posts", get(posts_html))
         .route("/posts/{title}", get(|title| get_post(title, posts)))
-        .nest_service("/static", ServeDir::new("static"))
+        .nest_service("/static", ServeDir::new("static"));
-        // .with_state(posts)
-        ;
-
-    
     
     let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
     println!("Running on http://127.0.0.1:3000");

static/home.typ

@@ -1,26 +1,14 @@
 = About me
+I enjoy competeing in capture the flag competitions (cybersecurity and the backyard game), working with robotics, automating tasks and thinking about problems.
 
+I've competed in a few hackathons which are cool, but I prefer spending large time frames incrementally understand solutions to much larger problems, and attempting solutions to those.
 
+I think automation is one of the most powerful abilities we have. As a species we are on the brink of mass automation, which can either liberate our lives into a post-scarcity utopia, or give a small percentage of us more control over the rest than anyone ever has had.
 
+An odd and maybe abstract thing I enjoy is design philosphy. Some examples are creating software to building moral structures through logic to methods of learning new skills.
 
+NixOS has to be my favourite distribution of Linux. My attraction to its design philosphy is that if something works, it will always work anywhere, and can still be worked on long after everything around it has moved on. Its hard to put into words but this feels like debian level stability with arch-like freedom to explore software.
 
+When I'm not nerding out on math, software, ethics, and optimal ways of learning things, I manage to get outdoors. I like mountain biking through trails, snowboarding, hiking through scenic areas, swimming, and basketball. The next thing I'll be getting into is likely SCUBA diving.
 
-
+I wrote this myself. While AI communicates ideas better than I do, I want to ensure that my and only my thoughts are written. That is true for anything on this site.
-
-Hey! I'm someone that likes to know my tools well.
-
-I also beleive in fairness and doing what is right. I'm frequently 
-= Skills
-
-= Hobbies
-My free time is split into working on projects and touching grass. 
-
-
-= What I want to do
-What I've found most interesting has to be the oppurtunities I get
-
-
-
-// Software engineering is a passion of mine, and people tend to reflect the things they do. 
-// My desktop and homelab run NixOS. I wrote this site in Rust, and add posts using Typst files. The whole thing is hosted on my gitea, and runs in a container defined by Nix.
-// I wrote this myself. While AI communicates ideas better than I do, I want to ensure that my and only my thoughts are written.

static/posts/drone/post.typ

@@ -0,0 +1,59 @@
+#let post_title = "Building a drone"
+#let post_preview_image = "top.jpg"
+#let post_summary = "Using a raspberry pi and 3d printer to build a drone from scratch"
+
+= Building a Drone
+
+I chose to build a drone from scratch for my AP Physics final project.
+We were given an open ended assignment to _build something cool_
+and I wanted a drone. My choice was much more ambitious than the course required,
+and took quite a while to complete.
+
+For the drones frame I finally had an excuse to purchase a 3d printer. I
+modelled the frame and arms modularly to support future upgrades and
+replacements from damage, reducing the cost of operation. Initially I
+was using some 3d printed torodial propellers due to their higher
+efficiency and lower sounds usage. Due to safety concerns of the
+propellers not withstanding tension at higher RPMs and exploding I
+switched to some generic acrylic propellers I bought. A challenge in
+designing the frame was leaving enough room to contain the volume of the
+wires. I went with the Elegoo Neptune 3 as the printer was open-source
+and had a much better cost-to-utility than proprietary printers such as
+the Ender series. I am not sponsored I just really like the printer.
+
+
+The flight computer was the most difficult part to program. Using an
+ultrasonic distance sensor, gyroscope, and accelerometer the drone has
+enough information to probably never crash. The autopilot is implemented
+on an Arduino UNO using a
+#link("https://en.wikipedia.org/wiki/Proportional%E2%80%93integral%E2%80%93derivative_controller")[PID Controller]
+for stabolization. The autopilot quality is currently impacted every time
+the drones mass distribution changes, which can be fixed with a reinforcement
+machine learning algorithm. For the higher level programming such as flight
+automation, video transmission and WiFi communications I used a Raspberry
+Pi Pico. There is also a 2.4GHz line of sight receiver for manual control.
+A future upgrade may contain a SIM card for near-infinite remote control
+connection, but drone regulations would make this difficult.
+
+The power system is the most physically challenging portion of the
+drone. The motors took 14.6 Volts, while the UNO microcontroller took 5
+Volts, and the Pico and most sensors run at 3.3 Volts. All of the power
+to the motors ran through the power distribution board, which I modified
+to also output the lower voltages and used Bidirectional Logic Level
+Converters to shift between 3.3 and 5V signals where needed. A potential
+flaw with having all the power coming from the same source is spikes in
+energy consumption to the motors may cause the microcomputers to receive
+too little power, which could be fixed with a capacitor. Luckily, I
+haven't experienced this yet as the 2C discharge rate on the 2.5Ah
+capacity battery is more than enough. Having a battery this big does
+mean it takes up about half the internal electronics volume and is half
+of the drones mass, but it can also maintain full throttle for half an
+hour making for long flights.
+
+The motors I used were a bit overkill for a 1.1kg drone, as going past
+20% throttle sends it shooting through the sky, which is not a bad
+issue to have. Here's the technical numbers behind that: I have
+propellers with a 6cm radius on motors with a 2450KV rating (2450 rpm
+per volt) and peaking at 14.6 Volts. From this the tip speed is ~225m/s
+under no load at max throttle, quite a lot more than what
+is safe or necessary to get into the air.

static/posts/gamedev/phobos.md

@@ -1,53 +0,0 @@
-<h1>Phobos</h1>
-	<p>
-		One of the coolest things I've developed is a game, fully written in
-		assembly.<br /><br />
-		I say this because it is the perfect intersection of many things I enjoy;
-		low level programming, physics, space, simulation development, and game design.
-		Also small enough of a project that I could complete it in under a couple
-		of months, so another win. I even named the game based on the emulator, as
-		Phobos is a moon of Mars <br /><br />The instructions for this
-		assignment were very broad, to develop a platformer game in assembly.
-		This left a lot of room for creative freedom, especially due to the
-		loose definition of platformer. With infinite time I would have
-		developed a whole rocket simulator, and used the justification that the
-		launchpad was a platform.
-		<br />
-		<br /> On the technical side this was a very difficult project. There are
-		only about 16 variables actually usable in MIPS, and a lot of them are reserved
-		to specific logical controls under best practice. Then following the many
-		loops and recursive, real-time functionality required extensive and efficient
-		use of the stack. Ideally accessing a few bytes shouldn't strike the fear
-		of low framerates to mind, but the Mars-MIPS emulator I was using was far
-		from efficient.
-	</p>
-	<h3>Notable Features</h3>
-	<ul>
-		<li>Raycast collision detection and repositioning</li>
-		<li>Sub-pixel velocity and positioning</li>
-		<li>Awesome pixel graphics (the rocket shoots fire!)</li>
-		<li>High framerates (for a low-performance emulator)</li>
-		<li>Enemies shooting at you!</li>
-		<li>Loot pickups</li>
-	</ul>
-	<p>
-		Probably the most annoying part of this was that the emulator couldn't
-		handle simutaineous key inputs. Fortunately I have over a thousand hours
-		experience landing rockets on the <a
-			href="https://kerbalspaceprogram.fandom.com/wiki/Mun">Mün</a
-		>
-		so I was comfortable giving a few unique key inputs per second. I never imagined
-		this is something I would be proud, and I still don't think I am. However,
-		it works.<br /><br />At this point you may have realized I am a bit of a
-		space nerd. Enjoy this recording I made at 1am demonstrating the
-		features of my game to a TA, compressed to the point that the audio has
-		texture.
-	</p>
-	<video width="90%" controls>
-		<track kind="captions" />
-		<source src="src/lib/phobos/demo.mp4" type="video/mp4" />
-		Your browser does not support the video.
-	</video><br />
-	The
-	<a href="https://github.com/jjanella/Phobos">source code</a> is also available
-	for your enjoyment.

static/posts/gamedev/post.typ

@@ -1,6 +1,8 @@
 #let post_title = "Game Dev"
+#let post_preview_image = "flying.webp"
 #let post_summary = "Creating an open world multiplayer terrain destruction game in Godot and Rust"
 
+= Game Development
 
 I am currently developing an underground-submarine openworld multiplayer
 physics inspired game. As a gamer and enjoyer of large, rich maps and

static/posts/gamedev/uav.md

@@ -1,59 +0,0 @@
-<h1>Building a UAV</h1>
-	<p>
-		I chose to build a drone from scratch for my AP Physics final project.
-		We were given an open ended assignment to <i>build something cool</i>
-		and I wanted a drone. My choice was much more ambitious than the course required,
-		and took quite a while to complete.<br /><br />
-
-		For the drones frame I finally had an excuse to purchase a 3d printer. I
-		modelled the frame and arms modularly to support future upgrades and
-		replacements from damage, reducing the cost of operation. Initially I
-		was using some 3d printed torodial propellers due to their higher
-		efficiency and lower sounds usage. Due to safety concerns of the
-		propellers not withstanding tension at higher RPMs and exploding I
-		switched to some generic acrylic propellers I bought. A challenge in
-		designing the frame was leaving enough room to contain the volume of the
-		wires. I went with the Elegoo Neptune 3 as the printer was open-source
-		and had a much better cost-to-utility than proprietary printers such as
-		the Ender series. I am not sponsored I just really like the printer.<br
-		/><br />
-
-		The flight computer was the most difficult part to program. Using an
-		ultrasonic distance sensor, gyroscope, and accelerometer the drone has
-		enough information to probably never crash. The autopilot is implemented
-		on an Arduino UNO using a
-		<a
-			href="https://en.wikipedia.org/wiki/Proportional%E2%80%93integral%E2%80%93derivative_controller"
-			>PID controller</a
-		>
-		for stabolization. The autopilot quality is currently impacted every time
-		the drones mass distribution changes, which can be fixed with a reinforcement
-		machine learning algorithm. For the higher level programming such as flight
-		automation, video transmission and WiFi communications I used a Raspberry
-		Pi Pico. There is also a 2.4GHz line of sight receiver for manual control.
-		A future upgrade may contain a SIM card for near-infinite remote control
-		connection, but drone regulations would make this difficult.<br /><br />
-
-		The power system is the most physically challenging portion of the
-		drone. The motors took 14.6 Volts, while the UNO microcontroller took 5
-		Volts, and the Pico and most sensors run at 3.3 Volts. All of the power
-		to the motors ran through the power distribution board, which I modified
-		to also output the lower voltages and used Bidirectional Logic Level
-		Converters to shift between 3.3 and 5V signals where needed. A potential
-		flaw with having all the power coming from the same source is spikes in
-		energy consumption to the motors may cause the microcomputers to receive
-		too little power, which could be fixed with a capacitor. Luckily, I
-		haven't experienced this yet as the 2C discharge rate on the 2.5Ah
-		capacity battery is more than enough. Having a battery this big does
-		mean it takes up about half the internal electronics volume and is half
-		of the drones mass, but it can also maintain full throttle for half an
-		hour making for long flights.<br /><br />
-
-		The motors I used were a bit overkill for a 1.1kg drone, as going past
-		20% throttle sends it shooting through the sky -- which is not a bad
-		issue to have. Here's the technical numbers behind that: I have
-		propellers with a 6cm radius on motors with a 2450KV rating (2450 rpm
-		per volt) at peaking at 14.6 Volts. From this the tip speed is computed
-		to be ~225m/s under no load at max throttle, quite a lot more than what
-		is safe or necessary to get into the air.
-	</p>

static/posts/phobos/post.typ

@@ -0,0 +1,60 @@
+#let post_title = "Phobos"
+#let post_preview_image = "phobos.png"
+#let post_summary = "Making a rocket platformer in assembly"
+
+= Phobos
+
+One of the coolest things I've developed is a game, fully written in
+assembly.
+
+
+I say this because it is the perfect intersection of many things I enjoy;
+low level programming, physics, space, simulation development, and game design.
+Also small enough of a project that I could complete it in under a couple
+of months, so another win. I even named the game based on the emulator, as
+Phobos is a moon of Mars.
+
+The instructions for this
+assignment were very broad, to develop a platformer game in assembly.
+This left a lot of room for creative freedom, especially due to the
+loose definition of platformer. With infinite time I would have
+developed a whole rocket simulator, and used the justification that the
+launchpad was a platform.
+
+On the technical side this was a very difficult project. There are
+only about 16 variables actually usable in MIPS, and a lot of them are reserved
+to specific logical controls under best practice. Then following the many
+loops and recursive, real-time functionality required extensive and efficient
+use of the stack. Ideally accessing a few bytes shouldn't strike the fear
+of low framerates to mind, but the Mars-MIPS emulator I was using was far
+from efficient.
+
+=== Notable Features
+
+- Raycast collision detection and repositioning
+- Sub-pixel velocity and positioning
+- Awesome pixel graphics (the rocket shoots fire!)
+- High framerates (for a low-performance emulator)
+- Enemies shooting at you!
+- Loot pickups
+
+Probably the most annoying part of this was that the emulator couldn't
+handle simutaineous key inputs. Fortunately I have over a thousand hours
+experience landing rockets on the #link("https://kerbalspaceprogram.fandom.com/wiki/Mun")[Mün]
+so I was comfortable giving a few unique key inputs per second. I never imagined
+this is something I would be proud, and I still don't think I am. However,
+it works.
+
+At this point you may have realized I am a bit of a
+space nerd. Enjoy this recording I made at 1am demonstrating the
+features of my game to a TA, compressed to the point that the audio has
+texture.
+
+// <video width="90%" controls>
+// <track kind="captions" />
+// <source src="src/lib/phobos/demo.mp4" type="video/mp4" />
+// Your browser does not support the video.
+// </video><br />
+// The
+// <a href="https://github.com/jjanella/Phobos">source code</a> is also available
+// for your enjoyment.

static/style.css

@@ -12,18 +12,109 @@
   text-align: center;
 }
 
-header {
+#navbar {
-  background-color: transparent;
+  display: flex;
-  border-bottom: 1px solid whitesmoke;
+  background: #000;
-  padding: 1rem 1rem;
+  border: 1px solid whitesmoke;
+  border-radius: 32px;
+  padding: 10px 20px;
+  margin: 0 auto;
+  width: 95%;
+  justify-content: space-between;
+  align-items: center;
+
+  position: fixed;
+  top: 10;
+  left: 0;
+  right: 0;
+  z-index: 9999;
 }
 
-nav {
+@keyframes hoverShadow {
-  display: flex; /* Aligns logo and menu horizontally */
+  0% {
-  justify-content: space-between; /* Pushes logo to left, menu to right */
+    text-shadow: none;
-  align-items: center;
+    box-shadow: none;
-  max-width: 1000px;
+  }
-  margin: 0 auto; /* Centers the header content */
+  50% {
+    text-shadow: 
+      -6px -3px cornflowerblue, 
+      6px 3px orangered;
+    box-shadow:
+      -6px -3px cornflowerblue, 
+      6px 3px orangered;
+  }
+}
+
+img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+}
+
+.postpreview {
+  border: 1px solid whitesmoke;
+  border-radius: 32px;
+  margin: auto;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  background-color: linear-gradient(150deg, #222, #040404);
+  text-align: center;
+
+}
+
+.postpreview:hover {
+  /* border: 10px solid whitesmoke;
+  background-color: yellow;
+  font-size: 18px; */
+  background-color: linear-gradient(330deg, #222, #040404);
+  animation: hoverShadow 0.4s linear ;
+}
+
+a {
+  text-decoration: none;
+}
+
+.hover-underline {
+  position: relative;
+  display: inline-block;
+}
+
+.hover-underline::after,
+.hover-underline::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, cornflowerblue, orangered);
+  bottom: -5px;
+  left: 0;
+
+.hover-underline::before {
+  top: -5px;
+  transform-origin: left;
+}
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.2s linear;
+}
+
+.hover-underline:hover::after,
+.hover-underline:hover::before {
+  transform: scaleX(1);
+}
+
+.content {
+  width: 80%;
+  margin: auto;
+}
+
+.content p {
+  text-align: left;
+}
+
+.content li {
+  text-align: left;
 }
 
 nav ul {
@@ -34,18 +125,6 @@ nav ul {
   padding: 0;
 }
 
-#name {
-  text-align: center;
-  font-size: 5rem;
-  margin: 20px;
-  padding: 0px;
-  animation: nameShadow 5s linear infinite;
-  letter-spacing: 2px;
-  color: whitesmoke;
-  font-family: "Ethnocentric", sans-serif;
-  transform: skewX(-20deg);
-}
-
 @keyframes nameShadow {
   0% {
     text-shadow: none;
@@ -57,7 +136,20 @@ nav ul {
   }
 }
 
+#name {
+  font-size: 5rem;
+  margin: 20px;
+  padding: 0px;
+  animation: nameShadow 5s linear infinite;
+  letter-spacing: 2px;
+  color: whitesmoke;
+  font-family: "Ethnocentric", sans-serif;
+  transform: skewX(-20deg);
+  text-align: center;
+}
+
 body {
   min-height: 100vh;
   background-image: linear-gradient(330deg, #222, #040404);
 }
+

templates/base.html

@@ -4,17 +4,19 @@
 	<link rel="stylesheet" href="/static/style.css"
 	<meta charset="utf-8"/>
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Jeremy Janella</title>
 </head>
 <body>
 	<header>
-		<nav>
+		<nav id="navbar">
 			<ul>
-				<li>Posts</li>
+				<li><a class="hover-underline" href="/">Home</a></li>
-				<li>Contact</li>
+				<li><a class="hover-underline" href="/posts">Posts</a></li>
+				<!-- <li><a>Contact</a></li> -->
 			</ul>
 		</nav>
   	</header>
-    <div style="padding: auto">
+    <div style="padding-top: 3rem" class="content">
         {% block body %}{% endblock %}
     </div>
 </body>

templates/post-preview.html

@@ -1,4 +1,7 @@
-<div>
+<a href="/posts/{{ post.slug }}">
+    <div class="postpreview">
         <h2>{{ post.title }}</h2>
+        <img src="{{ post.preview_image }}">
         {{ post.summary }}
-</div>
+    </div>
+</a>

templates/post.html

@@ -2,8 +2,6 @@
 
 {% block body %}
 
-{{ title|safe }}
-
 {{ content|safe }}
 
 {% endblock %}

templates/posts.html

@@ -3,7 +3,7 @@
 {% block body %}
 
 
-<div id="posts-grid">
+<div class="content">
     {% for post in posts %}
         {% include "post-preview.html" %}
     {% endfor %}