Compare commits
2 Commits
29a58817be
...
6cc0e06918
| Author | SHA1 | Date | |
|---|---|---|---|
6cc0e06918
|
|||
|
0ab11c240c
|
1
.astro/content-assets.mjs
Normal file
1
.astro/content-assets.mjs
Normal file
@ -0,0 +1 @@
|
||||
export default new Map();
|
||||
1
.astro/content-modules.mjs
Normal file
1
.astro/content-modules.mjs
Normal file
@ -0,0 +1 @@
|
||||
export default new Map();
|
||||
156
.astro/content.d.ts
vendored
Normal file
156
.astro/content.d.ts
vendored
Normal file
@ -0,0 +1,156 @@
|
||||
declare module 'astro:content' {
|
||||
export interface RenderResult {
|
||||
Content: import('astro/runtime/server/index.js').AstroComponentFactory;
|
||||
headings: import('astro').MarkdownHeading[];
|
||||
remarkPluginFrontmatter: Record<string, any>;
|
||||
}
|
||||
interface Render {
|
||||
'.md': Promise<RenderResult>;
|
||||
}
|
||||
|
||||
export interface RenderedContent {
|
||||
html: string;
|
||||
metadata?: {
|
||||
imagePaths: Array<string>;
|
||||
[key: string]: unknown;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'astro:content' {
|
||||
type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
|
||||
|
||||
export type CollectionKey = keyof AnyEntryMap;
|
||||
export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
|
||||
|
||||
export type ContentCollectionKey = keyof ContentEntryMap;
|
||||
export type DataCollectionKey = keyof DataEntryMap;
|
||||
|
||||
type AllValuesOf<T> = T extends any ? T[keyof T] : never;
|
||||
type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
|
||||
ContentEntryMap[C]
|
||||
>['slug'];
|
||||
|
||||
export type ReferenceDataEntry<
|
||||
C extends CollectionKey,
|
||||
E extends keyof DataEntryMap[C] = string,
|
||||
> = {
|
||||
collection: C;
|
||||
id: E;
|
||||
};
|
||||
export type ReferenceContentEntry<
|
||||
C extends keyof ContentEntryMap,
|
||||
E extends ValidContentEntrySlug<C> | (string & {}) = string,
|
||||
> = {
|
||||
collection: C;
|
||||
slug: E;
|
||||
};
|
||||
|
||||
/** @deprecated Use `getEntry` instead. */
|
||||
export function getEntryBySlug<
|
||||
C extends keyof ContentEntryMap,
|
||||
E extends ValidContentEntrySlug<C> | (string & {}),
|
||||
>(
|
||||
collection: C,
|
||||
// Note that this has to accept a regular string too, for SSR
|
||||
entrySlug: E,
|
||||
): E extends ValidContentEntrySlug<C>
|
||||
? Promise<CollectionEntry<C>>
|
||||
: Promise<CollectionEntry<C> | undefined>;
|
||||
|
||||
/** @deprecated Use `getEntry` instead. */
|
||||
export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
|
||||
collection: C,
|
||||
entryId: E,
|
||||
): Promise<CollectionEntry<C>>;
|
||||
|
||||
export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
|
||||
collection: C,
|
||||
filter?: (entry: CollectionEntry<C>) => entry is E,
|
||||
): Promise<E[]>;
|
||||
export function getCollection<C extends keyof AnyEntryMap>(
|
||||
collection: C,
|
||||
filter?: (entry: CollectionEntry<C>) => unknown,
|
||||
): Promise<CollectionEntry<C>[]>;
|
||||
|
||||
export function getEntry<
|
||||
C extends keyof ContentEntryMap,
|
||||
E extends ValidContentEntrySlug<C> | (string & {}),
|
||||
>(
|
||||
entry: ReferenceContentEntry<C, E>,
|
||||
): E extends ValidContentEntrySlug<C>
|
||||
? Promise<CollectionEntry<C>>
|
||||
: Promise<CollectionEntry<C> | undefined>;
|
||||
export function getEntry<
|
||||
C extends keyof DataEntryMap,
|
||||
E extends keyof DataEntryMap[C] | (string & {}),
|
||||
>(
|
||||
entry: ReferenceDataEntry<C, E>,
|
||||
): E extends keyof DataEntryMap[C]
|
||||
? Promise<DataEntryMap[C][E]>
|
||||
: Promise<CollectionEntry<C> | undefined>;
|
||||
export function getEntry<
|
||||
C extends keyof ContentEntryMap,
|
||||
E extends ValidContentEntrySlug<C> | (string & {}),
|
||||
>(
|
||||
collection: C,
|
||||
slug: E,
|
||||
): E extends ValidContentEntrySlug<C>
|
||||
? Promise<CollectionEntry<C>>
|
||||
: Promise<CollectionEntry<C> | undefined>;
|
||||
export function getEntry<
|
||||
C extends keyof DataEntryMap,
|
||||
E extends keyof DataEntryMap[C] | (string & {}),
|
||||
>(
|
||||
collection: C,
|
||||
id: E,
|
||||
): E extends keyof DataEntryMap[C]
|
||||
? string extends keyof DataEntryMap[C]
|
||||
? Promise<DataEntryMap[C][E]> | undefined
|
||||
: Promise<DataEntryMap[C][E]>
|
||||
: Promise<CollectionEntry<C> | undefined>;
|
||||
|
||||
/** Resolve an array of entry references from the same collection */
|
||||
export function getEntries<C extends keyof ContentEntryMap>(
|
||||
entries: ReferenceContentEntry<C, ValidContentEntrySlug<C>>[],
|
||||
): Promise<CollectionEntry<C>[]>;
|
||||
export function getEntries<C extends keyof DataEntryMap>(
|
||||
entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
|
||||
): Promise<CollectionEntry<C>[]>;
|
||||
|
||||
export function render<C extends keyof AnyEntryMap>(
|
||||
entry: AnyEntryMap[C][string],
|
||||
): Promise<RenderResult>;
|
||||
|
||||
export function reference<C extends keyof AnyEntryMap>(
|
||||
collection: C,
|
||||
): import('astro/zod').ZodEffects<
|
||||
import('astro/zod').ZodString,
|
||||
C extends keyof ContentEntryMap
|
||||
? ReferenceContentEntry<C, ValidContentEntrySlug<C>>
|
||||
: ReferenceDataEntry<C, keyof DataEntryMap[C]>
|
||||
>;
|
||||
// Allow generic `string` to avoid excessive type errors in the config
|
||||
// if `dev` is not running to update as you edit.
|
||||
// Invalid collection names will be caught at build time.
|
||||
export function reference<C extends string>(
|
||||
collection: C,
|
||||
): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
|
||||
|
||||
type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
|
||||
type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
|
||||
ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
|
||||
>;
|
||||
|
||||
type ContentEntryMap = {
|
||||
|
||||
};
|
||||
|
||||
type DataEntryMap = {
|
||||
|
||||
};
|
||||
|
||||
type AnyEntryMap = ContentEntryMap & DataEntryMap;
|
||||
|
||||
export type ContentConfig = typeof import("../src/content.config.mjs");
|
||||
}
|
||||
1
.astro/data-store.json
Normal file
1
.astro/data-store.json
Normal file
@ -0,0 +1 @@
|
||||
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.4.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
|
||||
5
.astro/settings.json
Normal file
5
.astro/settings.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"_variables": {
|
||||
"lastUpdateCheck": 1741520469255
|
||||
}
|
||||
}
|
||||
2
.astro/types.d.ts
vendored
Normal file
2
.astro/types.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/// <reference types="astro/client" />
|
||||
/// <reference path="content.d.ts" />
|
||||
23
astro.config.mjs
Normal file
23
astro.config.mjs
Normal file
@ -0,0 +1,23 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import react from '@astrojs/react';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import icon from 'astro-icon';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
react(),
|
||||
icon({
|
||||
include: {
|
||||
ph: ['*'],
|
||||
logos: ['*'],
|
||||
mdi: ['*']
|
||||
}
|
||||
})
|
||||
],
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()]
|
||||
}
|
||||
});
|
||||
9187
package-lock.json
generated
Normal file
9187
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@ -3,15 +3,23 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"lint": "astro check"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.9.4",
|
||||
"@astrojs/react": "^4.2.1",
|
||||
"@fontsource/dm-sans": "^5.1.1",
|
||||
"@fontsource/instrument-sans": "^5.1.1",
|
||||
"@iconify-json/logos": "^1.2.4",
|
||||
"@iconify-json/mdi": "^1.2.3",
|
||||
"@iconify-json/ph": "^1.2.2",
|
||||
"@studio-freight/lenis": "^1.0.42",
|
||||
"@tailwindcss/vite": "^4.0.12",
|
||||
"astro": "^5.4.2",
|
||||
"astro-icon": "^1.1.5",
|
||||
"framer-motion": "^12.4.7",
|
||||
"next": "15.1.7",
|
||||
"react": "^19.0.0",
|
||||
@ -20,14 +28,14 @@
|
||||
"react-intersection-observer": "^9.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5",
|
||||
"@eslint/eslintrc": "^3",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"@types/react": "^19.0.10",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "15.1.7",
|
||||
"@eslint/eslintrc": "^3"
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^4.0.12",
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@ -1 +0,0 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
70
src/components/layout/Footer.astro
Normal file
70
src/components/layout/Footer.astro
Normal file
@ -0,0 +1,70 @@
|
||||
---
|
||||
import FadeIn from "../ui/FadeIn.astro";
|
||||
import { FaGithub, FaLinkedin, FaEnvelope } from "react-icons/fa";
|
||||
---
|
||||
|
||||
<footer
|
||||
role="contentinfo"
|
||||
class="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border"
|
||||
>
|
||||
<div class="max-w-(--breakpoint-xl) mx-auto px-4 sm:px-8 py-20 sm:py-32">
|
||||
<div class="grid gap-16 sm:gap-24">
|
||||
<FadeIn>
|
||||
<div class="text-center space-y-4 sm:space-y-5">
|
||||
<h2
|
||||
class="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight theme-primary"
|
||||
>
|
||||
Let's Connect
|
||||
</h2>
|
||||
<p
|
||||
class="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto"
|
||||
>
|
||||
Always interested in new opportunities and collaborations.
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<FadeIn delay={0.1}>
|
||||
<div class="flex flex-col items-center gap-8 sm:gap-12 font-['Instrument_Sans']">
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
class="group flex items-center gap-3 text-xl sm:text-4xl theme-text-90 hover:theme-primary transition-colors"
|
||||
>
|
||||
<FaEnvelope className="w-6 h-6 sm:w-8 sm:h-8" />
|
||||
jleibl@proton.me
|
||||
</a>
|
||||
|
||||
<div class="flex gap-6 sm:gap-10">
|
||||
<a
|
||||
href="https://github.com/AtomicWasTaken"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group theme-text-70 hover:theme-primary transition-colors"
|
||||
aria-label="GitHub Profile"
|
||||
>
|
||||
<FaGithub className="w-8 h-8 sm:w-10 sm:h-10" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://www.linkedin.com/in/janmarlonleibl/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="group theme-text-70 hover:theme-primary transition-colors"
|
||||
aria-label="LinkedIn Profile"
|
||||
>
|
||||
<FaLinkedin className="w-8 h-8 sm:w-10 sm:h-10" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<FadeIn delay={0.2}>
|
||||
<div class="pt-6 sm:pt-12 text-center">
|
||||
<p class="font-['Instrument_Sans'] theme-text-40 text-xs sm:text-sm tracking-[0.1em]">
|
||||
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -1,39 +0,0 @@
|
||||
import { FadeIn } from '../ui/FadeIn';
|
||||
|
||||
export const Footer = () => {
|
||||
return (
|
||||
<footer role="contentinfo" className="mt-20 sm:mt-32 theme-bg-gradient border-t theme-border">
|
||||
<div className="max-w-screen-xl mx-auto px-4 sm:px-8 py-20 sm:py-32">
|
||||
<div className="grid gap-16 sm:gap-24">
|
||||
<FadeIn>
|
||||
<div className="text-center space-y-4 sm:space-y-5">
|
||||
<h2 className="font-['DM_Sans'] text-4xl sm:text-7xl font-semibold tracking-tight theme-primary">Let's Connect</h2>
|
||||
<p className="font-['Instrument_Sans'] theme-text-70 text-lg sm:text-2xl max-w-2xl mx-auto">
|
||||
Always interested in new opportunities and collaborations.
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<FadeIn delay={0.1}>
|
||||
<div className="flex flex-col items-center gap-8 sm:gap-12">
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="group flex items-center gap-2 sm:gap-3 text-xl sm:text-4xl theme-text-90 hover:theme-primary transition-colors"
|
||||
>
|
||||
jleibl@proton.me
|
||||
</a>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="pt-6 sm:pt-12 text-center">
|
||||
<p className="theme-text-40 text-xs sm:text-sm tracking-[0.1em]">
|
||||
© {new Date().getFullYear()} Jan-Marlon Leibl. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
80
src/components/layout/Header.astro
Normal file
80
src/components/layout/Header.astro
Normal file
@ -0,0 +1,80 @@
|
||||
---
|
||||
import MobileMenu from './MobileMenu.astro';
|
||||
---
|
||||
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-40 nav-glass backdrop-blur-lg theme-transition"
|
||||
role="banner"
|
||||
>
|
||||
<div class="max-w-(--breakpoint-xl) mx-auto">
|
||||
<nav class="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
|
||||
<div class="flex items-center">
|
||||
<a href="#hero" class="flex items-center gap-2 group" aria-label="Home">
|
||||
<div class="relative w-10 h-10 rounded-full theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300">
|
||||
<span class="text-lg font-bold tracking-tight theme-primary theme-transition">JL</span>
|
||||
<div class="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
</div>
|
||||
<span class="text-lg font-medium tracking-tight theme-primary theme-transition hidden sm:block">
|
||||
Jan-Marlon Leibl
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center">
|
||||
<div class="flex bg-black/10 backdrop-blur-md rounded-full overflow-hidden theme-border border divide-x divide-white/5">
|
||||
{["About", "Work"].map((item) => (
|
||||
<a
|
||||
href={`#${item.toLowerCase()}`}
|
||||
class="nav-item px-6 py-2 theme-secondary hover:theme-primary theme-transition"
|
||||
aria-label={`View my ${item.toLowerCase()}`}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div class="ml-6">
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
class="flex items-center gap-2 px-6 py-2 theme-bg-05 theme-primary border theme-border rounded-full hover:bg-opacity-100 transition-all duration-300 group"
|
||||
aria-label="Contact me via email"
|
||||
>
|
||||
<svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="text-sm">Contact</span>
|
||||
<div class="w-0 overflow-hidden group-hover:w-4 transition-all duration-500">
|
||||
<svg class="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<MobileMenu />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="h-px w-full theme-border opacity-50"></div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const header = document.querySelector('header');
|
||||
if (header) {
|
||||
header.style.transform = 'translateY(0)';
|
||||
header.style.opacity = '1';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
transform: translateY(-100px);
|
||||
opacity: 0;
|
||||
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
@ -1,89 +0,0 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const MobileMenu = dynamic(() => import('./MobileMenu').then(mod => ({ default: mod.MobileMenu })), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="p-2 theme-accent rounded-lg theme-border">
|
||||
<svg className="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
||||
export const Header = () => {
|
||||
return (
|
||||
<motion.header
|
||||
className="fixed top-0 left-0 right-0 z-40 nav-glass backdrop-blur-lg theme-transition"
|
||||
role="banner"
|
||||
initial={{ y: -100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 25,
|
||||
stiffness: 100,
|
||||
mass: 1,
|
||||
delay: 0.2
|
||||
}}
|
||||
>
|
||||
<div className="max-w-screen-xl mx-auto">
|
||||
<nav className="py-5 px-6 sm:px-8 flex justify-between items-center font-['DM_Sans']" role="navigation" aria-label="Main navigation">
|
||||
<div className="flex items-center">
|
||||
<Link href="/" className="flex items-center gap-2 group" aria-label="Home">
|
||||
<div className="relative w-10 h-10 rounded-full theme-accent flex items-center justify-center border theme-border overflow-hidden group-hover:border-opacity-80 transition-all duration-300">
|
||||
<span className="text-lg font-bold tracking-tight theme-primary theme-transition">JL</span>
|
||||
<div className="absolute inset-0 theme-bg-05 opacity-0 group-hover:opacity-100 transition-opacity duration-500"/>
|
||||
</div>
|
||||
<span className="text-lg font-medium tracking-tight theme-primary theme-transition hidden sm:block">
|
||||
Jan-Marlon Leibl
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center">
|
||||
<div className="flex bg-black/10 backdrop-blur-md rounded-full overflow-hidden theme-border border divide-x divide-white/5">
|
||||
{["Work", "About"].map((item) => (
|
||||
<a
|
||||
key={item}
|
||||
href={`#${item.toLowerCase()}`}
|
||||
className="nav-item px-6 py-2 theme-secondary hover:theme-primary theme-transition"
|
||||
aria-label={`View my ${item.toLowerCase()}`}
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ml-6">
|
||||
<motion.a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="flex items-center gap-2 px-6 py-2 theme-bg-05 theme-primary border theme-border rounded-full hover:bg-opacity-100 transition-all duration-300 group"
|
||||
aria-label="Contact me via email"
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
<svg className="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span className="text-sm">Contact</span>
|
||||
<div className="w-0 overflow-hidden group-hover:w-4 transition-all duration-500">
|
||||
<svg className="w-4 h-4 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex md:hidden">
|
||||
<MobileMenu />
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="h-px w-full theme-border opacity-50"></div>
|
||||
</motion.header>
|
||||
);
|
||||
};
|
||||
108
src/components/layout/MobileMenu.astro
Normal file
108
src/components/layout/MobileMenu.astro
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
import GermanyFlag from '../ui/GermanyFlag.astro';
|
||||
---
|
||||
|
||||
<div class="mobile-menu">
|
||||
<button
|
||||
id="mobile-menu-toggle"
|
||||
class="p-2 theme-accent rounded-lg theme-border"
|
||||
aria-label="Open menu"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="mobile-menu-overlay" class="fixed inset-0 bg-black opacity-0 z-90 pointer-events-none transition-opacity duration-300"></div>
|
||||
|
||||
<div id="mobile-menu-panel" class="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-100 h-[100dvh] translate-x-full transition-transform duration-300">
|
||||
<div class="nav-glass w-full h-full flex flex-col shadow-2xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
|
||||
<button
|
||||
id="mobile-menu-close"
|
||||
class="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-110"
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
|
||||
<nav class="mb-8">
|
||||
<div class="flex flex-col space-y-2">
|
||||
{[
|
||||
{ href: "#about", label: "About" },
|
||||
{ href: "#work", label: "Work" }
|
||||
].map((item) => (
|
||||
<a
|
||||
href={item.href}
|
||||
class="menu-link p-4 text-xl theme-primary rounded-lg theme-accent flex items-center hover:theme-bg-05 transition-colors"
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<svg class="ml-auto w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="mt-auto">
|
||||
<div class="pt-4 border-t theme-border">
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-primary border theme-border rounded-lg hover:theme-bg-05 transition-colors"
|
||||
>
|
||||
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span>Contact Me</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 flex justify-center pb-6">
|
||||
<GermanyFlag />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const toggle = document.getElementById('mobile-menu-toggle');
|
||||
const close = document.getElementById('mobile-menu-close');
|
||||
const overlay = document.getElementById('mobile-menu-overlay');
|
||||
const panel = document.getElementById('mobile-menu-panel');
|
||||
const menuLinks = document.querySelectorAll('.menu-link');
|
||||
|
||||
function openMenu() {
|
||||
document.body.style.overflow = 'hidden';
|
||||
toggle?.setAttribute('aria-expanded', 'true');
|
||||
overlay?.classList.remove('opacity-0', 'pointer-events-none');
|
||||
overlay?.classList.add('opacity-95');
|
||||
panel?.classList.remove('translate-x-full');
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
document.body.style.overflow = '';
|
||||
toggle?.setAttribute('aria-expanded', 'false');
|
||||
overlay?.classList.add('opacity-0', 'pointer-events-none');
|
||||
overlay?.classList.remove('opacity-95');
|
||||
panel?.classList.add('translate-x-full');
|
||||
}
|
||||
|
||||
toggle?.addEventListener('click', openMenu);
|
||||
close?.addEventListener('click', closeMenu);
|
||||
overlay?.addEventListener('click', closeMenu);
|
||||
menuLinks.forEach(link => link.addEventListener('click', closeMenu));
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && toggle?.getAttribute('aria-expanded') === 'true') {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -1,147 +0,0 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { GermanyFlag } from '../ui/GermanyFlag';
|
||||
|
||||
export const MobileMenu = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleEscKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscKey);
|
||||
return () => document.removeEventListener('keydown', handleEscKey);
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="p-2 theme-accent rounded-lg theme-border"
|
||||
aria-label="Open menu"
|
||||
aria-expanded={isOpen}
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
<svg className="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence mode="wait">
|
||||
{isOpen && (
|
||||
<>
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black z-[90]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 0.95 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
onClick={() => setIsOpen(false)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-[100] h-[100dvh]"
|
||||
ref={menuRef}
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 300, mass: 1 }}
|
||||
>
|
||||
<div className="nav-glass w-full h-full flex flex-col shadow-2xl"
|
||||
style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)' }}>
|
||||
<motion.button
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="absolute top-4 right-4 p-2 theme-accent rounded-lg theme-border z-[110]"
|
||||
aria-label="Close menu"
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 20, delay: 0.2 }}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<svg className="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</motion.button>
|
||||
|
||||
<div className="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
|
||||
<nav className="mb-8">
|
||||
<motion.div
|
||||
className="flex flex-col space-y-2"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 100, damping: 20, delay: 0.1 }}
|
||||
>
|
||||
{[
|
||||
{ href: "#work", label: "Work" },
|
||||
{ href: "#about", label: "About" }
|
||||
].map((item, index) => (
|
||||
<motion.a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="p-4 text-xl theme-primary rounded-lg theme-accent flex items-center hover:theme-bg-05 transition-colors"
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ type: "spring", stiffness: 200, damping: 20, delay: 0.2 + index * 0.1 }}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<svg className="ml-auto w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</motion.a>
|
||||
))}
|
||||
</motion.div>
|
||||
</nav>
|
||||
|
||||
<motion.div
|
||||
className="mt-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ type: "spring", stiffness: 100, damping: 20, delay: 0.4 }}
|
||||
>
|
||||
<div className="pt-4 border-t theme-border">
|
||||
<motion.a
|
||||
href="mailto:jleibl@proton.me"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex items-center justify-center gap-3 w-full py-4 px-6 theme-primary border theme-border rounded-lg hover:theme-bg-05 transition-colors"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span>Contact Me</span>
|
||||
</motion.a>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 flex justify-center pb-6">
|
||||
<GermanyFlag />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
};
|
||||
146
src/components/sections/About.astro
Normal file
146
src/components/sections/About.astro
Normal file
@ -0,0 +1,146 @@
|
||||
---
|
||||
import FadeIn from '../ui/FadeIn.astro';
|
||||
import { Icon } from 'astro-icon/components';
|
||||
import { SiPhp, SiJavascript, SiMysql, SiReact } from 'react-icons/si';
|
||||
import { FaGithub, FaLinkedin, FaGlobe, FaPalette } from 'react-icons/fa';
|
||||
import { BsLightningChargeFill } from 'react-icons/bs';
|
||||
import { IoServerOutline } from 'react-icons/io5';
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
const technologies = [
|
||||
{ name: 'PHP', icon: SiPhp },
|
||||
{ name: 'JavaScript', icon: SiJavascript },
|
||||
{ name: 'MySQL', icon: SiMysql },
|
||||
{ name: 'React', icon: SiReact }
|
||||
];
|
||||
|
||||
const interests = [
|
||||
{ name: 'Web Development', icon: FaGlobe },
|
||||
{ name: 'System Architecture', icon: IoServerOutline },
|
||||
{ name: 'UI/UX Design', icon: FaPalette },
|
||||
{ name: 'Performance Optimization', icon: BsLightningChargeFill }
|
||||
];
|
||||
---
|
||||
|
||||
<section id="about" class="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
|
||||
<div class="max-w-(--breakpoint-xl) mx-auto">
|
||||
<FadeIn>
|
||||
<div class="flex items-baseline gap-4 mb-12 sm:mb-24">
|
||||
<h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
|
||||
About
|
||||
</h2>
|
||||
<div class="h-px grow bg-white/10 relative top-[-4px]"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<div class="grid md:grid-cols-[1fr_2fr] gap-12 sm:gap-24">
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
<FadeIn>
|
||||
<div class="aspect-square bg-linear-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
|
||||
<Image
|
||||
src="/profile-image.jpg"
|
||||
alt="Jan-Marlon Leibl - Fullstack Software Developer"
|
||||
width="400"
|
||||
height="400"
|
||||
class="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<div class="space-y-2 text-center md:text-left">
|
||||
<h3 class="font-['DM_Sans'] text-xl sm:text-2xl font-medium theme-primary">
|
||||
Jan-Marlon Leibl
|
||||
</h3>
|
||||
<p class="font-['Instrument_Sans'] theme-text-70 text-base sm:text-lg">
|
||||
Fullstack Developer
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<FadeIn delay={0.2}>
|
||||
<div class="space-y-10 sm:space-y-16 font-['Instrument_Sans']">
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
<p class="text-xl sm:text-2xl theme-text-90 leading-relaxed">
|
||||
Hello! I'm Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created.
|
||||
</p>
|
||||
<p class="text-base sm:text-xl theme-text-70 leading-relaxed">
|
||||
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
<div class="flex items-baseline gap-4">
|
||||
<h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
|
||||
Technologies
|
||||
</h3>
|
||||
<div class="h-px grow theme-border"></div>
|
||||
</div>
|
||||
<ul class="space-y-4 sm:space-y-5">
|
||||
{technologies.map((tech) => (
|
||||
<li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md">
|
||||
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
|
||||
<tech.icon className="w-5 h-5" />
|
||||
</span>
|
||||
{tech.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
<div class="flex items-baseline gap-4">
|
||||
<h3 class="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
|
||||
Interests
|
||||
</h3>
|
||||
<div class="h-px grow theme-border"></div>
|
||||
</div>
|
||||
<ul class="space-y-4 sm:space-y-5">
|
||||
{interests.map((interest) => (
|
||||
<li class="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md">
|
||||
<span class="theme-text-40 group-hover:theme-text-90 flex items-center justify-center w-6 h-6 transition-colors">
|
||||
<interest.icon className="w-5 h-5" />
|
||||
</span>
|
||||
{interest.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
|
||||
<a
|
||||
href="https://github.com/AtomicWasTaken"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaGithub className="w-5 h-5" />
|
||||
View GitHub
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/janmarlonleibl/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="animate-button w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90 flex items-center justify-center gap-2"
|
||||
>
|
||||
<FaLinkedin className="w-5 h-5" />
|
||||
Connect on LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.animate-button {
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-button:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
@ -1,149 +0,0 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import { FadeIn } from '../ui/FadeIn';
|
||||
import { SiPhp, SiJavascript, SiMysql, SiReact } from 'react-icons/si';
|
||||
import { MdWeb, MdArchitecture, MdDesignServices, MdSpeed } from 'react-icons/md';
|
||||
|
||||
interface Tech {
|
||||
name: string;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
interface Interest {
|
||||
name: string;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
const technologies: Tech[] = [
|
||||
{ name: 'PHP', icon: <SiPhp /> },
|
||||
{ name: 'JavaScript', icon: <SiJavascript /> },
|
||||
{ name: 'MySQL', icon: <SiMysql /> },
|
||||
{ name: 'React', icon: <SiReact /> }
|
||||
];
|
||||
|
||||
const interests: Interest[] = [
|
||||
{ name: 'Web Development', icon: <MdWeb /> },
|
||||
{ name: 'System Architecture', icon: <MdArchitecture /> },
|
||||
{ name: 'UI/UX Design', icon: <MdDesignServices /> },
|
||||
{ name: 'Performance Optimization', icon: <MdSpeed /> }
|
||||
];
|
||||
|
||||
export const About = () => {
|
||||
return (
|
||||
<section id="about" className="py-20 sm:py-40 px-4 sm:px-8 theme-bg-gradient">
|
||||
<div className="max-w-screen-xl mx-auto">
|
||||
<FadeIn>
|
||||
<div className="flex items-baseline gap-4 mb-12 sm:mb-24">
|
||||
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
|
||||
About
|
||||
</h2>
|
||||
<div className="h-px flex-grow bg-white/10 relative top-[-4px]"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<div className="grid md:grid-cols-[1fr,2fr] gap-12 sm:gap-24">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<FadeIn>
|
||||
<div className="aspect-square bg-gradient-to-tr theme-bg-05 rounded-2xl overflow-hidden border theme-border hover:border-white/10 transition-colors mx-auto md:mx-0 max-w-[280px] md:max-w-none">
|
||||
<Image
|
||||
src="/profile-image.jpg"
|
||||
alt="Jan-Marlon Leibl - Fullstack Software Developer"
|
||||
width={400}
|
||||
height={400}
|
||||
priority
|
||||
className="object-cover w-full h-full hover:scale-105 transition-transform duration-700"
|
||||
/>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<FadeIn delay={0.1}>
|
||||
<div className="space-y-2 text-center md:text-left">
|
||||
<h3 className="font-['DM_Sans'] text-xl sm:text-2xl font-medium theme-primary">
|
||||
Jan-Marlon Leibl
|
||||
</h3>
|
||||
<p className="font-['Instrument_Sans'] theme-text-70 text-base sm:text-lg">
|
||||
Fullstack Developer
|
||||
</p>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
|
||||
<FadeIn delay={0.2}>
|
||||
<div className="space-y-10 sm:space-y-16 font-['Instrument_Sans']">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<p className="text-xl sm:text-2xl theme-text-90 leading-relaxed">
|
||||
Hello! I'm Jan-Marlon, but please call me Jan. I started my journey in programming at the age of 11 with C#, fascinated by a desktop application my friend created.
|
||||
</p>
|
||||
<p className="text-base sm:text-xl theme-text-70 leading-relaxed">
|
||||
Today, I specialize in PHP and TypeScript development, constantly pushing the boundaries of what's possible on the web. My journey has led me from creating simple applications to developing complex systems used by thousands.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-10 sm:gap-16">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
|
||||
Technologies
|
||||
</h3>
|
||||
<div className="h-px flex-grow theme-border"></div>
|
||||
</div>
|
||||
<ul className="space-y-4 sm:space-y-5">
|
||||
{technologies.map((tech) => (
|
||||
<li
|
||||
key={tech.name}
|
||||
className="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md"
|
||||
>
|
||||
<span className="text-lg theme-text-40 group-hover:theme-text-90 transition-colors">{tech.icon}</span>
|
||||
{tech.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h3 className="text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
|
||||
Interests
|
||||
</h3>
|
||||
<div className="h-px flex-grow theme-border"></div>
|
||||
</div>
|
||||
<ul className="space-y-4 sm:space-y-5">
|
||||
{interests.map((interest) => (
|
||||
<li
|
||||
key={interest.name}
|
||||
className="text-base sm:text-lg group flex items-center gap-3 theme-text-70 hover:theme-text-90 transition-colors cursor-default bg-white/[0.02] px-3 py-2 rounded-md"
|
||||
>
|
||||
<span className="text-lg theme-text-40 group-hover:theme-text-90 transition-colors">{interest.icon}</span>
|
||||
{interest.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-6 sm:pt-8 flex flex-col sm:flex-row gap-3 sm:gap-6">
|
||||
<motion.a
|
||||
href="https://github.com/AtomicWasTaken"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
View GitHub
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="https://www.linkedin.com/in/janmarlonleibl/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-full text-center px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide font-medium theme-text-90"
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
Connect on LinkedIn
|
||||
</motion.a>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
115
src/components/sections/Hero.astro
Normal file
115
src/components/sections/Hero.astro
Normal file
@ -0,0 +1,115 @@
|
||||
---
|
||||
import FadeIn from '../ui/FadeIn.astro';
|
||||
import GermanyFlag from '../ui/GermanyFlag.astro';
|
||||
---
|
||||
|
||||
<section class="min-h-[100dvh] flex items-center justify-center px-4 sm:px-8 relative pt-24 sm:pt-8" id="hero">
|
||||
<div class="absolute inset-0 theme-bg-gradient"></div>
|
||||
<div class="max-w-7xl w-full relative pt-8 sm:pt-24">
|
||||
<FadeIn className="space-y-8 sm:space-y-16">
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
<div class="space-y-6 sm:space-y-8">
|
||||
<div class="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span class="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
|
||||
</div>
|
||||
<div class="space-y-2 sm:space-y-3">
|
||||
<h2 class="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">
|
||||
Jan-Marlon Leibl
|
||||
</h2>
|
||||
<div>
|
||||
<h1 class="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
|
||||
Software Developer
|
||||
<br />
|
||||
<span class="theme-secondary">based in <GermanyFlag /></span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
|
||||
Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||
<a
|
||||
href="#work"
|
||||
class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group"
|
||||
>
|
||||
View My Work
|
||||
<svg
|
||||
class="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
class="animate-button w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group"
|
||||
>
|
||||
Get in Touch
|
||||
<svg
|
||||
class="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t theme-border pt-5 pb-5">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-8 sm:gap-0 py-6 sm:py-8 font-['Instrument_Sans']">
|
||||
<div class="text-center sm:border-r theme-border last:border-r-0">
|
||||
<div class="mb-3 sm:mb-4">
|
||||
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EMAIL</span>
|
||||
</div>
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
class="theme-text-90 hover:theme-primary transition-colors text-base sm:text-lg"
|
||||
>
|
||||
jleibl@proton.me
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center sm:border-r theme-border last:border-r-0">
|
||||
<div class="mb-3 sm:mb-4">
|
||||
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">ROLE</span>
|
||||
</div>
|
||||
<span class="theme-text-90 text-base sm:text-lg">
|
||||
Fullstack Developer
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="mb-3 sm:mb-4">
|
||||
<span class="theme-text-40 uppercase tracking-[0.2em] text-xs sm:text-sm">EXPERIENCE</span>
|
||||
</div>
|
||||
<span class="theme-text-90 text-base sm:text-lg">
|
||||
5+ Years
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.animate-button {
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.animate-button:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.animate-button:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
</style>
|
||||
@ -1,107 +0,0 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { FadeIn } from '../ui/FadeIn';
|
||||
import { GermanyFlag } from '../ui/GermanyFlag';
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
<section className="min-h-[100dvh] flex items-center px-4 sm:px-8 relative pt-24 sm:pt-8">
|
||||
<div className="absolute inset-0 theme-bg-gradient"></div>
|
||||
<div className="max-w-screen-xl w-full relative pt-8 sm:pt-24">
|
||||
<FadeIn className="space-y-8 sm:space-y-16">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="space-y-6 sm:space-y-8">
|
||||
<div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full theme-accent theme-border theme-transition">
|
||||
<span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span className="theme-secondary uppercase tracking-[0.2em] text-xs sm:text-sm font-['Instrument_Sans']">Available for Work</span>
|
||||
</div>
|
||||
<div className="space-y-2 sm:space-y-3">
|
||||
<h2 className="font-['DM_Sans'] text-xl sm:text-3xl theme-secondary tracking-wide font-medium theme-transition">
|
||||
Jan-Marlon Leibl
|
||||
</h2>
|
||||
<div>
|
||||
<h1 className="font-['DM_Sans'] text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.1] sm:leading-[0.95] max-w-4xl theme-primary theme-transition">
|
||||
Software Developer
|
||||
<br />
|
||||
<span className="theme-secondary">based in <GermanyFlag /></span>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-['Instrument_Sans'] theme-secondary text-lg sm:text-2xl max-w-2xl leading-relaxed tracking-wide theme-transition">
|
||||
Passionate about creating digital experiences, with a focus on PHP and modern web technologies.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
|
||||
<motion.a
|
||||
href="#work"
|
||||
className="w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 theme-button-primary rounded-lg sm:rounded-full transition-colors text-sm sm:text-base tracking-wide font-medium group"
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
View My Work
|
||||
<svg
|
||||
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</motion.a>
|
||||
<motion.a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="w-full sm:w-auto text-center inline-flex items-center justify-center gap-2 px-6 sm:px-8 py-3 sm:py-4 border theme-border rounded-lg sm:rounded-full theme-button-secondary hover:theme-bg-05 transition-colors text-sm sm:text-base tracking-wide group"
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
>
|
||||
Get in Touch
|
||||
<svg
|
||||
className="w-4 h-4 sm:w-5 sm:h-5 transform group-hover:translate-x-1 transition-transform"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</motion.a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 font-['Instrument_Sans'] text-sm sm:text-base tracking-wide border-t theme-border pt-6 sm:pt-8">
|
||||
<div className="space-y-1.5 sm:space-y-2.5 group">
|
||||
<span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Email</span>
|
||||
<a
|
||||
href="mailto:jleibl@proton.me"
|
||||
className="theme-text-90 hover:theme-primary transition-colors flex items-center gap-2 sm:gap-2.5 group-hover:gap-3 duration-300"
|
||||
>
|
||||
jleibl@proton.me
|
||||
<svg
|
||||
className="w-4 h-4 sm:w-5 sm:h-5 opacity-0 group-hover:opacity-100 transition-all -translate-x-4 group-hover:translate-x-0 duration-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:space-y-2.5">
|
||||
<span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Role</span>
|
||||
<span className="theme-text-90">
|
||||
Fullstack Developer
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1.5 sm:space-y-2.5">
|
||||
<span className="theme-text-40 block uppercase tracking-[0.2em] text-xs sm:text-sm">Experience</span>
|
||||
<span className="theme-text-90">
|
||||
5+ Years
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
178
src/components/sections/Work.astro
Normal file
178
src/components/sections/Work.astro
Normal file
@ -0,0 +1,178 @@
|
||||
---
|
||||
import { SiNextdotjs, SiTailwindcss, SiTypescript, SiPhp, SiJavascript, SiMysql, SiDiscord } from 'react-icons/si';
|
||||
import { BsLightningChargeFill } from 'react-icons/bs';
|
||||
import { FaCode } from 'react-icons/fa';
|
||||
import { HiOutlineCollection } from 'react-icons/hi';
|
||||
import { MdLaunch } from 'react-icons/md';
|
||||
import FadeIn from '../ui/FadeIn.astro';
|
||||
|
||||
interface Project {
|
||||
title: string;
|
||||
year: string;
|
||||
description: string;
|
||||
icon: any;
|
||||
tags: Array<{
|
||||
name: string;
|
||||
icon: any;
|
||||
}>;
|
||||
}
|
||||
|
||||
const getTagIcon = (tag: string) => {
|
||||
switch (tag) {
|
||||
case 'Next.js':
|
||||
return SiNextdotjs;
|
||||
case 'Tailwind CSS':
|
||||
return SiTailwindcss;
|
||||
case 'TypeScript':
|
||||
return SiTypescript;
|
||||
case 'PHP':
|
||||
return SiPhp;
|
||||
case 'JavaScript':
|
||||
return SiJavascript;
|
||||
case 'MySQL':
|
||||
return SiMysql;
|
||||
case 'Performance':
|
||||
return BsLightningChargeFill;
|
||||
case 'Discord API':
|
||||
return SiDiscord;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getProjectIcon = (title: string) => {
|
||||
if (title.includes('ventry')) {
|
||||
return MdLaunch;
|
||||
} else if (title.includes('ShareUpload')) {
|
||||
return HiOutlineCollection;
|
||||
} else if (title.includes('RestoreM')) {
|
||||
return SiDiscord;
|
||||
} else {
|
||||
return FaCode;
|
||||
}
|
||||
};
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
title: 'ventry.host v2',
|
||||
year: '2025',
|
||||
description: 'Free file hosting revamped with a modern design and improved user experience.',
|
||||
icon: getProjectIcon('ventry.host v2'),
|
||||
tags: [
|
||||
{ name: 'Next.js', icon: getTagIcon('Next.js') },
|
||||
{ name: 'Tailwind CSS', icon: getTagIcon('Tailwind CSS') },
|
||||
{ name: 'TypeScript', icon: getTagIcon('TypeScript') }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'ventry.host',
|
||||
year: '2023',
|
||||
description: 'A free file hosting solution with thousands of daily visitors.',
|
||||
icon: getProjectIcon('ventry.host'),
|
||||
tags: [
|
||||
{ name: 'PHP', icon: getTagIcon('PHP') },
|
||||
{ name: 'JavaScript', icon: getTagIcon('JavaScript') },
|
||||
{ name: 'MySQL', icon: getTagIcon('MySQL') }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'ShareUpload',
|
||||
year: '2022',
|
||||
description: 'High-performance file sharing platform with unlimited storage.',
|
||||
icon: getProjectIcon('ShareUpload'),
|
||||
tags: [
|
||||
{ name: 'PHP', icon: getTagIcon('PHP') },
|
||||
{ name: 'MySQL', icon: getTagIcon('MySQL') },
|
||||
{ name: 'Performance', icon: getTagIcon('Performance') }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'RestoreM',
|
||||
year: '2023',
|
||||
description: 'Discord server backup and restoration service.',
|
||||
icon: getProjectIcon('RestoreM'),
|
||||
tags: [
|
||||
{ name: 'PHP', icon: getTagIcon('PHP') },
|
||||
{ name: 'MySQL', icon: getTagIcon('MySQL') },
|
||||
{ name: 'Discord API', icon: getTagIcon('Discord API') }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const sortedProjects = [...projects].sort((a, b) => {
|
||||
return parseInt(b.year) - parseInt(a.year);
|
||||
});
|
||||
---
|
||||
|
||||
<section id="work" class="py-20 sm:py-40 px-4 sm:px-8 relative">
|
||||
<div class="absolute inset-0 bg-linear-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
|
||||
<div class="max-w-(--breakpoint-xl) mx-auto relative">
|
||||
<FadeIn>
|
||||
<div class="flex flex-col gap-3 mb-12 sm:mb-24">
|
||||
<span class="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
|
||||
Portfolio
|
||||
</span>
|
||||
<div class="flex items-baseline gap-4">
|
||||
<h2 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
|
||||
Selected Work
|
||||
</h2>
|
||||
<div class="h-px grow theme-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<div class="grid gap-24 sm:gap-40">
|
||||
{sortedProjects.map((project, index) => (
|
||||
<FadeIn delay={index * 0.1}>
|
||||
<div class="group relative">
|
||||
<div class="absolute top-0 left-0 right-0 flex items-center gap-4">
|
||||
<div class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
|
||||
{project.year}
|
||||
</div>
|
||||
<div class="h-px grow theme-border"></div>
|
||||
</div>
|
||||
|
||||
<div class="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr_1fr] gap-6 sm:gap-16">
|
||||
<div class="space-y-4 sm:space-y-8">
|
||||
<h3 class="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p class="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-70 transition-colors max-w-xl">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 sm:space-y-12">
|
||||
<div class="space-y-4 sm:space-y-6">
|
||||
<h4 class="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
|
||||
Technologies
|
||||
</h4>
|
||||
<div class="flex flex-wrap items-center gap-3 sm:gap-4">
|
||||
{project.tags.map((tag, tagIndex) => {
|
||||
const Icon = tag.icon;
|
||||
return (
|
||||
<span
|
||||
class="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-xs"
|
||||
>
|
||||
<span class="mr-2 flex items-center">
|
||||
<Icon className="text-lg" />
|
||||
</span>
|
||||
{tag.name}
|
||||
{tagIndex !== project.tags.length - 1 && (
|
||||
<span class="ml-2 opacity-0">•</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute -inset-x-4 sm:-inset-x-8 -inset-y-4 sm:-inset-y-6 rounded-2xl sm:rounded-3xl border border-white/0 group-hover:theme-border transition-colors"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1,178 +0,0 @@
|
||||
import { FadeIn } from '../ui/FadeIn';
|
||||
import { SiNextdotjs, SiTailwindcss, SiTypescript, SiPhp, SiJavascript, SiMysql, SiDiscord } from 'react-icons/si';
|
||||
import { BsLightningChargeFill } from 'react-icons/bs';
|
||||
import { FaCode } from 'react-icons/fa';
|
||||
import { HiOutlineCollection } from 'react-icons/hi';
|
||||
import { MdLaunch } from 'react-icons/md';
|
||||
import React from 'react';
|
||||
|
||||
interface Project {
|
||||
title: string;
|
||||
year: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
tags: Array<{
|
||||
name: string;
|
||||
icon: React.ReactNode;
|
||||
}>;
|
||||
}
|
||||
|
||||
const getTagIcon = (tag: string) => {
|
||||
switch (tag) {
|
||||
case 'Next.js':
|
||||
return <SiNextdotjs className="text-lg" />;
|
||||
case 'Tailwind CSS':
|
||||
return <SiTailwindcss className="text-lg" />;
|
||||
case 'TypeScript':
|
||||
return <SiTypescript className="text-lg" />;
|
||||
case 'PHP':
|
||||
return <SiPhp className="text-lg" />;
|
||||
case 'JavaScript':
|
||||
return <SiJavascript className="text-lg" />;
|
||||
case 'MySQL':
|
||||
return <SiMysql className="text-lg" />;
|
||||
case 'Performance':
|
||||
return <BsLightningChargeFill className="text-lg" />;
|
||||
case 'Discord API':
|
||||
return <SiDiscord className="text-lg" />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getProjectIcon = (title: string) => {
|
||||
if (title.includes('ventry')) {
|
||||
return <MdLaunch className="text-2xl" />;
|
||||
} else if (title.includes('ShareUpload')) {
|
||||
return <HiOutlineCollection className="text-2xl" />;
|
||||
} else if (title.includes('RestoreM')) {
|
||||
return <SiDiscord className="text-2xl" />;
|
||||
} else {
|
||||
return <FaCode className="text-2xl" />;
|
||||
}
|
||||
};
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
title: 'ventry.host v2',
|
||||
year: '2025',
|
||||
description: 'Free file hosting revamped with a modern design and improved user experience.',
|
||||
icon: getProjectIcon('ventry.host v2'),
|
||||
tags: [
|
||||
{ name: 'Next.js', icon: getTagIcon('Next.js') },
|
||||
{ name: 'Tailwind CSS', icon: getTagIcon('Tailwind CSS') },
|
||||
{ name: 'TypeScript', icon: getTagIcon('TypeScript') }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'ventry.host',
|
||||
year: '2023',
|
||||
description: 'A free file hosting solution with thousands of daily visitors.',
|
||||
icon: getProjectIcon('ventry.host'),
|
||||
tags: [
|
||||
{ name: 'PHP', icon: getTagIcon('PHP') },
|
||||
{ name: 'JavaScript', icon: getTagIcon('JavaScript') },
|
||||
{ name: 'MySQL', icon: getTagIcon('MySQL') }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'ShareUpload',
|
||||
year: '2022',
|
||||
description: 'High-performance file sharing platform with unlimited storage.',
|
||||
icon: getProjectIcon('ShareUpload'),
|
||||
tags: [
|
||||
{ name: 'PHP', icon: getTagIcon('PHP') },
|
||||
{ name: 'MySQL', icon: getTagIcon('MySQL') },
|
||||
{ name: 'Performance', icon: getTagIcon('Performance') }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'RestoreM',
|
||||
year: '2023',
|
||||
description: 'Discord server backup and restoration service.',
|
||||
icon: getProjectIcon('RestoreM'),
|
||||
tags: [
|
||||
{ name: 'PHP', icon: getTagIcon('PHP') },
|
||||
{ name: 'MySQL', icon: getTagIcon('MySQL') },
|
||||
{ name: 'Discord API', icon: getTagIcon('Discord API') }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Sort projects by year (newest first)
|
||||
const sortedProjects = [...projects].sort((a, b) => {
|
||||
return parseInt(b.year) - parseInt(a.year);
|
||||
});
|
||||
|
||||
export const Work = () => {
|
||||
return (
|
||||
<section id="work" className="py-20 sm:py-40 px-4 sm:px-8 relative">
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-white/[0.02] to-transparent pointer-events-none theme-bg-gradient"></div>
|
||||
<div className="max-w-screen-xl mx-auto relative">
|
||||
<FadeIn>
|
||||
<div className="flex flex-col gap-3 mb-12 sm:mb-24">
|
||||
<span className="theme-text-40 uppercase tracking-[0.2em] text-sm sm:text-base font-['Instrument_Sans']">
|
||||
Portfolio
|
||||
</span>
|
||||
<div className="flex items-baseline gap-4">
|
||||
<h2 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary">
|
||||
Selected Work
|
||||
</h2>
|
||||
<div className="h-px flex-grow theme-border"></div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
|
||||
<div className="grid gap-24 sm:gap-40">
|
||||
{sortedProjects.map((project, index) => (
|
||||
<FadeIn key={index} delay={index * 0.1}>
|
||||
<div className="group relative">
|
||||
<div className="absolute top-0 left-0 right-0 flex items-center gap-4">
|
||||
<div className="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em] py-2 pr-4">
|
||||
{project.year}
|
||||
</div>
|
||||
<div className="h-px flex-grow theme-border"></div>
|
||||
</div>
|
||||
|
||||
<div className="pt-12 sm:pt-16 grid grid-cols-1 lg:grid-cols-[1.5fr,1fr] gap-6 sm:gap-16">
|
||||
<div className="space-y-4 sm:space-y-8">
|
||||
<h3 className="font-['DM_Sans'] text-3xl sm:text-6xl font-semibold tracking-tight theme-primary group-hover:theme-text-90 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<p className="font-['Instrument_Sans'] text-base sm:text-xl theme-text-70 leading-relaxed group-hover:theme-text-70 transition-colors max-w-xl">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6 sm:space-y-12">
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
<h4 className="font-['Instrument_Sans'] text-sm sm:text-base theme-text-40 uppercase tracking-[0.2em]">
|
||||
Technologies
|
||||
</h4>
|
||||
<div className="flex flex-wrap items-center gap-3 sm:gap-4">
|
||||
{project.tags.map((tag, tagIndex) => (
|
||||
<span
|
||||
key={tagIndex}
|
||||
className="flex items-center text-sm sm:text-base theme-text-70 font-['Instrument_Sans'] tracking-wide py-1 sm:py-2 group-hover:theme-text-90 transition-colors bg-white/[0.02] px-3 sm:px-4 rounded-full shadow-sm"
|
||||
>
|
||||
<span className="mr-2 flex items-center">{tag.icon}</span>
|
||||
{tag.name}
|
||||
{tagIndex !== project.tags.length - 1 && (
|
||||
<span className="ml-2 opacity-0">•</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute -inset-x-4 sm:-inset-x-8 -inset-y-4 sm:-inset-y-6 rounded-2xl sm:rounded-3xl border border-white/0 group-hover:theme-border transition-colors"></div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
66
src/components/ui/FadeIn.astro
Normal file
66
src/components/ui/FadeIn.astro
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
interface Props {
|
||||
className?: string;
|
||||
delay?: number;
|
||||
direction?: 'up' | 'down' | 'left' | 'right';
|
||||
distance?: number;
|
||||
}
|
||||
|
||||
const {
|
||||
className = "",
|
||||
delay = 0,
|
||||
direction = 'up',
|
||||
distance = 20
|
||||
} = Astro.props;
|
||||
|
||||
const directionMap = {
|
||||
up: { x: 0, y: distance },
|
||||
down: { x: 0, y: -distance },
|
||||
left: { x: distance, y: 0 },
|
||||
right: { x: -distance, y: 0 }
|
||||
};
|
||||
|
||||
const { x, y } = directionMap[direction];
|
||||
const uniqueId = `fade-in-${Math.random().toString(36).substring(2, 9)}`;
|
||||
---
|
||||
|
||||
<div id={uniqueId} class={`fade-in ${className}`} data-delay={delay} data-direction={direction}>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translate(var(--start-x, 0px), var(--start-y, 20px));
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script define:vars={{ uniqueId, x, y, delay }}>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const element = document.getElementById(uniqueId);
|
||||
if (element) {
|
||||
element.style.setProperty('--start-x', `${x}px`);
|
||||
element.style.setProperty('--start-y', `${y}px`);
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
setTimeout(() => {
|
||||
element.classList.add('visible');
|
||||
}, delay * 1000);
|
||||
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: "0px 0px -10% 0px" });
|
||||
|
||||
observer.observe(element);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -1,51 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
|
||||
interface FadeInProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
delay?: number;
|
||||
direction?: 'up' | 'down' | 'left' | 'right';
|
||||
distance?: number;
|
||||
}
|
||||
|
||||
export const FadeIn = ({
|
||||
children,
|
||||
className = "",
|
||||
delay = 0,
|
||||
direction = 'up',
|
||||
distance = 20
|
||||
}: FadeInProps) => {
|
||||
const [ref, inView] = useInView({
|
||||
triggerOnce: true,
|
||||
threshold: 0.1,
|
||||
rootMargin: "0px 0px -10% 0px"
|
||||
});
|
||||
|
||||
const directionOffset = {
|
||||
up: { x: 0, y: distance },
|
||||
down: { x: 0, y: -distance },
|
||||
left: { x: distance, y: 0 },
|
||||
right: { x: -distance, y: 0 }
|
||||
};
|
||||
|
||||
const { x, y } = directionOffset[direction];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, x, y }}
|
||||
animate={inView ? { opacity: 1, x: 0, y: 0 } : { opacity: 0, x, y }}
|
||||
transition={{
|
||||
type: "spring",
|
||||
damping: 20,
|
||||
stiffness: 100,
|
||||
delay
|
||||
}}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
58
src/components/ui/GermanyFlag.astro
Normal file
58
src/components/ui/GermanyFlag.astro
Normal file
@ -0,0 +1,58 @@
|
||||
<div
|
||||
id="germany-flag"
|
||||
role="group"
|
||||
aria-label="Theme switcher with German flag colors"
|
||||
style="display:inline-flex;width:3em;height:0.6em;margin-left:0.1em;vertical-align:middle;border-radius:1px;overflow:hidden;opacity:0.6;cursor:pointer;"
|
||||
class="germany-flag-container hover:opacity-80 transition-opacity duration-200"
|
||||
>
|
||||
<button
|
||||
id="theme-black"
|
||||
aria-label="Switch to dark theme"
|
||||
data-theme="black"
|
||||
style="flex:1;background-color:rgba(0, 0, 0, 0.5);border-left:2px solid rgba(255, 255, 255, 0.1);border-top:2px solid rgba(255, 255, 255, 0.1);border-bottom:2px solid rgba(255, 255, 255, 0.1);"
|
||||
class="theme-button transition-transform duration-200 hover:scale-105 active:scale-95 cursor-pointer"
|
||||
></button>
|
||||
<button
|
||||
id="theme-red"
|
||||
aria-label="Switch to red theme"
|
||||
data-theme="red"
|
||||
style="flex:1;background-color:rgba(255, 0, 0);"
|
||||
class="theme-button transition-transform duration-200 hover:scale-105 active:scale-95 cursor-pointer"
|
||||
></button>
|
||||
<button
|
||||
id="theme-gold"
|
||||
aria-label="Switch to gold theme"
|
||||
data-theme="gold"
|
||||
style="flex:1;background-color:rgba(255, 204, 0);"
|
||||
class="theme-button transition-transform duration-200 hover:scale-105 active:scale-95 cursor-pointer"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const themeButtons = document.querySelectorAll('.theme-button');
|
||||
const currentTheme = localStorage.getItem('theme') || 'black';
|
||||
|
||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||||
document.getElementById(`theme-${currentTheme}`)?.classList.add('ring-1', 'ring-white/20');
|
||||
|
||||
themeButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const theme = button.getAttribute('data-theme');
|
||||
if (!theme) return;
|
||||
|
||||
themeButtons.forEach(btn => btn.classList.remove('ring-1', 'ring-white/20'));
|
||||
|
||||
button.classList.add('ring-1', 'ring-white/20');
|
||||
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
|
||||
const themeChangedEvent = new CustomEvent('themeChanged', {
|
||||
detail: { theme }
|
||||
});
|
||||
document.dispatchEvent(themeChangedEvent);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -1,57 +0,0 @@
|
||||
import { useContext } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ThemeContext } from '../../context/ThemeContext';
|
||||
|
||||
export const GermanyFlag = () => {
|
||||
const { theme, setTheme } = useContext(ThemeContext);
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
role="group"
|
||||
aria-label="Theme switcher with German flag colors"
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
width: "3em",
|
||||
height: "0.6em",
|
||||
marginLeft: "0.1em",
|
||||
verticalAlign: "middle",
|
||||
borderRadius: "1px",
|
||||
overflow: "hidden",
|
||||
opacity: 0.6,
|
||||
cursor: "pointer"
|
||||
}}
|
||||
whileHover={{
|
||||
opacity: 0.8,
|
||||
transition: { duration: 0.2 }
|
||||
}}
|
||||
>
|
||||
<motion.button
|
||||
aria-label="Switch to dark theme"
|
||||
aria-pressed={theme === 'black'}
|
||||
style={{ flex: 1, backgroundColor: "rgba(0, 0, 0, 0.5)", borderLeft: "2px solid rgba(255, 255, 255, 0.1)", borderTop: "2px solid rgba(255, 255, 255, 0.1)", borderBottom: "2px solid rgba(255, 255, 255, 0.1)" }}
|
||||
onClick={() => setTheme('black')}
|
||||
className={theme === 'black' ? 'ring-1 ring-white/20' : ''}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
/>
|
||||
<motion.button
|
||||
aria-label="Switch to red theme"
|
||||
aria-pressed={theme === 'red'}
|
||||
style={{ flex: 1, backgroundColor: "rgba(255, 0, 0)" }}
|
||||
onClick={() => setTheme('red')}
|
||||
className={theme === 'red' ? 'ring-1 ring-white/20' : ''}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
/>
|
||||
<motion.button
|
||||
aria-label="Switch to gold theme"
|
||||
aria-pressed={theme === 'gold'}
|
||||
style={{ flex: 1, backgroundColor: "rgba(255, 204, 0)" }}
|
||||
onClick={() => setTheme('gold')}
|
||||
className={theme === 'gold' ? 'ring-1 ring-white/20' : ''}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
/>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
import { createContext, useState, ReactNode } from 'react';
|
||||
|
||||
export type Theme = 'black' | 'red' | 'gold';
|
||||
|
||||
export type ThemeContextType = {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
};
|
||||
|
||||
export const ThemeContext = createContext<ThemeContextType>({
|
||||
theme: 'black',
|
||||
setTheme: () => {},
|
||||
});
|
||||
|
||||
export const ThemeProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [theme, setTheme] = useState<Theme>('black');
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, setTheme }}>
|
||||
<div className={theme}>
|
||||
{children}
|
||||
</div>
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -1,22 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
import Lenis from '@studio-freight/lenis';
|
||||
|
||||
export const useSmoothScroll = () => {
|
||||
useEffect(() => {
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||
orientation: 'vertical',
|
||||
smoothWheel: true,
|
||||
touchMultiplier: 2,
|
||||
});
|
||||
|
||||
function raf(time: number) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
|
||||
requestAnimationFrame(raf);
|
||||
return () => { lenis.destroy(); };
|
||||
}, []);
|
||||
};
|
||||
@ -1,22 +0,0 @@
|
||||
import "@/styles/globals.css";
|
||||
import type { AppProps } from "next/app";
|
||||
import { ThemeProvider } from "../context/ThemeContext";
|
||||
|
||||
// Import global styles
|
||||
import "../styles/theme.css";
|
||||
|
||||
// Font imports
|
||||
import '@fontsource/dm-sans/400.css';
|
||||
import '@fontsource/dm-sans/500.css';
|
||||
import '@fontsource/dm-sans/600.css';
|
||||
import '@fontsource/dm-sans/700.css';
|
||||
import '@fontsource/instrument-sans/400.css';
|
||||
import '@fontsource/instrument-sans/500.css';
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<Component {...pageProps} />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body className="antialiased">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
127
src/pages/index.astro
Normal file
127
src/pages/index.astro
Normal file
@ -0,0 +1,127 @@
|
||||
---
|
||||
import Header from '../components/layout/Header.astro';
|
||||
import Hero from '../components/sections/Hero.astro';
|
||||
import About from '../components/sections/About.astro';
|
||||
import Work from '../components/sections/Work.astro';
|
||||
import Footer from '../components/layout/Footer.astro';
|
||||
|
||||
import '../styles/global.css';
|
||||
import '../styles/theme.css';
|
||||
|
||||
import '@fontsource/dm-sans/400.css';
|
||||
import '@fontsource/dm-sans/500.css';
|
||||
import '@fontsource/dm-sans/600.css';
|
||||
import '@fontsource/dm-sans/700.css';
|
||||
import '@fontsource/instrument-sans/400.css';
|
||||
import '@fontsource/instrument-sans/500.css';
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Jan-Marlon Leibl • Fullstack Software Developer | PHP & TypeScript Expert</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<meta name="title" content="Jan-Marlon Leibl • Fullstack Software Developer | PHP & TypeScript Expert" />
|
||||
<meta name="description" content="Experienced Fullstack Developer specializing in PHP and TypeScript. Creating high-performance web applications and digital experiences with modern technologies." />
|
||||
<meta name="keywords" content="Software Development, PHP Developer, TypeScript, Fullstack Engineer, Web Development, System Architecture, MySQL, React, Performance Optimization" />
|
||||
<meta name="author" content="Jan-Marlon Leibl" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://jleibl.net/" />
|
||||
<meta property="og:title" content="Jan-Marlon Leibl • Fullstack Software Developer" />
|
||||
<meta property="og:description" content="Experienced Fullstack Developer specializing in PHP and TypeScript. Creating high-performance web applications and digital experiences with modern technologies." />
|
||||
<meta property="og:image" content="https://jleibl.net/profile-image.jpg" />
|
||||
<meta property="og:image:width" content="400" />
|
||||
<meta property="og:image:height" content="400" />
|
||||
<meta property="og:image:alt" content="Jan-Marlon Leibl - Fullstack Software Developer" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content="https://jleibl.net/" />
|
||||
<meta name="twitter:title" content="Jan-Marlon Leibl • Fullstack Software Developer" />
|
||||
<meta name="twitter:description" content="Experienced Fullstack Developer specializing in PHP and TypeScript. Creating high-performance web applications and digital experiences with modern technologies." />
|
||||
<meta name="twitter:image" content="https://jleibl.net/profile-image.jpg" />
|
||||
<meta name="twitter:image:alt" content="Jan-Marlon Leibl - Fullstack Software Developer" />
|
||||
|
||||
<link rel="icon" href="/profile-image.jpg" type="image/jpeg" />
|
||||
<link rel="canonical" href="https://jleibl.net/" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app-root" class="min-h-screen theme-transition black">
|
||||
<Header />
|
||||
<Hero />
|
||||
<About />
|
||||
<Work />
|
||||
<Footer />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
// Theme Provider functionality
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const appRoot = document.getElementById('app-root');
|
||||
const themeButtons = document.querySelectorAll('.theme-button');
|
||||
const currentTheme = localStorage.getItem('theme') || 'black';
|
||||
|
||||
if (appRoot) {
|
||||
appRoot.classList.remove('black', 'red', 'gold');
|
||||
appRoot.classList.add(currentTheme);
|
||||
}
|
||||
|
||||
document.documentElement.setAttribute('data-theme', currentTheme);
|
||||
|
||||
document.getElementById(`theme-${currentTheme}`)?.classList.add('ring-1', 'ring-white/20');
|
||||
|
||||
document.addEventListener('themeChanged', (e) => {
|
||||
const customEvent = e as Event & { detail: { theme: string } };
|
||||
const newTheme = customEvent.detail.theme;
|
||||
if (appRoot && newTheme) {
|
||||
appRoot.classList.remove('black', 'red', 'gold');
|
||||
appRoot.classList.add(newTheme);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Lenis from '@studio-freight/lenis';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||
smoothWheel: true,
|
||||
wheelMultiplier: 1,
|
||||
touchMultiplier: 2,
|
||||
});
|
||||
|
||||
const anchorLinks = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
anchorLinks.forEach(link => {
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = link.getAttribute('href');
|
||||
if (targetId && targetId !== '#') {
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
lenis.scrollTo(targetElement as HTMLElement, {
|
||||
offset: 0,
|
||||
duration: 1.2,
|
||||
immediate: false
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
|
||||
requestAnimationFrame(raf);
|
||||
});
|
||||
</script>
|
||||
@ -1,54 +0,0 @@
|
||||
import dynamic from 'next/dynamic';
|
||||
import Head from 'next/head';
|
||||
import { useSmoothScroll } from '../hooks/useSmoothScroll';
|
||||
|
||||
const Header = dynamic(() => import('../components/layout/Header').then(mod => ({ default: mod.Header })));
|
||||
const Hero = dynamic(() => import('../components/sections/Hero').then(mod => ({ default: mod.Hero })));
|
||||
const About = dynamic(() => import('../components/sections/About').then(mod => ({ default: mod.About })));
|
||||
const Work = dynamic(() => import('../components/sections/Work').then(mod => ({ default: mod.Work })));
|
||||
const Footer = dynamic(() => import('../components/layout/Footer').then(mod => ({ default: mod.Footer })));
|
||||
|
||||
export default function Home() {
|
||||
useSmoothScroll();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen theme-transition">
|
||||
<Head>
|
||||
<title>Jan-Marlon Leibl • Fullstack Software Developer | PHP & TypeScript Expert</title>
|
||||
<meta charSet="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<meta name="title" content="Jan-Marlon Leibl • Fullstack Software Developer | PHP & TypeScript Expert" />
|
||||
<meta name="description" content="Experienced Fullstack Developer specializing in PHP and TypeScript. Creating high-performance web applications and digital experiences with modern technologies." />
|
||||
<meta name="keywords" content="Software Development, PHP Developer, TypeScript, Fullstack Engineer, Web Development, System Architecture, MySQL, React, Performance Optimization" />
|
||||
<meta name="author" content="Jan-Marlon Leibl" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://jleibl.net/" />
|
||||
<meta property="og:title" content="Jan-Marlon Leibl • Fullstack Software Developer" />
|
||||
<meta property="og:description" content="Experienced Fullstack Developer specializing in PHP and TypeScript. Creating high-performance web applications and digital experiences with modern technologies." />
|
||||
<meta property="og:image" content="https://jleibl.net/profile-image.jpg" />
|
||||
<meta property="og:image:width" content="400" />
|
||||
<meta property="og:image:height" content="400" />
|
||||
<meta property="og:image:alt" content="Jan-Marlon Leibl - Fullstack Software Developer" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content="https://jleibl.net/" />
|
||||
<meta name="twitter:title" content="Jan-Marlon Leibl • Fullstack Software Developer" />
|
||||
<meta name="twitter:description" content="Experienced Fullstack Developer specializing in PHP and TypeScript. Creating high-performance web applications and digital experiences with modern technologies." />
|
||||
<meta name="twitter:image" content="https://jleibl.net/profile-image.jpg" />
|
||||
<meta name="twitter:image:alt" content="Jan-Marlon Leibl - Fullstack Software Developer" />
|
||||
|
||||
<link rel="icon" href="/profile-image.jpg" type="image/jpeg" />
|
||||
<link rel="canonical" href="https://jleibl.net/" />
|
||||
</Head>
|
||||
|
||||
<Header />
|
||||
<Hero />
|
||||
<About />
|
||||
<Work />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
src/styles/global.css
Normal file
43
src/styles/global.css
Normal file
@ -0,0 +1,43 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import type { Config } from "tailwindcss";
|
||||
|
||||
export default {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
background: "var(--background)",
|
||||
foreground: "var(--foreground)",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
} satisfies Config;
|
||||
@ -1,7 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
@ -11,12 +15,21 @@
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
"jsxImportSource": "react"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user