refactor: simplifying html & removing tailwing

As the html is super basic, tailwind's defaults are unnecessary. Removing it (commented for now) allows inlining he css, removing entire .css file request and stripping 2kb of default (an unused) styles. Everything stays pretty simple for now, but the avatar is smaller (less narcissistic :D)
codenomnom · Sep 26, 2024 · a091097 · a091097
1 parent 9bd8050
commit a091097
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 93 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,10 +1,10 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 
-import tailwind from '@astrojs/tailwind';
+// import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://codenomnom.com',
-  integrations: [tailwind()],
+  // integrations: [tailwind()],
 });
diff --git a/src/layouts/main.layout.astro b/src/layouts/main.layout.astro
@@ -18,10 +18,15 @@ const { title, description = "the home page of a developer, that loves code" } =
     <meta name="viewport" content="width=device-width" />
 
     <link rel="apple-touch-icon" sizes="192x192" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/favicon-192x192.png"
+    />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="manifest" href="/site.webmanifest" />
 
     <meta name="generator" content={Astro.generator} />
@@ -36,13 +41,15 @@ const { title, description = "the home page of a developer, that loves code" } =
     <meta name="twitter:card" content="summary_large_image" />
     <title>{title}</title>
   </head>
-  <body class="flex justify-center px-0 py-8 md:p-10 lg:p-20 font-sans">
+  <body>
     <slot />
   </body>
 </html>
 <style is:global>
   html,
   body {
+    box-sizing: border-box;
+    margin: 0;
     min-height: 100vh;
     color: #222;
     line-height: 1.6;
@@ -54,4 +61,21 @@ const { title, description = "the home page of a developer, that loves code" } =
     background: #f5f5f5;
     tab-size: 4;
   }
+  body {
+    display: flex;
+    justify-content: center;
+
+    padding: 2rem 0.25rem;
+
+    @media (min-width: 768px) {
+      padding: 2rem /* 40px */;
+    }
+
+    @media (min-width: 1024px) {
+      padding: 3rem /* 80px */;
+    }
+
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,79 +6,147 @@ import GithubIcon from "../images/icons/github.astro";
 ---
 
 <MainLayout title="codenomnom">
-  <main class="flex w-full flex-col md:flex-row">
-    <section
-      class="left max-md:mb-6 md:w-2/5 lg:w-1/2 flex flex-col justify-start items-center px-6"
-    >
-      <div class="max-h-48 md:max-h-[45dvh] md:min-h-48">
-        <Image
-          src={Avatar}
-          alt="that's an image of me"
-          class="avatar rounded-full self-center"
-          width="460"
-          height="460"
-        />
-      </div>
-      <a
-        href="https://github.com/codenomnom/"
-        class="github"
-        title="my github account"
-      >
-        <GithubIcon class="w-6 h-6 mt-4" />
-      </a>
-    </section>
-    <section
-      class="right flex flex-col items-center md:block md:w-3/5 lg:w-1/2 p-6"
+  <main>
+    <div class="avatar">
+      <Image
+        src={Avatar}
+        alt="that's an image of me"
+        width="460"
+        height="460"
+      />
+      &nbsp;
+    </div>
+
+    <a
+      href="https://github.com/codenomnom/"
+      class="github-link"
+      title="my github account"
     >
-      <div
-        class="inline-block py-[4px] px-[10px] mb-8
-        uppercase font-bold text-sm text-[#333] font-montserrat tracking-[0px] leading-7
-        bg-[rgba(0,0,0,.04)]"
-      >
-        projects
-      </div>
-      <ul>
-        <li>
-          <div>quirks-mode</div>
-          <span>mostly front-end development peculiarities</span>
-        </li>
-
-        <li>
-          <div>scratch from start</div>
-          <span>how to setup your front-end project</span>
-        </li>
-
-        <li>
-          <div>next-recipes</div>
-          <span>tips, tricks and instructions on how to handle Next.js</span>
-        </li>
-
-        <li>
-          <div>windsock.dev</div>
-          <span>tail winds</span>
-        </li>
-      </ul>
-    </section>
+      <GithubIcon />
+    </a>
+
+    <div class="projects-title">projects</div>
+
+    <ul>
+      <li>
+        <div>quirks-mode</div>
+        <span>mostly front-end development peculiarities</span>
+      </li>
+
+      <li>
+        <div>scratch from start</div>
+        <span>how to setup your front-end project</span>
+      </li>
+
+      <li>
+        <div>next-recipes</div>
+        <span>tips, tricks and instructions on how to handle Next.js</span>
+      </li>
+
+      <li>
+        <div>windsock.dev</div>
+        <span>tail winds</span>
+      </li>
+    </ul>
   </main>
 </MainLayout>
 
 <style>
+  :root {
+    --gray: #333;
+    --bg-color: #f5f5f5;
+  }
   main {
-    background: #f5f5f5;
+    display: flex;
+    max-width: 360px;
+    padding-top: 1rem;
+    flex-direction: column;
+    align-items: center;
+    background: var(--bg-color);
+    position: relative;
   }
-  section {
+
+  .avatar {
+    max-height: 8rem /* 128px */;
+    min-height: 2rem /* 32px */;
     position: relative;
+    border-radius: 50%;
+
+    & img {
+      display: block; /* inline by default */
+      width: auto;
+      height: auto;
+      max-width: 100%;
+      max-height: 100%;
+      position: relative;
+      border-radius: 50%;
+      object-fit: contain;
+      filter: grayscale(1);
+      transition: filter 0.2s ease-out;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      position: absolute;
+      border-radius: 50%;
+      inset: -2px;
+      border: 2px solid var(--bg-color);
+      transition: all 0.2s ease-out;
+      pointer-events: none;
+    }
+
+    &:hover {
+      & img {
+        filter: grayscale(0);
+      }
+      &:after {
+        inset: -7px;
+        border-width: 4px;
+        border-color: var(--gray);
+      }
+    }
+  }
+
+  .github-link {
+    transition: opacity 0.3s ease;
+
+    svg {
+      width: 1.5rem /* 24px */;
+      height: 1.5rem /* 24px */;
+      margin-top: 1rem /* 16px */
+    }
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .projects-title {
+    margin: 3rem 0 2rem;
+    padding: 0.25rem 1rem;
+    background-color: rgba(0, 0, 0, 0.04);
+
+    color: var(--gray);
+    font-weight: 700;
+    font-size: 0.875rem /* 14px */;
+    line-height: 1.75rem /* 28px */;
+    text-transform: uppercase;
   }
+
   ul {
-    max-width: 400px;
+    width: 100%;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 
-    li {
-      border-bottom: 1px solid #ddd;
-      padding: 18px 0 6px 0;
+    & li {
       position: relative;
+      padding: 18px 0 6px 0;
+      border-bottom: 1px solid #ddd;
       transition: padding-left 0.3s ease;
 
-      @media (max-width: 768px) {
+      @media (max-width: 768px) { /* disables moving around */
         padding-left: 1rem;
         padding-right: 1rem;
       }
@@ -91,23 +159,17 @@ import GithubIcon from "../images/icons/github.astro";
       }
 
       & span {
-        font-size: 14px;
         z-index: 2;
         position: inherit;
+        font-size: 14px;
       }
 
       &:before {
         content: "";
         position: absolute;
-        top: -8px;
-        left: 0;
-        right: 0;
-        bottom: -8px;
-        top: 0;
-        bottom: 0;
+        inset: 0;
         z-index: 0;
         border-radius: 4px;
-
         transition: background-color 0.3s ease;
       }
 
@@ -125,25 +187,4 @@ import GithubIcon from "../images/icons/github.astro";
       }
     }
   }
-  .github {
-    transition: opacity 0.3s ease;
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-  img {
-    border: 14px solid #fff;
-    object-fit: contain;
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-  }
-  h1 {
-    font-size: 4rem;
-    font-weight: 700;
-    line-height: 1;
-    text-align: center;
-    margin-bottom: 1em;
-  }
 </style>