feat: testing out art page

Author: mathletedev

src/components/SideBar.astro

@@ -10,6 +10,7 @@ import NavCard from "./NavCard.astro";
     <NavCard title="Skills" href="/skills" colour="#fab387" />
     <NavCard title="Awards" href="/awards" colour="#f9e2af" />
     <NavCard title="Work" href="/work" colour="#a6e3a1" />
+    <NavCard title="Art" href="/art" colour="#89dceb" />
     <NavCard title="Blog" href="/blog" colour="#89b4fa" />
     <NavCard title="Contact" href="/contact" colour="#b4befe" />
 </nav>

src/components/TabBar.astro

@@ -18,6 +18,7 @@ const { show } = Astro.props as Props;
     <NavLink href="/skills" colour="#fab387" />
     <NavLink href="/awards" colour="#f9e2af" />
     <NavLink href="/work" colour="#a6e3a1" />
+    <NavLink href="/art" colour="#89dceb" />
     <NavLink href="/blog" colour="#89b4fa" />
     <NavLink href="/contact" colour="#b4befe" />
 </nav>

src/pages/art.astro

@@ -0,0 +1,13 @@
+---
+import Base from "../layouts/Base.astro";
+import Content from "../layouts/Content.astro";
+---
+
+<Base title="Art">
+    <Content title="Art" prev="/work" next="/blog">
+        <img
+            class="mx-auto h-32 w-32 object-cover"
+            src="https://www.dropbox.com/scl/fi/67cieytlxtu49dxhgqa5r/tennis.jpg?rlkey=wlko5d19e2g835fcp8psl5ivh&st=8wrlmca3&raw=1"
+        />
+    </Content>
+</Base>

src/pages/blog.astro

@@ -11,7 +11,7 @@ const posts = await Astro.glob<Frontmatter>("./blog/*.mdx");
 ---
 
 <Base title="Blog">
-    <Content title="Blog" prev="/work" next="/contact">
+    <Content title="Blog" prev="/art" next="/contact">
         <div class="mx-auto mt-8 md:mt-16">
             {
                 posts

src/pages/work.astro

@@ -5,7 +5,7 @@ import Content from "../layouts/Content.astro";
 ---
 
 <Base title="Work">
-    <Content title="Work" prev="/awards" next="/blog">
+    <Content title="Work" prev="/awards" next="/art">
         <Scroll />
     </Content>
 </Base>