update phone css and final touches

1 files changed, 103 insertions, 70 deletions

diff --git a/index.html b/index.html
index db62af1..2ea52a9 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
           sans-serif;
         background-color: #fff;
         color: #121212;
+        line-height: 1.3;
       }
 
       a {
@@ -25,11 +26,22 @@
         cursor: alias;
       }
 
+      a:hover {
+        text-decoration: underline;
+        font-size: 105%;
+        transition: all 0.2s ease-in-out;
+      }
+
       a.disabled {
         color: grey;
         cursor: not-allowed;
       }
 
+      a:hover.disabled {
+        text-decoration: none;
+        font-size: 100%;
+      }
+
       .container {
         max-width: 800px;
         margin: 0 auto;
@@ -43,6 +55,26 @@
         color: #888;
       }
 
+      /* Remove massive spacing between headers and p */
+      .deployment-section > h3,
+      .project-section > h3 {
+        margin-bottom: 0.25rem;
+      }
+      .deployment-section > p,
+      .project-section > p {
+        margin-top: 0;
+      }
+      .deployment-section > ul > li > h4 {
+        margin-bottom: 0.25rem;
+      }
+      .project-section > ul > li > h4 {
+        margin-bottom: 0;
+      }
+      .project-section > ul > li > p,
+      .deployment-section > ul > li > p {
+        margin-top: 0;
+      }
+
       /* Dark mode theme support */
       @media (prefers-color-scheme: dark) {
         body {
@@ -54,6 +86,17 @@
           color: #66aaff;
         }
       }
+
+      /* Phone support */
+      @media (max-width: 600px) {
+        .container {
+          padding: 0 20px 20px 20px;
+        }
+
+        ul {
+          padding-left: 20px;
+        }
+      }
     </style>
   </head>
 
@@ -76,23 +119,22 @@
       </p>
 
       <p>
-        If you want to contact me for any reason, don't hesistate to
-        <a href="mailto:mfoiani@mfoi.dev"> email me</a>!
+        If you want to contact me for any reason, don't hesistate to email me at
+        <a href="mailto:mfoiani@mfoi.dev">mfoiani@mfoi.dev</a>!
       </p>
     </header>
 
     <hr />
 
     <main>
-      <article aria-label="Deployments">
-        <h3>My Deployments</h3>
-        <p>
-          Some of these sites are public so take a look!
-          <br />There's also some secret sites at x.mfoi.dev, if you're up for
-          the challenge.
-        </p>
-        <section aria-label="Deployment List">
-          <ul>
+      <article>
+        <section aria-label="Deployment List" class="deployment-section">
+          <h3>My Deployments</h3>
+          <p>
+            Here are some of my web deployments hosted on my server at home.
+            <br />Some are public, so please explore:
+          </p>
+          <ul class="deployment-list">
             <li>
               <h4>
                 <a target="_blank" href="https://git.mfoi.dev">git.mfoi.dev</a>
@@ -178,7 +220,7 @@
             </li>
             <li>
               <h4>
-                <a class="disabled" target="_blank" href="#">mail.mfoi.dev</a>
+                <a class="disabled" href="#WIP">mail.mfoi.dev</a>
               </h4>
               <p>
                 This is my own personal email server setup using Luke Smith's
@@ -195,7 +237,7 @@
             </li>
             <li>
               <h4>
-                <a class="disabled" href="#" a>blog.mfoi.dev [WIP]</a>
+                <a class="disabled" href="#WIP" a>blog.mfoi.dev [WIP]</a>
               </h4>
               <p>
                 My personal blog where I write about tech, life, and random
@@ -205,18 +247,18 @@
             </li>
           </ul>
         </section>
-      </article>
 
-      <article aria-label="Projects">
-        <h3>My Projects</h3>
-        <p>
-          Below are some projects I have highlighted, mostly from my coursework.
-        </p>
-        <section aria-label="Project List">
+        <section aria-label="Project List" class="project-section">
+          <h3>My Projects</h3>
+          <p>
+            Here are some significant projects I have done, mostly from my
+            coursework:
+          </p>
           <ul>
             <li>
-              <h4>
-                Weenix OS (<a
+              <h4>Weenix OS</h4>
+              <p>
+                (<a
                   target="_blank"
                   href="https://www.youtube.com/watch?v=IlQnA11jGYM"
                   >video</a
@@ -226,15 +268,15 @@
                   href="https://www.git.mfoi.dev/weenix.git/about/"
                   >code</a
                 >)
-              </h4>
-              <p>
+                <br />
                 An x86 operating system in C from scratch, including a
                 scheduler, filesystem, and (virtual) memory manager.
               </p>
             </li>
             <li>
-              <h4>
-                Investigation into the Chaotic Fermi Pasta Ulam Chain (<a
+              <h4>Investigation into the Chaotic Fermi Pasta Ulam Chain</h4>
+              <p>
+                (<a
                   target="_blank"
                   href="https://drive.mfoi.dev/s/cb2G495pyWdd7WT"
                   >paper</a
@@ -249,16 +291,15 @@
                   href="https://www.git.mfoi.dev/computational-physics.git/tree/final-project/fpu.jl"
                   >code</a
                 >)
-              </h4>
-              <p>
+                <br />
                 Chaotic simulations in Julia investigating a power law between a
                 Lyapunov exponent and time to equipartition.
-                <br />
               </p>
             </li>
             <li>
-              <h4>
-                Ocean Simulator (<a
+              <h4>Ocean Simulator</h4>
+              <p>
+                (<a
                   target="_blank"
                   href="https://youtube.com/playlist?list=PLAF6pqeeEdDFOsMCrmeBBdutyUhxff_NP&si=BntkL-2Jnu_5OvHC"
                   >videos</a
@@ -268,16 +309,15 @@
                   href="https://www.git.mfoi.dev/ocean-simulation.git/tree/"
                   >code</a
                 >)
-              </h4>
-              <p>
+                <br />
                 A project in C++ leveraging the GPU (OpenGL) and the fourier
                 series to efficiently and accurately simulate waves.
               </p>
             </li>
             <li>
-              <h4>
-                Ultrasonic Linklayer
-                <a
+              <h4>Ultrasonic Linklayer</h4>
+              <p>
+                (<a
                   target="_blank"
                   href="https://www.youtube.com/watch?v=N2Lnv_yb9E8"
                   >video</a
@@ -286,18 +326,17 @@
                   target="_blank"
                   href="https://www.git.mfoi.dev/basic-ultrasonic-linklayer.git/about/"
                   >code</a
-                >
-              </h4>
-              <p>
+                >)
+                <br />
                 A link-layer protocol in Python allowing for communication of
                 data among nodes using silent soundwaves (frequencies that
                 computers can pick up but humans cannot hear).
               </p>
             </li>
             <li>
-              <h4>
-                Neural Oscilliscope
-                <a
+              <h4>Neural Oscilliscope</h4>
+              <p>
+                (<a
                   target="_blank"
                   href="https://drive.mfoi.dev/s/oDmMsL98JzdQ2gw"
                   >paper</a
@@ -306,39 +345,32 @@
                   target="_blank"
                   href="https://www.git.mfoi.dev/oscilloscope.git/about/"
                   >code</a
-                >
-              </h4>
-              <p>
+                >)
+                <br />
                 A neural net in Python applied on a oscilloscope to more
                 accurately tune instruments in thermodynamically diverse
                 environments.
               </p>
             </li>
             <li>
-              <h4>
-                Implementing TCP/IP
-                <a
-                  target="_blank"
-                  href="https://drive.mfoi.dev/s/oDmMsL98JzdQ2gw"
-                  >paper</a
-                >,
-                <a
+              <h4>Implementing TCP/IP</h4>
+              <p>
+                (<a
                   target="_blank"
-                  href="https://www.git.mfoi.dev/oscilloscope.git/about/"
+                  href="https://www.git.mfoi.dev/iptcp.git/about/"
                   >code</a
-                >
-              </h4>
-              <p>
-                A lightweight, performant implementation of the TCP/IP stack in
-                Go, following the exact spec of
+                >)
+                <br />
+                A lightweight, multithreaded client/server implementation of the
+                TCP/IP stack in Go, following the exact spec of
                 <a href="https://www.ietf.org/rfc/rfc793.txt">RFC 793</a>.
               </p>
             </li>
 
             <li>
-              <h4>
-                Music Streamer
-                <a
+              <h4>Music Streamer</h4>
+              <p>
+                (<a
                   target="_blank"
                   href="https://drive.mfoi.dev/s/oDmMsL98JzdQ2gw"
                   >paper</a
@@ -347,11 +379,10 @@
                   target="_blank"
                   href="https://www.git.mfoi.dev/snowcast-streamer.git/about/"
                   >code</a
-                >
-              </h4>
-              <p>
-                A multithreaded server and client package in C to stream music
-                in UDP and broadcast the channel list in TCP.
+                >)
+                <br />
+                A multithreaded server/client package in C to stream music in
+                UDP and broadcast the channel list in TCP.
               </p>
             </li>
           </ul>
@@ -361,10 +392,12 @@
 
     <footer>
       <p>
-        Thats all? Yup, I really believe that "comparison is the thief of joy",
-        and I will not partake in it.
+        Thats all? Yup, I really believe in minimalism, privacy, and that
+        "comparison is the thief of joy". I'm not here to impress, just to
+        publicize what I want to be public.
+        <br />
+        © 2025 Michael Foiani
       </p>
-      <p>© 2025 Michael Foiani</p>
     </footer>
   </body>
 </html>