light7734/bonfire
1
1
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity

its all coming together
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
light7734 2025-10-19 23:40:22 +03:30
parent 9fe95cf36e
commit 3430f6c8b5
Signed by: light7734
GPG key ID: 8C30176798F1A6BA
8 changed files with 152 additions and 202 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
src/routes/+page.svelte
View file

@ -2,10 +2,14 @@
function json_to_project(json: any) {
return {
title: json.title,
icon: json.icon,
headline: json.headline,
forge: json.forge,
codeberg: json.codeberg,
github: json.github,
gitlab: json.gitlab
gitlab: json.gitlab,
docs: json.docs,
gallery: json.gallery
};
}
@ -18,29 +22,11 @@
import * as bonfire from './projects/bonfire.json';
import * as hikari from './projects/hikari.json';
import { Github, Gitlab, Code, GitBranch } from 'lucide-svelte';
const light_data = json_to_project(light);
const dazzle_data = json_to_project(dazzle);
const bonfire_data = json_to_project(bonfire);
const hikari_data = json_to_project(hikari);
const mirrors = [
{ label: 'Github', url: 'https://github.com/light7734/light', iconComponent: Github },
{ label: 'Gitlab', url: 'https://gitlab.com/light7734/light', iconComponent: Gitlab },
{ label: 'Codeberg', url: 'https://codeberg.org/light7734/light', iconComponent: Code }
];
const gallery = [
'https://placekittens.com/720/480',
'https://placekittens.com/720/481',
'https://placekittens.com/720/482',
'https://placekittens.com/720/483',
'https://placekittens.com/720/484',
'https://placekittens.com/720/484'
];
const features = ['MSAA', 'SSAO', 'PBR Lighting'];
const lorem_ipsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
</script>
@ -48,9 +34,8 @@
<div
class="min-h-screen bg-light-bg text-light-fg transition-colors duration-300 dark:bg-dark-bg dark:text-dark-fg"
>
<ThemeToggle />
<main class="bg-card p-8 transition-all duration-300 ease-out">
<Bio description={lorem_ipsum} avatar="/pfp.jpg" />
<Bio />
<br />
@ -66,52 +51,16 @@
<br />
<Project
title="Light"
headline="Dependency free, cross-platform and feature-rich 3D game engine."
description={lorem_ipsum}
icon="/light.svg"
data={light_data}
{mirrors}
{gallery}
{features}
/>
<Project description={lorem_ipsum} data={light_data} />
<br />
<Project
title="Dazzle"
headline="Best way to learn is to teach, here be my articles."
description={lorem_ipsum}
icon="/signature.svg"
data={dazzle_data}
{mirrors}
{gallery}
{features}
/>
<Project description={lorem_ipsum} data={dazzle_data} />
<br />
<Project
title="BONFIRE"
headline="You're enjoying its warmth on your eyes! :D"
description={lorem_ipsum}
icon="/signature.svg"
data={bonfire_data}
{mirrors}
{gallery}
{features}
/>
<Project description={lorem_ipsum} data={bonfire_data} />
<br />
<Project
title="HIKARI"
headline="Toy raytracer written in Rust using Vulkan"
description={lorem_ipsum}
icon="/hikari.svg"
data={hikari_data}
{mirrors}
{gallery}
{features}
/>
<Project description={lorem_ipsum} data={hikari_data} />
<br />
<div class="relative left-1/2 flex w-screen max-w-none -translate-x-1/2 items-center">
@ -125,27 +74,11 @@
</div>
<br />
<Project
title="BITWYRE"
headline="C++ Engineer"
description={lorem_ipsum}
icon="/bitwyre-white.svg"
{mirrors}
{gallery}
{features}
/>
<br />
<Project
title="Systematic Trading Group"
headline="C++ Engineer"
description={lorem_ipsum}
icon=""
{mirrors}
{gallery}
{features}
/>
<br />
<!-- <Project headline="C++ Engineer" description={lorem_ipsum} /> -->
<!-- <br /> -->
<!---->
<!-- <Project headline="C++ Engineer" description={lorem_ipsum} /> -->
<!-- <br /> -->
<div class="relative left-1/2 flex w-screen max-w-none -translate-x-1/2 items-center">
<div class="border-border flex-grow border-t border-t-dark-neutral"></div>

52
src/routes/bio.svelte
View file

@ -1,25 +1,53 @@
<script lang="ts">
import TiltCard from './tiltcard.svelte';
export let avatar: string;
export let description: string;
const lorem_ipsum =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum';
let tiltX = 0;
let tiltY = 0;
function handleMouseMove(event: MouseEvent) {
const card = event.currentTarget as HTMLElement;
const rect = card.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const percentX = (x - centerX) / centerX;
const percentY = (centerY - y) / centerY; // Invert Y for natural tilt
const maxTilt = 2;
tiltX = percentY * maxTilt;
tiltY = percentX * maxTilt;
}
function handleMouseLeave() {
tiltX = 0;
tiltY = 0;
}
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div
class="relative mx-auto flex w-full max-w-2xl rounded-l border-b border-l border-t shadow-lg duration-300 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]"
class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border border-dark-red transition-all duration-300 ease-out hover:scale-[1.01] hover:shadow-[5px_5px_5px_#000000]"
style="transform: perspective(1000px) rotateX({tiltX}deg) rotateY({tiltY}deg);"
on:mousemove={handleMouseMove}
on:mouseleave={handleMouseLeave}
>
<div class="m-4">
<h1 class="font-mono text-4xl">LIGHT 7734</h1>
<p class="text-muted-foreground leading-relaxed">
{description}
</p>
</div>
<div class="mx-auto flex max-w-2xl origin-center">
<img
src={avatar}
src={'/pfp.jpg'}
alt="author"
class="h-full w-full object-cover transition-transform duration-100 ease-out"
class="h-full w-full rounded-t-lg object-cover transition-transform duration-100 ease-out"
/>
</div>
<div class="m-4 min-w-[60%]">
<h1 class="font-mono text-4xl">Light Roxanna</h1>
<h3 class="mt-4 text-xl text-light-accent">Software Engineer</h3>
<p class="text-muted-foreground leading-relaxed">
{lorem_ipsum}
</p>
</div>
</div>

181
src/routes/project.svelte
View file

@ -2,54 +2,37 @@
</script>
<script lang="ts">
import { ChevronDown, ChevronUp, ExternalLink, BookText } from 'lucide-svelte';
import { ChevronDown, ChevronUp, BookText, Github, Gitlab, Code, GitBranch } from 'lucide-svelte';
interface ProjectData {
title: string | undefined;
icon: string;
headline: string;
forge: string | undefined;
codeberg: string | undefined;
github: string | undefined;
gitlab: string | undefined;
docs: string | undefined;
gallery: string[] | undefined;
}
import LanguageStats from './languages.svelte';
import TiltCard from './tiltcard.svelte';
import { Github, Gitlab, Code, GitBranch } from 'lucide-svelte';
export let data: ProjectData = {
title: '',
icon: '',
headline: '',
forge: '',
codeberg: '',
github: '',
gitlab: '',
docs: '',
gallery: undefined
};
interface ProjectLink {
label: string;
url: string;
iconComponent: any;
}
interface Language {
name: string;
icon?: string;
}
export let data: ProjectData = { title: '', forge: '', codeberg: '', github: '', gitlab: '' };
export let title: string;
export let headline: string;
export let description: string;
export let icon: string;
export let repository: ProjectLink = { label: 'Forgejo', url: '', iconComponent: GitBranch };
export let mirrors: ProjectLink[] = [
{ label: 'Github', url: '', iconComponent: Github },
{ label: 'Gitlab', url: '', iconComponent: Gitlab },
{ label: 'Codeberg', url: '', iconComponent: Code }
];
export let documentation: string = '';
export let gallery: string[] = [];
export let features: string[] = [];
let expansionStage = 0; // 0: collapsed, 1: description, 2: gallery, 3: source code
const MAX_STAGE = 1;
function toggleExpansion() {
expansionStage = expansionStage >= MAX_STAGE ? 0 : expansionStage + 1;
}
let expanded = false; // 0: collapsed, 1: description, 2: gallery, 3: source code
import { slide } from 'svelte/transition';
@ -84,76 +67,38 @@
on:mouseleave={handleMouseLeave}
>
<div class="p-6">
{#if icon !== ''}
<div class="mb-4 flex items-center gap-4">
<div class="flex-shrink-0">
<TiltCard imageSrc={icon} imageAlt="{title} icon" width="256px" height="256px" />
</div>
<div class="m-4 min-w-0 flex-1">
<div>
<h1 class="font-mono text-4xl uppercase">{title}</h1>
<div class="border-border w-full self-center border-t p-1"></div>
<p class="text-muted-foreground leading-relaxed">
{headline}
</p>
</div>
</div>
<div class="mb-4 flex items-center gap-4">
<div class="flex-shrink-0">
<TiltCard imageSrc={data.icon} imageAlt="{data.title} icon" width="256px" height="256px" />
</div>
{:else}
<div class="m-4 min-w-0 flex-1">
<div>
<h1 class="font-mono text-3xl">{title}</h1>
<h1 class="font-mono text-4xl uppercase">{data.title}</h1>
<div class="border-border w-full self-center border-t p-1"></div>
<p class="text-muted-foreground leading-relaxed">
{headline}
{data.headline}
</p>
</div>
</div>
{/if}
{#if expansionStage >= 1}
<div transition:slide={{ duration: 500 }} class="ease-out">
</div>
{#if expanded}
<div transition:slide={{ duration: 150 }} class="ease-in">
<p class="text-muted-foreground pb-8 leading-relaxed">
{description}
</p>
<!-- LANGUAGES -->
{#if data.gallery}
<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
Gallery
</h3>
<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
Supported Graphics-APIs
</h3>
<div class="flex flex-wrap gap-3">
<p>Vulkan</p>
<p>DirectX</p>
<p>Metal</p>
</div>
<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
Features
</h3>
<!-- FEATURES -->
<ul class="text-muted-foreground mb-2 list-disc pl-5">
{#each features as feature}
<li>{feature}</li>
{/each}
</ul>
<h4 class="mb-1 font-medium">{title}'s Tech Stack':</h4>
<!-- GALLERY -->
<h3 class="text-muted-foreground mb-3 text-sm font-semibold uppercase tracking-wide">
Gallery
</h3>
<div class="mb-4 grid grid-cols-3 gap-2">
{#each gallery as img}
<img src={img} alt="{title} screenshot" class="rounded object-cover" />
{/each}
</div>
<div class="mb-4 grid grid-cols-3 gap-2">
{#each data.gallery as img}
<img src={img} alt="{data.title} screenshot" class="rounded object-cover" />
{/each}
</div>
{/if}
<div class="mx-auto w-full py-4">
<LanguageStats repositoryUrl={data.github ? data.github : ''} />
@ -166,24 +111,26 @@
</h3>
<div class="flex flex-wrap gap-3">
<a
href={repository.url}
href={data.forge}
target="_blank"
rel="noopener noreferrer"
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
>
<svelte:component this={repository.iconComponent} class="h-4 w-4" />
{repository.label}
<GitBranch />
Forge
</a>
<a
href={documentation}
target="_blank"
rel="noopener noreferrer"
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
>
<BookText class="h-4 w-4" />
Documentation
</a>
{#if data.docs}
<a
href={data.docs}
target="_blank"
rel="noopener noreferrer"
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
>
<BookText class="h-4 w-4" />
Documentation
</a>
{/if}
</div>
</div>
<div class="border-border mx-4 h-8 self-center border-l"></div>
@ -192,6 +139,16 @@
Mirrors
</h3>
<div class="flex flex-wrap gap-3">
<a
href={data.github}
target="_blank"
rel="noopener noreferrer"
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
>
<Github class="h-4 w-4" />
Github
</a>
<a
href={data.gitlab}
target="_blank"
@ -199,7 +156,17 @@
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
>
<Gitlab class="h-4 w-4" />
"Gitlab"
Gitlab
</a>
<a
href={data.gitlab}
target="_blank"
rel="noopener noreferrer"
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
>
<Code class="h-4 w-4" />
Codeberg
</a>
</div>
</div>
@ -209,10 +176,12 @@
</div>
<button
on:click={toggleExpansion}
on:click={function () {
expanded = !expanded;
}}
class="bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground border-border group flex w-full items-center justify-center gap-2 rounded-b-lg border-t px-6 py-3 transition-colors duration-200"
>
{#if expansionStage >= MAX_STAGE}
{#if expanded}
<ChevronUp
class="h-4 w-16 transition-transform duration-200 group-hover:translate-y-[-2px]"
/>
@ -221,7 +190,7 @@
class="h-30 w-30 transition-transform duration-200 group-hover:translate-y-[2px]"
/>
<span class="font-bold">
{#if expansionStage === 0}
{#if !expanded}
DETAILS
{/if}
</span>

2
src/routes/projects/bonfire.json
View file

@ -1,5 +1,7 @@
{
"title": "Bonfire",
"icon": "/signature.svg",
"headline": "You're enjoying its warmth on your eyes! : D",
"forge": "https://git.light7734.com/light7734/bonfire",
"codeberg": "https://codeberg.org/light7734/bonfire",
"github": "https://github.com/light7734/bonfire",

2
src/routes/projects/dazzle.json
View file

@ -1,5 +1,7 @@
{
"title": "Dazzle",
"icon": "/signature.svg",
"headline": "Best way to learn is to teach, here be my articles.",
"forge": "https://git.light7734.com/light7734/dazzle",
"codeberg": "https://codeberg.org/light7734/dazzle",
"github": "https://github.com/light7734/dazzle",

7
src/routes/projects/hikari.json
View file

@ -1,8 +1,13 @@
{
"title": "Hikari",
"icon": "/hikari.svg",
"headline": "Toy raytracer written in Rust using Vulkan",
"forge": "https://git.light7734.com/light7734/hikari",
"codeberg": "https://codeberg.org/light7734/hikari",
"github": "https://github.com/light7734/hikari",
"gitlab": "https://gitlab.com/light7734/hikari"
"gitlab": "https://gitlab.com/light7734/hikari",
"gallery": [
"/hikari_raytrace.png"
]
}

13
src/routes/projects/light.json
View file

@ -1,7 +1,18 @@
{
"title": "Light",
"icon": "/light.svg",
"headline": "Dependency free, cross-platform and feature-rich 3D game engine.",
"forge": "https://git.light7734.com/light7734/light",
"codeberg": "https://codeberg.org/light7734/light",
"github": "https://github.com/light7734/light",
"gitlab": "https://gitlab.com/light7734/light"
"gitlab": "https://gitlab.com/light7734/light",
"docs": "https://docs.light7734.com/",
"gallery": [
"https://placekittens.com/720/480",
"https://placekittens.com/720/481",
"https://placekittens.com/720/482",
"https://placekittens.com/720/483",
"https://placekittens.com/720/484",
"https://placekittens.com/720/484"
]
}

BIN
static/hikari_raytrace.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 600 KiB