big commit, added borders around the titles and made a slightly bigger space between the sections to account for the borders
This commit is contained in:
dvorakmortonxd
parent
51ab131c31
commit
5569d5ba3f
2 changed files with 51 additions and 41 deletions
|
|
@ -133,7 +133,7 @@ body {
|
|||
padding: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
|
|
@ -150,12 +150,14 @@ body {
|
|||
top: -1px;
|
||||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(29, 32, 33, 0.95);
|
||||
padding: 0 8px;
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +198,7 @@ body {
|
|||
}
|
||||
|
||||
.about-section {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
|
|
@ -230,7 +232,7 @@ body {
|
|||
SOCIAL BUTTONS - TUI list style
|
||||
============================================ */
|
||||
.social-section {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tui-panel {
|
||||
|
|
@ -246,11 +248,14 @@ body {
|
|||
top: -1px;
|
||||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(29, 32, 33, 0.95);
|
||||
padding: 0 8px;
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -322,7 +327,7 @@ body {
|
|||
SERVICES SECTION - TUI grid
|
||||
============================================ */
|
||||
.services-section {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
|
|
@ -461,7 +466,7 @@ body {
|
|||
PROJECTS - TUI sections
|
||||
============================================ */
|
||||
.projects {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
|
|
@ -477,7 +482,7 @@ body {
|
|||
}
|
||||
|
||||
.subsection-wrapper {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.subsection-panel {
|
||||
|
|
@ -494,12 +499,14 @@ body {
|
|||
top: -1px;
|
||||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(29, 32, 33, 0.95);
|
||||
padding: 0 8px;
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent2);
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -666,7 +673,7 @@ body {
|
|||
FOOTER - TUI status bar
|
||||
============================================ */
|
||||
.footer {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 24px;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
|
|
@ -687,12 +694,14 @@ body {
|
|||
top: -1px;
|
||||
right: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(29, 32, 33, 0.95);
|
||||
padding: 0 8px;
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: var(--gray);
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -884,7 +893,7 @@ body {
|
|||
SEARCH BAR
|
||||
============================================ */
|
||||
.search-section {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
|
|
@ -960,7 +969,7 @@ body {
|
|||
GYM PANEL
|
||||
============================================ */
|
||||
.gym-section {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.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="4"] { background-color: rgba(142, 68, 173, 1); }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -252,7 +252,7 @@ export default function Home() {
|
|||
{/* Hero - TUI welcome panel */}
|
||||
<main className="hero">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -262,7 +262,7 @@ export default function Home() {
|
|||
{/* Search Panel */}
|
||||
<div className="search-section">
|
||||
<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">
|
||||
<input type="text" name="q" placeholder="Search... (only works if I granted you access)" className="search-bar" />
|
||||
</form>
|
||||
|
|
@ -272,7 +272,7 @@ export default function Home() {
|
|||
{/* Social Links Panel */}
|
||||
<div className="social-section">
|
||||
<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">
|
||||
{socials.map((s) => (
|
||||
<a
|
||||
|
|
@ -296,7 +296,7 @@ export default function Home() {
|
|||
{/* Gym SBD Panel */}
|
||||
<div className="gym-section">
|
||||
<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-item">
|
||||
<Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
|
||||
|
|
@ -323,7 +323,7 @@ export default function Home() {
|
|||
{/* About Me Panel */}
|
||||
<div className="about-section">
|
||||
<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">
|
||||
<p>
|
||||
<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 */}
|
||||
<div className="services-section">
|
||||
<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">
|
||||
<ServiceButton
|
||||
url="https://proxmox.dvorakmortonxd.dev/"
|
||||
|
|
@ -427,7 +427,7 @@ export default function Home() {
|
|||
{/* Softcraft Panel */}
|
||||
<div className="services-section" style={{ marginTop: '20px' }}>
|
||||
<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' }}>
|
||||
<ServiceButton
|
||||
url="https://dvorakmortonxd.dev/softcraft"
|
||||
|
|
@ -458,7 +458,7 @@ export default function Home() {
|
|||
{/* GitDXD Panel */}
|
||||
<div className="gitdxd-section" style={{ marginTop: '20px' }}>
|
||||
<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' }}>
|
||||
<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>
|
||||
|
|
@ -481,7 +481,7 @@ export default function Home() {
|
|||
{/* Commits Panel */}
|
||||
<div className="commits-section" style={{ marginTop: '16px' }}>
|
||||
<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' }}>
|
||||
<ContributionHeatmap />
|
||||
</div>
|
||||
|
|
@ -491,7 +491,7 @@ export default function Home() {
|
|||
{/* RustyWolf Panel */}
|
||||
<div className="rustywolf-section" style={{ marginTop: '20px' }}>
|
||||
<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' }}>
|
||||
<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)' }}>
|
||||
|
|
@ -517,7 +517,7 @@ export default function Home() {
|
|||
{/* Tech Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<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>
|
||||
<div className="project-grid">
|
||||
{techProjects.map((project) => (
|
||||
|
|
@ -537,7 +537,7 @@ export default function Home() {
|
|||
{/* Coding Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<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've worked on :))</h2>
|
||||
<div className="project-grid">
|
||||
{codingProjects.map((project, idx) => (
|
||||
|
|
@ -563,7 +563,7 @@ export default function Home() {
|
|||
{/* Friends Section */}
|
||||
<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)' }}>
|
||||
<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's websites and projects</h2>
|
||||
<div className="services-buttons" style={{ gap: '1rem' }}>
|
||||
{friends.map((friend, idx) => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue