release repo 01/13

index.html

@@ -10,12 +10,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="darkreader-lock">
-    <meta name="color-scheme" content="only light">
+    <meta name="color-scheme" content="dark">
 
-    <meta name="description" content="website of minish 🌾">
+    <meta name="description" content="my personal website. come look around!">
     <meta name="theme-color" content="#c4b5a1">
+    <meta property="og:image" content="https://min.rip/assets/iconb.webp">
 
-    <title>min.rip</title>
+    <title>minish</title>
 
     <script>0</script>
 </head>
@@ -26,52 +27,64 @@
     <main>
         <div id="floats">
             <div id="yapping">
-                <h1>hi, world!</h1>
-                <h2>i am minish</h2>
-                <p>hi, i go by minish online. i enjoy programming & reverse engineering.</p>
-                <p>my current main projects are</p>
+                <span>
+                    <h1 id="title">hi there!</h1>
+                    <img src="/assets/icon.webp" alt="" class="icon" id="icon-mobile">
+                </span>
+                <h2>i'm minish</h2>
+                <p>thanks for visiting! i go by minish online. i enjoy programming & reverse engineering.</p>
+                <p>a few of my recent projects are ..</p>
                 <ul>
                     <li>
-                        <a href="#">clip album</a> [wip] -
-                        search, sort, and filter through video clips
+                        <a href="https://git.min.rip/min/nixos-configs">nixos-configs</a> -
+                        dotfiles for nixos on laptop
                     </li>
                     <li>
                         <a href="https://git.min.rip/min/breeze">breeze</a> -
                         a simple, performant file upload server
                     </li>
                     <li>
-                        some more business-oriented projects w/ my friends
+                        <a href="#">clip album</a> [wip] -
+                        search, sort, and filter through video clips
                     </li>
+                    <li>
+                        <a href="https://git.min.rip/min/infra">infra</a> -
+                        infrastructure as code w/ nix
+                    </li>
+                    <li>and smaller random things when im bored</li>
                 </ul>
-                <p>and i'm looking to learn more about</p>
-                <ul id="learning">
-                    <li>rendering</li>
-                    <li>machine learning</li>
-                    <li><span title="(at a low level)">optimization</span> + simd</li>
-                    <li>networking, infrastructure, & devops</li>
-                </ul>
-                <p>some stuff i like:</p>
-                <ul id="interests">
-                    <li>omori <img src="/assets/interests/omori.png" alt=""></li>
+                <p>here's some media i like</p>
+                <ul class="interests">
+                    <li>yume nikki <img src="/assets/interests/yume.png" alt="" class="h20 pix"></li>
+                    <li>oneshot <img src="/assets/interests/oneshot.png" alt="" class="h20"></li>
                     <li>deltarune <img src="/assets/interests/deltarune.png" alt=""></li>
-                    <li>oneshot <img src="/assets/interests/oneshot.png" alt="" id="oneshot"></li>
-                    <li>inabakumori <img src="/assets/interests/inabakumori.webp" alt=""></li>
-                    <li>cafe de touhou <img src="/assets/interests/cdth.webp" alt=""></li>
-                    <li>yume nikki <img src="/assets/interests/yume.png" alt="" id="yume"></li>
+                    <li>bocchi the rock <img src="/assets/interests/kessoku.webp" alt=""></li>
+                    <li>twewy <img src="/assets/interests/twewy.webp" alt=""></li>
+                    <li>evangelion <img src="/assets/interests/eva.webp" alt=""></li>
                 </ul>
+                <details>
+                    <summary><small>and more before</small></summary>
+                    <ul class="interests">
+                        <li>inabakumori <img src="/assets/interests/inabakumori.webp" alt=""></li>
+                        <li>cafe de touhou <img src="/assets/interests/cdth.webp" alt=""></li>
+                        <li>omori <img src="/assets/interests/omori.png" alt=""></li>
+                        <li>cave story <img src="/assets/interests/doukutsu.png" alt="" class="h16 pix"></li>
+                        <li>celeste <img src="/assets/interests/celeste.png" alt=""></li>                        
+                    </ul>
+                </details>
             </div>
-            <img src="/assets/icon.webp" alt="" id="icon">
+            <img src="/assets/icon.webp" alt="" class="icon" id="icon-desktop">
         </div>
         <div id="cont">
             <hr>
             <div id="links">
                 <a href="https://git.min.rip/min">
                     <img src="/assets/links/gitea.svg" alt="gitea"
-                        title="a lot of stuff here is privated. it might look kind of empty">
+                        title="a lot of stuff here is set to private">
                 </a>
                 <a href="https://github.com/minishd">
                     <img src="/assets/links/github.svg" alt="github"
-                        title="i use my gitea more than my github, but there's some stuff here">
+                        title="i use gitea more">
                 </a>
                 <a href="https://www.last.fm/user/minishc">
                     <img src="/assets/links/lastfm.svg" alt="last.fm" title="music i listen to">

style.css

@@ -1,189 +1,216 @@
 /* written by minish - 2024-03 */
 
 :root {
-    --accent-b: #c4b5a1;
-    --accent: #908576;
+  --accent-b: #c4b5a1;
+  --accent: #908576;
 }
 
 * {
-    margin: 0px;
-    padding: 0px;
+  margin: 0px;
+  padding: 0px;
 
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 #border {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: calc(100vw - calc(2px * 2));
-    height: calc(100vh - calc(2px * 2));
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(100vw - calc(2px * 2));
+  height: calc(100vh - calc(2px * 2));
 
-    margin: 2px;
+  margin: 2px;
 
-    border: 2px solid var(--accent);
+  border: 2px solid var(--accent);
 }
 
 #bg::before {
-    position: absolute;
-    content: "";
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
 
-    /* backdrop-filter: blur(2px); */
+  /* backdrop-filter: blur(2px); */
 }
 
 #bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
 
-    background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.53)), url(/assets/bg.webp);
-    background-attachment: fixed;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+  background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.53)),
+    url(/assets/bg.webp);
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 
 main {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    font-size: 10pt;
-    line-height: 2em;
+  font-size: 10pt;
+  line-height: 2em;
 
-    padding: 18px;
-    padding-bottom: 14px;
+  padding: 18px;
+  padding-bottom: 14px;
 
-    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
+  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
 
-    border: 2px solid var(--accent);
+  border: 2px solid var(--accent);
 
-    color: #fff;
+  color: #fff;
 
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 @media only screen and (max-width: 700px) {
-    main {
-        min-width: 92dvw;
-    }
+  main {
+    min-width: 92dvw;
+  }
 
-    #bordeur {
-        border-width: 0px;
-    }
+  #border {
+    border-width: 0px;
+  }
 
-    #icon {
-        display: none;
-    }
+  #icon-desktop {
+    display: none;
+  }
 
-    #learning {
-        grid-template-columns: auto;
-    }
+  #title,
+  #icon-mobile {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .interests {
+    grid-template-columns: auto auto;
+  }
 }
 
 @media only screen and (min-width: 701px) {
-    #learning {
-        grid-template-columns: auto auto;
-    }
+  .interests {
+    grid-template-columns: auto auto auto;
+  }
+
+  #icon-mobile {
+    display: none;
+  }
+
+  #yapping {
+    max-width: 450px;
+  }
 }
 
 ::selection {
-    color: #fff;
-    background: var(--accent);
+  color: #fff;
+  background: var(--accent);
 }
 
 a:link,
 a:visited,
 a:hover,
 a:active {
-    color: var(--accent-b)
+  color: var(--accent-b);
 }
 
 h2 {
-    font-size: medium;
-    font-weight: lighter;
+  font-size: medium;
+  font-weight: lighter;
 
-    margin-bottom: 4px;
+  margin-bottom: 4px;
 }
 
 #floats {
-    display: flex;
+  display: flex;
 }
 
-#icon {
-    justify-self: right;
+#icon-desktop {
+  justify-self: right;
 
-    /* make some space around it */
-    margin-left: 24px;
+  /* make some space around it */
+  margin-left: 24px;
 
-    height: 7em;
+  height: 7em;
+}
+
+#icon-mobile {
+  height: 2.25em;
+  margin-left: 10px;
+}
+
+.icon {
+  filter: drop-shadow(1px 1px 0 var(--accent))
+    drop-shadow(-1px 1px 0 var(--accent)) drop-shadow(1px -1px 0 var(--accent))
+    drop-shadow(-1px -1px 0 var(--accent));
 }
 
 #yapping {
-    justify-self: left;
+  justify-self: left;
 }
 
 ul {
-    list-style-position: inside;
+  list-style-position: inside;
 }
 
 li {
-    /* move the bulletpoint 6px inward on itself */
-    padding-left: 6px;
+  /* move the bulletpoint 6px inward on itself */
+  padding-left: 6px;
 }
 
 #learning {
-    display: grid;
+  display: grid;
 }
 
-#interests {
-    display: grid;
-    grid-template-columns: auto auto auto;
+.interests {
+  display: grid;
 }
 
-#interests img {
-    height: 1.75em;
-    vertical-align: middle;
+.interests img {
+  height: 1.75em;
+  vertical-align: middle;
 }
-
-#interests img#yume, #interests img#oneshot {
-    height: 20px;
+.interests img.h20 {
+  height: 20px;
 }
-
-#interests img#yume {
-    image-rendering: pixelated;
+.interests img.h16 {
+  height: 16px;
+}
+.interests img.pix {
+  image-rendering: pixelated;
 }
 
 hr {
-    margin-bottom: 10px;
-    margin-top: 12px;
+  margin-bottom: 10px;
+  margin-top: 12px;
 
-    border: 1px solid var(--accent);
+  border: 1px solid var(--accent);
 }
 
 #links {
-    display: flex;
-    justify-content: space-around;
+  display: flex;
+  justify-content: space-around;
 }
 
 #links img {
-    height: 3.1em;
+  height: 3.1em;
 }
 
 #cont {
-    margin-top: auto;
+  margin-top: auto;
 }