dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit/push

Browse source
This commit is contained in:
dvorakmortonxd 2026-05-13 13:20:51 +02:00
commit cc60991fc0
27 changed files with 11489 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
src/app/components/.DS_Store vendored Normal file
View file

Binary file not shown.

36
src/app/components/JokerLogo.tsx Normal file
View file

@ -0,0 +1,36 @@
"use client";
import { useState } from "react";
import Image from "next/image";
export default function JokerLogo() {
const [jokerActive, setJokerActive] = useState(false);
const handleClick = () => {
if (jokerActive) return;
setJokerActive(true);
setTimeout(() => {
setJokerActive(false);
}, 1200);
};
return (
<>
<Image
src="/icon.png"
alt="Logo"
className="logo"
width={100}
height={100}
onClick={handleClick}
style={{ cursor: "pointer" }}
/>
{jokerActive && (
<div className="joker-flash-overlay">
<Image src="/joker.png" alt="Joker" className="joker-img" width={500} height={500} unoptimized />
</div>
)}
</>
);
}

42
src/app/components/ServiceButton.tsx Normal file
View file

@ -0,0 +1,42 @@
"use client";
import React, { useEffect, useState, ReactNode } from 'react';
export default function ServiceButton({ url, checkUrl, className, icon, name, desc }: { url: string, checkUrl?: string, className: string, icon: ReactNode, name: string, desc: string }) {
const [status, setStatus] = useState<'pending' | 'up' | 'down'>('pending');
useEffect(() => {
const checkStatus = async () => {
try {
const targetUrl = checkUrl || url;
const res = await fetch(`/api/ping?url=${encodeURIComponent(targetUrl)}`);
const data = await res.json();
setStatus(data.status);
} catch {
setStatus('down');
}
};
checkStatus();
}, [url, checkUrl]);
return (
<a href={url} target="_blank" rel="noopener noreferrer" className={`service-button ${className}`} style={{ position: 'relative' }}>
<div style={{
position: 'absolute',
top: '8px',
right: '8px',
width: '10px',
height: '10px',
borderRadius: '50%',
backgroundColor: status === 'up' ? '#4ade80' : status === 'down' ? '#ef4444' : '#9ca3af',
boxShadow: status === 'up' ? '0 0 5px #4ade80' : status === 'down' ? '0 0 5px #ef4444' : 'none',
transition: 'all 0.3s ease'
}} title={status === 'up' ? 'Active' : status === 'down' ? 'Dead' : 'Checking...'} />
<span className="service-icon">{icon}</span>
<span className="service-text">
<span className="service-name">{name}</span>
<span className="service-desc">{desc}</span>
</span>
</a>
);
}

105
src/app/components/SlBackground.tsx Normal file
View file

@ -0,0 +1,105 @@
"use client";
import { useEffect, useState } from "react";
const TRAIN_ASCII = ` ==== ________ ___________
_D _| |_______/ \\__I_I_____===__|_________|
|(_)--- | H\\________/ | | =|___ ___| _________________ _________________ _________________
/ | | H | | | | ||_| |_|| _| \\_____| \\_____| \\_____A
| | | H |__--------------------| [___] | =| | | |
| ________|___H__/__|_____/[][]~\\_______| | -| | | |
|/ | |-----------I_____I [][] [] D |=======|____|________________________|_______________________|_______________________|_
__/ =| o |=-~~\\ /~~\\ /~~\\ /~~\\ ____Y___________|__|__________________________|_______________________|_______________________|
|/-=|___|= || || || |_____/~\\___/ |_D__D__D_| |_D__D__D_| |_D__D__D_| |_D__D__D_| |_D__D__D_| |_D__D__D_|
\\_/ \\O=====O=====O=====O_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/ \\_/`;
export default function SlBackground() {
const [pos, setPos] = useState(150);
useEffect(() => {
let animationFrameId: number;
let lastTime = 0;
const animate = (timestamp: number) => {
if (!lastTime) lastTime = timestamp;
const delta = timestamp - lastTime;
// Update position every ~30ms to create a retro sliding terminal refresh feel
if (delta > 30) {
setPos((prev) => {
if (prev <= -150) return 150;
return prev - 1.5;
});
lastTime = timestamp;
}
animationFrameId = requestAnimationFrame(animate);
};
animationFrameId = requestAnimationFrame(animate);
return () => cancelAnimationFrame(animationFrameId);
}, []);
return (
<>
<style>
{`
@keyframes rainbowShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
`}
</style>
<div
style={{
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
pointerEvents: "none",
zIndex: 0,
overflow: "hidden",
display: "flex",
alignItems: "flex-end",
paddingBottom: "5vh",
justifyContent: "center",
userSelect: "none",
backgroundImage: "linear-gradient(rgba(29, 32, 33, 0.94), rgba(29, 32, 33, 0.94)), url('/gruvbox.png')",
backgroundSize: "cover",
backgroundPosition: "center",
}}
>
<pre
style={{
margin: 0,
whiteSpace: "pre",
fontFamily: "var(--font-custom-mono), monospace",
fontSize: "1rem",
transform: "translateX(" + pos + "vw)",
willChange: "transform",
background: "linear-gradient(90deg, var(--red), var(--accent2), var(--accent), var(--green), var(--aqua), var(--blue), var(--purple))",
backgroundSize: "200% auto",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
animation: "rainbowShift 3s linear infinite",
opacity: 0.35,
filter: "drop-shadow(0 0 12px rgba(250, 189, 47, 0.5))",
}}
>
{TRAIN_ASCII}
</pre>
</div>
</>
);
}