feat: starting the porting process (no posts yet)

4 files changed, 275 insertions, 149 deletions

diff --git a/css/default.scss b/css/default.scss
index a163f7f..fff60ed 100644
--- a/css/default.scss
+++ b/css/default.scss
@@ -1,161 +1,148 @@
-html {
-  font-size: 62.5%;
-}
-
-body {
-  font-size: 1.6rem;
-  color: #000;
-}
-
-header {
-  border-bottom: 0.2rem solid #000;
-}
-
-nav {
-  text-align: right;
-}
-
-nav a {
-  font-size: 1.8rem;
-  font-weight: bold;
-  color: black;
-  text-decoration: none;
-  text-transform: uppercase;
-}
+@import "https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100..900&display=swap";
 
-footer {
-  margin-top: 3rem;
-  padding: 1.2rem 0;
-  border-top: 0.2rem solid #000;
-  font-size: 1.2rem;
-  color: #555;
-}
+$background-color: oklch(22.49% 0.008 297.21);
+$foreground-color: oklch(98.51% 0 0);
+$primary-color: oklch(82.67% 0.096 307.5);
+$secondary-color: oklch(from $primary-color l c 240);
 
-h1 {
-  font-size: 2.4rem;
+:root {
+  font-size: 20px;
 }
 
-h2 {
-  font-size: 2rem;
+* {
+  box-sizing: border-box;
+  transition: 0.1s ease-in-out;
+  /* outline: 1px solid rgba(255, 0, 0, 0.2); */
 }
 
-article .header {
-  font-size: 1.4rem;
-  font-style: italic;
-  /* color: #555; */
-  $myColor: red;
-  color: $myColor;
+body {
+  display: flex;
+  flex-direction: column;
+  font-family: "M PLUS 2", sans-serif;
+  align-items: center;
+  $opacity: 25%;
+  background-color: black;
+  background: $background-color
+    linear-gradient(
+      135deg,
+      oklch(from $primary-color l c h / $opacity),
+      oklch(from $secondary-color l c h / $opacity) 100%
+    );
+  color: white;
+  color: $foreground-color;
+  padding: 4rem 0 0 0;
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
 }
 
-.logo a {
-  font-weight: bold;
-  color: #000;
-  text-decoration: none;
-}
+content {
+  display: flex;
+  max-width: 60rem;
+  flex-direction: row-reverse;
 
-@media (max-width: 319px) {
-  body {
-    width: 90%;
-    margin: 0;
-    padding: 0 5%;
+  & > * {
+    background-color: $background-color;
+    outline: 0.1rem solid $background-color;
+    outline-offset: 0.1rem;
   }
 
-  header {
-    margin: 4.2rem 0;
+  & > nav {
+    padding: 1.25rem 0.75rem;
   }
 
-  nav {
-    margin: 0 auto 3rem;
-    text-align: center;
-  }
-
-  footer {
-    text-align: center;
+  & > article {
+    width: 100vw;
+    padding: 1.25rem;
   }
+}
 
-  .logo {
-    text-align: center;
-    margin: 1rem auto 3rem;
-  }
+footer {
+  position: fixed;
+  bottom: 0px;
+  color: $background-color;
+  opacity: 0.7;
+  font-size: 0.75rem;
+  padding: 0.5rem;
+  width: 100%;
+  text-align: right;
 
-  .logo a {
-    font-size: 2.4rem;
+  p {
+    padding: 0;
+    margin: 0;
   }
 
-  nav a {
-    display: block;
-    line-height: 1.6;
+  a {
+    color: inherit;
   }
 }
 
-@media (min-width: 320px) {
-  body {
-    width: 90%;
-    margin: 0;
-    padding: 0 5%;
-  }
-
-  header {
-    margin: 4.2rem 0;
-  }
+/* --- NAVIGATION BAR --- */
+/* This whole navbar section needs refactoring, because I'm already confused by it */
+nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin-left: 1rem;
+  height: fit-content;
 
-  nav {
-    margin: 0 auto 3rem;
-    text-align: center;
+  svg {
+    fill: $foreground-color;
+    $size: 2rem;
+    width: $size;
+    height: $size;
   }
 
-  footer {
-    text-align: center;
+  a {
+    display: flex;
+    writing-mode: vertical-rl;
+    text-orientation: sideways;
+    text-decoration: none;
+    justify-content: center;
+    color: $foreground-color;
   }
 
-  .logo {
-    text-align: center;
-    margin: 1rem auto 3rem;
+  span {
+    color: oklch(from $foreground-color 0.45 c h);
   }
+}
 
-  .logo a {
-    font-size: 2.4rem;
-  }
+/* --- STANDARD ELEMENTS --- */
+a {
+  color: mediumpurple;
+  color: $primary-color;
 
-  nav a {
-    display: inline;
-    margin: 0 0.6rem;
+  &:hover {
+    filter: brightness(0.75);
   }
 }
 
-@media (min-width: 640px) {
-  body {
-    width: 60rem;
-    margin: 0 auto;
-    padding: 0;
-  }
-
-  header {
-    margin: 0 0 3rem;
-    padding: 1.2rem 0;
-  }
+@mixin std-style {
+  display: block;
+  margin: 0;
+  padding-bottom: 0.2rem;
+}
 
-  nav {
-    margin: 0;
-    text-align: right;
-  }
+p,
+ul {
+  @include std-style;
+}
 
-  nav a {
-    margin: 0 0 0 1.2rem;
-    display: inline;
-  }
+@for $i from 1 through 6 {
+  h#{$i} {
+    @include std-style;
 
-  footer {
-    text-align: right;
-  }
+    &:before {
+      $stars: "";
 
-  .logo {
-    margin: 0;
-    text-align: left;
-  }
+      @for $_ from 1 through $i {
+        $stars: $stars + "*";
+      }
 
-  .logo a {
-    float: left;
-    font-size: 1.8rem;
+      content: "#{$stars} ";
+      color: oklch(82.67% 0.087 #{280 + ($i - 1) * 20});
+      opacity: 0.75;
+    }
   }
 }
diff --git a/index.html b/index.html
index 455ebf6..cf516b4 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,69 @@
 ---
-title: Home
+title: Hi! I'm Jamie!
 ---
 
-<h2>Welcome</h2>
+<p>
+  I also go by skiletro, or just simply skil, and use they/them pronouns. I'm
+  interested in a whole range of things; most of which have some sort of
+  connection to technology. Mechanical keyboards, and linux ricing are some of
+  my current interests, alongside esports, hardware, and a little language
+  learning on the side!
+</p>
 
 <img src="/images/haskell-logo.png" style="float: right; margin: 10px" />
 
-<p>Welcome to my blog!</p>
+<h2>Projects</h2>
+<ul>
+  <li>
+    <a
+      href="https://github.com/skiletro/nixfileshttps://github.com/skiletro/nixfiles"
+      >"nixfiles"</a
+    >
+    - A Nix flake containing all of my system configuration. I've put a
+    <mark>lot</mark> of effort into making it look good too.
+  </li>
+  <li>
+    <a href="https://github.com/skiletro/nur-repo"
+      >My Nix User Repository repo</a
+    >
+    - Not a lot going on in here; mostly containing fonts and other small
+    programs. Instead of restricting the packages to my flake specifically, I
+    decided it would be more useful to publish them for others to use under the
+    NUR!
+  </li>
+  <li>
+    <a href="https://github.com/skiletro/Simple2FA">Simple2FA</a> - Written as
+    part of my undergraduate studies, Simple2FA, as the name suggests, is a very
+    basic two-factor authentication app. It has support for manual entry, as
+    well as scanning QR codes, to import TOTP keys.
+  </li>
+  <li>
+    <a href="https://www.behance.net/skiletro#">Graphics design work</a> - While
+    I haven't updated my portfolio in a while, I've done quite a lot of work in
+    the graphics design space, creating logos and whatnot. I intend to move this
+    portfolio to this website sometime in the future, but for now all my work
+    happily lives on Behance.
+  </li>
+  <li>
+    ...and more! I honestly can't think of everything off the top of my head,
+    and I'm always doing more stuff, so check here often!
+  </li>
+</ul>
 
-<p>I've reproduced a list of recent posts here for your reading pleasure:</p>
+<h2>Programming Languages and Other Skills</h2>
+<ul>
+  <li>C#</li>
+  <li>Java</li>
+  <li>Nix</li>
+  <li>HTML</li>
+  <li>CSS/SCSS</li>
+  <li>Figma</li>
+</ul>
+
+<h2>Thank you for visiting!</h2>
+If you need to contact me, feel free to do so through
+<a href="https://matrix.to/#/@jvmi:matrix.org">matrix</a>, or on Discord
+(<code>jvmi</code>).
 
 <h2>Posts</h2>
 $partial("templates/post-list.html")$
diff --git a/posts/2025-05-28-test.markdown b/posts/2025-05-28-test.markdown
new file mode 100644
index 0000000..6521c6d
--- /dev/null
+++ b/posts/2025-05-28-test.markdown
@@ -0,0 +1,23 @@
+---
+title: Test Page
+---
+
+Lorem Ipsum
+
+## Sub-heading
+
+Here are some code blocks!
+
+```haskell
+fac n = foldr (*) 1 [1..n]
+```
+
+...and here is some Nix in a codeblock!
+
+```nix
+let
+  a = 1;
+in {
+  b = a * 2;
+}
+````
diff --git a/templates/default.html b/templates/default.html
index 0fb6145..b0f706b 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -1,35 +1,96 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>My Hakyll Blog - $title$</title>
-    <link rel="stylesheet" href="/css/default.css" />
-    <link rel="stylesheet" href="/css/syntax.css" />
+    <meta charset="UTF-8" />
+    <title>$title$ | skiletro</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="" />
+    <link rel="stylesheet" type="text/css" href="/css/default.css" />
+    <link rel="stylesheet" type="text/css" href="/css/syntax.css" />
+    <link rel="icon" href="favicon.png" />
+    <meta name="theme-color" content="#9141ac" />
+    <meta property="og:title" content="" />
+    <meta property="og:description" content="" />
+    <meta property="og:image" content="" />
+    <meta name="twitter:card" content="" />
+    <meta name="twitter:site" content="" />
+    <meta name="twitter:title" content="" />
+    <meta name="twitter:description" content="" />
+    <meta name="twitter:image" content="" />
   </head>
-
   <body>
-    <header>
-      <div class="logo">
-        <a href="/">My Hakyll Blog</a>
-      </div>
+    <content>
       <nav>
+        <a href="#"
+          ><svg class="logo" width="25" height="25" viewBox="0 0 980.4 1e3">
+            <path
+              d="M235.84 924.57a498 498 0 0061.81 32.76l-8.3-72.08z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M297.65 957.34a498 498 0 0065.1 23.58l-15.94-80z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M106.47 808.4l33.65-81C87.2 708.58 52.2 688 30.46 672.18A498.84 498.84.0 00106.47 808.4z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M362.76 980.92a498.66 498.66.0 0070.37 14.63L407.74 919.2z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M433.14 995.55A505 505 0 005e2 1e3l-33.06-76.45z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M164.33 735.49h0l23.17 71.42 28.1-57.41 32 57.41 32.54-44.58 37.1 56.76 30-47.88 19.61 51.36L405 775.87l25.42 49.32 38.3-46.87L5e2 830.41l31.32-52.09 38.3 46.87L595 775.87l38.13 46.7 19.61-51.36 30 47.88 37.1-56.76 32.54 44.58 32-57.41 28.09 57.41 23.17-71.42h0C759.29 759.35 650.92 778.6 5e2 778.6s-259.29-19.25-335.67-43.11z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M702.35 957.33a498 498 0 0061.81-32.76l-53.51-39.32z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M637.25 980.92a498 498 0 0065.1-23.58l-49.16-56.42z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M893.53 808.4a498.84 498.84.0 0076-136.22C947.8 688 912.8 708.58 859.88 727.41z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M566.87 995.55a498.66 498.66.0 0070.37-14.63l-45-61.72z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M5e2 1e3a505 505 0 0066.86-4.45l-33.8-72z"
+              transform="translate(-9.8)"
+            ></path>
+            <path
+              d="M526.1 376.88c25.15-186.25 147.42-287.57 199.81-323a500.87 500.87.0 00-451.82.0c52.39 35.47 174.66 136.79 199.81 323C506.11 615.39 290 737.32 9.8 598.89q4.09 20.4 9.83 40.16C64.44 675.61 195.83 753.8 5e2 753.8s435.56-78.19 480.37-114.75q5.71-19.75 9.83-40.16C710 737.32 493.89 615.39 526.1 376.88z"
+              transform="translate(-9.8)"
+            ></path></svg
+        ></a>
+        <span>―</span>
         <a href="/">Home</a>
-        <a href="/about.html">About</a>
-        <a href="/contact.html">Contact</a>
-        <a href="/archive.html">Archive</a>
+        <a href="/archive.html">Posts</a>
+        <a href="/playlists.html">Playlists</a>
       </nav>
-    </header>
-
-    <main role="main">
-      <h1>$title$</h1>
-      $body$
-    </main>
-
+      <article>
+        <h1>$title$</h1>
+        $body$
+      </article>
+    </content>
     <footer>
-      Site proudly generated by
-      <a href="http://jaspervdj.be/hakyll">Hakyll</a>
+      <p>logo is © 2016-2024 skiletro, all rights reserved.</p>
+      <p>site written with ❤ with haskell, hakyll, and sass</p>
+      <p>
+        i'm
+        <a href="https://github.com/skiletro/skiletro.github.io"
+          >open-source!</a
+        >
+      </p>
     </footer>
   </body>
 </html>