Compare commits
No commits in common. "main" and "v0.0.4" have entirely different histories.
5 changed files with 161 additions and 5 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="/signature.svg" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,14 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
import ThemeToggle from './theme.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex min-h-screen bg-dark-bg">
|
<div class="flex min-h-screen bg-dark-bg">
|
||||||
|
<div class="absolute right-0 top-0">
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Left Section - Hidden on mobile, visible on lg screens -->
|
<!-- Left Section - Hidden on mobile, visible on lg screens -->
|
||||||
<div class="relative hidden border-r border-dark-neutral lg:flex lg:w-1/4">
|
<div class="relative hidden border-r border-dark-neutral lg:flex lg:w-1/4">
|
||||||
<!-- Diagonal line pattern -->
|
<!-- Diagonal line pattern -->
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,9 @@
|
||||||
const hikari_data = json_to_project(hikari);
|
const hikari_data = json_to_project(hikari);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-screen bg-dark-bg text-dark-fg transition-colors duration-300">
|
<div
|
||||||
|
class="min-h-screen bg-light-bg text-light-fg transition-colors duration-300 dark:bg-dark-bg dark:text-dark-fg"
|
||||||
|
>
|
||||||
<main class="bg-card p-8 transition-all duration-300 ease-out">
|
<main class="bg-card p-8 transition-all duration-300 ease-out">
|
||||||
<Bio />
|
<Bio />
|
||||||
|
|
||||||
|
|
@ -81,3 +83,102 @@
|
||||||
<br />
|
<br />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Brief Bio
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!--OPEN SOURCE PROJECTS -->
|
||||||
|
<!-- Description
|
||||||
|
-->
|
||||||
|
<!-- Gallery
|
||||||
|
<...images...>
|
||||||
|
-->
|
||||||
|
<!-- Technical Details
|
||||||
|
Technology behind Dazzle:
|
||||||
|
-->
|
||||||
|
<!-- Source Code
|
||||||
|
Check out the source code on any of the official mirrors or on the main self-hosted repo.
|
||||||
|
Self-hosted with <3 using Forgejo (a fork of Gittea)
|
||||||
|
CodeBerg mirror
|
||||||
|
GitLab mirror
|
||||||
|
GitHub mirror
|
||||||
|
<Commit_Tiles/>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Brief Light
|
||||||
|
Light is an awesome bleeding-edge, *all the buzzwords* game-engine...
|
||||||
|
-->
|
||||||
|
<!-- Gallery
|
||||||
|
* Insert awesome renders here *
|
||||||
|
-->
|
||||||
|
<!-- Technical Details
|
||||||
|
Features:
|
||||||
|
MSAA
|
||||||
|
SSAO
|
||||||
|
PBR Lighting
|
||||||
|
|
||||||
|
Technology behind Light:
|
||||||
|
Languages:
|
||||||
|
C++23, CMake, Shell-script, Lua, Python
|
||||||
|
Graphics APIs:
|
||||||
|
OpenGL, Vulkan, Metal, DirectX12
|
||||||
|
CICD:
|
||||||
|
Drone, Docker,
|
||||||
|
|
||||||
|
Check out the source code on any of the official mirrors or on the main self-hosted repo.
|
||||||
|
Self-hosted with <3 using Forgejo (a fork of Gittea)
|
||||||
|
CodeBerg mirror
|
||||||
|
GitLab mirror
|
||||||
|
GitHub mirror
|
||||||
|
|
||||||
|
<Commit_Tiles/>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Brief Bonfire
|
||||||
|
You're enjoying its warmth on your eyes! It's my portfolio v2.0 rebuilt from scratch using the rightfully
|
||||||
|
loved Svelte framework. 0 uninterresting information. 0 tabs/navigaroins, just scroll down :)
|
||||||
|
-->
|
||||||
|
<!-- Gallery
|
||||||
|
-->
|
||||||
|
<!-- Technical Details
|
||||||
|
Bonfire is powered by:
|
||||||
|
Svelte,
|
||||||
|
Tailwindcss,
|
||||||
|
Nginx
|
||||||
|
Segs
|
||||||
|
-->
|
||||||
|
<!-- Source Code
|
||||||
|
Self-hosted with <3 using Forgejo (a fork of Gittea)
|
||||||
|
CodeBerg mirror
|
||||||
|
GitLab mirror
|
||||||
|
GitHub mirror
|
||||||
|
|
||||||
|
<Commit_Tiles/>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Work Experience -->
|
||||||
|
<!-- Brief Bitwyre -->
|
||||||
|
<!-- Details -->
|
||||||
|
|
||||||
|
<!-- Brief STG -->
|
||||||
|
<!-- Details -->
|
||||||
|
|
||||||
|
<!-- Call to action (Got a problem?)
|
||||||
|
Let me have a shot at it!
|
||||||
|
...
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!-- Contact
|
||||||
|
Location: Iran - Tehran Province - Tehran
|
||||||
|
|
||||||
|
Call: +________________
|
||||||
|
Mail: job@light7734.com
|
||||||
|
Mail: light7734@tuta.io
|
||||||
|
Message:
|
||||||
|
Telegram: @Light7734
|
||||||
|
Matrix: matrix.org:@light7734
|
||||||
|
|
||||||
|
[Download] Resume (pdf)
|
||||||
|
[Download] Business Card (pdf)
|
||||||
|
|
||||||
|
PS: I may not respond till Saturday (unless you call my phone) since I'm **locked in** on other days.
|
||||||
|
-->
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,36 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
const bio = `
|
const bio = `
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
<div
|
<div
|
||||||
class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border border-dark-muted transition-all duration-100 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-muted 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="mx-auto flex max-w-2xl origin-center">
|
<div class="mx-auto flex max-w-2xl origin-center">
|
||||||
<img
|
<img
|
||||||
|
|
|
||||||
|
|
@ -35,11 +35,36 @@
|
||||||
let expanded = false;
|
let expanded = false;
|
||||||
|
|
||||||
import { slide } from 'svelte/transition';
|
import { slide } from 'svelte/transition';
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
<div
|
<div
|
||||||
class="bg-card border-border relative mx-auto w-full max-w-2xl rounded-lg border transition-all duration-100 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 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="p-6">
|
<div class="p-6">
|
||||||
<div class="mb-4 flex items-center gap-4">
|
<div class="mb-4 flex items-center gap-4">
|
||||||
|
|
@ -131,7 +156,7 @@
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href={data.codeberg}
|
href={data.gitlab}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
|
class="text-accent-foreground flex items-center gap-1 transition-colors duration-200 hover:underline"
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue