ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-08 10:43:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from hex248/dev

Browse Source 
public mizu page & new layout
This commit is contained in:
Oliver Bryan
2025-10-26 10:25:58 +00:00
committed by GitHub
parent 23fcc778b9 3ce340bb9b
commit a84b7bb13e
6 changed files with 68 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/mizu/card.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 118 KiB

BIN
public/images/mizu/inventory.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 31 KiB

22
src/components/Demo.astro
View File

@@ -8,19 +8,17 @@ interface Props {
const { image, title, type = "simple" } = Astro.props; const { image, title, type = "simple" } = Astro.props;
--- ---
{type === "boxed" ? ( {
<div class="border demo-border"> type === "boxed" ? (
<span>{title}</span> <div class="border demo-border">
<span>{title}</span>
<img src={image} alt={title} class="object-cover w-full" />
</div>
) : (
<img <img
src={image} src={image}
alt={title} alt={title}
class="object-cover" class="w-full h-full object-cover demo-border"
/> />
</div> )
) : ( }
<img
src={image}
alt={title}
class="w-full h-full object-cover demo-border"
/>
)}

10
src/components/Header.astro
View File

@@ -1,5 +1,5 @@
--- ---
const { currentPage } = Astro.props; const { currentPage, innerClass } = Astro.props;
const pages = [ const pages = [
{ title: "home", path: "/" }, { title: "home", path: "/" },
@@ -24,10 +24,10 @@ const pages = [
</style> </style>
<header> <header>
<div <div class="w-full flex items-center justify-between border-ayu-gutter">
class="w-full flex items-center justify-between px-4 py-2 border-b-1 border-ayu-gutter" <div
> class={`flex items-center border-b-1 lg:border-1 border-ayu-gutter py-2 ${innerClass}`}
<div class="flex items-center"> >
<a href="/" class="flex items-center gap-2"> <a href="/" class="flex items-center gap-2">
<img <img
src="/favicon.svg" src="/favicon.svg"

9
src/layouts/Layout.astro
View File

@@ -12,8 +12,13 @@ const { currentPage } = Astro.props;
<title>ob - {currentPage.title}</title> <title>ob - {currentPage.title}</title>
</head> </head>
<body> <body>
<Header currentPage={currentPage} /> <Header
<div class="px-4 py-4"> currentPage={currentPage}
innerClass="px-4 max-w-6xl w-6xl mx-auto"
/>
<div
class="px-4 py-4 max-w-6xl lg:border-l-1 lg:border-r-1 lg:border-b-1 border-ayu-gutter mx-auto"
>
<slot /> <slot />
</div> </div>
</body> </body>

90
src/pages/projects/mizu.astro
View File

@@ -9,7 +9,7 @@ export const metadata = {
date: "2021 - 2024", date: "2021 - 2024",
slug: "mizu", slug: "mizu",
image: "/mizu-icon.svg", image: "/mizu-icon.svg",
hidden: true, hidden: false,
tags: [ tags: [
"Node.js", "Node.js",
"TypeScript", "TypeScript",
@@ -33,53 +33,22 @@ export const metadata = {
leading a team and scaling a live application. leading a team and scaling a live application.
</p> </p>
<div class="bg-ayu-highlight p-4 rounded mt-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2> <div class="bg-ayu-highlight p-4 rounded mt-4">
<ul class="list-disc list-inside space-y-1"> <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
<li>Node.js</li> <ul class="list-disc list-inside space-y-1">
<li>TypeScript</li> <li>Node.js</li>
<li>Express.js</li> <li>TypeScript</li>
<li>Discord.js</li> <li>Express.js</li>
<li>PostgreSQL</li> <li>Discord.js</li>
<li>AWS S3</li> <li>PostgreSQL</li>
</ul> <li>AWS S3</li>
</div> </ul>
<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> </div>
<div class="mt-4"> <div class="mt-4">
<h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2> <h2 class="text-2xl text-ayu-accent mb-3">Gameplay</h2>
<div <div
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
> >
@@ -127,4 +96,37 @@ export const metadata = {
<Demo image="/images/mizu/quests.png" title="Quests" type="boxed" /> <Demo image="/images/mizu/quests.png" title="Quests" type="boxed" />
</div> </div>
</div> </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>
</ProjectPage> </ProjectPage>