201 lines
14 KiB
HTML
201 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Explore Fretux's projects in an interactive pixel-art portfolio.">
|
||
<meta name="theme-color" content="#e9f3fb">
|
||
<title>Fretux</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||
</head>
|
||
<body>
|
||
<!-- Welcome Screen -->
|
||
<div id="welcome-screen">
|
||
<div id="welcome-content">
|
||
<p class="eyebrow">Fretux</p>
|
||
<h1 id="welcome-text">A little world to explore</h1>
|
||
<button id="enter-button" type="button">Start <span aria-hidden="true">→</span></button>
|
||
<p class="control-guide">← → / A D to move · ↑ / W to jump · Enter to interact</p>
|
||
</div>
|
||
</div>
|
||
<button id="dark-mode-toggle" class="dark-mode-toggle" type="button" aria-pressed="false"><span class="theme-icon" aria-hidden="true">☾</span><span class="theme-label">Dark mode</span></button>
|
||
<button id="sound-toggle" type="button" aria-label="Mute sound effects" aria-pressed="true" title="Toggle sound (M)"><span id="sound-icon" aria-hidden="true">♪</span></button>
|
||
<noscript><div class="no-script">This interactive portfolio needs JavaScript. <a href="https://git.bachmannj.ch/Fretux">Browse the projects on Gitea instead.</a></div></noscript>
|
||
|
||
<!-- Game Container -->
|
||
<div id="game-container">
|
||
<canvas id="game-canvas" tabindex="0" aria-label="Interactive snowy portfolio world"></canvas>
|
||
<div id="block-info" class="hidden">
|
||
<h1>Welcome!</h1>
|
||
<p>Welcome to my portfolio! Here, you'll discover the projects I've worked on, along with insights about my skills and background. If you're curious about my work or have any questions, feel free to reach out! Enjoy exploring!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="projects">
|
||
<div class="project">
|
||
<h3 class="project-name">The_Tower</h3>
|
||
<p class="project-description">A simple tower defense game made in Unity.</p>
|
||
<p class="long-description" data-project-name="The_Tower">A Unity tower defense game where enemies attack a tower. The C# project includes enemy spawning, bullets, cannon effects, and upgrade cards.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/The_Tower" data-project-name="The_Tower">Source code</a>
|
||
<p class="tags">C#</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">PortfolioWebsite</h3>
|
||
<p class="project-description">An interactive portfolio built as a snowy 2D game.</p>
|
||
<p class="long-description" data-project-name="PortfolioWebsite">This website is a small canvas platform game. Walk through the snowy world to discover projects and enter the house to learn about its creator.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/PortfolioWebsite" data-project-name="PortfolioWebsite">Source code</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">anomaly-front-stats</h3>
|
||
<p class="project-description">A web calculator for Anomaly Front stats and weapons.</p>
|
||
<p class="long-description" data-project-name="anomaly-front-stats">A Flask website for calculating Anomaly Front stats, browsing and filtering weapon data, and sending suggestions. It follows the earlier TRL Stats project.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/anomaly-front-stats" data-project-name="anomaly-front-stats">Source code</a>
|
||
<p class="tags">Python / Flask</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">AdapativeMobs</h3>
|
||
<p class="project-description">A Minecraft mod that makes hostile mobs adapt to world progression.</p>
|
||
<p class="long-description" data-project-name="AdapativeMobs">A server-side Minecraft Forge mod that scales vanilla hostile mobs as the world advances. Mobs can gain stronger attributes, better equipment, extra spawn pressure, and tactical behavior.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/AdapativeMobs" data-project-name="AdapativeMobs">Source code</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">WebsitePortfolio2</h3>
|
||
<p class="project-description">A Next.js portfolio with project, about, and contact pages.</p>
|
||
<p class="long-description" data-project-name="WebsitePortfolio2">A separate portfolio website built with Next.js. It presents Frederik's work through dedicated project, about, and contact pages.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/WebsitePortfolio2" data-project-name="WebsitePortfolio2">Source code</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Shoppy</h3>
|
||
<p class="project-description">A mobile shopping assistant for checking products in the store.</p>
|
||
<p class="long-description" data-project-name="Shoppy">An Expo and React Native app concept for scanning product barcodes and judging them against personal goals such as allergies, nutrition, budget, and sustainability.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Shoppy" data-project-name="Shoppy">Source code</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">linux_distro_roguelite_promotion</h3>
|
||
<p class="project-description">The pre-registration site and backend for Linux Distro Roguelite.</p>
|
||
<p class="long-description" data-project-name="linux_distro_roguelite_promotion">A Quarkus backend and static pre-registration page for a free game. Players sign up, choose platforms, and unlock rewards through community milestones.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/linux_distro_roguelite_promotion" data-project-name="linux_distro_roguelite_promotion">Source code</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">linuxdistro-roguelite</h3>
|
||
<p class="project-description">A Linux distribution themed roguelite made in Unity.</p>
|
||
<p class="long-description" data-project-name="linuxdistro-roguelite">The Unity game project for Linux Distro Roguelite. Its scenes and scripts cover combat, game runs, progression, and a gambling scene.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/linuxdistro-roguelite" data-project-name="linuxdistro-roguelite">Source code</a>
|
||
<p class="tags">Unity / C#</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">MindMotion</h3>
|
||
<p class="project-description">A Minecraft mod adding Sanity, Insanity, and Tempo systems.</p>
|
||
<p class="long-description" data-project-name="MindMotion">A configurable Minecraft gameplay mod inspired by Deepwoken. Sanity, Insanity, and Tempo respond to the player's surroundings and actions, adding decisions to exploration and combat.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/MindMotion" data-project-name="MindMotion">Source code</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Ailments</h3>
|
||
<p class="project-description">A Forge library for combat effects such as Bleed and Fear.</p>
|
||
<p class="long-description" data-project-name="Ailments">A Minecraft Forge library mod that provides reusable effects including Soul Rot, Bleed, Fracture, Fear, Charm, Taunt, Overcharm, and Winded for other mods.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Ailments" data-project-name="Ailments">Source code</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">KnockedBack</h3>
|
||
<p class="project-description">A Minecraft mod that turns lethal hits into knockdowns.</p>
|
||
<p class="long-description" data-project-name="KnockedBack">A Minecraft Forge mod that replaces many instant deaths with a temporary knocked-out state. Teammates can rescue and carry a downed player, while opponents can execute them.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/KnockedBack" data-project-name="KnockedBack">Source code</a>
|
||
<a class="link" href="https://www.curseforge.com/minecraft/mc-mods/knockedback" data-project-name="KnockedBack">Download mod</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Ascend</h3>
|
||
<p class="project-description">A soulslike Minecraft RPG progression mod.</p>
|
||
<p class="long-description" data-project-name="Ascend">A Minecraft mod inspired by Deepwoken. Players earn Ascend levels, invest skill points in attributes, and gain Knowledge through play.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Ascend" data-project-name="Ascend">Source code</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">SkillEngine</h3>
|
||
<p class="project-description">A framework for adding custom skill trees to Forge mods.</p>
|
||
<p class="long-description" data-project-name="SkillEngine">A modular Minecraft Forge framework for other mods to define skill nodes, requirements, icons, and unlocks. It also handles the skill tree interface and server synchronization.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/SkillEngine" data-project-name="SkillEngine">Source code</a>
|
||
<p class="tags">Java</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">KrisHD_AI</h3>
|
||
<p class="project-description">Elsewhere, an AI chat app with personas and roleplay sessions.</p>
|
||
<p class="long-description" data-project-name="KrisHD_AI">Elsewhere is an Express and SQLite chat app with user accounts, custom personas, roleplay conversations, and a persona market. Conversations can branch and be compared.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/KrisHD_AI" data-project-name="KrisHD_AI">Source code</a>
|
||
<a class="link" href="https://ai.krishd.ch/" data-project-name="KrisHD_AI">Live website</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Discord_bot</h3>
|
||
<p class="project-description">A Discord bot with moderation, roles, and virtual currency.</p>
|
||
<p class="long-description" data-project-name="Discord_bot">A Discord.js bot for community servers. Its commands cover moderation, role management, utility features, and a virtual currency system.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Discord_bot" data-project-name="Discord_bot">Source code</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Portfolio2</h3>
|
||
<p class="project-description">Another repo of the Next.js portfolio website.</p>
|
||
<p class="long-description" data-project-name="Portfolio2">A second repository for the Next.js portfolio site, with the same home page as WebsitePortfolio2 and dedicated project, about, and contact pages.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Portfolio2" data-project-name="Portfolio2">Source code</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Autoclicker</h3>
|
||
<p class="project-description">A desktop autoclicker with a configurable hotkey.</p>
|
||
<p class="long-description" data-project-name="Autoclicker">A Python desktop autoclicker built with Tkinter and pynput. Configure a hotkey, then start or stop clicking from the app or the keyboard.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Autoclicker" data-project-name="Autoclicker">Source code</a>
|
||
<p class="tags">Python</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">Gambling_API</h3>
|
||
<p class="project-description">A multiplayer virtual-chip poker game for the web.</p>
|
||
<p class="long-description" data-project-name="Gambling_API">A browser-based multiplayer poker game with Express, WebSockets, and SQLite. Players register accounts, join lobbies, and play with virtual chips.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/Gambling_API" data-project-name="Gambling_API">Source code</a>
|
||
<p class="tags">JavaScript</p>
|
||
</div>
|
||
<div class="project">
|
||
<h3 class="project-name">TARS</h3>
|
||
<p class="project-description">A Discord bot for a private server's moderation and utilities.</p>
|
||
<p class="long-description" data-project-name="TARS">A Python Discord bot with moderation tools, reports, reminders, server utilities, fun commands, and a perk shop for server boosters.</p>
|
||
<a class="link" href="https://git.bachmannj.ch/Fretux/TARS" data-project-name="TARS">Source code</a>
|
||
<p class="tags">Python</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- NPC Dialog Overlay (initially hidden via CSS) -->
|
||
<div id="npc-dialog" class="hidden" role="dialog" aria-label="About Fretux">
|
||
<div id="npc-dialog-content">
|
||
<div class="dialog-heading"><span>About Fretux</span><button id="npc-dialog-close" type="button" aria-label="Close dialog">×</button></div>
|
||
<p id="npc-dialog-text">Hello, I'm Frederik Spirgi (aka Fretux), the creator of this website! Feel free to ask me anything—I'm here to share my journey and the technologies behind this interactive experience!</p>
|
||
<button id="dialog-option-1" type="button">My background</button>
|
||
<button id="dialog-option-2" type="button">How this site was built</button>
|
||
<button id="dialog-option-3" type="button">Why an interactive portfolio?</button>
|
||
<p class="dialog-hint">Press Escape to close the conversation.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mobile-controls">
|
||
<button id="move-left-button" type="button" aria-label="Move left">←</button>
|
||
<button id="jump-button" type="button" aria-label="Jump">↑</button>
|
||
<button id="move-right-button" type="button" aria-label="Move right">→</button>
|
||
<button id="interact-button" type="button">Use</button>
|
||
<button id="interact-character-button" class="hidden" type="button">Talk</button>
|
||
</div>
|
||
|
||
|
||
<!-- Snowfall Container -->
|
||
<div id="snow-container"></div>
|
||
<script type="text/javascript" src="audio.js"></script>
|
||
<script type="text/javascript" src="script1.js"></script>
|
||
<script type="text/javascript" src="darkmode.js"></script>
|
||
</body>
|
||
</html>
|