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
|
|
@ -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' }}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue