Add templates for all main pages, add background text, art and self-portrait

src/main.rs

@@ -25,13 +25,13 @@ fn files(file: PathBuf) -> Option<NamedFile> {
     NamedFile::open(Path::new("static/").join(file)).ok()
 }
 
-#[get("/")]
-fn index() -> Template {
+#[get("/art")]
+fn art() -> Template {
     let context = FlashContext {
         flash_name: None,
         flash_msg: None,
     };
-    Template::render("index", &context)
+    Template::render("art", &context)
 }
 
 #[get("/background")]
@@ -43,6 +43,42 @@ fn background() -> Template {
     Template::render("background", &context)
 }
 
+#[get("/bacteria")]
+fn bacteria() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("bacteria", &context)
+}
+
+#[get("/computers")]
+fn computers() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("computers", &context)
+}
+
+#[get("/fungi")]
+fn fungi() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("fungi", &context)
+}
+
+#[get("/")]
+fn home() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("home", &context)
+}
+
 #[get("/lists")]
 fn lists() -> Template {
     let context = FlashContext {
@@ -52,6 +88,42 @@ fn lists() -> Template {
     Template::render("lists", &context)
 }
 
+#[get("/plants")]
+fn plants() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("plants", &context)
+}
+
+#[get("/meditation")]
+fn meditation() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("meditation", &context)
+}
+
+#[get("/movement")]
+fn movement() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("movement", &context)
+}
+
+#[get("/travel")]
+fn travel() -> Template {
+    let context = FlashContext {
+        flash_name: None,
+        flash_msg: None,
+    };
+    Template::render("travel", &context)
+}
+
 #[catch(404)]
 fn not_found() -> Template {
     debug!("404 Page Not Found");
@@ -64,7 +136,13 @@ fn not_found() -> Template {
 
 fn main() {
     rocket::ignite()
-        .mount("/", routes![files, index, background, lists])
+        .mount(
+            "/",
+            routes![
+                files, art, background, bacteria, computers, fungi, home, lists, plants,
+                meditation, movement, travel
+            ],
+        )
         .register(catchers![not_found])
         .attach(Template::fairing())
         .launch();

templates/art.html.tera

@@ -0,0 +1,30 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Art</h2>
+    <div class="flex-grid">
+      <img class="col" alt="Line drawing of an aloe plant in black ink on white paper" src="art/aloe.jpg" title="Aloe plant" />
+      <img class="col" alt="Line drawing of an American kestrel in black ink on white paper" src="art/kestrel.jpg" title="American kestrel" />
+      <img class="col" alt="Line drawing of a black oval surrounded by two rings of glyphs in black ink on white paper" src="art/obsidian_artifact.jpg" title="Obsidian Artifact" />
+    </div>
+    <div class="flex-grid">
+      <img class="col" alt="Stylised line drawing of a mountain with a teardrop-shaped symbol above it, with mountains and clouds in the background, in black ink on white paper" src="art/mystic_mountain.jpg" title="Mystic Mountain" />
+      <img class="col" src="art/cordyceps_ant.jpg" title="Ophiocordyceps unilateralis on ant host" />
+      <img class="col" src="art/halo.svg" title="Halo" />
+    </div>
+    <div class="flex-grid">
+      <img class="col" src="art/death_is_not_the_end.jpg" title="Death is not the End" />
+      <img class="col" src="art/ring_monk.jpg" title="Ring" />
+      <img class="col" src="art/shakuhachi.jpg" title="Mindless" />
+    </div>
+    <div class="flex-grid">
+      <img class="col" src="art/pitcher_plant.jpg" title="Bait" />
+      <img class="col" src="art/birch_polypore.jpg" title="Freeze" />
+      <img class="col" src="art/wasp.jpg" title="Build" />
+    </div>
+    <div class="flex-grid">
+      <img class="col" src="art/enchanted_gano.jpg" title="Enchanted" />
+      <img class="col" src="art/physalis.jpg" title="Frail" />
+      <img class="col" src="art/hyphal_fusion.svg" title="Hyphal Fusion" />
+    </div>
+    <hr>
+{%- endblock %}

templates/background.html.tera

@@ -1,8 +1,8 @@
 {% extends "nav" %}
 {% block content %}
     <h2>Background</h2>
-    <hr>
     <p>I was born and raised in the coastal city of Durban, South Africa, which lies between the Indian Ocean and Drakensberg Mountains. Following completion of high school I moved to Michigan, USA and completed a Bachelor of Science in anthropology (major) and biology (minor) at <a href="https://www.gvsu.edu/">Grand Valley State University</a>. I later returned to South Africa and completed a Master of Social Science in social anthropology at the <a href="http://www.uct.ac.za/">University of Cape Town</a>, with <a href="https://open.uct.ac.za/handle/11427/6795">research</a> focused on decentralised networks of medicinal plant harvesters and herbalists (Rasta bush doctors). I then went on to work as an applied anthropologist and ethnobotanist in the non-profit sector.</p>
     <p>Following a year spent travelling in South America, I restructured my life and livelihood around my core interests: carbon-based and silicon-based technologies (biology and computers). Since then I have founded <a href="https://harmonicmycology.com">Harmonic Mycology</a>, a mycology collective dedicated to developing and distributing mycelial medicines, teaching mushroom cultivation and encouraging the formation of humyn-fungal networks. In parallel to those activities, I have worked as an autodidactic software developer on private and open-source projects; most-recently, <a href="https://opencollective.com/peachcloud">PeachCloud</a>.</p>
     <p>I hold a deep fascination with the processes through which humyns form relationships with other living beings. When not behind the keyboard, you can find me looking at mushrooms, riding my bicycle or reading sci-fi. I'm dreaming of a three-month adventure across Japan ⛩.</p>
+    <img src="glyph_laetiporus.jpg" style="width: 100%;" />
 {%- endblock %}

templates/bacteria.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Bacteria</h2>
+    <hr>
+{%- endblock %}

templates/base.html.tera

@@ -24,6 +24,30 @@
         font-family: monospace;
       }
       
+      .col {
+        flex: 1;
+        padding: 1rem;
+      }
+      
+      @media (max-width: 400px) {
+        .col {
+          flex: 1;
+          padding: 1rem;
+          width: 90%;
+        }
+      }
+      
+        
+      .flex-grid {
+        display: flex;
+      }
+      
+      @media (max-width: 400px) {
+        .flex-grid {
+          display: block;
+        }
+      }
+      
       html {
         background-color: #fefefe;
         color: #111;

templates/computers.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Computers</h2>
+    <hr>
+{%- endblock %}

templates/fungi.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Fungi</h2>
+    <hr>
+{%- endblock %}

templates/home.html.tera

@@ -1,6 +1,6 @@
 {% extends "nav" %}
 {% block content %}
-    <img src="glyph.svg" style="align-self: center; width: 175px;" />
+    <img src="glyph.svg" style="width: 175px;" />
     <p>Welcome to the personal website of glyph.</p>
     <h2>Contact Information</h2>
     <hr>

templates/meditation.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Meditation</h2>
+    <img src="art/halo.svg" style="width: 500px; max-width: 90%;" title="Halo" />
+{%- endblock %}

templates/movement.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Movement</h2>
+    <hr>
+{%- endblock %}

templates/nav.html.tera

@@ -4,15 +4,16 @@
     <hr>
     <nav>
       <ol class="nav-bar">
+        <li class="nav-item"><a href="/art">art</a></li>
         <li class="nav-item"><a href="/background">background</a></li>
-        <li class="nav-item"><a href="">computers</a></li>
-        <li class="nav-item"><a href="">drawing</a></li>
-        <li class="nav-item"><a href="">fermentation</a></li>
-        <li class="nav-item"><a href="">language</a></li>
+        <li class="nav-item"><a href="/bacteria">bacteria</a></li>
+        <li class="nav-item"><a href="/computers">computers</a></li>
+        <li class="nav-item"><a href="/fungi">fungi</a></li>
         <li class="nav-item"><a href="/lists">lists</a></li>
-        <li class="nav-item"><a href="">movement</a></li>
-        <li class="nav-item"><a href="">mycology</a></li>
-        <li class="nav-item"><a href="">travel</a></li>
+        <li class="nav-item"><a href="/plants">plants</a></li>
+        <li class="nav-item"><a href="/meditation">meditation</a></li>
+        <li class="nav-item"><a href="/movement">movement</a></li>
+        <li class="nav-item"><a href="/travel">travel</a></li>
       </ol>
     </nav>
     {%- block content %}{%- endblock %}

templates/plants.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Plants</h2>
+    <hr>
+{%- endblock %}

templates/travel.html.tera

@@ -0,0 +1,5 @@
+{% extends "nav" %}
+{% block content %}
+    <h2>Travel</h2>
+    <hr>
+{%- endblock %}