Merge pull request #18 from Austionian/style-do-over

Style do over
Austionian · Nov 29, 2023 · 3274e43 · 3274e43
2 parents 59c4057 + 502636f
commit 3274e43
Show file tree

Hide file tree

Showing 23 changed files with 293 additions and 421 deletions.
diff --git a/assets/output.css b/assets/output.css
diff --git a/src/lib.rs b/src/lib.rs
@@ -76,7 +76,6 @@ pub fn startup() -> Result<Router, String> {
         .route("/", get(routes::root))
         .route("/bl0g", get(routes::blog))
         .route("/bl0g/:post_name", get(routes::get_blog_post))
-        .route("/ab0ut", get(routes::about))
         .route("/pr0jects", get(routes::projects))
         .route("/read_c0unt/:post_id", get(routes::read_count))
         .fallback(routes::handle_404)

diff --git a/src/routes/about.rs b/src/routes/about.rs
diff --git a/src/routes/mod.rs b/src/routes/mod.rs
@@ -1,4 +1,3 @@
-mod about;
 mod blog;
 mod handle_404;
 mod health_check;
@@ -7,7 +6,6 @@ mod projects;
 mod read_count;
 mod root;
 
-pub use about::about;
 pub use blog::blog;
 pub use handle_404::handle_404;
 pub use health_check::health_check;

diff --git a/src/routes/root.rs b/src/routes/root.rs
@@ -9,6 +9,9 @@ struct Job {
     start_year: &'static str,
     end_year: &'static str,
     image: &'static str,
+    tech: Vec<&'static str>,
+    description: &'static str,
+    link: &'static str,
 }
 
 /// Handler to return the website's index and display
@@ -22,20 +25,29 @@ pub async fn root(State(state): State<Arc<AppState>>) -> Html<String> {
             start_year: "2022",
             end_year: "Present",
             image: "nm.webp",
+            tech: vec!["React", "Redux", "TypeScript", "Graphql"],
+            description: "Description about the job and what I did there. ",
+            link: "https://northwesternmutual.com",
         },
         Job {
             company: "Shorewood Tech",
             title: "Software Engineer (contract)",
             start_year: "2021",
             end_year: "Present",
             image: "st.webp",
+            tech: vec!["Rust", "Actix", "TypeScript", "Qwik", "Postgres"],
+            description: "Description about the job and what I did there. ",
+            link: "https://shorewood.tech",
         },
         Job {
             company: "Catholic Charities of St. Paul and Minneapolis",
             title: "Software Developer/ Administrator",
             start_year: "2017",
             end_year: "2022",
             image: "ccspm.webp",
+            tech: vec!["Python", "Django", "Flask", "Postgres"],
+            description: "Description about the job and what I did there. ",
+            link: "https://cctwincities.org",
         },
     ];
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,7 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: colors.purple,
+        primary: colors.emerald,
       },
       textShadow: {
         sm: "0 1px 2px var(--tw-shadow-color)",

diff --git a/tailwind.css b/tailwind.css
@@ -3,11 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  html {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
-  }
-
   h1 {
     font-size: 2rem;
     font-weight: bolder;

diff --git a/templates/about.html b/templates/about.html
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
@@ -1,40 +1,36 @@
-<footer class="mt-32 flex-none" hx-boost="false">
-  <div class="sm:px-8">
-    <div class="mx-auto w-full max-w-7xl lg:px-8">
-      <div class="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
-        <div class="relative px-2">
-          <div class="mx-auto max-w-2xl lg:max-w-5xl">
-            <div
-              class="flex flex-col items-center justify-between gap-6 sm:flex-row"
+<footer class="mt-32 flex-none w-full" hx-boost="false">
+  <div class="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
+    <div class="relative px-2">
+      <div class="mx-auto max-w-2xl lg:max-w-5xl">
+        <div
+          class="flex flex-col items-center justify-between gap-6 sm:flex-row"
+        >
+          <div
+            class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200"
+          >
+            {% for link in links %}
+            <a
+              class="transition hover:text-primary-500 dark:hover:text-primary-400"
+              href="/{{ link }}"
+              >{{ link }}</a
             >
-              <div
-                class="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200"
-              >
-                {% for link in links %}
-                <a
-                  class="transition hover:text-primary-500 dark:hover:text-primary-400"
-                  href="/{{ link }}"
-                  >{{ link }}</a
-                >
-                {% endfor %}
-              </div>
-              <p class="text-sm text-zinc-500 dark:text-zinc-400">
-                © 2023 Austin Rooks. All rights reserved.
-              </p>
-            </div>
-            <div class="mx-auto max-w-2xl lg:max-w-5xl">
-              <div
-                class="flex flex-col items-center justify-center gap-6 sm:flex-row"
-              >
-                <div id="wcb" class="carbonbadge wcb-d mt-4"></div>
-              </div>
-            </div>
-            <script
-              src="https://unpkg.com/[email protected]/b.min.js"
-              defer
-            ></script>
+            {% endfor %}
           </div>
+          <p class="text-sm text-zinc-500 dark:text-zinc-400">
+            © 2023 Austin Rooks. All rights reserved.
+          </p>
         </div>
+        <div class="mx-auto max-w-2xl lg:max-w-5xl">
+          <div
+            class="flex flex-col items-center justify-center gap-6 sm:flex-row"
+          >
+            <div id="wcb" class="carbonbadge wcb-d mt-4"></div>
+          </div>
+        </div>
+        <script
+          src="https://unpkg.com/[email protected]/b.min.js"
+          defer
+        ></script>
       </div>
     </div>
   </div>

diff --git a/templates/includes/header.html b/templates/includes/header.html
@@ -8,91 +8,58 @@
       {% for link in links %}
       <a
         href="/{{ link }}"
-        class="text-shadow-lg shadow-white transition hover:bg-zinc-900/5 hover:font-bold dark:hover:bg-black/20 text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 block rounded-md px-3 py-2 font-medium"
+        class="transition hover:bg-zinc-900/5 hover:font-bold dark:hover:bg-black/20 text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 block rounded-md px-3 py-2 font-medium"
         >{{ link }}</a
       >
       {% endfor %}
     </div>
   </div>
 </div>
 <nav
-  class="flex items-center justify-between z-10 p-6 lg:px-8 sticky top-0 left-0 right-0 font-lg transition duration-150 ease-in-out"
+  class="flex mx-3 px-6 sm:m-auto max-w-3xl border-black/10 dark:border-white/10 mt-3 rounded-full sm:px-16 tems-center justify-between z-10 py-6 sticky top-3 left-0 right-0 font-lg transition duration-150 ease-in-out"
   :class="{ 'shadow-lg': atTop && !open, 'dark:shadow-black/90 backdrop-blur bg-white/5 dark:bg-black/5': atTop }"
   @scroll.window="atTop = (window.pageYOffset > 50)"
 >
-  <div class="flex lg:flex-1">
+  <div class="flex">
     <a
       href="/"
-      class="-m-1.5 font-mono font-bold text-lg text-primary-400 hover:text-primary-500 dark:hover:text-primary-400 text-shadow shadow-purple-300 dark:shadow-purple-400"
+      class="-m-1.5 font-mono font-bold text-lg text-primary-400 hover:text-primary-500 dark:hover:text-primary-300"
     >
       <div class="group relative cursor-pointer rounded">
         <div class="flex items-center relative">
+          {% set normal = ["_", "0", "0", "_", "_"] %} {% for char in normal %}
           <div
             class="origin-top transition-transform duration-150 ease-in-out group-hover:scale-y-0"
-            style="transition-delay: 0ms"
+            style="transition-delay: {{loop.index * 25}}ms"
           >
-            _
-          </div>
-          <div
-            class="origin-top transition-transform duration-150 ease-in-out group-hover:scale-y-0"
-            style="transition-delay: 25ms"
-          >
-            0
-          </div>
-          <div
-            class="origin-top transition-transform duration-150 ease-in-out group-hover:scale-y-0"
-            style="transition-delay: 50ms"
-          >
-            0
-          </div>
-          <div
-            class="origin-top transition-transform duration-150 ease-in-out group-hover:scale-y-0"
-            style="transition-delay: 75ms"
-          >
-            _
-          </div>
-          <div
-            class="origin-top transition-transform duration-150 ease-in-out group-hover:scale-y-0"
-            style="transition-delay: 100ms"
-          >
-            _
+            {{ char }}
           </div>
+          {% endfor %}
           <div class="absolute bottom-0 left-0 flex items-center">
+            {% set hovered = ["r", "0", "0", "k", "s"] %} {% for char in hovered
+            %}
             <div
               class="origin-bottom transition-transform duration-150 ease-in-out scale-y-0 group-hover:scale-y-100"
-              style="transition-delay: 0ms"
+              style="transition-delay: {{loop.index * 25}}ms"
             >
-              r
-            </div>
-            <div
-              class="origin-bottom transition-transform duration-150 ease-in-out scale-y-0 group-hover:scale-y-100"
-              style="transition-delay: 25ms"
-            >
-              0
-            </div>
-            <div
-              class="origin-bottom transition-transform duration-150 ease-in-out scale-y-0 group-hover:scale-y-100"
-              style="transition-delay: 50ms"
-            >
-              0
-            </div>
-            <div
-              class="origin-bottom transition-transform duration-150 ease-in-out scale-y-0 group-hover:scale-y-100"
-              style="transition-delay: 75ms"
-            >
-              k
-            </div>
-            <div
-              class="origin-bottom transition-transform duration-150 ease-in-out scale-y-0 group-hover:scale-y-100"
-              style="transition-delay: 100ms"
-            >
-              s
+              {{ char }}
             </div>
+            {% endfor %}
           </div>
         </div>
       </div>
     </a>
   </div>
+  <div
+    x-data="{ title: '', setTitle(title) { this.title = title } }"
+    @htmx:after-swap.window="setTitle(document.querySelector('#title')?.innerText)"
+  >
+    <span
+      x-text="title"
+      class="transition font-semibold text-black dark:text-white hidden sm:block"
+      :class="{ 'sm:hidden': !atTop }"
+    ></span>
+  </div>
   <div class="flex md:hidden">
     <button
       type="button"
@@ -137,8 +104,7 @@
     {% for link in links %}
     <a
       href="/{{ link }}"
-      class="text-shadow-sm shadow-primary-400 dark:text-primary-400 transition text-sm font-semibold leading-6 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300"
-      :class="{ 'hidden': atTop }"
+      class="transition text-sm font-semibold leading-6 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300"
       >{{ link }}</a
     >
     {% endfor %}

diff --git a/templates/includes/list_of_posts.html b/templates/includes/list_of_posts.html
@@ -1,24 +1,15 @@
-<div class="mt-10">
+<div class="mt-28">
+  <h2>recent p<span class="font-mono">0</span>sts</h2>
   {% for post in posts %}
   <a
     href="/bl0g/{{ post.title }}#"
     hx-target="#outerReach"
     hx-swap="outerHTML transition:true show:body:top"
   >
     <div
-      class="group cursor-pointer space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline -ml-2 mb-4 transition hover:bg-gray-500/5 hover:dark:bg-white/5 pl-2 pr-2 sm:pr-4 py-6 rounded-lg border border-transparent bg-white/10 dark:bg-transparent hover:shadow-lg hover:shadow-primary-400 dark:hover:shadow-gray-950 hover:border-primary-300/50 dark:hover:border-primary-700/50"
+      class="group cursor-pointer space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline -ml-2 mb-4 transition hover:bg-gray-500/5 hover:dark:bg-primary-500/10 pl-2 pr-2 sm:pr-4 py-6 rounded-lg border border-transparent bg-white/10 dark:bg-transparent"
     >
-      <dl>
-        <dt class="sr-only">Published on</dt>
-        <dd
-          class="font-light text-sm text-gray-600 dark:text-gray-300 leading-6"
-        >
-          <time datetime="{{post.date}}">
-            {{ post.date | date(format="%B %d, %Y") }}</time
-          >
-        </dd>
-      </dl>
-      <div class="space-y-5 xl:col-span-3">
+      <div class="space-y-5 xl:col-span-5">
         <div class="space-y-6">
           <div>
             <h2
@@ -34,9 +25,7 @@
                     {{ c }}
                   </div>
                   {% endif %} {% endfor %}
-                  <div
-                    class="absolute bottom-0 left-0 flex items-center" 
-                  >
+                  <div class="absolute bottom-0 left-0 flex items-center">
                     {% for c in post.title %}{% if c == '_' %} &nbsp{% else %}
                     <div
                       class="origin-bottom transition-transform duration-150 ease-in-out scale-y-0 group-hover:scale-y-100 text-primary-400 dark:text-primary-300"
@@ -58,6 +47,16 @@
             <!--   > -->
             <!-- </div> -->
           </div>
+          <dl>
+            <dt class="sr-only">Published on</dt>
+            <dd
+              class="font-light text-sm text-gray-600 dark:text-gray-300 leading-6"
+            >
+              <time datetime="{{post.date}}">
+                {{ post.date | date(format="%B %d, %Y") }}</time
+              >
+            </dd>
+          </dl>
           <div
             class="hidden sm:block leading-relaxed font-sans prose text-gray-500 max-w-none dark:text-gray-400"
           >
@@ -68,4 +67,21 @@
     </div>
   </a>
   {% endfor %}
+  <div class="flex justify-end">
+    <a
+      href="/bl0g#"
+      hx-target="#outerReach"
+      hx-swap="outerHTML transition:true show:body:top"
+      class="group-hover:text-primary-400"
+    >
+      <div class="group flex flex-row">
+        <div class="group-hover:text-primary-400">see m0re p0sts</div>
+        <div
+          class="ml-2 group-hover:text-primary-400 group-hover:scale-150 transition"
+        >
+          →
+        </div>
+      </div>
+    </a>
+  </div>
 </div>