ui update!
This commit is contained in:
dvorakmortonxd
parent
cadbe8caa9
commit
d2f99c87b9
16 changed files with 3085 additions and 592 deletions
43
src/app/components/Clock.tsx
Normal file
43
src/app/components/Clock.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
function format(date: Date) {
|
||||
return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
}
|
||||
|
||||
export default function Clock({
|
||||
className,
|
||||
withSeconds = false,
|
||||
}: {
|
||||
className?: string;
|
||||
withSeconds?: boolean;
|
||||
}) {
|
||||
const [now, setNow] = useState<Date | null>(() =>
|
||||
typeof window === "undefined" ? null : new Date()
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const id = window.setInterval(
|
||||
() => setNow(new Date()),
|
||||
withSeconds ? 1000 : 10000
|
||||
);
|
||||
return () => window.clearInterval(id);
|
||||
}, [withSeconds]);
|
||||
|
||||
const text = now
|
||||
? withSeconds
|
||||
? now.toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
})
|
||||
: format(now)
|
||||
: "";
|
||||
|
||||
return (
|
||||
<span className={className} suppressHydrationWarning>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
77
src/app/components/IosHome.tsx
Normal file
77
src/app/components/IosHome.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { APPS, APP_BY_ID } from "./apps";
|
||||
import Clock from "./Clock";
|
||||
import { useTheme } from "./useTheme";
|
||||
import { WALLPAPER } from "../data";
|
||||
|
||||
export default function IosHome() {
|
||||
const { theme, toggle } = useTheme();
|
||||
const [openId, setOpenId] = useState<string | null>(null);
|
||||
const openApp = openId ? APP_BY_ID[openId] : null;
|
||||
|
||||
return (
|
||||
<div className="ios-root">
|
||||
{/* iOS app view */}
|
||||
{openApp ? (
|
||||
<div className="ios-app-view">
|
||||
<div className="ios-navbar">
|
||||
<button type="button" className="ios-back" onClick={() => setOpenId(null)}>
|
||||
‹ Home
|
||||
</button>
|
||||
<span className="ios-navbar-title">{openApp.title}</span>
|
||||
<span className="ios-navbar-spacer" />
|
||||
</div>
|
||||
<div className="ios-app-body app-surface">{openApp.content}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="ios-home"
|
||||
style={{ backgroundImage: `url('${WALLPAPER}')` }}
|
||||
>
|
||||
<div className="ios-statusbar">
|
||||
<span className="ios-status-time">
|
||||
<Clock />
|
||||
</span>
|
||||
<span className="ios-status-icons" aria-hidden="true">
|
||||
●●● ᯤ ▮
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="ios-theme-app"
|
||||
onClick={toggle}
|
||||
aria-label={`Switch to ${theme === "skeuo" ? "terminal" : "Aero"} theme`}
|
||||
>
|
||||
<span className="ios-theme-app-icon" aria-hidden="true">
|
||||
{theme === "skeuo" ? "▚" : "❖"}
|
||||
</span>
|
||||
<span className="ios-theme-app-label">{theme === "skeuo" ? "Terminal" : "Aero"}</span>
|
||||
</button>
|
||||
|
||||
<div className="ios-grid">
|
||||
{APPS.map((app) => (
|
||||
<button
|
||||
key={app.id}
|
||||
type="button"
|
||||
className="ios-app"
|
||||
onClick={() => setOpenId(app.id)}
|
||||
>
|
||||
<span className="ios-app-icon" style={{ background: app.color }}>
|
||||
{app.icon}
|
||||
</span>
|
||||
<span className="ios-app-label">{app.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="ios-dock">
|
||||
<span className="ios-dock-slots" aria-hidden="true" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -51,6 +51,7 @@ export default function SlBackground() {
|
|||
`}
|
||||
</style>
|
||||
<div
|
||||
className="sl-background"
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
|
|
|
|||
726
src/app/components/TerminalLayout.tsx
Normal file
726
src/app/components/TerminalLayout.tsx
Normal file
|
|
@ -0,0 +1,726 @@
|
|||
import Image from "next/image";
|
||||
import type { CSSProperties } from "react";
|
||||
import SlBackground from "./SlBackground";
|
||||
import JokerLogo from "./JokerLogo";
|
||||
import ServiceButton from "./ServiceButton";
|
||||
import ContributionHeatmap from "./ContributionHeatmap";
|
||||
import Clock from "./Clock";
|
||||
import { useTheme } from "./useTheme";
|
||||
import { socials, codingProjects, techProjects, friends } from "../data";
|
||||
|
||||
type PanelStyle = CSSProperties & { "--panel-color"?: string };
|
||||
|
||||
const panelStyle = (color: string, style: CSSProperties = {}): PanelStyle => ({
|
||||
...style,
|
||||
"--panel-color": color,
|
||||
});
|
||||
|
||||
export default function TerminalLayout() {
|
||||
const { theme, toggle } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlBackground />
|
||||
<div className="container">
|
||||
<header className="header">
|
||||
<div className="header-center">
|
||||
<JokerLogo />
|
||||
<h1 className="site-name">dvorakmortonxd.dev</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="hero">
|
||||
<div className="hero-panel" style={panelStyle("var(--accent)")}>
|
||||
<span
|
||||
className="hero-panel-label"
|
||||
style={{ color: "var(--accent)", borderColor: "var(--accent)" }}
|
||||
>
|
||||
README.MD
|
||||
</span>
|
||||
<h2 className="hero-title">$ whoami</h2>
|
||||
<p className="hero-subtitle">
|
||||
Welcome my personal website! Here I show off my projects and hardware I own,
|
||||
aswell as my self-hosted services :)<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="search-section">
|
||||
<div className="tui-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
SEARXNG.C
|
||||
</span>
|
||||
<form
|
||||
action="https://search.dvorakmortonxd.dev/search"
|
||||
method="GET"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="search-form"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search... (only works for those who are whitelisted)"
|
||||
className="search-bar"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="social-section">
|
||||
<div className="tui-panel" style={panelStyle("var(--accent)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--accent)", borderColor: "var(--accent)" }}
|
||||
>
|
||||
SOCIALS.JS
|
||||
</span>
|
||||
<div className="social-buttons">
|
||||
{socials.map((s) => (
|
||||
<a
|
||||
key={s.name}
|
||||
href={s.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-button"
|
||||
>
|
||||
<Image
|
||||
src={s.icon}
|
||||
alt={s.name}
|
||||
width={16}
|
||||
height={16}
|
||||
className="social-icon"
|
||||
/>
|
||||
<span className="social-label">{s.name}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="mail-contact">
|
||||
mail if u ever wanna contact me:{" "}
|
||||
<a href="mailto:dvorak@dvorakmortonxd.dev">dvorak@dvorakmortonxd.dev</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="gym-section">
|
||||
<div className="tui-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
GYM_SBD_AT_73KG_BW.DB
|
||||
</span>
|
||||
<div className="gym-grid">
|
||||
<div className="gym-item">
|
||||
<Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">SQUAT</div>
|
||||
<div className="gym-weight">125kg</div>
|
||||
<div className="gym-date">5.1.2025</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image src="/bench.svg" alt="Bench" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">BENCH</div>
|
||||
<div className="gym-weight">111kg</div>
|
||||
<div className="gym-date">29.5.2026</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image
|
||||
src="/deadlift.svg"
|
||||
alt="Deadlift"
|
||||
width={48}
|
||||
height={48}
|
||||
className="gym-icon"
|
||||
/>
|
||||
<div className="gym-label">DEADLIFT</div>
|
||||
<div className="gym-weight">165kg</div>
|
||||
<div className="gym-date">17.12.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="about-section">
|
||||
<div className="tui-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
NOW.TXT
|
||||
</span>
|
||||
<div className="about-content">
|
||||
<p>
|
||||
<span style={{ color: "var(--green)" }}>martin@dvorakmortonxd</span>:
|
||||
<span className="text-blue">~</span>$ cat now.txt
|
||||
</p>
|
||||
<div style={{ color: "#a3a3a3" }}>
|
||||
<p>
|
||||
I'm currently hosting an SMP (dm me on discord). Also I'm pretty
|
||||
much cooking daily, because im bulking through out the non-summer seasons.
|
||||
And me and my pal <a href="https://skopec.dev">Pepa</a> are working on an
|
||||
education app so we can study more efficiently, It's called{" "}
|
||||
<a href="https://git.dvorakmortonxd.dev/edu/maturita.c">maturita.c</a>!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="about-section">
|
||||
<div className="tui-panel" style={panelStyle("var(--accent)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--accent)", borderColor: "var(--accent)" }}
|
||||
>
|
||||
README.MD
|
||||
</span>
|
||||
<div className="about-content">
|
||||
<p>
|
||||
<span className="text-green">martin@dvorakmortonxd</span>:
|
||||
<span className="text-blue">~</span>$ cat about_me.md
|
||||
</p>
|
||||
<div style={{ color: "#a3a3a3" }}>
|
||||
<p>
|
||||
Hey, I'm Martin Dvořák — a 17(soon to be 18)-year-old IT student based
|
||||
in the Czech Republic, specializing in network management and
|
||||
administration at <a href="https://sssvt.cz">sssvt.cz</a>. I'm a
|
||||
sophomore and I have wanted to go to this school since 7th grade (2022) so
|
||||
I'm happy I got in in 2025, the school is pretty cool so if you are in
|
||||
middle school and interested in IT, make sure to check it out. I'm a
|
||||
homelabber and developer heavily focused on self-hosting{" "}
|
||||
<i>literally everything</i>, writing code (for example games for gamejams),
|
||||
tinkering with GNU/Linux or Musl/Linux systems and retro hardware. I own a
|
||||
small collection of laptops ranging from 2009 to 2014 (and ofcourse my 2025
|
||||
macbook), most of these found in ewaste. In my free time I mostly spend
|
||||
time with my gf {"<"}3, I also spend a bit of time setting up my self
|
||||
hosted stuff (like jellyfin or gitdxd), and also when I'm in my gaming
|
||||
mood I play terraria (around 1300hr playtime btw) and minecraft modpacks
|
||||
with mekanism and/or create. I also go to the gym around 3-5 times a week,
|
||||
running a PPL split focused on strength/powerlifting and especially SBD. I
|
||||
take a big focus on my health and physique.
|
||||
<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="services-section">
|
||||
<div className="tui-panel" style={panelStyle("var(--accent)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--accent)", borderColor: "var(--accent)" }}
|
||||
>
|
||||
SERVICES.HTML
|
||||
</span>
|
||||
<div className="services-buttons services-main">
|
||||
<ServiceButton
|
||||
url="https://proxmox.dvorakmortonxd.dev/"
|
||||
className="proxmox"
|
||||
icon="🖥️"
|
||||
name="Proxmox"
|
||||
desc="Server Management"
|
||||
access="private"
|
||||
disabled
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://ai.dvorakmortonxd.dev/"
|
||||
className="ai"
|
||||
icon="🦾"
|
||||
name="Llama.cpp"
|
||||
desc="Local AI Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://jelly.dvorakmortonxd.dev/"
|
||||
className="jellyfin"
|
||||
icon="🎬"
|
||||
name="Jellyfin"
|
||||
desc="Local Media Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://discord.gg/vyvhk7d8bX"
|
||||
checkUrl="minecraft://mc.dvorakmortonxd.dev:25565"
|
||||
className="pterodactyl"
|
||||
icon="🎮"
|
||||
name="SMP"
|
||||
desc="My Survival Minecraft Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://navidrome.dvorakmortonxd.dev/"
|
||||
className="funkwhale"
|
||||
icon="🎸"
|
||||
name="Navidrome"
|
||||
desc="Music Streaming"
|
||||
access="private"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://git.dvorakmortonxd.dev"
|
||||
className="gitdxd"
|
||||
icon="🐙"
|
||||
name="GitDXD"
|
||||
desc="Best Git Hosting OAT"
|
||||
access="public"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="gitdxd-section" style={{ marginTop: "20px" }}>
|
||||
<div className="tui-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
GITDXD.GIT
|
||||
</span>
|
||||
<div style={{ padding: "24px 16px 16px" }}>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2.4rem",
|
||||
fontWeight: "bold",
|
||||
color: "var(--white)",
|
||||
marginBottom: "16px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
GitDXD
|
||||
</h2>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.8rem",
|
||||
color: "var(--white)",
|
||||
fontWeight: "500",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
My Self-hosted Git Instance
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
marginBottom: "16px",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(255, 255, 255, 0.4)",
|
||||
boxShadow: "0 0 30px rgba(180, 255, 125, 0.15)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/gitdxd.webp"
|
||||
alt="GitDXD Preview"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
color: "var(--gray)",
|
||||
marginTop: "12px",
|
||||
lineHeight: "1.6",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<p>
|
||||
My very own forgejo git instance, originally started as a private git
|
||||
instance for me and my friends to boycott GitHub but I've made it
|
||||
public now so. Join at{" "}
|
||||
<span className="text-purple-500">
|
||||
<a href="https://git.dvorakmortonxd.dev">git.dvorakmortonxd.dev</a>
|
||||
</span>
|
||||
.<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="commits-section" style={{ marginTop: "20px" }}>
|
||||
<div className="tui-panel" style={panelStyle("var(--accent)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--accent)", borderColor: "var(--accent)" }}
|
||||
>
|
||||
CONTRIBUTIONS@GITDXD.GIT
|
||||
</span>
|
||||
<div className="commits-content" style={{ padding: "24px 12px 16px" }}>
|
||||
<ContributionHeatmap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="revival-section" style={{ marginTop: "20px" }}>
|
||||
<div className="tui-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
REVIVAL.INC
|
||||
</span>
|
||||
<div style={{ padding: "24px 16px 16px" }}>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2.4rem",
|
||||
fontWeight: "bold",
|
||||
color: "var(--white)",
|
||||
marginBottom: "32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Revival inc.
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
marginTop: "12px",
|
||||
marginBottom: "12px",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(0, 0, 0, 0.4)",
|
||||
boxShadow: "0 0 30px rgba(255, 255, 255, 0.35)",
|
||||
width: "80%",
|
||||
margin: "12px auto",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/revivalinc.webp"
|
||||
alt="revival inc thumbnail"
|
||||
width={768}
|
||||
height={576}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.8rem",
|
||||
color: "var(--white)",
|
||||
fontWeight: "500",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
What is it?
|
||||
</p>
|
||||
<div style={{ color: "var(--gray)", marginTop: "12px", lineHeight: "1.6" }}>
|
||||
<p>
|
||||
It's a game I made for the game jam "Mini Jame Gam #55", the
|
||||
theme was Necromancy and the special item was Milk, the game also includes
|
||||
a tutorial so if you wanna try it do it. Check it out at{" "}
|
||||
<span className="text-purple-500">
|
||||
<a href="https://martin-dv.itch.io/revival-inc">itch.io</a>
|
||||
</span>{" "}
|
||||
or play{" "}
|
||||
<span className="text-purple-500">
|
||||
<a href="https://dvorakmortonxd.dev/revival-inc">here</a>
|
||||
</span>
|
||||
.<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rustywolf-section" style={{ marginTop: "20px" }}>
|
||||
<div className="tui-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="tui-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
RUSTYWOLF.RS
|
||||
</span>
|
||||
<div style={{ padding: "24px 16px 16px" }}>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2.4rem",
|
||||
fontWeight: "bold",
|
||||
color: "var(--white)",
|
||||
marginBottom: "32px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Introducing RustyWolf
|
||||
</h2>
|
||||
<div
|
||||
style={{
|
||||
marginTop: "12px",
|
||||
marginBottom: "12px",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(255, 255, 255, 0.4)",
|
||||
boxShadow: "0 0 30px rgba(255, 255, 255, 0.2)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/RustyWolfPreview.webp"
|
||||
alt="RustyWolf Browser Preview"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.8rem",
|
||||
color: "var(--white)",
|
||||
fontWeight: "500",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
What makes it so cool???
|
||||
</p>
|
||||
<div style={{ color: "var(--gray)", marginTop: "12px", lineHeight: "1.6" }}>
|
||||
<p>
|
||||
A lightweight browser made in Rust with WebKitGTK. It's the successor
|
||||
to my previous project Venturesome, aiming to provide a fast and minimalist
|
||||
browsing experience. It's a perfect browser for old machines that
|
||||
struggle with modern browsers. Check it out at{" "}
|
||||
<span style={{ color: "var(--accent2)" }}>
|
||||
<a href="https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf">
|
||||
GitDXD
|
||||
</a>
|
||||
</span>
|
||||
.<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<section className="projects">
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel" style={panelStyle("var(--white)")}>
|
||||
<span
|
||||
className="subsection-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
TECH_LIST.JSON
|
||||
</span>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
margin: "4px 0 20px",
|
||||
color: "var(--white)",
|
||||
}}
|
||||
>
|
||||
All my hardware equipment :)
|
||||
</h2>
|
||||
<div className="project-grid">
|
||||
{techProjects.map((project) => (
|
||||
<div key={project.title} className="project-card">
|
||||
<div
|
||||
className="project-image"
|
||||
style={{ backgroundImage: `url(${project.image})` }}
|
||||
/>
|
||||
<h4 className="project-title">{project.title}</h4>
|
||||
<p className="project-desc">{project.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel coding-panel" style={panelStyle("var(--accent)")}>
|
||||
<span
|
||||
className="subsection-panel-label"
|
||||
style={{ color: "var(--accent)", borderColor: "var(--accent)" }}
|
||||
>
|
||||
PROJECTS.DOCX
|
||||
</span>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
margin: "4px 0 20px",
|
||||
color: "var(--accent)",
|
||||
}}
|
||||
>
|
||||
All the stuff I've worked on :))
|
||||
</h2>
|
||||
<div className="project-grid">
|
||||
{codingProjects.map((project, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="project-card"
|
||||
>
|
||||
<div
|
||||
className="project-image"
|
||||
style={{ backgroundImage: `url(${project.img})` }}
|
||||
/>
|
||||
<h4 className="project-title">{project.title}</h4>
|
||||
<p className="project-desc">{project.desc}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="subsection-wrapper">
|
||||
<div
|
||||
className="subsection-panel friends-panel"
|
||||
style={panelStyle("var(--white)", { backgroundColor: "rgba(255, 255, 255, 0.02)" })}
|
||||
>
|
||||
<span
|
||||
className="subsection-panel-label"
|
||||
style={{ color: "var(--white)", borderColor: "var(--white)" }}
|
||||
>
|
||||
FRIENDS.TSX
|
||||
</span>
|
||||
<h2
|
||||
style={{
|
||||
fontSize: "2rem",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
margin: "4px 0 20px",
|
||||
color: "var(--white)",
|
||||
}}
|
||||
>
|
||||
Friend's websites and projects
|
||||
</h2>
|
||||
<div className="services-buttons" style={{ gap: "1rem" }}>
|
||||
{friends.map((friend, idx) => (
|
||||
<ServiceButton
|
||||
key={idx}
|
||||
url={friend.realUrl || friend.url}
|
||||
className="friend"
|
||||
icon={
|
||||
<Image
|
||||
src={friend.img}
|
||||
alt={friend.name}
|
||||
width={68}
|
||||
height={68}
|
||||
className="friend-icon"
|
||||
style={{
|
||||
borderRadius: "50%",
|
||||
filter:
|
||||
"brightness(0) invert(65%) hue-rotate(70deg) saturate(100%)",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
name={friend.name}
|
||||
desc={friend.desc}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: "12px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: "16px",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ fontSize: "1.5rem", color: "var(--accent)", fontWeight: "600" }}>
|
||||
Quipee by Bukovina Filip & Vlk Tomáš
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
borderRadius: "8px",
|
||||
overflow: "hidden",
|
||||
border: "1px solid rgba(255, 255, 0, 0.3)",
|
||||
boxShadow: "0 0 20px rgba(255, 255, 0, 0.1)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/quipee.webp"
|
||||
alt="Quipee Thumbnail"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "12px",
|
||||
flexWrap: "wrap",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href="https://quipee.me"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
backgroundColor: "rgba(255, 255, 255, 0.04)",
|
||||
color: "var(--white)",
|
||||
padding: "6px 16px",
|
||||
borderRadius: "6px",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
textDecoration: "none",
|
||||
border: "1px solid rgba(255, 255, 0, 0.3)",
|
||||
}}
|
||||
>
|
||||
Web
|
||||
</a>
|
||||
<a
|
||||
href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
backgroundColor: "rgba(255, 255, 255, 0.04)",
|
||||
color: "var(--white)",
|
||||
padding: "6px 16px",
|
||||
borderRadius: "6px",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
textDecoration: "none",
|
||||
border: "1px solid rgba(255, 255, 0, 0.3)",
|
||||
}}
|
||||
>
|
||||
Android
|
||||
</a>
|
||||
<a
|
||||
href="https://testflight.apple.com/join/hP2a1E5x"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{
|
||||
backgroundColor: "rgba(255, 255, 255, 0.04)",
|
||||
color: "var(--white)",
|
||||
padding: "6px 16px",
|
||||
borderRadius: "6px",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "500",
|
||||
textDecoration: "none",
|
||||
border: "1px solid rgba(255, 255, 0, 0.3)",
|
||||
}}
|
||||
>
|
||||
IOS
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="footer">
|
||||
<span className="footer-label">v1.2.1</span>
|
||||
© 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just follow
|
||||
the GPL3.0 License)
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div className="tui-statusbar">
|
||||
<span className="tui-statusbar-item">theme: terminal</span>
|
||||
<button type="button" className="tui-statusbar-btn" onClick={toggle}>
|
||||
[ switch to {theme === "skeuo" ? "terminal" : "Aero"} ]
|
||||
</button>
|
||||
<span className="tui-statusbar-spacer" />
|
||||
<Clock className="tui-statusbar-clock" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
25
src/app/components/ThemeRoot.tsx
Normal file
25
src/app/components/ThemeRoot.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
"use client";
|
||||
|
||||
import { useTheme } from "./useTheme";
|
||||
import TerminalLayout from "./TerminalLayout";
|
||||
import WindowsDesktop from "./WindowsDesktop";
|
||||
import IosHome from "./IosHome";
|
||||
|
||||
export default function ThemeRoot() {
|
||||
const { theme } = useTheme();
|
||||
|
||||
if (theme === "terminal") {
|
||||
return <TerminalLayout />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="skeuo-desktop-root">
|
||||
<WindowsDesktop />
|
||||
</div>
|
||||
<div className="skeuo-ios-root">
|
||||
<IosHome />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
109
src/app/components/WinWindow.tsx
Normal file
109
src/app/components/WinWindow.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
"use client";
|
||||
|
||||
import { useRef, type CSSProperties } from "react";
|
||||
import type { AppDef } from "./apps";
|
||||
|
||||
export interface WinState {
|
||||
id: number;
|
||||
appId: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
z: number;
|
||||
minimized: boolean;
|
||||
maximized: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
win: WinState;
|
||||
app: AppDef;
|
||||
active: boolean;
|
||||
onFocus: () => void;
|
||||
onClose: () => void;
|
||||
onMinimize: () => void;
|
||||
onToggleMaximize: () => void;
|
||||
onMove: (x: number, y: number) => void;
|
||||
}
|
||||
|
||||
export default function WinWindow({
|
||||
win,
|
||||
app,
|
||||
active,
|
||||
onFocus,
|
||||
onClose,
|
||||
onMinimize,
|
||||
onToggleMaximize,
|
||||
onMove,
|
||||
}: Props) {
|
||||
const drag = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(null);
|
||||
|
||||
const style: CSSProperties = win.maximized
|
||||
? { left: 0, top: 0, width: "100%", height: "100%", zIndex: win.z }
|
||||
: { left: win.x, top: win.y, width: win.w, height: win.h, zIndex: win.z };
|
||||
|
||||
return (
|
||||
<section
|
||||
className={
|
||||
"win-window" +
|
||||
(active ? " active" : "") +
|
||||
(win.minimized ? " minimized" : "") +
|
||||
(win.maximized ? " maximized" : "")
|
||||
}
|
||||
style={style}
|
||||
onPointerDown={onFocus}
|
||||
role="dialog"
|
||||
aria-label={app.title}
|
||||
>
|
||||
<div
|
||||
className="win-titlebar"
|
||||
onPointerDown={(e) => {
|
||||
onFocus();
|
||||
if (win.maximized) return;
|
||||
if ((e.target as HTMLElement).closest(".win-controls")) return;
|
||||
drag.current = { sx: e.clientX, sy: e.clientY, ox: win.x, oy: win.y };
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
}}
|
||||
onPointerMove={(e) => {
|
||||
const d = drag.current;
|
||||
if (!d) return;
|
||||
onMove(d.ox + (e.clientX - d.sx), d.oy + (e.clientY - d.sy));
|
||||
}}
|
||||
onPointerUp={(e) => {
|
||||
drag.current = null;
|
||||
try {
|
||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="win-titlebar-icon" style={{ background: app.color }} aria-hidden="true">
|
||||
{app.icon}
|
||||
</span>
|
||||
<span className="win-titlebar-text">{app.title}</span>
|
||||
<div className="win-controls">
|
||||
<button
|
||||
type="button"
|
||||
className="win-ctl win-ctl-min"
|
||||
onClick={onMinimize}
|
||||
aria-label="Minimize"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="win-ctl win-ctl-max"
|
||||
onClick={onToggleMaximize}
|
||||
aria-label={win.maximized ? "Restore" : "Maximize"}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="win-ctl win-ctl-close"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="win-body app-surface">{app.content}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
274
src/app/components/WindowsDesktop.tsx
Normal file
274
src/app/components/WindowsDesktop.tsx
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
"use client";
|
||||
|
||||
import { useRef, useState } from "react";
|
||||
import { APPS, APP_BY_ID } from "./apps";
|
||||
import WinWindow, { type WinState } from "./WinWindow";
|
||||
import Clock from "./Clock";
|
||||
import { useTheme } from "./useTheme";
|
||||
import { WALLPAPER } from "../data";
|
||||
|
||||
const TASKBAR_HEIGHT = 40;
|
||||
|
||||
export default function WindowsDesktop() {
|
||||
const { theme, toggle } = useTheme();
|
||||
|
||||
const [wins, setWins] = useState<WinState[]>(() => [
|
||||
{
|
||||
id: 1,
|
||||
appId: "welcome",
|
||||
x: 110,
|
||||
y: 64,
|
||||
w: 620,
|
||||
h: 430,
|
||||
z: 10,
|
||||
minimized: false,
|
||||
maximized: false,
|
||||
},
|
||||
]);
|
||||
const [activeId, setActiveId] = useState<number | null>(1);
|
||||
const [startOpen, setStartOpen] = useState(false);
|
||||
const [selectedIcon, setSelectedIcon] = useState<string | null>(null);
|
||||
|
||||
const idRef = useRef(2);
|
||||
const zRef = useRef(11);
|
||||
const spawnRef = useRef(1);
|
||||
|
||||
const focus = (id: number) => {
|
||||
setActiveId(id);
|
||||
setWins((prev) =>
|
||||
prev.map((w) => (w.id === id ? { ...w, z: ++zRef.current } : w))
|
||||
);
|
||||
};
|
||||
|
||||
const openApp = (appId: string) => {
|
||||
setStartOpen(false);
|
||||
const existing = wins.find((w) => w.appId === appId);
|
||||
if (existing) {
|
||||
setWins((prev) =>
|
||||
prev.map((w) =>
|
||||
w.id === existing.id ? { ...w, minimized: false, z: ++zRef.current } : w
|
||||
)
|
||||
);
|
||||
setActiveId(existing.id);
|
||||
return;
|
||||
}
|
||||
const app = APP_BY_ID[appId];
|
||||
if (!app) return;
|
||||
const n = spawnRef.current++;
|
||||
const id = idRef.current++;
|
||||
const maxX = Math.max(20, (typeof window !== "undefined" ? window.innerWidth : 1280) - app.width - 20);
|
||||
const maxY = Math.max(20, (typeof window !== "undefined" ? window.innerHeight : 800) - TASKBAR_HEIGHT - app.height - 20);
|
||||
const x = Math.min(maxX, 90 + (n % 8) * 30);
|
||||
const y = Math.min(maxY, 56 + (n % 8) * 28);
|
||||
setWins((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id,
|
||||
appId,
|
||||
x,
|
||||
y,
|
||||
w: app.width,
|
||||
h: app.height,
|
||||
z: ++zRef.current,
|
||||
minimized: false,
|
||||
maximized: false,
|
||||
},
|
||||
]);
|
||||
setActiveId(id);
|
||||
};
|
||||
|
||||
const closeWin = (id: number) =>
|
||||
setWins((prev) => prev.filter((w) => w.id !== id));
|
||||
const minimizeWin = (id: number) =>
|
||||
setWins((prev) => prev.map((w) => (w.id === id ? { ...w, minimized: true } : w)));
|
||||
const toggleMax = (id: number) =>
|
||||
setWins((prev) =>
|
||||
prev.map((w) => (w.id === id ? { ...w, maximized: !w.maximized } : w))
|
||||
);
|
||||
const moveWin = (id: number, x: number, y: number) => {
|
||||
const maxX =
|
||||
(typeof window !== "undefined" ? window.innerWidth : 1280) - 120;
|
||||
const maxY =
|
||||
(typeof window !== "undefined" ? window.innerHeight : 800) - TASKBAR_HEIGHT - 20;
|
||||
setWins((prev) =>
|
||||
prev.map((w) =>
|
||||
w.id === id
|
||||
? { ...w, x: Math.max(-w.w + 120, Math.min(maxX, x)), y: Math.max(0, Math.min(maxY, y)) }
|
||||
: w
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const taskbarClick = (w: WinState) => {
|
||||
if (w.minimized) {
|
||||
setWins((prev) =>
|
||||
prev.map((x) => (x.id === w.id ? { ...x, minimized: false, z: ++zRef.current } : x))
|
||||
);
|
||||
setActiveId(w.id);
|
||||
} else if (activeId === w.id) {
|
||||
minimizeWin(w.id);
|
||||
} else {
|
||||
focus(w.id);
|
||||
}
|
||||
};
|
||||
|
||||
const wallpaper = `url('${WALLPAPER}')`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="win-desktop"
|
||||
style={{ backgroundImage: wallpaper }}
|
||||
onPointerDown={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
setStartOpen(false);
|
||||
setSelectedIcon(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="win-wallpaper-tint" aria-hidden="true" />
|
||||
|
||||
{/* Desktop icons */}
|
||||
<div className="win-icons" onPointerDown={(e) => e.stopPropagation()}>
|
||||
{APPS.map((app) => (
|
||||
<button
|
||||
key={app.id}
|
||||
type="button"
|
||||
className={"win-icon" + (selectedIcon === app.id ? " selected" : "")}
|
||||
onClick={() => setSelectedIcon(app.id)}
|
||||
onDoubleClick={() => openApp(app.id)}
|
||||
title={`Open ${app.title}`}
|
||||
>
|
||||
<span className="win-icon-glyph" style={{ background: app.color }}>
|
||||
{app.icon}
|
||||
</span>
|
||||
<span className="win-icon-label">{app.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Windows */}
|
||||
<div className="win-layer">
|
||||
{wins.map((w) => (
|
||||
<WinWindow
|
||||
key={w.id}
|
||||
win={w}
|
||||
app={APP_BY_ID[w.appId]}
|
||||
active={activeId === w.id}
|
||||
onFocus={() => focus(w.id)}
|
||||
onClose={() => closeWin(w.id)}
|
||||
onMinimize={() => minimizeWin(w.id)}
|
||||
onToggleMaximize={() => toggleMax(w.id)}
|
||||
onMove={(x, y) => moveWin(w.id, x, y)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Start menu */}
|
||||
{startOpen && (
|
||||
<div className="win-startmenu" onPointerDown={(e) => e.stopPropagation()}>
|
||||
<div className="win-startmenu-user">
|
||||
<span className="win-startmenu-avatar">🧑💻</span>
|
||||
<span>Martin Dvořák</span>
|
||||
</div>
|
||||
<div className="win-startmenu-list">
|
||||
{APPS.map((app) => (
|
||||
<button
|
||||
key={app.id}
|
||||
type="button"
|
||||
className="win-startmenu-item"
|
||||
onClick={() => openApp(app.id)}
|
||||
>
|
||||
<span className="win-startmenu-icon" style={{ background: app.color }}>
|
||||
{app.icon}
|
||||
</span>
|
||||
{app.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="win-startmenu-foot">
|
||||
<button
|
||||
type="button"
|
||||
className="win-startmenu-power"
|
||||
onClick={() => {
|
||||
toggle();
|
||||
setStartOpen(false);
|
||||
}}
|
||||
>
|
||||
⏻ Switch to {theme === "skeuo" ? "Terminal" : "Aero"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Taskbar */}
|
||||
<div className="win-taskbar" onPointerDown={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
type="button"
|
||||
className={"win-start" + (startOpen ? " open" : "")}
|
||||
onClick={() => setStartOpen((v) => !v)}
|
||||
aria-label="Start"
|
||||
>
|
||||
<span className="win-start-orb">⊞</span>
|
||||
</button>
|
||||
|
||||
<div className="win-tb-buttons">
|
||||
{wins.map((w) => {
|
||||
const app = APP_BY_ID[w.appId];
|
||||
return (
|
||||
<button
|
||||
key={w.id}
|
||||
type="button"
|
||||
className={
|
||||
"win-tb-btn" +
|
||||
(activeId === w.id && !w.minimized ? " active" : "") +
|
||||
(w.minimized ? " minimized" : "")
|
||||
}
|
||||
onClick={() => taskbarClick(w)}
|
||||
title={app.title}
|
||||
>
|
||||
<span className="win-tb-btn-icon" style={{ background: app.color }}>
|
||||
{app.icon}
|
||||
</span>
|
||||
<span className="win-tb-btn-label">{app.title}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="win-tray">
|
||||
<form
|
||||
className="win-search"
|
||||
action="https://search.dvorakmortonxd.dev/search"
|
||||
method="GET"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span className="win-search-glyph" aria-hidden="true">
|
||||
⌕
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search the web..."
|
||||
aria-label="Search the web"
|
||||
/>
|
||||
</form>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="win-theme-toggle"
|
||||
onClick={toggle}
|
||||
title={`Switch to ${theme === "skeuo" ? "terminal" : "Aero"} theme`}
|
||||
>
|
||||
<span aria-hidden="true">{theme === "skeuo" ? "▚" : "❖"}</span>
|
||||
<span>{theme === "skeuo" ? "Terminal" : "Aero"}</span>
|
||||
</button>
|
||||
|
||||
<Clock className="win-clock" />
|
||||
|
||||
<button type="button" className="win-showdesktop" aria-label="Show desktop" onClick={() => setWins((prev) => prev.map((w) => ({ ...w, minimized: true })))} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
426
src/app/components/apps.tsx
Normal file
426
src/app/components/apps.tsx
Normal file
|
|
@ -0,0 +1,426 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import type { ReactNode } from "react";
|
||||
import {
|
||||
socials,
|
||||
codingProjects,
|
||||
techProjects,
|
||||
friends,
|
||||
WALLPAPER_CREDIT,
|
||||
} from "../data";
|
||||
import ServiceButton from "./ServiceButton";
|
||||
import ContributionHeatmap from "./ContributionHeatmap";
|
||||
import JokerLogo from "./JokerLogo";
|
||||
|
||||
export interface AppDef {
|
||||
id: string;
|
||||
title: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
width: number;
|
||||
height: number;
|
||||
content: ReactNode;
|
||||
}
|
||||
|
||||
function WelcomeApp() {
|
||||
return (
|
||||
<div className="app-pad app-welcome">
|
||||
<div className="app-welcome-head">
|
||||
<JokerLogo />
|
||||
<div>
|
||||
<h2>Welcome to dvorakmortonxd.dev</h2>
|
||||
<p className="app-muted">A Windows 7 desktop edition of my personal website.</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Double-click an icon on the desktop (or open the
|
||||
<strong> Start </strong> menu) to launch an application. Everything you used to
|
||||
scroll through now lives inside its own little window.
|
||||
</p>
|
||||
<ul className="app-list">
|
||||
<li>Drag windows around by their title bar.</li>
|
||||
<li>Use the buttons at the top-right to minimize, maximize or close.</li>
|
||||
<li>Search the web from the taskbar at the bottom.</li>
|
||||
<li>Switch back to the terminal theme from the tray, bottom-right.</li>
|
||||
</ul>
|
||||
<p className="app-muted app-fineprint">
|
||||
Wallpaper from{" "}
|
||||
<a href={WALLPAPER_CREDIT} target="_blank" rel="noopener noreferrer">
|
||||
wallpaperaccess.com/open-source
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AboutApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<p className="app-cmd">
|
||||
<span className="app-user">martin@dvorakmortonxd</span>:<span className="app-path">~</span>$
|
||||
cat about_me.md
|
||||
</p>
|
||||
<div className="app-text">
|
||||
<p>
|
||||
Hey, I'm Martin Dvořák — a 17(soon to be 18)-year-old IT student based in the
|
||||
Czech Republic, specializing in network management and administration at{" "}
|
||||
<a href="https://sssvt.cz">sssvt.cz</a>. I'm a sophomore and I have wanted to
|
||||
go to this school since 7th grade (2022) so I'm happy I got in in 2025, the
|
||||
school is pretty cool so if you are in middle school and interested in IT, make
|
||||
sure to check it out. I'm a homelabber and developer heavily focused on
|
||||
self-hosting <i>literally everything</i>, writing code (for example games for
|
||||
gamejams), tinkering with GNU/Linux or Musl/Linux systems and retro hardware. I
|
||||
own a small collection of laptops ranging from 2009 to 2014 (and ofcourse my 2025
|
||||
macbook), most of these found in ewaste. In my free time I mostly spend time with
|
||||
my gf {'<'}3, I also spend a bit of time setting up my self hosted stuff (like
|
||||
jellyfin or gitdxd), and also when I'm in my gaming mood I play terraria
|
||||
(around 1300hr playtime btw) and minecraft modpacks with mekanism and/or create. I
|
||||
also go to the gym around 3-5 times a week, running a PPL split focused on
|
||||
strength/powerlifting and especially SBD. I take a big focus on my health and
|
||||
physique.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NowApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<p className="app-cmd">
|
||||
<span className="app-user">martin@dvorakmortonxd</span>:<span className="app-path">~</span>$
|
||||
cat now.txt
|
||||
</p>
|
||||
<div className="app-text">
|
||||
<p>
|
||||
I'm currently hosting an SMP (dm me on discord). Also I'm pretty much
|
||||
cooking daily, because im bulking through out the non-summer seasons. And me and
|
||||
my pal <a href="https://skopec.dev">Pepa</a> are working on an education app so we
|
||||
can study more efficiently, It's called{" "}
|
||||
<a href="https://git.dvorakmortonxd.dev/edu/maturita.c">maturita.c</a>!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SocialsApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<div className="social-buttons">
|
||||
{socials.map((s) => (
|
||||
<a
|
||||
key={s.name}
|
||||
href={s.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-button"
|
||||
>
|
||||
<Image src={s.icon} alt={s.name} width={16} height={16} className="social-icon" />
|
||||
<span className="social-label">{s.name}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="mail-contact">
|
||||
mail if u ever wanna contact me:{" "}
|
||||
<a href="mailto:dvorak@dvorakmortonxd.dev">dvorak@dvorakmortonxd.dev</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServicesApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<div className="services-buttons services-main">
|
||||
<ServiceButton
|
||||
url="https://proxmox.dvorakmortonxd.dev/"
|
||||
className="proxmox"
|
||||
icon="🖥️"
|
||||
name="Proxmox"
|
||||
desc="Server Management"
|
||||
access="private"
|
||||
disabled
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://ai.dvorakmortonxd.dev/"
|
||||
className="ai"
|
||||
icon="🦾"
|
||||
name="Llama.cpp"
|
||||
desc="Local AI Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://jelly.dvorakmortonxd.dev/"
|
||||
className="jellyfin"
|
||||
icon="🎬"
|
||||
name="Jellyfin"
|
||||
desc="Local Media Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://discord.gg/vyvhk7d8bX"
|
||||
checkUrl="minecraft://mc.dvorakmortonxd.dev:25565"
|
||||
className="pterodactyl"
|
||||
icon="🎮"
|
||||
name="SMP"
|
||||
desc="My Survival Minecraft Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://navidrome.dvorakmortonxd.dev/"
|
||||
className="funkwhale"
|
||||
icon="🎸"
|
||||
name="Navidrome"
|
||||
desc="Music Streaming"
|
||||
access="private"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://git.dvorakmortonxd.dev"
|
||||
className="gitdxd"
|
||||
icon="🐙"
|
||||
name="GitDXD"
|
||||
desc="Best Git Hosting OAT"
|
||||
access="public"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectsApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<div className="project-grid">
|
||||
{codingProjects.map((project, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="project-card"
|
||||
>
|
||||
<div className="project-image" style={{ backgroundImage: `url(${project.img})` }} />
|
||||
<h4 className="project-title">{project.title}</h4>
|
||||
<p className="project-desc">{project.desc}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HardwareApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<div className="project-grid">
|
||||
{techProjects.map((project) => (
|
||||
<div key={project.title} className="project-card">
|
||||
<div
|
||||
className="project-image"
|
||||
style={{ backgroundImage: `url(${project.image})` }}
|
||||
/>
|
||||
<h4 className="project-title">{project.title}</h4>
|
||||
<p className="project-desc">{project.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FriendsApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<div className="services-buttons" style={{ gap: "1rem" }}>
|
||||
{friends.map((friend, idx) => (
|
||||
<ServiceButton
|
||||
key={idx}
|
||||
url={friend.realUrl || friend.url}
|
||||
className="friend"
|
||||
icon={
|
||||
<Image
|
||||
src={friend.img}
|
||||
alt={friend.name}
|
||||
width={68}
|
||||
height={68}
|
||||
className="friend-icon"
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
}
|
||||
name={friend.name}
|
||||
desc={friend.desc}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="friends-extra">
|
||||
<h3>Quipee by Bukovina Filip & Vlk Tomáš</h3>
|
||||
<div className="app-shot">
|
||||
<Image
|
||||
src="/quipee.webp"
|
||||
alt="Quipee Thumbnail"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="app-linkrow">
|
||||
<a href="https://quipee.me" target="_blank" rel="noopener noreferrer">
|
||||
Web
|
||||
</a>
|
||||
<a
|
||||
href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Android
|
||||
</a>
|
||||
<a
|
||||
href="https://testflight.apple.com/join/hP2a1E5x"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
IOS
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GitdxdApp() {
|
||||
return (
|
||||
<div className="app-pad app-center">
|
||||
<h2 className="app-h1">GitDXD</h2>
|
||||
<p className="app-h2">My Self-hosted Git Instance</p>
|
||||
<div className="app-shot app-shot-glow">
|
||||
<Image
|
||||
src="/gitdxd.webp"
|
||||
alt="GitDXD Preview"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="app-text">
|
||||
My very own forgejo git instance, originally started as a private git instance for
|
||||
me and my friends to boycott GitHub but I've made it public now so. Join at{" "}
|
||||
<a href="https://git.dvorakmortonxd.dev">git.dvorakmortonxd.dev</a>.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContributionsApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<ContributionHeatmap />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GymApp() {
|
||||
return (
|
||||
<div className="app-pad">
|
||||
<div className="gym-grid">
|
||||
<div className="gym-item">
|
||||
<Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">SQUAT</div>
|
||||
<div className="gym-weight">125kg</div>
|
||||
<div className="gym-date">5.1.2025</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image src="/bench.svg" alt="Bench" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">BENCH</div>
|
||||
<div className="gym-weight">111kg</div>
|
||||
<div className="gym-date">29.5.2026</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image
|
||||
src="/deadlift.svg"
|
||||
alt="Deadlift"
|
||||
width={48}
|
||||
height={48}
|
||||
className="gym-icon"
|
||||
/>
|
||||
<div className="gym-label">DEADLIFT</div>
|
||||
<div className="gym-weight">165kg</div>
|
||||
<div className="gym-date">17.12.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RevivalApp() {
|
||||
return (
|
||||
<div className="app-pad app-center">
|
||||
<h2 className="app-h1">Revival Inc.</h2>
|
||||
<div className="app-shot app-shot-light">
|
||||
<Image
|
||||
src="/revivalinc.webp"
|
||||
alt="revival inc thumbnail"
|
||||
width={768}
|
||||
height={576}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="app-h2">What is it?</p>
|
||||
<p className="app-text">
|
||||
It's a game I made for the game jam "Mini Jame Gam #55", the theme was
|
||||
Necromancy and the special item was Milk, the game also includes a tutorial so if you
|
||||
wanna try it do it. Check it out at{" "}
|
||||
<a href="https://martin-dv.itch.io/revival-inc">itch.io</a> or play{" "}
|
||||
<a href="https://dvorakmortonxd.dev/revival-inc">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RustyWolfApp() {
|
||||
return (
|
||||
<div className="app-pad app-center">
|
||||
<h2 className="app-h1">Introducing RustyWolf</h2>
|
||||
<div className="app-shot app-shot-glow">
|
||||
<Image
|
||||
src="/RustyWolfPreview.webp"
|
||||
alt="RustyWolf Browser Preview"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: "100%", height: "auto", display: "block" }}
|
||||
/>
|
||||
</div>
|
||||
<p className="app-h2">What makes it so cool???</p>
|
||||
<p className="app-text">
|
||||
A lightweight browser made in Rust with WebKitGTK. It's the successor to my
|
||||
previous project Venturesome, aiming to provide a fast and minimalist browsing
|
||||
experience. It's a perfect browser for old machines that struggle with modern
|
||||
browsers. Check it out at{" "}
|
||||
<a href="https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf">GitDXD</a>.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const APPS: AppDef[] = [
|
||||
{ id: "welcome", title: "Welcome", icon: "👋", color: "#2f7fc4", width: 620, height: 430, content: <WelcomeApp /> },
|
||||
{ id: "about", title: "About Me", icon: "🧑💻", color: "#0d5aa7", width: 720, height: 470, content: <AboutApp /> },
|
||||
{ id: "now", title: "now.txt", icon: "📝", color: "#6a4fb3", width: 560, height: 320, content: <NowApp /> },
|
||||
{ id: "socials", title: "Socials", icon: "🔗", color: "#0a7cc1", width: 700, height: 460, content: <SocialsApp /> },
|
||||
{ id: "services", title: "Services", icon: "🖥️", color: "#157347", width: 760, height: 480, content: <ServicesApp /> },
|
||||
{ id: "projects", title: "Projects", icon: "🎮", color: "#b3005f", width: 860, height: 560, content: <ProjectsApp /> },
|
||||
{ id: "hardware", title: "Hardware", icon: "💻", color: "#1257a0", width: 860, height: 560, content: <HardwareApp /> },
|
||||
{ id: "friends", title: "Friends", icon: "🫂", color: "#c0392b", width: 780, height: 560, content: <FriendsApp /> },
|
||||
{ id: "gitdxd", title: "GitDXD", icon: "🐙", color: "#333333", width: 780, height: 560, content: <GitdxdApp /> },
|
||||
{ id: "contributions", title: "Contributions", icon: "📊", color: "#157347", width: 900, height: 470, content: <ContributionsApp /> },
|
||||
{ id: "gym", title: "Gym SBD", icon: "🏋️", color: "#c0392b", width: 620, height: 380, content: <GymApp /> },
|
||||
{ id: "revival", title: "Revival Inc.", icon: "🧟", color: "#6a4fb3", width: 740, height: 560, content: <RevivalApp /> },
|
||||
{ id: "rustywolf", title: "RustyWolf", icon: "🐺", color: "#0a7cc1", width: 780, height: 560, content: <RustyWolfApp /> },
|
||||
];
|
||||
|
||||
export const APP_BY_ID: Record<string, AppDef> = Object.fromEntries(
|
||||
APPS.map((a) => [a.id, a])
|
||||
);
|
||||
45
src/app/components/useTheme.ts
Normal file
45
src/app/components/useTheme.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
"use client";
|
||||
|
||||
import { useSyncExternalStore } from "react";
|
||||
|
||||
export type Theme = "skeuo" | "terminal";
|
||||
|
||||
const EVENT = "theme-change";
|
||||
|
||||
function subscribe(callback: () => void) {
|
||||
window.addEventListener(EVENT, callback);
|
||||
window.addEventListener("storage", callback);
|
||||
return () => {
|
||||
window.removeEventListener(EVENT, callback);
|
||||
window.removeEventListener("storage", callback);
|
||||
};
|
||||
}
|
||||
|
||||
function getSnapshot(): Theme {
|
||||
return document.documentElement.getAttribute("data-theme") === "terminal"
|
||||
? "terminal"
|
||||
: "skeuo";
|
||||
}
|
||||
|
||||
function getServerSnapshot(): Theme {
|
||||
return "skeuo";
|
||||
}
|
||||
|
||||
export function setTheme(theme: Theme) {
|
||||
if (typeof document === "undefined") return;
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
try {
|
||||
localStorage.setItem("theme", theme);
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
window.dispatchEvent(new Event(EVENT));
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
||||
return {
|
||||
theme,
|
||||
toggle: () => setTheme(theme === "skeuo" ? "terminal" : "skeuo"),
|
||||
};
|
||||
}
|
||||
261
src/app/data.ts
Normal file
261
src/app/data.ts
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
export interface Social {
|
||||
name: string;
|
||||
icon: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface CodingProject {
|
||||
title: string;
|
||||
desc: string;
|
||||
img: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export interface TechProject {
|
||||
title: string;
|
||||
desc: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export interface Friend {
|
||||
name: string;
|
||||
url: string;
|
||||
realUrl: string;
|
||||
img: string;
|
||||
desc: string;
|
||||
iframe: boolean;
|
||||
}
|
||||
|
||||
export const socials: Social[] = [
|
||||
{ name: "Instagram (main)", icon: "/instagram.svg", url: "https://www.instagram.com/dvorakmortonxd/" },
|
||||
{ name: "Instagram (gym)", icon: "/instagram.svg", url: "https://www.instagram.com/dvorakmortonxd2/" },
|
||||
{ name: "SoundCloud", icon: "/soundcloud.svg", url: "https://soundcloud.com/martin-dvorak-185636305" },
|
||||
{ name: "TikTok", icon: "/tiktok.svg", url: "https://www.tiktok.com/@dvorakmortonxd" },
|
||||
{ name: "Snapchat", icon: "/snapchat.svg", url: "https://www.snapchat.com/add/dvorakmortonxd" },
|
||||
{ name: "GitDXD", icon: "/github.svg", url: "https://git.dvorakmortonxd.dev/dvorakmortonxd" },
|
||||
{ name: "LinkedIn", icon: "/linkedin.svg", url: "https://www.linkedin.com/in/martin-dvorak-32012a394/" },
|
||||
{ name: "Itch.io", icon: "/itchio.svg", url: "https://martin-dv.itch.io" },
|
||||
{ name: "Discord", icon: "/discord.svg", url: "https://discord.com/users/555745543763001364" },
|
||||
{ name: "Reddit", icon: "/reddit.svg", url: "https://www.reddit.com/user/M4RT1NYT/" },
|
||||
{ name: "Twitter", icon: "/twitter.svg", url: "https://x.com/pepicskopcecek" },
|
||||
{ name: "Quipee", icon: "/quip.svg", url: "https://quipee.me/dvorakmortonxd" },
|
||||
];
|
||||
|
||||
export const codingProjects: CodingProject[] = [
|
||||
{
|
||||
title: "Hospital Execution (Unfinished)",
|
||||
desc: "the first ever real game I made, in pygame. I've abandoned it.",
|
||||
img: "/coding-1.webp",
|
||||
url: "https://martin-dv.itch.io/hospital-execution-demo",
|
||||
},
|
||||
{
|
||||
title: "Underbaranoia (Finished)",
|
||||
desc: "basically a undertale like infinite fight simulator that gets progressively harder, made in pygame.",
|
||||
img: "/coding-2.webp",
|
||||
url: "https://martin-dv.itch.io/underbaranoia",
|
||||
},
|
||||
{
|
||||
title: "Offline memer (Finished)",
|
||||
desc: "parody of the discord bot \"Dank Memer\" made in batch. (this was technically my first ever game I published).",
|
||||
img: "/coding-3.webp",
|
||||
url: "https://martin-dv.itch.io/offline-memer",
|
||||
},
|
||||
{
|
||||
title: "4y (Forgotten)",
|
||||
desc: "just a renamed fork of the ly login manager (based login manager btw I love it), no extra features, just a rename, its actually outdated so dont use it.",
|
||||
img: "/coding-4.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/4y",
|
||||
},
|
||||
{
|
||||
title: "4rch linux (Forgotten)",
|
||||
desc: "same as above, basically just a renamed fork of arch linux with calamares installer, also outdated and not maintained at all so no use please.",
|
||||
img: "/coding-5.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/4rch-linux",
|
||||
},
|
||||
{
|
||||
title: "You_Are_An_Idiot_Virus.py (Finished)",
|
||||
desc: "this is just a python script that just spams blinking \"you are an idiot\" windows, made it as a prank I think, not really sure rn.",
|
||||
img: "/coding-6.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/uranidiot",
|
||||
},
|
||||
{
|
||||
title: "Venturesome (Discontinued)",
|
||||
desc: "a browser I wrote in python using PyQtWebEngine with PyQt5, actually pretty cool and modular but I couldnt get past the stage of adding a tab system, basically surpassed by my other project: RustyWolf.",
|
||||
img: "/coding-7.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/Venturesome",
|
||||
},
|
||||
{
|
||||
title: "Mandelbrot set in Pygame (Finished)",
|
||||
desc: "a python pygame script that renders the mandelbrot set, made it when I was fascinated by how it looks and ngl it still looks cool af.",
|
||||
img: "/coding-8.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/mandelbrot",
|
||||
},
|
||||
{
|
||||
title: "Underpygametale (Unfinished)",
|
||||
desc: "a remake of undertale written in pygame, got it to about the flowey part (at the beginning) and didnt touch it in a long time.",
|
||||
img: "/coding-9.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/underpygametale",
|
||||
},
|
||||
{
|
||||
title: "Many discord bots...",
|
||||
desc: "so many of them, once I (allegedly, pls discord dont ban me) even wrote a \"self-bot\" which auto-advertised a minecraft server on minecraft discord server in lfg-hosting every two hours, around 800 people joined in total.",
|
||||
img: "/coding-10.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/PYGETEX",
|
||||
},
|
||||
{
|
||||
title: "MMO minecraft plugin (Unfinished)",
|
||||
desc: "a minceraft plugin with custom bosses, items, and functions. pretty barebones and basic but I did it all manually before vibecoding was even a thing so what.",
|
||||
img: "/coding-11.webp",
|
||||
url: "https://www.youtube.com/watch?v=cSAX5Ds61ac",
|
||||
},
|
||||
{
|
||||
title: "Many many failed minecraft servers..",
|
||||
desc: "creative games, softcraft, frostville, eusmp, eurthsmp, softsmp and many other SMPs that died later on. I cant even count how many mc servers I had in total.",
|
||||
img: "/coding-12.webp",
|
||||
url: "https://discord.gg/KtHRm9kRmy",
|
||||
},
|
||||
{
|
||||
title: "Swords and Sandals 2 pygame remake (Unfinished)",
|
||||
desc: "an unfinished remake of swords and sandals 2 in pygame, I got bored of it and never finished it but ill finish it one day for sure lol.",
|
||||
img: "/coding-13.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/sas2py",
|
||||
},
|
||||
{
|
||||
title: "Llama.cpp server",
|
||||
desc: "my llama.cpp vm running on my proxmox with a gpu passthroughed RTX 3070, dm me if u wanna test it lol.",
|
||||
img: "/coding-14.webp",
|
||||
url: "https://ai.dvorakmortonxd.dev/",
|
||||
},
|
||||
{
|
||||
title: "Batch MSDOS Simulator (Finished)",
|
||||
desc: "a freshman school project on making games in batch, it was like an OS simulator with a web browser, games, photos, even a video suprise (youll have to try it to figure that one out lol).",
|
||||
img: "/coding-15.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/DvorakMSDOS",
|
||||
},
|
||||
{
|
||||
title: "RustyWolf (WIP, Available now!)",
|
||||
desc: "a browser I made in rust with webkitgtk, I made it to be lightweight and to be able to be ran on macbook unibody 2010 before I realised I got scammed.. It's the successor to my previous project Venturesome :)",
|
||||
img: "/coding-16.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf",
|
||||
},
|
||||
{
|
||||
title: "dxdwm (Discontinued)",
|
||||
desc: "a small x11 window manager written in rust.",
|
||||
img: "/coding-17.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/dxdwm",
|
||||
},
|
||||
{
|
||||
title: "Revival Inc. (Finished)",
|
||||
desc: "My game written in pygame and packaged with pygbag made for the Mini Jame Gam #55! tho I only made it in 6 hours lmao",
|
||||
img: "/revivalinc.webp",
|
||||
url: "https://dvorakmortonxd.dev/revival-inc",
|
||||
},
|
||||
];
|
||||
|
||||
export const techProjects: TechProject[] = [
|
||||
{
|
||||
title: "Gentoo Setup",
|
||||
desc: "my main computer with gentoo and SwayFX. specs: Ryzen 5 3600 (6c/12t), RX 580 8GB ASUS ROG, 16gb of ram and a 240gb sata ssd.",
|
||||
image: "/gentoo-setup.webp",
|
||||
},
|
||||
{
|
||||
title: "Proxmox Server",
|
||||
desc: "my personal proxmox server (dm me on ig if u need a VPS/hosting), specs: Xeon E5 2680 v4 (14c/28t), RTX 3070 (llama.cpp), 68gb ddr4 rdimm ram (2*16gb, 1*32gb, 1*4gb), 256gb of sata m2 space + 1tb hdd + 750gb hdd.",
|
||||
image: "/proxmox-server.webp",
|
||||
},
|
||||
{
|
||||
title: "Xbox 360 S (badupdate)",
|
||||
desc: "xbox 360 slim (trinity) with badupdate exploit, allowing to boot custom software. (not my photo), the specs are XCGPU (3c/6t), 0.5GB of gddr3 ram and a 500gb hdd.",
|
||||
image: "/xbox360.webp",
|
||||
},
|
||||
{
|
||||
title: "Lenovo Legion Go S",
|
||||
desc: "my gaming handheld which I sometimes use as a computer, it has 32gb of unified lpddr5x memory and 1tb of nvme storage, I dualboot artix linux (openrc) with SwayFX and stock SteamOS on it.",
|
||||
image: "/legiongos.webp",
|
||||
},
|
||||
{
|
||||
title: "Macbook Air M4 13\"",
|
||||
desc: "my main device for basically everything on the go except gaming. specs are Apple M4 (cpu:10c,gpu:8c), 16gb of unified ram (lpddr5x), 256gb Storage.",
|
||||
image: "/macbook-air.webp",
|
||||
},
|
||||
{
|
||||
title: "Macbook Air 2013 11\"",
|
||||
desc: "bought this for tinkering lol, specs are intel core i5 (2c/4t), 8gb of ddr3 ram and 250gb ssd, installed arch linux on it with i3wm.",
|
||||
image: "/macbook-air-11.webp",
|
||||
},
|
||||
{
|
||||
title: "iPhone 7 128gb",
|
||||
desc: "somehow found a listing for 4 bucks (refurbed.cz) for it so I got it lol, it has a little dent I marked it on the photo (which isnt mine btw), except cosmetic damage its pretty much fully functional, specs are Apple A10 (4c/4t), 2gb of ram and 128gb of storage",
|
||||
image: "/iphone-7.webp",
|
||||
},
|
||||
{
|
||||
title: "Macbook Unibody 2010",
|
||||
desc: "found random listing on bazos for 15 bucks but after I bought a power adapter it turned out to be non functioning so I got scammed :(",
|
||||
image: "/macbook2010.webp",
|
||||
},
|
||||
{
|
||||
title: "ThinkPad T400s 14\"",
|
||||
desc: "got it from a random guy for 20 bucks, its an old laptop from 2009. I put void linux on it and i3wm on it, specs are intel core 2 duo (2c/2t), 8gb ddr3 ram and 800gb hdd.",
|
||||
image: "/thinkpadt400s.webp",
|
||||
},
|
||||
{
|
||||
title: "Asus N56JR 15.6\"",
|
||||
desc: "one of my first laptops my dad got for me when I was like 12, still works but the battery is KO, specs are intel core i7 4700HQ (4c/8t), 8gb ddr3 ram and 240gb ssd, it currently runs ubuntu linux 24.04LTS and my mom uses it for movies and shows.",
|
||||
image: "/asuslaptop.webp",
|
||||
},
|
||||
{
|
||||
title: "Small Unknown XP Acer Laptop",
|
||||
desc: "found that one in ewaste, I think it has like 2gb of ram and an intel atom, not sure what to do with it yet",
|
||||
image: "/acerlaptop.webp",
|
||||
},
|
||||
{
|
||||
title: "Dell Latitude E6320",
|
||||
desc: "also from ewaste, put mint on it but didnt do anything yet, lowk kinda capable for its time in 2011 so I might put it to use later but the battery is KO.",
|
||||
image: "/latitude.webp",
|
||||
},
|
||||
{
|
||||
title: "iPhone 11 128gb",
|
||||
desc: "my first iphone I got from my parents at 13, rn my dad has it because I switched over to the iphone 16 pro in 2025, specs are Apple A13 (6c/6t), 4gb of ram and 128gb of storage. (NOT MY IMAGE)",
|
||||
image: "/iphone11.webp",
|
||||
},
|
||||
{
|
||||
title: "iPhone 16 Pro 128gb",
|
||||
desc: "originally wanted iphone 13 mini (because of the size) but I somehow decided to get 16 pro, which is a bit smaller than my older iphone 11, specs are Apple A18 pro (6c/6t), (btw this chip is the same chip used in the macbook neo so thats cool) and 8gb of ram and 128gb of storage, my main phone.",
|
||||
image: "/iphone16pro.webp",
|
||||
},
|
||||
{
|
||||
title: "Xbox one S 2TB",
|
||||
desc: "my dad bought it for me also in like 2018 or 2019 and I sometimes play the console edition of minecraft because I like to play the gliding minigame on it when someone comes over.",
|
||||
image: "/xboxones.webp",
|
||||
},
|
||||
];
|
||||
|
||||
export const friends: Friend[] = [
|
||||
{
|
||||
name: "Josef Skopec",
|
||||
url: "/skopec.html",
|
||||
realUrl: "https://skopec.dev/",
|
||||
img: "/skopec.svg",
|
||||
desc: "skopec.dev",
|
||||
iframe: true,
|
||||
},
|
||||
{
|
||||
name: "Filip Bukovina",
|
||||
url: "https://bukovinafilip.com/",
|
||||
realUrl: "https://bukovinafilip.com/",
|
||||
img: "/bukovina.svg",
|
||||
desc: "bukovinafilip.com",
|
||||
iframe: true,
|
||||
},
|
||||
{
|
||||
name: "Tomáš Vlk",
|
||||
url: "https://vlcak.me",
|
||||
realUrl: "https://vlcak.me",
|
||||
img: "/vlcak.svg",
|
||||
desc: "vlcak.me",
|
||||
iframe: true,
|
||||
},
|
||||
];
|
||||
|
||||
export const WALLPAPER = "/wallpaper.jpg";
|
||||
export const WALLPAPER_CREDIT = "https://wallpaperaccess.com/open-source";
|
||||
|
|
@ -24,7 +24,14 @@ export default function RootLayout({
|
|||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="skeuo" suppressHydrationWarning>
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(function(){try{var t=localStorage.getItem('theme');if(t==='terminal'||t==='skeuo'){document.documentElement.setAttribute('data-theme',t);}}catch(e){}})();`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="antialiased">
|
||||
{children}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1268,3 +1268,58 @@ body {
|
|||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TUI STATUS BAR (terminal theme)
|
||||
============================================ */
|
||||
body {
|
||||
padding-bottom: 44px;
|
||||
}
|
||||
|
||||
.tui-statusbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 5000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(29, 32, 33, 0.92);
|
||||
border-top: 1px solid var(--tui-border);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
font-family: var(--font-custom-mono), 'JetBrains Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.tui-statusbar-item {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.tui-statusbar-btn {
|
||||
padding: 3px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--gray);
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: 0.72rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.tui-statusbar-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(250, 189, 47, 0.35);
|
||||
}
|
||||
|
||||
.tui-statusbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tui-statusbar-clock {
|
||||
color: var(--gray);
|
||||
}
|
||||
|
|
|
|||
593
src/app/page.tsx
593
src/app/page.tsx
|
|
@ -1,11 +1,7 @@
|
|||
import Image from "next/image";
|
||||
import "./page.css";
|
||||
import { Metadata } from 'next';
|
||||
import type { CSSProperties } from 'react';
|
||||
import JokerLogo from "./components/JokerLogo";
|
||||
import ServiceButton from "./components/ServiceButton";
|
||||
import SlBackground from "./components/SlBackground";
|
||||
import ContributionHeatmap from "./components/ContributionHeatmap";
|
||||
import './page.css';
|
||||
import './skeuo.css';
|
||||
import ThemeRoot from './components/ThemeRoot';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'dvorakmortonxd.dev',
|
||||
|
|
@ -19,587 +15,6 @@ export const metadata: Metadata = {
|
|||
},
|
||||
};
|
||||
|
||||
type PanelStyle = CSSProperties & { '--panel-color'?: string };
|
||||
|
||||
const panelStyle = (color: string, style: CSSProperties = {}): PanelStyle => ({
|
||||
...style,
|
||||
'--panel-color': color,
|
||||
});
|
||||
|
||||
// Example projects array (you can edit this)
|
||||
const codingProjects = [
|
||||
{
|
||||
title: "Hospital Execution (Unfinished)",
|
||||
desc: "the first ever real game I made, in pygame. I've abandoned it.",
|
||||
img: "/coding-1.webp",
|
||||
url: "https://martin-dv.itch.io/hospital-execution-demo",
|
||||
},
|
||||
{
|
||||
title: "Underbaranoia (Finished)",
|
||||
desc: "basically a undertale like infinite fight simulator that gets progressively harder, made in pygame.",
|
||||
img: "/coding-2.webp",
|
||||
url: "https://martin-dv.itch.io/underbaranoia",
|
||||
},
|
||||
{
|
||||
title: "Offline memer (Finished)",
|
||||
desc: "parody of the discord bot \"Dank Memer\" made in batch. (this was technically my first ever game I published).",
|
||||
img: "/coding-3.webp",
|
||||
url: "https://martin-dv.itch.io/offline-memer",
|
||||
},
|
||||
{
|
||||
title: "4y (Forgotten)",
|
||||
desc: "just a renamed fork of the ly login manager (based login manager btw I love it), no extra features, just a rename, its actually outdated so dont use it.",
|
||||
img: "/coding-4.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/4y",
|
||||
},
|
||||
{
|
||||
title: "4rch linux (Forgotten)",
|
||||
desc: "same as above, basically just a renamed fork of arch linux with calamares installer, also outdated and not maintained at all so no use please.",
|
||||
img: "/coding-5.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/4rch-linux",
|
||||
},
|
||||
{
|
||||
title: "You_Are_An_Idiot_Virus.py (Finished)",
|
||||
desc: "this is just a python script that just spams blinking \"you are an idiot\" windows, made it as a prank I think, not really sure rn.",
|
||||
img: "/coding-6.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/uranidiot",
|
||||
},
|
||||
{
|
||||
title: "Venturesome (Discontinued)",
|
||||
desc: "a browser I wrote in python using PyQtWebEngine with PyQt5, actually pretty cool and modular but I couldnt get past the stage of adding a tab system, basically surpassed by my other project: RustyWolf.",
|
||||
img: "/coding-7.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/Venturesome",
|
||||
},
|
||||
{
|
||||
title: "Mandelbrot set in Pygame (Finished)",
|
||||
desc: "a python pygame script that renders the mandelbrot set, made it when I was fascinated by how it looks and ngl it still looks cool af.",
|
||||
img: "/coding-8.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/mandelbrot",
|
||||
},
|
||||
{
|
||||
title: "Underpygametale (Unfinished)",
|
||||
desc: "a remake of undertale written in pygame, got it to about the flowey part (at the beginning) and didnt touch it in a long time.",
|
||||
img: "/coding-9.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/underpygametale",
|
||||
},
|
||||
{
|
||||
title: "Many discord bots...",
|
||||
desc: "so many of them, once I (allegedly, pls discord dont ban me) even wrote a \"self-bot\" which auto-advertised a minecraft server on minecraft discord server in lfg-hosting every two hours, around 800 people joined in total.",
|
||||
img: "/coding-10.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/PYGETEX",
|
||||
},
|
||||
{
|
||||
title: "MMO minecraft plugin (Unfinished)",
|
||||
desc: "a minceraft plugin with custom bosses, items, and functions. pretty barebones and basic but I did it all manually before vibecoding was even a thing so what.",
|
||||
img: "/coding-11.webp",
|
||||
url: "https://www.youtube.com/watch?v=cSAX5Ds61ac",
|
||||
},
|
||||
{
|
||||
title: "Many many failed minecraft servers..",
|
||||
desc: "creative games, softcraft, frostville, eusmp, eurthsmp, softsmp and many other SMPs that died later on. I cant even count how many mc servers I had in total.",
|
||||
img: "/coding-12.webp",
|
||||
url: "https://discord.gg/KtHRm9kRmy",
|
||||
},
|
||||
{
|
||||
title: "Swords and Sandals 2 pygame remake (Unfinished)",
|
||||
desc: "an unfinished remake of swords and sandals 2 in pygame, I got bored of it and never finished it but ill finish it one day for sure lol.",
|
||||
img: "/coding-13.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/sas2py",
|
||||
},
|
||||
{
|
||||
title: "Llama.cpp server",
|
||||
desc: "my llama.cpp vm running on my proxmox with a gpu passthroughed RTX 3070, dm me if u wanna test it lol.",
|
||||
img: "/coding-14.webp",
|
||||
url: "https://ai.dvorakmortonxd.dev/",
|
||||
},
|
||||
{
|
||||
title: "Batch MSDOS Simulator (Finished)",
|
||||
desc: "a freshman school project on making games in batch, it was like an OS simulator with a web browser, games, photos, even a video suprise (youll have to try it to figure that one out lol).",
|
||||
img: "/coding-15.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/DvorakMSDOS",
|
||||
},
|
||||
{
|
||||
title: "RustyWolf (WIP, Available now!)",
|
||||
desc: "a browser I made in rust with webkitgtk, I made it to be lightweight and to be able to be ran on macbook unibody 2010 before I realised I got scammed.. It's the successor to my previous project Venturesome :)",
|
||||
img: "/coding-16.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf",
|
||||
},
|
||||
{
|
||||
title: "dxdwm (Discontinued)",
|
||||
desc: "a small x11 window manager written in rust.",
|
||||
img: "/coding-17.webp",
|
||||
url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/dxdwm",
|
||||
},
|
||||
{
|
||||
title: "Revival Inc. (Finished)",
|
||||
desc: "My game written in pygame and packaged with pygbag made for the Mini Jame Gam #55! tho I only made it in 6 hours lmao",
|
||||
img: "/revivalinc.webp",
|
||||
url: "https://dvorakmortonxd.dev/revival-inc",
|
||||
},
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const socials = [
|
||||
{ name: "Instagram (main)", icon: "/instagram.svg", url: "https://www.instagram.com/dvorakmortonxd/" },
|
||||
{ name: "Instagram (gym)", icon: "/instagram.svg", url: "https://www.instagram.com/dvorakmortonxd2/" },
|
||||
{ name: "SoundCloud", icon: "/soundcloud.svg", url: "https://soundcloud.com/martin-dvorak-185636305" },
|
||||
{ name: "TikTok", icon: "/tiktok.svg", url: "https://www.tiktok.com/@dvorakmortonxd" },
|
||||
{ name: "Snapchat", icon: "/snapchat.svg", url: "https://www.snapchat.com/add/dvorakmortonxd" },
|
||||
{ name: "GitDXD", icon: "/github.svg", url: "https://git.dvorakmortonxd.dev/dvorakmortonxd" },
|
||||
{ name: "LinkedIn", icon: "/linkedin.svg", url: "https://www.linkedin.com/in/martin-dvorak-32012a394/" },
|
||||
{ name: "Itch.io", icon: "/itchio.svg", url: "https://martin-dv.itch.io" },
|
||||
{ name: "Discord", icon: "/discord.svg", url: "https://discord.com/users/555745543763001364" },
|
||||
{ name: "Reddit", icon: "/reddit.svg", url: "https://www.reddit.com/user/M4RT1NYT/" },
|
||||
{ name: "Twitter", icon: "/twitter.svg", url: "https://x.com/pepicskopcecek" },
|
||||
{ name: "Quipee", icon: "/quip.svg", url: "https://quipee.me/dvorakmortonxd" },
|
||||
];
|
||||
|
||||
const techProjects = [
|
||||
{
|
||||
title: "Gentoo Setup",
|
||||
desc: "my main computer with gentoo and SwayFX. specs: Ryzen 5 3600 (6c/12t), RX 580 8GB ASUS ROG, 16gb of ram and a 240gb sata ssd.",
|
||||
image: "/gentoo-setup.webp",
|
||||
},
|
||||
{
|
||||
title: "Proxmox Server",
|
||||
desc: "my personal proxmox server (dm me on ig if u need a VPS/hosting), specs: Xeon E5 2680 v4 (14c/28t), RTX 3070 (llama.cpp), 68gb ddr4 rdimm ram (2*16gb, 1*32gb, 1*4gb), 256gb of sata m2 space + 1tb hdd + 750gb hdd.",
|
||||
image: "/proxmox-server.webp",
|
||||
},
|
||||
{
|
||||
title: "Xbox 360 S (badupdate)",
|
||||
desc: "xbox 360 slim (trinity) with badupdate exploit, allowing to boot custom software. (not my photo), the specs are XCGPU (3c/6t), 0.5GB of gddr3 ram and a 500gb hdd.",
|
||||
image: "/xbox360.webp",
|
||||
},
|
||||
{
|
||||
title: "Lenovo Legion Go S",
|
||||
desc: "my gaming handheld which I sometimes use as a computer, it has 32gb of unified lpddr5x memory and 1tb of nvme storage, I dualboot artix linux (openrc) with SwayFX and stock SteamOS on it.",
|
||||
image: "/legiongos.webp",
|
||||
},
|
||||
{
|
||||
title: "Macbook Air M4 13\"",
|
||||
desc: "my main device for basically everything on the go except gaming. specs are Apple M4 (cpu:10c,gpu:8c), 16gb of unified ram (lpddr5x), 256gb Storage.",
|
||||
image: "/macbook-air.webp",
|
||||
},
|
||||
{
|
||||
title: "Macbook Air 2013 11\"",
|
||||
desc: "bought this for tinkering lol, specs are intel core i5 (2c/4t), 8gb of ddr3 ram and 250gb ssd, installed arch linux on it with i3wm.",
|
||||
image: "/macbook-air-11.webp",
|
||||
},
|
||||
{
|
||||
title: "iPhone 7 128gb",
|
||||
desc: "somehow found a listing for 4 bucks (refurbed.cz) for it so I got it lol, it has a little dent I marked it on the photo (which isnt mine btw), except cosmetic damage its pretty much fully functional, specs are Apple A10 (4c/4t), 2gb of ram and 128gb of storage",
|
||||
image: "/iphone-7.webp",
|
||||
},
|
||||
{
|
||||
title: "Macbook Unibody 2010",
|
||||
desc: "found random listing on bazos for 15 bucks but after I bought a power adapter it turned out to be non functioning so I got scammed :(",
|
||||
image: "/macbook2010.webp",
|
||||
},
|
||||
{
|
||||
title: "ThinkPad T400s 14\"",
|
||||
desc: "got it from a random guy for 20 bucks, its an old laptop from 2009. I put void linux on it and i3wm on it, specs are intel core 2 duo (2c/2t), 8gb ddr3 ram and 800gb hdd.",
|
||||
image: "/thinkpadt400s.webp",
|
||||
},
|
||||
{
|
||||
title: "Asus N56JR 15.6\"",
|
||||
desc: "one of my first laptops my dad got for me when I was like 12, still works but the battery is KO, specs are intel core i7 4700HQ (4c/8t), 8gb ddr3 ram and 240gb ssd, it currently runs ubuntu linux 24.04LTS and my mom uses it for movies and shows.",
|
||||
image: "/asuslaptop.webp",
|
||||
},
|
||||
{
|
||||
title: "Small Unknown XP Acer Laptop",
|
||||
desc: "found that one in ewaste, I think it has like 2gb of ram and an intel atom, not sure what to do with it yet",
|
||||
image: "/acerlaptop.webp",
|
||||
},
|
||||
{
|
||||
title: "Dell Latitude E6320",
|
||||
desc: "also from ewaste, put mint on it but didnt do anything yet, lowk kinda capable for its time in 2011 so I might put it to use later but the battery is KO.",
|
||||
image: "/latitude.webp",
|
||||
},
|
||||
{
|
||||
title: "iPhone 11 128gb",
|
||||
desc: "my first iphone I got from my parents at 13, rn my dad has it because I switched over to the iphone 16 pro in 2025, specs are Apple A13 (6c/6t), 4gb of ram and 128gb of storage. (NOT MY IMAGE)",
|
||||
image: "/iphone11.webp",
|
||||
},
|
||||
{
|
||||
title: "iPhone 16 Pro 128gb",
|
||||
desc: "originally wanted iphone 13 mini (because of the size) but I somehow decided to get 16 pro, which is a bit smaller than my older iphone 11, specs are Apple A18 pro (6c/6t), (btw this chip is the same chip used in the macbook neo so thats cool) and 8gb of ram and 128gb of storage, my main phone.",
|
||||
image: "/iphone16pro.webp",
|
||||
},
|
||||
{
|
||||
title: "Xbox one S 2TB",
|
||||
desc: "my dad bought it for me also in like 2018 or 2019 and I sometimes play the console edition of minecraft because I like to play the gliding minigame on it when someone comes over.",
|
||||
image: "/xboxones.webp",
|
||||
},
|
||||
];
|
||||
|
||||
const friends = [
|
||||
{
|
||||
name: "Josef Skopec",
|
||||
url: "/skopec.html",
|
||||
realUrl: "https://skopec.dev/",
|
||||
img: "/skopec.svg",
|
||||
desc: "skopec.dev",
|
||||
iframe: true
|
||||
},
|
||||
{
|
||||
name: "Filip Bukovina",
|
||||
url: "https://bukovinafilip.com/",
|
||||
realUrl: "https://bukovinafilip.com/",
|
||||
img: "/bukovina.svg",
|
||||
desc: "bukovinafilip.com",
|
||||
iframe: true
|
||||
},
|
||||
{
|
||||
name: "Tomáš Vlk",
|
||||
url: "https://vlcak.me",
|
||||
realUrl: "https://vlcak.me",
|
||||
img: "/vlcak.svg",
|
||||
desc: "vlcak.me",
|
||||
iframe: true
|
||||
}
|
||||
];
|
||||
|
||||
return <>
|
||||
<SlBackground />
|
||||
<div className="container">
|
||||
|
||||
{/* Header - TUI top bar */}
|
||||
<header className="header">
|
||||
<div className="header-center">
|
||||
<JokerLogo />
|
||||
<h1 className="site-name">dvorakmortonxd.dev</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero - TUI welcome panel */}
|
||||
<main className="hero">
|
||||
<div className="hero-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="hero-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>README.MD</span>
|
||||
<h2 className="hero-title">$ whoami</h2>
|
||||
<p className="hero-subtitle">
|
||||
Welcome my personal website! Here I show off my projects and hardware I own, aswell as my self-hosted services :)<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Search Panel */}
|
||||
<div className="search-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>SEARXNG.C</span>
|
||||
<form action="https://search.dvorakmortonxd.dev/search" method="GET" target="_blank" rel="noopener noreferrer" className="search-form">
|
||||
<input type="text" name="q" placeholder="Search... (only works for those who are whitelisted)" className="search-bar" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links Panel */}
|
||||
<div className="social-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SOCIALS.JS</span>
|
||||
<div className="social-buttons">
|
||||
{socials.map((s) => (
|
||||
<a
|
||||
key={s.name}
|
||||
href={s.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="social-button"
|
||||
>
|
||||
<Image src={s.icon} alt={s.name} width={16} height={16} className="social-icon" />
|
||||
<span className="social-label">{s.name}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="mail-contact">
|
||||
mail if u ever wanna contact me: <a href="mailto:dvorak@dvorakmortonxd.dev">dvorak@dvorakmortonxd.dev</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gym SBD Panel */}
|
||||
<div className="gym-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>GYM_SBD_AT_73KG_BW.DB</span>
|
||||
<div className="gym-grid">
|
||||
<div className="gym-item">
|
||||
<Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">SQUAT</div>
|
||||
<div className="gym-weight">125kg</div>
|
||||
<div className="gym-date" style={{ fontSize: '0.65rem', color: 'var(--gray)' }}>5.1.2025</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image src="/bench.svg" alt="Bench" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">BENCH</div>
|
||||
<div className="gym-weight">111kg</div>
|
||||
<div className="gym-date" style={{ fontSize: '0.65rem', color: 'var(--gray)' }}>29.5.2026</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image src="/deadlift.svg" alt="Deadlift" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">DEADLIFT</div>
|
||||
<div className="gym-weight">165kg</div>
|
||||
<div className="gym-date" style={{ fontSize: '0.65rem', color: 'var(--gray)' }}>17.12.2024</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Now Panel */}
|
||||
<div className="about-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>NOW.TXT</span>
|
||||
<div className="about-content">
|
||||
<p>
|
||||
<span style={{ color: 'var(--green)' }}>martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat now.txt
|
||||
</p>
|
||||
<div style={{ color: '#a3a3a3' }}>
|
||||
<p>
|
||||
I'm currently hosting an SMP (dm me on discord). Also I'm pretty much cooking daily, because im bulking through out the non-summer seasons. And me and my pal <span className="text-purple-500"><a href="https://skopec.dev">Pepa</a></span> are working on an education app so we can study more efficiently, It's called <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev/edu/maturita.c">maturita.c</a></span>!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About Me Panel */}
|
||||
<div className="about-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>README.MD</span>
|
||||
<div className="about-content">
|
||||
<p>
|
||||
<span className="text-green">martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat about_me.md
|
||||
</p>
|
||||
<div style={{ color: '#a3a3a3' }}>
|
||||
<p>
|
||||
Hey, I'm Martin Dvořák — a 17(soon to be 18)-year-old IT student based in the Czech Republic, specializing in network management and administration at <span className="text-purple-500"><a href="https://sssvt.cz">sssvt.cz</a></span>. I'm a sophomore and I have wanted to go to this school since 7th grade (2022) so I'm happy I got in in 2025, the school is pretty cool so if you are in middle school and interested in IT, make sure to check it out. I'm a homelabber and developer heavily focused on self-hosting <i>literally everything</i>, writing code (for example games for gamejams), tinkering with GNU/Linux or Musl/Linux systems and retro hardware. I own a small collection of laptops ranging from 2009 to 2014 (and ofcourse my 2025 macbook), most of these found in ewaste. In my free time I mostly spend time with my gf {'<'}3, I also spend a bit of time setting up my self hosted stuff (like jellyfin or gitdxd), and also when I'm in my gaming mood I play terraria (around 1300hr playtime btw) and minecraft modpacks with mekanism and/or create. I also go to the gym around 3-5 times a week, running a PPL split focused on strength/powerlifting and especially SBD. I take a big focus on my health and physique.<span className="cursor-blink"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Services Panel */}
|
||||
<div className="services-section">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SERVICES.HTML</span>
|
||||
<div className="services-buttons services-main">
|
||||
<ServiceButton
|
||||
url="https://proxmox.dvorakmortonxd.dev/"
|
||||
className="proxmox"
|
||||
icon="🖥️"
|
||||
name="Proxmox"
|
||||
desc="Server Management"
|
||||
access="private"
|
||||
disabled
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://ai.dvorakmortonxd.dev/"
|
||||
className="ai"
|
||||
icon="🦾"
|
||||
name="Llama.cpp"
|
||||
desc="Local AI Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://jelly.dvorakmortonxd.dev/"
|
||||
className="jellyfin"
|
||||
icon="🎬"
|
||||
name="Jellyfin"
|
||||
desc="Local Media Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://discord.gg/vyvhk7d8bX"
|
||||
checkUrl="minecraft://mc.dvorakmortonxd.dev:25565"
|
||||
className="pterodactyl"
|
||||
icon="🎮"
|
||||
name="SMP"
|
||||
desc="My Survival Minecraft Server"
|
||||
access="on_request"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://navidrome.dvorakmortonxd.dev/"
|
||||
className="funkwhale"
|
||||
icon="🎸"
|
||||
name="Navidrome"
|
||||
desc="Music Streaming"
|
||||
access="private"
|
||||
/>
|
||||
<ServiceButton
|
||||
url="https://git.dvorakmortonxd.dev"
|
||||
className="gitdxd"
|
||||
icon="🐙"
|
||||
name="GitDXD"
|
||||
desc="Best Git Hosting OAT"
|
||||
access="public"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* GitDXD Panel */}
|
||||
<div className="gitdxd-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>GITDXD.GIT</span>
|
||||
<div style={{ padding: '24px 16px 16px' }}>
|
||||
<h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '16px', textAlign: 'center' }}>GitDXD</h2>
|
||||
<p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p>
|
||||
<div style={{ marginTop: '16px', marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(180, 255, 125, 0.15)' }}>
|
||||
<Image
|
||||
src="/gitdxd.webp"
|
||||
alt="GitDXD Preview"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: '100%', height: 'auto', display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6', textAlign: 'center' }}>
|
||||
<p>My very own forgejo git instance, originally started as a private git instance for me and my friends to boycott GitHub but I've made it public now so. Join at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev">git.dvorakmortonxd.dev</a></span>.<span className="cursor-blink"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Commits Panel */}
|
||||
<div className="commits-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
|
||||
<div className="commits-content" style={{ padding: '24px 12px 16px' }}>
|
||||
<ContributionHeatmap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* REVIVAL INC Panel */}
|
||||
<div className="revival-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>REVIVAL.INC</span>
|
||||
<div style={{ padding: '24px 16px 16px' }}>
|
||||
<h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '32px', textAlign: 'center' }}>Revival inc.</h2>
|
||||
<div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.35)', width: '80%', margin: '12px auto' }}>
|
||||
<Image
|
||||
src="/revivalinc.webp"
|
||||
alt="revival inc thumbnail"
|
||||
width={768}
|
||||
height={576}
|
||||
style={{ width: '100%', height: 'auto', display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
<p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>What is it?</p>
|
||||
<div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6' }}>
|
||||
<p>It's a game I made for the game jam "Mini Jame Gam #55", the theme was Necromancy and the special item was Milk, the game also includes a tutorial so if you wanna try it do it. Check it out at <span className="text-purple-500"><a href="https://martin-dv.itch.io/revival-inc">itch.io</a></span> or play <span className="text-purple-500"><a href="https://dvorakmortonxd.dev/revival-inc">here</a></span>.<span className="cursor-blink"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RustyWolf Panel */}
|
||||
<div className="rustywolf-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>RUSTYWOLF.RS</span>
|
||||
<div style={{ padding: '24px 16px 16px' }}>
|
||||
<h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '32px', textAlign: 'center' }}>Introducing RustyWolf</h2>
|
||||
<div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.2)' }}>
|
||||
<Image
|
||||
src="/RustyWolfPreview.webp"
|
||||
alt="RustyWolf Browser Preview"
|
||||
width={1280}
|
||||
height={720}
|
||||
style={{ width: '100%', height: 'auto', display: 'block' }}
|
||||
/>
|
||||
</div>
|
||||
<p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>What makes it so cool???</p>
|
||||
<div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6' }}>
|
||||
<p>A lightweight browser made in Rust with WebKitGTK. It's the successor to my previous project Venturesome, aiming to provide a fast and minimalist browsing experience. It's a perfect browser for old machines that struggle with modern browsers. Check it out at <span style={{ color: 'var(--accent2)' }}><a href="https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf">GitDXD</a></span>.<span className="cursor-blink"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Projects */}
|
||||
<section className="projects">
|
||||
{/* Tech Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel" style={panelStyle('var(--white)')}>
|
||||
<span className="subsection-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>TECH_LIST.JSON</span>
|
||||
<h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'var(--white)' }}>All my hardware equipment :)</h2>
|
||||
<div className="project-grid">
|
||||
{techProjects.map((project) => (
|
||||
<div key={project.title} className="project-card">
|
||||
<div
|
||||
className="project-image"
|
||||
style={{ backgroundImage: `url(${project.image})` }}
|
||||
/>
|
||||
<h4 className="project-title">{project.title}</h4>
|
||||
<p className="project-desc">{project.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coding Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel coding-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="subsection-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>PROJECTS.DOCX</span>
|
||||
<h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'var(--accent)' }}>All the stuff I've worked on :))</h2>
|
||||
<div className="project-grid">
|
||||
{codingProjects.map((project, idx) => (
|
||||
<a
|
||||
key={idx}
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="project-card"
|
||||
>
|
||||
<div
|
||||
className="project-image"
|
||||
style={{ backgroundImage: `url(${project.img})` }}
|
||||
/>
|
||||
<h4 className="project-title">{project.title}</h4>
|
||||
<p className="project-desc">{project.desc}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Friends Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel friends-panel" style={panelStyle('var(--white)', { backgroundColor: 'rgba(255, 255, 255, 0.02)' })}>
|
||||
<span className="subsection-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>FRIENDS.TSX</span>
|
||||
<h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'var(--white)' }}>Friend's websites and projects</h2>
|
||||
<div className="services-buttons" style={{ gap: '1rem' }}>
|
||||
{friends.map((friend, idx) => (
|
||||
<ServiceButton
|
||||
key={idx}
|
||||
url={friend.realUrl || friend.url}
|
||||
className="friend"
|
||||
icon={<Image src={friend.img} alt={friend.name} width={68} height={68} className="friend-icon" style={{ borderRadius: '50%', filter: 'brightness(0) invert(65%) hue-rotate(70deg) saturate(100%)' }} />}
|
||||
name={friend.name}
|
||||
desc={friend.desc}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
|
||||
<h3 style={{ fontSize: '1.5rem', color: 'var(--accent)', fontWeight: '600' }}>Quipee by Bukovina Filip & Vlk Tomáš</h3>
|
||||
<div style={{ width: '100%', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 0, 0.3)', boxShadow: '0 0 20px rgba(255, 255, 0, 0.1)' }}>
|
||||
<Image src="/quipee.webp" alt="Quipee Thumbnail" width={1280} height={720} style={{ width: '100%', height: 'auto', display: 'block' }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<a href="https://quipee.me" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>Web</a>
|
||||
<a href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>Android</a>
|
||||
<a href="https://testflight.apple.com/join/hP2a1E5x" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>IOS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="footer">
|
||||
<span className="footer-label">v1.2.1</span>
|
||||
© 2025-2026 Martin Dvořák. All rights reserved (not really I dont care, just follow the GPL3.0 License)
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
return <ThemeRoot />;
|
||||
}
|
||||
|
|
|
|||
1029
src/app/skeuo.css
Normal file
1029
src/app/skeuo.css
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue