changed up the tui borders to match the title's colors
This commit is contained in:
dvorakmortonxd
parent
f1a20e49f6
commit
6dc69bbded
3 changed files with 45 additions and 31 deletions
|
|
@ -86,7 +86,7 @@ body {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid var(--tui-border);
|
||||
border-bottom: 1px solid var(--tui-border-highlight);
|
||||
background-color: rgba(29, 32, 33, 0.4) !important;
|
||||
backdrop-filter: blur(20px) saturate(150%) !important;
|
||||
-webkit-backdrop-filter: blur(20px) saturate(150%) !important;
|
||||
|
|
@ -137,7 +137,7 @@ body {
|
|||
}
|
||||
|
||||
.hero-panel {
|
||||
border: 1px solid var(--accent);
|
||||
border: 1px solid var(--panel-color, var(--accent));
|
||||
background: rgba(29, 32, 33, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
|
|
@ -151,10 +151,10 @@ body {
|
|||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
color: var(--panel-color, white);
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
border: 1px solid var(--panel-color, white);
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -236,7 +236,7 @@ body {
|
|||
}
|
||||
|
||||
.tui-panel {
|
||||
border: 1px solid var(--tui-border);
|
||||
border: 1px solid var(--panel-color, var(--tui-border));
|
||||
background: rgba(29, 32, 33, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
|
|
@ -249,10 +249,10 @@ body {
|
|||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
color: var(--panel-color, white);
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
border: 1px solid var(--panel-color, white);
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -486,7 +486,7 @@ body {
|
|||
}
|
||||
|
||||
.subsection-panel {
|
||||
border: 1px solid var(--tui-border);
|
||||
border: 1px solid var(--panel-color, var(--tui-border));
|
||||
background: rgba(29, 32, 33, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
|
|
@ -500,10 +500,10 @@ body {
|
|||
left: 16px;
|
||||
transform: translateY(-50%);
|
||||
background: var(--bg);
|
||||
color: white;
|
||||
color: var(--panel-color, white);
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
border: 1px solid var(--panel-color, white);
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -698,7 +698,7 @@ body {
|
|||
color: white;
|
||||
padding: 2px 6px;
|
||||
border-radius: 0;
|
||||
border: 1px solid white;
|
||||
border: 1px solid var(--tui-border);
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -1076,4 +1076,3 @@ 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); }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Image from "next/image";
|
||||
import "./page.css";
|
||||
import { Metadata } from 'next';
|
||||
import type { CSSProperties } from 'react';
|
||||
import JokerLogo from "./components/JokerLogo";
|
||||
import ServiceButton from "./components/ServiceButton";
|
||||
import SlBackground from "./components/SlBackground";
|
||||
|
|
@ -18,6 +19,12 @@ export const metadata: Metadata = {
|
|||
},
|
||||
};
|
||||
|
||||
type PanelStyle = CSSProperties & { '--panel-color'?: string };
|
||||
|
||||
const panelStyle = (color: string, style: CSSProperties = {}): PanelStyle => ({
|
||||
...style,
|
||||
'--panel-color': color,
|
||||
});
|
||||
|
||||
// Example projects array (you can edit this)
|
||||
const codingProjects = [
|
||||
|
|
@ -251,7 +258,7 @@ export default function Home() {
|
|||
|
||||
{/* Hero - TUI welcome panel */}
|
||||
<main className="hero">
|
||||
<div className="hero-panel">
|
||||
<div className="hero-panel" style={panelStyle('var(--accent)')}>
|
||||
<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">
|
||||
|
|
@ -261,7 +268,7 @@ export default function Home() {
|
|||
|
||||
{/* Search Panel */}
|
||||
<div className="search-section">
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--red)')}>
|
||||
<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" />
|
||||
|
|
@ -271,7 +278,7 @@ export default function Home() {
|
|||
|
||||
{/* Social Links Panel */}
|
||||
<div className="social-section">
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--blue)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--blue)', borderColor: 'var(--blue)' }}>SOCIALS.JS</span>
|
||||
<div className="social-buttons">
|
||||
{socials.map((s) => (
|
||||
|
|
@ -295,7 +302,7 @@ export default function Home() {
|
|||
|
||||
{/* Gym SBD Panel */}
|
||||
<div className="gym-section">
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('#929292')}>
|
||||
<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">
|
||||
|
|
@ -322,7 +329,7 @@ export default function Home() {
|
|||
|
||||
{/* About Me Panel */}
|
||||
<div className="about-section">
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--green)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>about_me.txt</span>
|
||||
<div className="about-content">
|
||||
<p>
|
||||
|
|
@ -345,7 +352,7 @@ export default function Home() {
|
|||
|
||||
{/* Services Panel */}
|
||||
<div className="services-section">
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SERVICES.HTML</span>
|
||||
<div className="services-buttons">
|
||||
<ServiceButton
|
||||
|
|
@ -426,7 +433,7 @@ export default function Home() {
|
|||
|
||||
{/* Softcraft Panel */}
|
||||
<div className="services-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('white')}>
|
||||
<span className="tui-panel-label" style={{ color: 'white', borderColor: 'white' }}>SOFTCRAFT.JAR</span>
|
||||
<div className="services-buttons" style={{ gap: '1rem' }}>
|
||||
<ServiceButton
|
||||
|
|
@ -457,7 +464,7 @@ export default function Home() {
|
|||
|
||||
{/* GitDXD Panel */}
|
||||
<div className="gitdxd-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('#0ea5e9')}>
|
||||
<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>
|
||||
|
|
@ -480,7 +487,7 @@ export default function Home() {
|
|||
|
||||
{/* Commits Panel */}
|
||||
<div className="commits-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--green)')}>
|
||||
<span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
|
||||
<div className="commits-content" style={{ padding: '24px 12px 16px' }}>
|
||||
<ContributionHeatmap />
|
||||
|
|
@ -490,7 +497,7 @@ export default function Home() {
|
|||
|
||||
{/* RustyWolf Panel */}
|
||||
<div className="rustywolf-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('#f74c00')}>
|
||||
<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>
|
||||
|
|
@ -516,7 +523,7 @@ export default function Home() {
|
|||
<section className="projects">
|
||||
{/* Tech Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel">
|
||||
<div className="subsection-panel" style={panelStyle('var(--accent2)')}>
|
||||
<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">
|
||||
|
|
@ -536,7 +543,7 @@ export default function Home() {
|
|||
|
||||
{/* Coding Section */}
|
||||
<div className="subsection-wrapper">
|
||||
<div className="subsection-panel coding-panel">
|
||||
<div className="subsection-panel coding-panel" style={panelStyle('var(--purple)')}>
|
||||
<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">
|
||||
|
|
@ -562,7 +569,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)' }}>
|
||||
<div className="subsection-panel friends-panel" style={panelStyle('var(--aqua)', { backgroundColor: 'rgba(50, 205, 50, 0.05)' })}>
|
||||
<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' }}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Image from "next/image";
|
||||
import "../page.css";
|
||||
import { Metadata } from 'next';
|
||||
import type { CSSProperties } from 'react';
|
||||
import JokerLogo from "../components/JokerLogo";
|
||||
import ServiceButton from "../components/ServiceButton";
|
||||
|
||||
|
|
@ -15,6 +16,13 @@ export const metadata: Metadata = {
|
|||
},
|
||||
};
|
||||
|
||||
type PanelStyle = CSSProperties & { '--panel-color'?: string };
|
||||
|
||||
const panelStyle = (color: string, style: CSSProperties = {}): PanelStyle => ({
|
||||
...style,
|
||||
'--panel-color': color,
|
||||
});
|
||||
|
||||
export default function Softcraft() {
|
||||
return <>
|
||||
<style>{`
|
||||
|
|
@ -62,7 +70,7 @@ export default function Softcraft() {
|
|||
|
||||
{/* Hero - TUI welcome panel */}
|
||||
<main className="hero">
|
||||
<div className="hero-panel">
|
||||
<div className="hero-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="hero-panel-label">~ ABOUT_SOFTCRAFT.MD</span>
|
||||
<h2 className="hero-title">$ ./start_softcraft.sh</h2>
|
||||
<p className="hero-subtitle">
|
||||
|
|
@ -72,7 +80,7 @@ export default function Softcraft() {
|
|||
|
||||
{/* Server Info Panel */}
|
||||
<div className="about-section">
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label label-yellow">├─ neofetch</span>
|
||||
<div className="about-content">
|
||||
<p>
|
||||
|
|
@ -119,7 +127,7 @@ export default function Softcraft() {
|
|||
|
||||
{/* Links Panel */}
|
||||
<div className="services-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--blue)')}>
|
||||
<span className="tui-panel-label label-blue">├─ LINKS.SH</span>
|
||||
<div className="services-buttons" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1rem' }}>
|
||||
<ServiceButton
|
||||
|
|
@ -149,7 +157,7 @@ export default function Softcraft() {
|
|||
|
||||
{/* Vote Panel */}
|
||||
<div className="services-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<div className="tui-panel" style={panelStyle('var(--accent)')}>
|
||||
<span className="tui-panel-label label-yellow">├─ VOTE_HERE.JS</span>
|
||||
<div className="services-buttons" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
|
||||
<ServiceButton
|
||||
|
|
@ -186,8 +194,8 @@ export default function Softcraft() {
|
|||
|
||||
{/* Video Panel */}
|
||||
<div className="video-section" style={{ marginTop: '20px' }}>
|
||||
<div className="tui-panel">
|
||||
<span className="tui-panel-label" style={{ color: '#ec4899' }}>└─ BASH 'LS ./VIDEOS/'</span>
|
||||
<div className="tui-panel" style={panelStyle('#ec4899')}>
|
||||
<span className="tui-panel-label" style={{ color: '#ec4899', borderColor: '#ec4899' }}>└─ BASH 'LS ./VIDEOS/'</span>
|
||||
<div className="video-grid" style={{ marginTop: '10px' }}>
|
||||
{[
|
||||
"ifBnNS8X3O8",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue