ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +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

12
src/components/Demo.astro
View File

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

6
src/components/Header.astro
View File

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

9
src/layouts/Layout.astro
View File

@@ -12,8 +12,13 @@ const { currentPage } = Astro.props;
<title>ob - {currentPage.title}</title>
</head>
<body>
<Header currentPage={currentPage} />
<div class="px-4 py-4">
<Header
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 />
</div>
</body>

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

@@ -9,7 +9,7 @@ export const metadata = {
date: "2021 - 2024",
slug: "mizu",
image: "/mizu-icon.svg",
hidden: true,
hidden: false,
tags: [
"Node.js",
"TypeScript",
@@ -33,6 +33,7 @@ export const metadata = {
leading a team and scaling a live application.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-ayu-highlight p-4 rounded mt-4">
<h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
<ul class="list-disc list-inside space-y-1">
@@ -44,42 +45,10 @@ 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>
<h2 class="text-2xl text-ayu-accent mb-3">Gameplay</h2>
<div
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" />
</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>