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

fixed spacing in header area

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-14 23:31:53 +00:00
parent 6e5e73bb2b
commit f8f1e291c4
2 changed files with 40 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AIPrompt.astro
View File

@@ -17,7 +17,7 @@ const fullUrl = url + encodeURIComponent(AI_SUMMARY_PROMPT);
href={fullUrl}
target="_blank"
rel="noopener noreferrer"
class="text-[var(--ayu-gutter)] hover:text-[var(--ayu-accent)] transition-colors duration-150"
class="text-fg hover:text-[var(--ayu-accent)] transition-colors duration-150"
title={title}
>
<Icon name={icon} class="w-7 h-7" />

81
src/pages/index.astro
View File

@@ -80,8 +80,6 @@ projects.forEach((project) => {
allTags.add(tag);
});
});
const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
---
<style>
@@ -110,39 +108,9 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
</style>
<Layout currentPage={{ title: "home", path: "/" }}>
<div class="flex justify-between items-start mb-4">
<div class="flex justify-between items-start mb-2">
<div class="flex flex-col gap-1">
<h2 class="text-2xl font-600 text-ayu-green-500">ABOUT</h2>
<div class="flex flex-col items-end gap-2">
<p class="text-ayu-gutter text-lg">Ask AI about me</p>
<div class="flex gap-4 items-center">
<AIPrompt
url="https://chat.openai.com/?q="
title="Ask ChatGPT"
icon="simple-icons:openai"
/>
<AIPrompt
url="https://claude.ai/new?q="
title="Ask Claude"
icon="simple-icons:claude"
/>
<div class="relative flex items-center">
<button
id="copy-prompt-btn"
class="text-[var(--ayu-gutter)] hover:text-[var(--ayu-accent)] transition-colors duration-150 cursor-pointer flex items-center"
title="Copy prompt to clipboard"
>
<Icon name="mdi:content-copy" class="w-7 h-7" />
</button>
<span
id="copy-tooltip"
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-sm bg-[var(--ayu-popup)] text-[var(--ayu-fg)] border border-[var(--ayu-gutter-dim)] rounded opacity-0 pointer-events-none transition-opacity duration-150 whitespace-nowrap"
>
Copied to clipboard
</span>
</div>
</div>
</div>
</div>
<span class="flex flex-wrap gap-2 mb-2">
<a
href="https://github.com/hex248"
@@ -173,6 +141,38 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
CV
</a>
</span>
</div>
<div id="ask-ai" class="flex flex-col items-end gap-2">
<p class="text-fg text-lg">Ask AI about me</p>
<div class="flex gap-4 items-center">
<AIPrompt
url="https://chat.openai.com/?q="
title="Ask ChatGPT"
icon="simple-icons:openai"
/>
<AIPrompt
url="https://claude.ai/new?q="
title="Ask Claude"
icon="simple-icons:claude"
/>
<div class="relative flex items-center">
<button
id="copy-prompt-btn"
class="text-fg hover:text-[var(--ayu-accent)] transition-colors duration-150 cursor-pointer flex items-center"
title="Copy prompt to clipboard"
>
<Icon name="mdi:content-copy" class="w-7 h-7" />
</button>
<span
id="copy-tooltip"
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-sm bg-[var(--ayu-popup)] text-[var(--ayu-fg)] border border-[var(--ayu-gutter-dim)] rounded opacity-0 pointer-events-none transition-opacity duration-150 whitespace-nowrap"
>
Copied to clipboard
</span>
</div>
</div>
</div>
</div>
<ul class="list-disc ml-4 mb-2">
<li>
<span class="text-ayu-red-500 font-500">Name: </span>Oliver Bryan
@@ -197,15 +197,6 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
<span class="text-ayu-blue-500 font-500">Age: </span>
<TimeSince date={new Date("11:47:00 2004-11-04")} client:react />
</li>
<!-- <li>
<span class="text-ayu-red-500 font-500">Hobbies: </span>Music,
Travel, Badminton, <a
href="https://photos.oliverbryan.com"
target="_blank"
rel="noopener noreferrer"
class="inline-link">Photography</a
>
</li> -->
</ul>
{
@@ -215,7 +206,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
<h2 class="text-2xl font-600 text-ayu-green-500 mt-6">
PROFESSIONAL PROJECTS
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 py-2">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 pt-2">
{projects
.filter((project) => project.type === "professional")
.map((project) => (
@@ -237,7 +228,7 @@ const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
<h2 class="text-2xl font-600 text-ayu-green-500 mt-6">PERSONAL PROJECTS</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 py-2">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 pt-2">
{
projects
.filter((project) => project.type === "personal")