It's getting there

Raf128 · Nov 27, 2024 · 6ab55bd · 6ab55bd
1 parent 0d709e7
commit 6ab55bd
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 13 deletions.
diff --git a/howtos.html b/howtos.html
@@ -21,15 +21,6 @@
         <![endif]-->
 
         <link rel="icon" type="image/x-icon" href="src/ikwya.jpg" />
-        <script src="" async defer></script>
-        <img
-            id="ikwya"
-            onclick="window.location.href = 'index.html';"
-            height="100px"
-            width="100px"
-            src="src/ikwya.jpg"
-            style="border-radius: 30%; position: absolute; right: 4px; top: 4px"
-        />
         <h1>How To's</h1>
         <h2>If your device blows up, that's on you.</h2>
         <hr />

diff --git a/index.html b/index.html
@@ -13,11 +13,38 @@
         <link rel="stylesheet" href="./boxicons/css/boxicons.css">
     </head>
     <body>
+        <!--Menubar-->
         <div class="menu" id="menu">
         <h3 id="title">Scooliosis</h3>
-        <h3>hello</h3>
+        <h3 style="margin-left: 50px; border-left: 3px solid var(--accent);" onclick="window.location.replace('./index.html')">Home</h3>
+        <h3 onclick="window.location.replace('./howtos.html')">How To's</h3>
         </div>
 
+        <h1 style="border: 3px solid var(--accent); border-radius:20px; width: fit-content; margin: auto; margin-bottom: 100px; padding: 3vh; background: var(--maindark);">Scooliosis</h1>
+
+        <!--Projects-->
+        <div class="projects">
+            <div class="project-card">
+            <h2>Hipposite</h2>
+            <br>
+            <p>Hipposite is an ultrafast unblocker, though it is know not to always work.</p><br>
+            <p>However, when it does it is very fast indeed.</p><br>
+            <a href="https://github.com/philchhalmers8/The-40-Bible">Repo</a>
+            </div>
+            <div class="project-card">
+            <h2>HippOS</h2>
+            <br>
+            <p>HippOS is a work in progress OS simulator in the web. If you know of things like Terbium, it will be similar.</p><br>
+            <p>It is not really public yet, but you might find it.</p>
+            </div>
+            <div class="project-card">
+            <h2>Pbpc-n</h2>
+            <br>
+            <p>Paint Bucket Pushcarts is an old project of mine that is being reborn.</p><br>
+            <p>It is very much in it's infant stages, so it kinds sucks.</p><br>
+            <a href="https://pbpc-n.com">Official Website</a>
+            </div>
+        </div>
         <script src="" async defer></script>
     </body>
 </html>
diff --git a/src/scole.css b/src/scole.css
@@ -63,6 +63,7 @@ table {
     --maindark: #350f2e;
     --accent: #4e5190;
     --text: rgb(194, 222, 246);
+    --link: rgb(133, 193, 64);
 }
 .pixelify-sans-font {
     font-family: "Pixelify Sans", sans-serif;
@@ -76,18 +77,26 @@ table {
     color: var(--text);
     background-size: cover;
     background-repeat: no-repeat;
+    justify-content: center;
+    align-content: center;
+    text-align: center;
 } .menu {
     background: none;
     border: 3px solid var(--accent);
-    position: absolute;
-    z-index: 2;
+    position: relative;
     height: 50px;
     width: 99.5vw;
     background-color: var(--maindark);
     display: flex;
     flex-direction: row;
+    margin-bottom: 50px;
 } .menu > * {
     padding-left: 10px;
+    padding-right: 10px;
+    border-right: 3px solid var(--accent);
+} .menu > *:hover{
+    background: #8186e1;
+    cursor: pointer;
 } #title {
     border-right: var(--accent) solid 3px;
     background-color: var(--main);
@@ -104,4 +113,36 @@ table {
     font-size: 50px;
 } h4 {
     font-size: 25px;
-}
+} ::selection {
+    background: none;
+    color: aqua;
+} a {
+    color: var(--link)
+} a:visited {
+    color: rgb(84, 122, 41);
+}
+  .projects {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, max(30vw));
+    grid-template-rows: repeat(auto-fit, max(50vh));
+    gap: 2vw;
+    padding: 2vw;
+    justify-content: center;
+  }
+  .project-card {
+    background: var(--maindark);
+    border-radius: 20px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+    color: var(--text);
+    justify-content: center;
+    text-align: center;
+    padding-bottom: 10px;
+    min-height: 30vh;
+    height: fit-content;
+    width: fit-content;
+  }
+  .project-card:hover {
+    transform: translateY(-20px);
+    box-shadow: 0 0 50px rgb(0, 136, 255);
+  }