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

big commit, added borders around the titles and made a slightly bigger space between the sections to account for the borders

Browse source
This commit is contained in:
dvorakmortonxd 2026-05-19 11:30:41 +02:00
commit 5569d5ba3f
2 changed files with 51 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/app/page.css
View file

@ -133,7 +133,7 @@ body {
padding: 0; padding: 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 16px; margin-top: 20px;
} }
.hero-panel { .hero-panel {
@ -150,12 +150,14 @@ body {
top: -1px; top: -1px;
left: 16px; left: 16px;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(29, 32, 33, 0.95); background: var(--bg);
padding: 0 8px; color: white;
padding: 2px 6px;
border-radius: 0;
border: 1px solid white;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 700; font-weight: bold;
color: var(--accent); letter-spacing: 0.05em;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -196,7 +198,7 @@ body {
} }
.about-section { .about-section {
margin-top: 16px; margin-top: 20px;
} }
.about-content { .about-content {
@ -230,7 +232,7 @@ body {
SOCIAL BUTTONS - TUI list style SOCIAL BUTTONS - TUI list style
============================================ */ ============================================ */
.social-section { .social-section {
margin-top: 16px; margin-top: 20px;
} }
.tui-panel { .tui-panel {
@ -246,11 +248,14 @@ body {
top: -1px; top: -1px;
left: 16px; left: 16px;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(29, 32, 33, 0.95); background: var(--bg);
padding: 0 8px; color: white;
padding: 2px 6px;
border-radius: 0;
border: 1px solid white;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 700; font-weight: bold;
letter-spacing: 0.08em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -322,7 +327,7 @@ body {
SERVICES SECTION - TUI grid SERVICES SECTION - TUI grid
============================================ */ ============================================ */
.services-section { .services-section {
margin-top: 16px; margin-top: 20px;
padding-top: 0; padding-top: 0;
} }
@ -461,7 +466,7 @@ body {
PROJECTS - TUI sections PROJECTS - TUI sections
============================================ */ ============================================ */
.projects { .projects {
margin-top: 16px; margin-top: 20px;
padding: 0; padding: 0;
text-align: left; text-align: left;
position: relative; position: relative;
@ -477,7 +482,7 @@ body {
} }
.subsection-wrapper { .subsection-wrapper {
margin-top: 16px; margin-top: 20px;
} }
.subsection-panel { .subsection-panel {
@ -494,12 +499,14 @@ body {
top: -1px; top: -1px;
left: 16px; left: 16px;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(29, 32, 33, 0.95); background: var(--bg);
padding: 0 8px; color: white;
padding: 2px 6px;
border-radius: 0;
border: 1px solid white;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 700; font-weight: bold;
color: var(--accent2); letter-spacing: 0.05em;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -666,7 +673,7 @@ body {
FOOTER - TUI status bar FOOTER - TUI status bar
============================================ */ ============================================ */
.footer { .footer {
margin-top: 16px; margin-top: 20px;
margin-bottom: 24px; margin-bottom: 24px;
padding: 10px 20px; padding: 10px 20px;
text-align: center; text-align: center;
@ -687,12 +694,14 @@ body {
top: -1px; top: -1px;
right: 16px; right: 16px;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(29, 32, 33, 0.95); background: var(--bg);
padding: 0 8px; color: white;
padding: 2px 6px;
border-radius: 0;
border: 1px solid white;
font-size: 0.7rem; font-size: 0.7rem;
font-weight: 700; font-weight: bold;
color: var(--gray); letter-spacing: 0.05em;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
} }
@ -884,7 +893,7 @@ body {
SEARCH BAR SEARCH BAR
============================================ */ ============================================ */
.search-section { .search-section {
margin-top: 16px; margin-top: 20px;
} }
.search-form { .search-form {
@ -960,7 +969,7 @@ body {
GYM PANEL GYM PANEL
============================================ */ ============================================ */
.gym-section { .gym-section {
margin-top: 16px; margin-top: 20px;
} }
.gym-grid { .gym-grid {
@ -1067,3 +1076,4 @@ body {
.heatmap-legend-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); } .heatmap-legend-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); }
.heatmap-legend-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); } .heatmap-legend-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); }

26
src/app/page.tsx
View file

@ -252,7 +252,7 @@ export default function Home() {
{/* Hero - TUI welcome panel */} {/* Hero - TUI welcome panel */}
<main className="hero"> <main className="hero">
<div className="hero-panel"> <div className="hero-panel">
<span className="hero-panel-label">~ README.MD</span> <span className="hero-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>README.MD</span>
<h2 className="hero-title">$ whoami</h2> <h2 className="hero-title">$ whoami</h2>
<p className="hero-subtitle"> <p className="hero-subtitle">
Welcome to my website, down under this section you get to find out about me and my social media, services, hardware and projects. Proceed at your own risk :)<span className="cursor-blink"></span> Welcome to my website, down under this section you get to find out about me and my social media, services, hardware and projects. Proceed at your own risk :)<span className="cursor-blink"></span>
@ -262,7 +262,7 @@ export default function Home() {
{/* Search Panel */} {/* Search Panel */}
<div className="search-section"> <div className="search-section">
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label" style={{ color: 'var(--red)' }}>├─ SEARXNG.C</span> <span className="tui-panel-label" style={{ color: 'var(--red)', borderColor: 'var(--red)' }}>SEARXNG.C</span>
<form action="https://search.dvorakmortonxd.dev/search" method="GET" target="_blank" rel="noopener noreferrer" className="search-form"> <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 if I granted you access)" className="search-bar" /> <input type="text" name="q" placeholder="Search... (only works if I granted you access)" className="search-bar" />
</form> </form>
@ -272,7 +272,7 @@ export default function Home() {
{/* Social Links Panel */} {/* Social Links Panel */}
<div className="social-section"> <div className="social-section">
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label label-blue">├─ SOCIALS.JS</span> <span className="tui-panel-label" style={{ color: 'var(--blue)', borderColor: 'var(--blue)' }}>SOCIALS.JS</span>
<div className="social-buttons"> <div className="social-buttons">
{socials.map((s) => ( {socials.map((s) => (
<a <a
@ -296,7 +296,7 @@ export default function Home() {
{/* Gym SBD Panel */} {/* Gym SBD Panel */}
<div className="gym-section"> <div className="gym-section">
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label" style={{ color: 'var(--accent2)' }}>├─ GYM_SBD_AT_73KG_BW.DB</span> <span className="tui-panel-label" style={{ color: '#929292', borderColor: '#929292' }}>GYM_SBD_AT_73KG_BW.DB</span>
<div className="gym-grid"> <div className="gym-grid">
<div className="gym-item"> <div className="gym-item">
<Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" /> <Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
@ -323,7 +323,7 @@ export default function Home() {
{/* About Me Panel */} {/* About Me Panel */}
<div className="about-section"> <div className="about-section">
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label label-yellow">├─ about_me.txt</span> <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>about_me.txt</span>
<div className="about-content"> <div className="about-content">
<p> <p>
<span className="text-green">martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat about_me.txt <span className="text-green">martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat about_me.txt
@ -346,7 +346,7 @@ export default function Home() {
{/* Services Panel */} {/* Services Panel */}
<div className="services-section"> <div className="services-section">
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label label-green">├─ SERVICES.HTML</span> <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SERVICES.HTML</span>
<div className="services-buttons"> <div className="services-buttons">
<ServiceButton <ServiceButton
url="https://proxmox.dvorakmortonxd.dev/" url="https://proxmox.dvorakmortonxd.dev/"
@ -427,7 +427,7 @@ export default function Home() {
{/* Softcraft Panel */} {/* Softcraft Panel */}
<div className="services-section" style={{ marginTop: '20px' }}> <div className="services-section" style={{ marginTop: '20px' }}>
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label" style={{ color: '#d946ef' }}>├─ SOFTCRAFT.JAR</span> <span className="tui-panel-label" style={{ color: 'white', borderColor: 'white' }}>SOFTCRAFT.JAR</span>
<div className="services-buttons" style={{ gap: '1rem' }}> <div className="services-buttons" style={{ gap: '1rem' }}>
<ServiceButton <ServiceButton
url="https://dvorakmortonxd.dev/softcraft" url="https://dvorakmortonxd.dev/softcraft"
@ -458,7 +458,7 @@ export default function Home() {
{/* GitDXD Panel */} {/* GitDXD Panel */}
<div className="gitdxd-section" style={{ marginTop: '20px' }}> <div className="gitdxd-section" style={{ marginTop: '20px' }}>
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label" style={{ color: '#0ea5e9' }}>├─ GITDXD.GIT</span> <span className="tui-panel-label" style={{ color: '#0ea5e9', borderColor: '#0ea5e9' }}>GITDXD.GIT</span>
<div style={{ padding: '24px 16px 16px' }}> <div style={{ padding: '24px 16px 16px' }}>
<h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#0ea5e9', marginBottom: '16px', textAlign: 'center' }}>GitDXD</h2> <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#0ea5e9', marginBottom: '16px', textAlign: 'center' }}>GitDXD</h2>
<p style={{ fontSize: '1.8rem', color: '#0ea5e9', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p> <p style={{ fontSize: '1.8rem', color: '#0ea5e9', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p>
@ -481,7 +481,7 @@ export default function Home() {
{/* Commits Panel */} {/* Commits Panel */}
<div className="commits-section" style={{ marginTop: '16px' }}> <div className="commits-section" style={{ marginTop: '16px' }}>
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label" style={{ color: 'var(--green)' }}>├─ CONTRIBUTIONS@GITDXD.GIT</span> <span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
<div className="commits-content" style={{ padding: '24px 16px 16px' }}> <div className="commits-content" style={{ padding: '24px 16px 16px' }}>
<ContributionHeatmap /> <ContributionHeatmap />
</div> </div>
@ -491,7 +491,7 @@ export default function Home() {
{/* RustyWolf Panel */} {/* RustyWolf Panel */}
<div className="rustywolf-section" style={{ marginTop: '20px' }}> <div className="rustywolf-section" style={{ marginTop: '20px' }}>
<div className="tui-panel"> <div className="tui-panel">
<span className="tui-panel-label" style={{ color: '#f74c00' }}>├─ RUSTYWOLF.RS</span> <span className="tui-panel-label" style={{ color: '#f74c00', borderColor: '#f74c00' }}>RUSTYWOLF.RS</span>
<div style={{ padding: '24px 16px 16px' }}> <div style={{ padding: '24px 16px 16px' }}>
<h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#f74c00', marginBottom: '32px', textAlign: 'center' }}>Introducing RustyWolf</h2> <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#f74c00', 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.15)' }}> <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.15)' }}>
@ -517,7 +517,7 @@ export default function Home() {
{/* Tech Section */} {/* Tech Section */}
<div className="subsection-wrapper"> <div className="subsection-wrapper">
<div className="subsection-panel"> <div className="subsection-panel">
<span className="subsection-panel-label">├─ TECH_LIST.JSON</span> <span className="subsection-panel-label" style={{ color: 'var(--accent2)', borderColor: 'var(--accent2)' }}>TECH_LIST.JSON</span>
<h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'darkorange' }}>All my hardware equipment :)</h2> <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'darkorange' }}>All my hardware equipment :)</h2>
<div className="project-grid"> <div className="project-grid">
{techProjects.map((project) => ( {techProjects.map((project) => (
@ -537,7 +537,7 @@ export default function Home() {
{/* Coding Section */} {/* Coding Section */}
<div className="subsection-wrapper"> <div className="subsection-wrapper">
<div className="subsection-panel coding-panel"> <div className="subsection-panel coding-panel">
<span className="subsection-panel-label">├─ PROJECTS.DOCX</span> <span className="subsection-panel-label" style={{ color: 'var(--purple)', borderColor: 'var(--purple)' }}>PROJECTS.DOCX</span>
<h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'pink' }}>All the stuff I&#39;ve worked on :))</h2> <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'pink' }}>All the stuff I&#39;ve worked on :))</h2>
<div className="project-grid"> <div className="project-grid">
{codingProjects.map((project, idx) => ( {codingProjects.map((project, idx) => (
@ -563,7 +563,7 @@ export default function Home() {
{/* Friends Section */} {/* Friends Section */}
<div className="subsection-wrapper"> <div className="subsection-wrapper">
<div className="subsection-panel friends-panel" style={{ backgroundColor: 'rgba(50, 205, 50, 0.05)', borderColor: 'rgba(50, 205, 50, 0.2)' }}> <div className="subsection-panel friends-panel" style={{ backgroundColor: 'rgba(50, 205, 50, 0.05)', borderColor: 'rgba(50, 205, 50, 0.2)' }}>
<span className="subsection-panel-label">└─ FRIENDS.TSX</span> <span className="subsection-panel-label" style={{ color: 'var(--aqua)', borderColor: 'var(--aqua)' }}>FRIENDS.TSX</span>
<h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'limegreen' }}>Friend&#39;s websites and projects</h2> <h2 style={{ fontSize: '2rem', fontWeight: 'bold', textAlign: 'center', margin: '4px 0 20px', color: 'limegreen' }}>Friend&#39;s websites and projects</h2>
<div className="services-buttons" style={{ gap: '1rem' }}> <div className="services-buttons" style={{ gap: '1rem' }}>
{friends.map((friend, idx) => ( {friends.map((friend, idx) => (