Updates

components/pages/Home/(sections)/AboutSection.tsx

@@ -1,7 +1,10 @@
 import H2 from "@/components/lib/layout/H2";
+import Link from "@/components/lib/layout/Link";
+import Row from "@/components/lib/layout/Row";
 import Section from "@/components/lib/layout/Section";
 import Span from "@/components/lib/layout/Span";
 import Stack from "@/components/lib/layout/Stack";
+import { UserRoundSearch } from "lucide-react";
 
 export default function AboutSection() {
     return (
@@ -12,6 +15,12 @@ export default function AboutSection() {
                     I'm passionate and dedicated to solving problems using the
                     best technologies available.
                 </Span>
+                <Link className="dotted-text" href="/about">
+                    <Row>
+                        <UserRoundSearch size={19} />
+                        <Span>Learn More About Me</Span>
+                    </Row>
+                </Link>
             </Stack>
         </Section>
     );

components/pages/about/index.tsx

@@ -13,8 +13,14 @@ export default function Main() {
                 <H1 className="leading-snug">About Me</H1>
                 <Span>
                     I'm a man of few words. My{" "}
-                    <Link href="/skills">Skills</Link> and{" "}
+                    <Link href="/skills" className="dotted-text">
-                    <Link href="/work">Work</Link> speak for themselves.
+                        Skills
+                    </Link>{" "}
+                    and{" "}
+                    <Link href="/work" className="dotted-text">
+                        Work
+                    </Link>{" "}
+                    speak for themselves.
                 </Span>
             </Stack>
         </Section>

styles/globals.css

@@ -66,3 +66,11 @@
 .twui-a.active {
     @apply !text-foreground-light dark:!text-foreground-dark font-bold;
 }
+
+.dotted-text {
+    @apply border-0 border-b-2 border-dotted border-foreground-light/20 dark:!border-foreground-dark/20 pb-1;
+}
+
+.dotted-text:hover {
+    text-decoration: none !important;
+}