{project.desc}
@@ -289,12 +288,11 @@ export default function WebLayout() {{project.desc}
- Wallpaper from{" "} - - wallpapercave.com/kde-plasma-wallpapers - - . Gentoo logo by Matteo 'Peach' Pescarin (CC BY-SA 2.5), via Wikimedia + Gentoo logo by Matteo 'Peach' Pescarin (CC BY-SA 2.5), via Wikimedia Commons.
{project.desc}
@@ -231,12 +229,11 @@ function HardwareApp() { return ({project.desc}
My Self-hosted Git Instance
-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{" "} @@ -475,15 +464,7 @@ function RevivalApp() { return (
What is it?
It's a game I made for the game jam "Mini Jame Gam #55", the theme was @@ -500,15 +481,7 @@ function RustyWolfApp() { return (
What makes it so cool???
A lightweight browser made in Rust with WebKitGTK. It's the successor to my @@ -766,22 +739,16 @@ function WebsiteApp({ url, desc, icon, - image, }: { title: string; url: string; desc?: string; icon?: ReactNode; - image?: string; }) { return (
{desc}
} @@ -825,7 +792,6 @@ export function createWebsiteApp(opts: { url: string; desc?: string; icon?: ReactNode; - image?: string; /** * Render the real site in an iframe instead of the link card. Only works for * sites that do not send `X-Frame-Options` / a `frame-ancestors` CSP. @@ -854,7 +820,6 @@ export function createWebsiteApp(opts: { url={opts.url} desc={opts.desc} icon={opts.icon} - image={opts.image} /> ), }; diff --git a/src/app/data.ts b/src/app/data.ts index 1aed85b..804d6b3 100644 --- a/src/app/data.ts +++ b/src/app/data.ts @@ -7,14 +7,16 @@ export interface Social { export interface CodingProject { title: string; desc: string; - img: string; + /** Emoji glyph shown on the card's CSS gradient tile (no image assets). */ + emoji: string; url: string; } export interface TechProject { title: string; desc: string; - image: string; + /** Emoji glyph shown on the card's CSS gradient tile (no image assets). */ + emoji: string; } export interface Friend { @@ -54,109 +56,109 @@ 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", + emoji: "🏥", 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", + emoji: "⚔️", 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", + emoji: "🤖", 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", + emoji: "🔐", 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", + emoji: "🐧", 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", + emoji: "🪟", 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", + emoji: "🌐", 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", + emoji: "🌀", 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", + emoji: "💀", 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", + emoji: "💬", 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", + emoji: "⛏️", 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", + emoji: "🧱", 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", + emoji: "🗡️", 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", + emoji: "🦾", 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", + emoji: "💾", 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", + emoji: "🐺", url: "https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf", }, { title: "dxdwm (Discontinued)", desc: "a small x11 window manager written in rust.", - img: "/coding-17.webp", + emoji: "🪟", 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", + emoji: "🧟", url: "https://dvorakmortonxd.dev/revival-inc", }, ]; @@ -165,77 +167,77 @@ 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", + emoji: "🐧", }, { 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", + emoji: "🖥️", }, { 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", + emoji: "🎮", }, { 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", + emoji: "🕹️", }, { 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", + emoji: "💻", }, { 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", + emoji: "💻", }, { 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", + emoji: "📱", }, { 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", + emoji: "💻", }, { 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", + emoji: "💻", }, { 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", + emoji: "💻", }, { 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", + emoji: "📟", }, { 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", + emoji: "💻", }, { 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", + emoji: "📱", }, { 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", + emoji: "📱", }, { 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", + emoji: "🎮", }, ]; @@ -277,6 +279,3 @@ export const friends: Friend[] = [ iframe: true, }, ]; - -export const WALLPAPER = "/wallpaper.jpg"; -export const WALLPAPER_CREDIT = "https://wallpapercave.com/kde-plasma-wallpapers"; diff --git a/src/app/skeuo.css b/src/app/skeuo.css index ff52f68..7f1db1e 100644 --- a/src/app/skeuo.css +++ b/src/app/skeuo.css @@ -34,7 +34,13 @@ html[data-theme="skeuo"] body { position: fixed; inset: 0; overflow: hidden; - background-color: #1b1e20; + background-color: #0b1a2b; + /* Asset-free "wallpaper": layered KDE-ish blue/purple gradients. */ + background-image: + radial-gradient(60rem 40rem at 15% 10%, rgba(61, 174, 233, 0.28), transparent 65%), + radial-gradient(55rem 42rem at 85% 18%, rgba(155, 89, 182, 0.22), transparent 65%), + radial-gradient(72rem 52rem at 68% 100%, rgba(41, 128, 185, 0.3), transparent 70%), + linear-gradient(160deg, #0a1524 0%, #10233b 45%, #0b1a2b 100%); background-size: cover; background-position: center; background-repeat: no-repeat; @@ -143,13 +149,6 @@ a.win-icon { flex-wrap: nowrap; max-height: none; } -.win-icon-img { - width: 38px; - height: 38px; - object-fit: contain; - filter: brightness(0) invert(1); - opacity: 0.92; -} /* Cramped desktops: shrink the icons so the grid always has a cell for every icon (so they can never collide) and the launcher stacks stay on screen. The @@ -168,10 +167,6 @@ a.win-icon { .win-icon-label { font-size: 0.68rem; } - .win-icon-img { - width: 32px; - height: 32px; - } } @media (max-width: 720px), (max-height: 440px) { .win-icon { @@ -191,10 +186,6 @@ a.win-icon { overflow: hidden; text-overflow: ellipsis; } - .win-icon-img { - width: 26px; - height: 26px; - } } @media (max-height: 380px) { .win-icon { @@ -214,10 +205,6 @@ a.win-icon { overflow: hidden; text-overflow: ellipsis; } - .win-icon-img { - width: 22px; - height: 22px; - } } /* The three default stacks are laid out once so the grid columns can be read @@ -650,12 +637,6 @@ a.win-icon { font-size: 3rem; line-height: 1; } -.website-app-img { - width: 84px; - height: 84px; - object-fit: contain; - filter: brightness(0); -} .website-app-link { margin-top: 14px; padding: 8px 16px; @@ -889,7 +870,7 @@ a.win-icon { box-shadow: 0 0 0 1px #7db9e8, 0 0 14px rgba(110, 185, 255, 0.5), 0 8px 18px rgba(0, 25, 55, 0.2); } -.app-surface .project-image { +.app-surface .project-thumb { height: 150px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.12); @@ -1022,18 +1003,6 @@ a.win-icon { color: #0e3355; margin: 14px 0 8px; } -.app-surface .app-shot { - border-radius: 8px; - overflow: hidden; - border: 1px solid rgba(0, 0, 0, 0.2); - margin: 12px 0; -} -.app-surface .app-shot-glow { - box-shadow: 0 0 26px rgba(120, 190, 255, 0.35); -} -.app-surface .app-shot-light { - box-shadow: 0 0 26px rgba(0, 0, 0, 0.22); -} .app-surface .app-list { margin: 10px 0 10px 20px; line-height: 1.8; @@ -1192,7 +1161,7 @@ a.win-icon { background: #353b40; box-shadow: 0 0 0 1px #3daee9, 0 0 14px rgba(61, 174, 233, 0.45); } -.win-body .project-image { +.win-body .project-thumb { border-color: #1b1e20; } .win-body .project-title { @@ -1250,9 +1219,6 @@ a.win-icon { color: #27ae60; } -.win-body .app-shot { - border-color: #1b1e20; -} .win-body .app-linkrow a { border-color: #1b1e20; background: linear-gradient(to bottom, #3b4147, #31363b); @@ -1262,6 +1228,22 @@ a.win-icon { color: #3daee9; } +/* Feature mock windows (FeatureWindow) inside the desktop app windows: swap the + web glass tokens for the KDE dark surface so they fit the rest of the shell. */ +html[data-theme="skeuo"] .fw { + --fw-chrome: rgba(255, 255, 255, 0.05); + --glass-hi: rgba(255, 255, 255, 0.06); + --glass-lo: rgba(255, 255, 255, 0.03); + --glass-border: rgba(255, 255, 255, 0.12); + --btn-bg: rgba(255, 255, 255, 0.06); + --btn-border: rgba(255, 255, 255, 0.14); + --btn-shadow: none; + --web-muted: #9aa0a6; + --fg: #eff0f1; + background: #232629; + box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.85); +} + /* Alacritty easter egg */ .alacritty { min-height: 100%; @@ -1631,7 +1613,7 @@ a.win-icon { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } - .app-surface .project-image { + .app-surface .project-thumb { height: 140px; } } diff --git a/src/app/web.css b/src/app/web.css index dc865f4..45338cd 100644 --- a/src/app/web.css +++ b/src/app/web.css @@ -845,6 +845,141 @@ html[data-theme="web"] body { background: linear-gradient(150deg, #8b5cf6, #6366f1); } +/* ---------- GitDXD: a little git-forge repo page ---------- */ +.fw-forge { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); +} +.fw-forge-head { + display: flex; + align-items: flex-end; + gap: 14px; + padding: 10px 14px 0; + border-bottom: 1px solid var(--glass-border); + flex-wrap: wrap; +} +.fw-forge-repo { + padding-bottom: 8px; + font-size: 0.72rem; + color: var(--web-muted); + white-space: nowrap; +} +.fw-forge-repo b { + color: var(--fg); +} +.fw-forge-tabs { + display: flex; + gap: 13px; + margin-left: auto; +} +.fw-forge-tab { + padding-bottom: 8px; + font-size: 0.66rem; + color: var(--web-muted); +} +.fw-forge-tab-active { + color: var(--fg); + box-shadow: inset 0 -2px 0 var(--accent); +} +.fw-forge-body { + flex: 1; + min-height: 0; + display: grid; + grid-template-columns: minmax(84px, 34%) 1fr; +} +.fw-forge-files { + list-style: none; + margin: 0; + padding: 10px; + border-right: 1px solid var(--glass-border); + display: flex; + flex-direction: column; + gap: 7px; + font-size: 0.62rem; + color: var(--web-muted); + overflow: hidden; +} +.fw-forge-files li { + display: flex; + align-items: center; + gap: 6px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.fw-forge-file-icon { + flex: none; + width: 8px; + height: 8px; + border-radius: 2px; + background: var(--accent); + opacity: 0.7; +} +.fw-forge-code { + display: flex; + flex-direction: column; + justify-content: center; + gap: 9px; + padding: 12px 14px; +} +.fw-code-line { + height: 6px; + border-radius: 3px; + background: var(--glass-border); +} +.fw-code-line:nth-child(1) { + width: 70%; + background: var(--accent); + opacity: 0.55; +} +.fw-code-line:nth-child(2) { + width: 88%; +} +.fw-code-line:nth-child(3) { + width: 54%; +} +.fw-code-line:nth-child(4) { + width: 78%; + background: var(--accent2); + opacity: 0.5; +} +.fw-code-line:nth-child(5) { + width: 62%; +} +.fw-code-line:nth-child(6) { + width: 84%; +} +.fw-code-line:nth-child(7) { + width: 46%; + background: var(--accent); + opacity: 0.45; +} +.fw-code-line:nth-child(8) { + width: 66%; +} +.fw-forge-lang { + display: flex; + height: 6px; +} +.fw-lang-seg { + height: 100%; +} +.fw-lang-ts { + width: 58%; + background: #3178c6; +} +.fw-lang-css { + width: 26%; + background: #e34c26; +} +.fw-lang-md { + width: 16%; + background: #563d7c; +} + @media (prefers-reduced-motion: reduce) { .fw-stars, .fw-start { @@ -1055,15 +1190,37 @@ html[data-theme="web"] body { background: var(--btn-bg-hi, var(--glass-hi)); box-shadow: 0 20px 38px -20px rgba(23, 32, 60, 0.55); } -.project-image { +.project-thumb { + display: grid; + place-items: center; height: 150px; width: 100%; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--glass-border); - background-size: cover; - background-position: center; - background-repeat: no-repeat; + font-size: 2.6rem; + line-height: 1; + user-select: none; + text-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); +} +/* Shared gradient palette for the card tiles (no image assets). */ +.thumb-0 { + background: linear-gradient(150deg, #6d5efc, #2f8bff); +} +.thumb-1 { + background: linear-gradient(150deg, #ec4899, #db2777); +} +.thumb-2 { + background: linear-gradient(150deg, #f59e0b, #d97757); +} +.thumb-3 { + background: linear-gradient(150deg, #10b981, #0d9488); +} +.thumb-4 { + background: linear-gradient(150deg, #8b5cf6, #6366f1); +} +.thumb-5 { + background: linear-gradient(150deg, #06b6d4, #3b82f6); } .project-title { font-size: 0.95rem; @@ -1603,9 +1760,10 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"] margin-bottom: 10px; padding: 10px; } - .project-image { + .project-thumb { height: 90px; margin-bottom: 8px; + font-size: 1.8rem; } .project-title { font-size: 0.88rem;