Merge pull request #1 from hex248/dev

mizu and prayerbud

public/prayerbud-icon.svg

@@ -0,0 +1,8 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="192" height="192">
+	<defs>
+		<image  width="192" height="192" id="img1" href="data:image/png;base64,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"/>
+	</defs>
+	<style>
+	</style>
+	<use id="Background" href="#img1" x="0" y="0"/>
+</svg>

src/pages/index.astro

@@ -96,12 +96,12 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
         border-color: var(--ayu-blue-600);
     }
 
-    .github-icon-link {
+    .upper-icon-link {
         color: var(--ayu-accent);
         transition: color 0.2s ease;
     }
 
-    .github-icon-link:hover {
+    .upper-icon-link:hover {
         color: var(--ayu-red-500);
     }
 </style>
@@ -113,7 +113,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
             href="https://github.com/hex248"
             target="_blank"
             rel="noopener noreferrer"
-            class="github-icon-link flex items-center gap-1"
+            class="upper-icon-link flex items-center gap-1"
             title="GitHub Profile"
         >
             <Icon name="mdi:github" class="w-5 h-5" />
@@ -121,7 +121,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
         </a>
         / <a
             href="mailto:04oliverbryan@gmail.com"
-            class="github-icon-link flex items-center gap-1"
+            class="upper-icon-link flex items-center gap-1"
             title="Email"
         >
             <Icon name="mdi:email-outline" class="w-5 h-5" />
@@ -131,7 +131,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
             href="/cv.pdf"
             target="_blank"
             rel="noopener noreferrer"
-            class="github-icon-link flex items-center gap-1"
+            class="upper-icon-link flex items-center gap-1"
             title="Download CV"
         >
             <Icon name="mdi:file-document-outline" class="w-5 h-5" />
@@ -143,8 +143,8 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
             <span class="text-ayu-red-500 font-500">Name: </span>Oliver Bryan
         </li>
         <li>
-            <span class="text-ayu-blue-500 font-500">Role: </span>Software
-            Developer Junior
+            <span class="text-ayu-blue-500 font-500">Role: </span>Junior
+            Software Developer
         </li>
         <li>
             <span class="text-ayu-red-500 font-500">Education: </span>Final Year

src/pages/projects/mizu.astro

@@ -1,5 +1,6 @@
 ---
 import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
 
 export const metadata = {
     title: "MIZU",
@@ -32,10 +33,8 @@ export const metadata = {
         leading a team and scaling a live application.
     </p>
 
-    <p>images here</p>
-
     <div class="bg-ayu-highlight p-4 rounded mt-4">
-        <h2 class="text-lg text-ayu-accent mb-2">Technologies</h2>
+        <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
         <ul class="list-disc list-inside space-y-1">
             <li>Node.js</li>
             <li>TypeScript</li>
@@ -45,4 +44,87 @@ export const metadata = {
             <li>AWS S3</li>
         </ul>
     </div>
+
+    <div class="mt-4">
+        <h2 class="text-2xl text-ayu-accent mb-3">Pre-Production</h2>
+        <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+        >
+            <Demo
+                image="/images/mizu/forage-design.png"
+                title="Forage Design"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/forage-locations.png"
+                title="Forage Locations"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/quests-planning.png"
+                title="Quests Planning"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/update-planning.png"
+                title="Update Management"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/pack-planning.png"
+                title="Pack System"
+                type="boxed"
+            />
+        </div>
+    </div>
+
+    <div class="mt-4">
+        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
+        <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+        >
+            <Demo
+                image="/images/mizu/card.png"
+                title="Card (Large image)"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/card-fighter.png"
+                title="Card (Fighter)"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/card-details.png"
+                title="Card (Details)"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/collection1.png"
+                title="Collection"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/collection2.png"
+                title="Collection with sorting and filtering"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/current-trade.png"
+                title="Ongoing Trade"
+                type="boxed"
+            />
+            <Demo
+                image="/images/mizu/complete-trade.png"
+                title="Completed Trade"
+                type="boxed"
+            />
+            <Demo image="/images/mizu/forage.png" title="Forage" type="boxed" />
+            <Demo
+                image="/images/mizu/inventory.png"
+                title="Inventory"
+                type="boxed"
+            />
+            <Demo image="/images/mizu/quests.png" title="Quests" type="boxed" />
+        </div>
+    </div>
 </ProjectPage>

src/pages/projects/prayerbud.astro

@@ -0,0 +1,96 @@
+---
+import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
+
+export const metadata = {
+    title: "PrayerBud",
+    description:
+        "A faith-based social platform facilitating sharing of support and prayers within communities.",
+    date: "2025",
+    slug: "prayerbud",
+    image: "/prayerbud-icon.svg",
+    url: "https://prayerbud.co.uk",
+    hidden: false,
+    tags: ["Web", "React", "TypeScript", "PostgreSQL", "Databases"],
+    type: "professional",
+};
+---
+
+<ProjectPage metadata={metadata}>
+    <div class="space-y-4 mb-4">
+        <p>
+            Pray Together & Grow Together: Join a diverse community of
+            individuals from around the world who are passionate about prayer
+            and spiritual growth. Create and share prayer requests with your
+            PrayerBud community who are ready to offer support, encouragement,
+            and heartfelt prayers.
+        </p>
+        <p>
+            For prayer teams or churches, the app offers a streamlined way to
+            manage and organise prayer requests, ensuring that no request goes
+            unnoticed.
+        </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="bg-ayu-highlight p-4 rounded">
+            <h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
+            <ul class="list-disc list-inside space-y-1">
+                <li>Create and manage prayer networks</li>
+                <li>Manage prayer communities</li>
+                <li>Intimate engagement with friends and family</li>
+                <li>Admin dashboard for managing users and user content</li>
+                <li>Responsive design for mobile and desktop</li>
+            </ul>
+        </div>
+
+        <div class="bg-ayu-highlight p-4 rounded">
+            <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
+            <ul class="list-disc list-inside space-y-1">
+                <li>Next.js</li>
+                <li>React</li>
+                <li>TypeScript</li>
+                <li>PostgreSQL</li>
+                <li>Node.js</li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="mt-4">
+        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
+        <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+        >
+            <Demo
+                image="/images/prayerbud/pre-login.png"
+                title="Front page / pre-login"
+                type="boxed"
+            />
+            <Demo
+                image="/images/prayerbud/post-login.png"
+                title="Post-login"
+                type="boxed"
+            />
+            <Demo
+                image="/images/prayerbud/create-network.png"
+                title="Create Network"
+                type="boxed"
+            />
+            <Demo
+                image="/images/prayerbud/welcome-to-network.png"
+                title="Welcome to your Network"
+                type="boxed"
+            />
+            <Demo
+                image="/images/prayerbud/prayer-card.png"
+                title="Create Prayer Card"
+                type="boxed"
+            />
+            <Demo
+                image="/images/prayerbud/dashboard.png"
+                title="Admin Dashboard"
+                type="boxed"
+            />
+        </div>
+    </div>
+</ProjectPage>

src/pages/projects/shleep.astro

@@ -1,5 +1,6 @@
 ---
 import ProjectPage from "../../components/ProjectPage.astro";
+import Demo from "../../components/Demo.astro";
 
 export const metadata = {
     title: "Shleep",
@@ -21,10 +22,8 @@ export const metadata = {
         help aid you and your party to protect a sleeping child from nightmares.
     </p>
 
-    <p>images here</p>
-
     <div class="bg-ayu-highlight p-4 rounded mt-4">
-        <h2 class="text-lg text-ayu-accent mb-2">Technologies</h2>
+        <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
         <ul class="list-disc list-inside space-y-1">
             <li>Unity</li>
             <li>C#</li>
@@ -33,4 +32,18 @@ export const metadata = {
             <li>Visual Effects Graph</li>
         </ul>
     </div>
+
+    <div class="mt-4">
+        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
+        <div
+            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+        >
+            <Demo image="/images/shleep/1.png" title="1" type="boxed" />
+            <Demo image="/images/shleep/2.png" title="2" type="boxed" />
+            <Demo image="/images/shleep/3.png" title="3" type="boxed" />
+            <Demo image="/images/shleep/4.png" title="4" type="boxed" />
+            <Demo image="/images/shleep/5.png" title="5" type="boxed" />
+            <Demo image="/images/shleep/6.png" title="6" type="boxed" />
+        </div>
+    </div>
 </ProjectPage>