feat: styles & content changes

src/components/Footer.astro

@@ -57,6 +57,7 @@ const year = new Date().getFullYear()
 
 <style>
   footer {
+    padding: 0;
     display: grid;
     gap: 1em;
     grid-auto-flow: row;

src/layouts/common.css

@@ -1,6 +1,14 @@
-.astro-code {
-  padding: 1em;
+small {
+  font-size: var(--font-size-sm);
+}
+
+.inline-code {
+  padding: 0.01rem 0.4rem;
   border-radius: 1em;
+  font-size: var(--font-size-sm);
+  background-color: var(--color-border);
+  display: inline-block;
+  vertical-align: middle;
 }
 
 img {
@@ -11,3 +19,22 @@ img {
   object-fit: contain;
   height: auto;
 }
+
+details {
+  display: block;
+  padding: 1em;
+  border: 2px solid var(--color-border);
+  border-radius: 5px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 3px solid var(--color-brand-complement-dark);
+
+  @media (prefers-color-scheme: dark) {
+    border-left-color: var(--color-brand-complement);
+  }
+
+  summary {
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+  }
+}

src/layouts/variables.css

@@ -16,7 +16,6 @@
 
   --color-brand-complement: orange;
   --color-brand-complement-dark: #a36a00;
-  /* --color-brand-complement-dark: #f27348; */
 
   --ayo-gradient: linear-gradient(45deg, #3054bf, #416fff);
   --text-color-dark: #404040;

src/pages/about.astro

@@ -6,11 +6,27 @@ import Footer from '../components/Footer.astro'
 <Layout title="About" description="About Ayo Ayco and how to contact">
   <main>
     <h1>Ayo Ayco</h1>
+    <p>ᜈᜄ᜔ᜋᜓᜎ ᜐ ᜉᜒᜇ̢̟ᜎᜐ᜔ ᜅ᜔ ᜐᜒᜎᜅᜈᜈ᜔</p>
     <p>
-      Frontend guy who likes server adventures & works w/ linux. Looking to
-      specialize in web perf, but mostly feels like an impostor for now. Has
-      hobby projects.
+      Frontend guy who likes server adventures, coding, and linux. Passionate
+      about the indieweb, digital sovereignty, and kindness.
     </p>
+    <details>
+      <summary>
+        Hey there! I interrupt this page for a message from this website's
+        sponsor...
+      </summary>
+      <p>
+        <strong>Myself!</strong> Thank you for wanting to read a bit more about me.
+        <!--Some people shy away from writing things about themselves, and thus looks negatively at others who do. But that shouldn't be the case!-->
+        I find it helpful to have a single canonical <code class="inline-code"
+          >/about</code
+        > page with these significant information. It is always a work in progress
+        (like me), and to be honest, I do this mostly to remind myself as the world
+        continue to impose identity onto us. Cheers to celebrating differences!
+      </p>
+      <small> Now back to the rest of the web page... </small>
+    </details>
     <p>
       I am a newbie engineering manager at a large global bank headquartered in
       Amsterdam. I'm also a certified software architecture professional
@@ -18,8 +34,8 @@ import Footer from '../components/Footer.astro'
     </p>
 
     <p>
-      In my spare time, I have fun building <a href="/showcase"
-        >hobby projects</a
+      In my spare time, when I have energy, I find it fun building <a
+        href="/showcase">hobby projects</a
       >, running self-hosted services at <a href="https://ayo.run">ayo.run</a>,
       and volunteering to <a
         href="https://ayos.blog/why-fediverse/"
@@ -31,9 +47,10 @@ import Footer from '../components/Footer.astro'
     </p>
 
     <p>
-      In a previous life, I volunteered my weekends into leading small groups of
-      students, planting a church, and facilitating focus group discussions with
-      entrepreneurial founders, where I learned a lot about multi-generational
+      In a previous life, I've volunteered much of my weekends into teaching
+      kids, leading small groups of students, planting a church, and
+      facilitating focus group discussions with entrepreneurial founders, where
+      I learned a lot about the power of multi-generational & multi-cultural
       communities.
     </p>
 

src/pages/index.astro

@@ -43,6 +43,7 @@ import now from '../constants/now.json'
         I care about the <em>Web</em>, and I love to <em>create</em> stuff to <em
           >inspire</em
         > and <em>serve</em> others.
+        <a href="/about">More?</a>
       </p>
     </section>
     <section class="cards-section">
@@ -144,10 +145,23 @@ import now from '../constants/now.json'
     p {
       margin: 0;
       font-size: var(--font-size-lg);
+
+      & a {
+        font-size: var(--font-size-base);
+        color: var(--text-color-faded);
+
+        @media (prefers-color-scheme: dark) {
+          color: var(--text-color-light-faded);
+        }
+      }
     }
 
     em {
       font-weight: bold;
+    }
+
+    em,
+    a:hover {
       color: var(--color-brand-complement-dark);
 
       @media (prefers-color-scheme: dark) {