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

color redesign, white = less important, yellow = more important

Browse source
This commit is contained in:
dvorakmortonxd 2026-08-23 03:27:52 +02:00
commit d12fbeef23
4 changed files with 67 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/ContributionHeatmap.tsx
View file

@ -125,11 +125,11 @@ export default function ContributionHeatmap() {
<div className="contribution-heatmap"> <div className="contribution-heatmap">
<div className="contribution-command-row"> <div className="contribution-command-row">
<div className="contribution-command"> <div className="contribution-command">
<span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--aqua)" }}>{totalContribs}</span> contributions in the last year&#34; <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--accent)" }}>{totalContribs}</span> contributions in the last year&#34;
</div> </div>
</div> </div>
<div className="contribution-total-title"> <div className="contribution-total-title">
<span style={{ color: "var(--aqua)" }}>{totalContribs}</span> contributions in the last year <span style={{ color: "var(--accent)" }}>{totalContribs}</span> contributions in the last year
</div> </div>
<div className="heatmap-container"> <div className="heatmap-container">
{weeks.map((week, wIdx) => ( {weeks.map((week, wIdx) => (
@ -151,7 +151,7 @@ export default function ContributionHeatmap() {
<div className="heatmap-status-row"> <div className="heatmap-status-row">
<div className="heatmap-status-text"> <div className="heatmap-status-text">
{hoveredCell ? ( {hoveredCell ? (
<span><strong style={{ color: "var(--aqua)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span> <span><strong style={{ color: "var(--accent)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
) : ( ) : (
<span>Hover over a day to see contributions</span> <span>Hover over a day to see contributions</span>
)} )}

6
src/app/components/ServiceButton.tsx
View file

@ -36,9 +36,9 @@ export default function ServiceButton({ url, checkUrl, className, icon, name, de
<span className="service-text"> <span className="service-text">
<span className="service-name"> <span className="service-name">
{name} {name}
{access === 'public' && <span style={{ color: '#4ade80', fontSize: '0.7em', marginLeft: '6px' }}>(public)</span>} {access === 'public' && <span style={{ color: 'var(--accent)', fontSize: '0.7em', marginLeft: '6px' }}>(public)</span>}
{access === 'private' && <span style={{ color: '#ef4444', fontSize: '0.7em', marginLeft: '6px' }}>(private)</span>} {access === 'private' && <span style={{ color: 'var(--red)', fontSize: '0.7em', marginLeft: '6px' }}>(private)</span>}
{access === 'on_request' && <span style={{ color: '#f97316', fontSize: '0.7em', marginLeft: '6px' }}>(on request)</span>} {access === 'on_request' && <span style={{ color: 'var(--accent2)', fontSize: '0.7em', marginLeft: '6px' }}>(on request)</span>}
</span> </span>
<span className="service-desc">{desc}</span> <span className="service-desc">{desc}</span>
</span> </span>

30
src/app/page.css
View file

@ -193,7 +193,7 @@ body {
} }
.mail-contact a { .mail-contact a {
color: var(--blue); color: var(--accent2);
text-decoration: none; text-decoration: none;
} }
@ -521,7 +521,7 @@ body {
} }
.subsection-panel.friends-panel .subsection-panel-label { .subsection-panel.friends-panel .subsection-panel-label {
color: var(--aqua); color: var(--white);
} }
/* Project grid & cards */ /* Project grid & cards */
@ -695,11 +695,11 @@ body {
right: 16px; right: 16px;
transform: translateY(-50%); transform: translateY(-50%);
background: var(--bg); background: var(--bg);
color: white; color: var(--accent);
padding: 2px 6px; padding: 2px 6px;
border-radius: 0; border-radius: 0;
border: 1px solid var(--tui-border); border: 1px solid var(--accent3);
font-size: 0.7rem; font-size: 0.72rem;
font-weight: bold; font-weight: bold;
letter-spacing: 0.05em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
@ -1117,9 +1117,9 @@ body {
overflow-x: auto; overflow-x: auto;
gap: 2px; gap: 2px;
padding: 4px; padding: 4px;
border: 1px solid var(--aqua); border: 1px solid var(--accent);
scrollbar-width: none; scrollbar-width: none;
scrollbar-color: var(--green) transparent; scrollbar-color: var(--accent) transparent;
} }
.heatmap-status-row { .heatmap-status-row {
@ -1166,10 +1166,10 @@ body {
box-shadow: 0 0 6px var(--color-white); box-shadow: 0 0 6px var(--color-white);
} }
.heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); } .heatmap-cell[data-level="1"] { background-color: rgba(255,255,0, 0.2); }
.heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); } .heatmap-cell[data-level="2"] { background-color: rgba(255,255,0, 0.4); }
.heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); } .heatmap-cell[data-level="3"] { background-color: rgba(255,255,0, 0.7); }
.heatmap-cell[data-level="4"] { background-color: rgba(130,180,19, 1); } .heatmap-cell[data-level="4"] { background-color: rgba(255,255,0, 1); }
.heatmap-legend-cell { .heatmap-legend-cell {
width: 11px; width: 11px;
@ -1179,10 +1179,10 @@ body {
flex-shrink: 0; flex-shrink: 0;
} }
.heatmap-legend-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); } .heatmap-legend-cell[data-level="1"] { background-color: rgba(255,255,0, 0.3); }
.heatmap-legend-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); } .heatmap-legend-cell[data-level="2"] { background-color: rgba(255,255,0, 0.5); }
.heatmap-legend-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); } .heatmap-legend-cell[data-level="3"] { background-color: rgba(255,255,0, 0.7); }
.heatmap-legend-cell[data-level="4"] { background-color: rgba(130,180,19, 1); } .heatmap-legend-cell[data-level="4"] { background-color: rgba(255,255,0, 1); }
@media (max-width: 520px) { @media (max-width: 520px) {
.contribution-command { .contribution-command {

94
src/app/page.tsx
View file

@ -283,8 +283,8 @@ export default function Home() {
{/* Search Panel */} {/* Search Panel */}
<div className="search-section"> <div className="search-section">
<div className="tui-panel" style={panelStyle('var(--red)')}> <div className="tui-panel" style={panelStyle('var(--white)')}>
<span className="tui-panel-label" style={{ color: 'var(--red)', borderColor: 'var(--red)' }}>SEARXNG.C</span> <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>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 for those who are whitelisted)" className="search-bar" /> <input type="text" name="q" placeholder="Search... (only works for those who are whitelisted)" className="search-bar" />
</form> </form>
@ -293,8 +293,8 @@ export default function Home() {
{/* Social Links Panel */} {/* Social Links Panel */}
<div className="social-section"> <div className="social-section">
<div className="tui-panel" style={panelStyle('var(--blue)')}> <div className="tui-panel" style={panelStyle('var(--accent)')}>
<span className="tui-panel-label" style={{ color: 'var(--blue)', borderColor: 'var(--blue)' }}>SOCIALS.JS</span> <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>SOCIALS.JS</span>
<div className="social-buttons"> <div className="social-buttons">
{socials.map((s) => ( {socials.map((s) => (
<a <a
@ -317,8 +317,8 @@ export default function Home() {
{/* Gym SBD Panel */} {/* Gym SBD Panel */}
<div className="gym-section"> <div className="gym-section">
<div className="tui-panel" style={panelStyle('#929292')}> <div className="tui-panel" style={panelStyle('var(--white)')}>
<span className="tui-panel-label" style={{ color: '#929292', borderColor: '#929292' }}>GYM_SBD_AT_73KG_BW.DB</span> <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>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" />
@ -344,8 +344,8 @@ export default function Home() {
{/* Now Panel */} {/* Now Panel */}
<div className="about-section"> <div className="about-section">
<div className="tui-panel" style={panelStyle('#eab308')}> <div className="tui-panel" style={panelStyle('var(--white)')}>
<span className="tui-panel-label" style={{ color: '#eab308', borderColor: '#eab308' }}>NOW.TXT</span> <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>NOW.TXT</span>
<div className="about-content"> <div className="about-content">
<p> <p>
<span style={{ color: 'var(--green)' }}>martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat now.txt <span style={{ color: 'var(--green)' }}>martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat now.txt
@ -361,8 +361,8 @@ export default function Home() {
{/* About Me Panel */} {/* About Me Panel */}
<div className="about-section"> <div className="about-section">
<div className="tui-panel" style={panelStyle('var(--green)')}> <div className="tui-panel" style={panelStyle('var(--accent)')}>
<span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>README.MD</span> <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>README.MD</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.md <span className="text-green">martin@dvorakmortonxd</span>:<span className="text-blue">~</span>$ cat about_me.md
@ -459,12 +459,12 @@ 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" style={panelStyle('#0ea5e9')}> <div className="tui-panel" style={panelStyle('var(--white)')}>
<span className="tui-panel-label" style={{ color: '#0ea5e9', borderColor: '#0ea5e9' }}>GITDXD.GIT</span> <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>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: 'var(--white)', 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: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>My Self-hosted Git Instance</p>
<div style={{ marginTop: '16px', marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(14, 165, 233, 0.4)', boxShadow: '0 0 30px rgba(14, 165, 233, 0.15)' }}> <div style={{ marginTop: '16px', marginBottom: '16px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 255, 0.4)', boxShadow: '0 0 30px rgba(180, 255, 125, 0.15)' }}>
<Image <Image
src="/gitdxd.webp" src="/gitdxd.webp"
alt="GitDXD Preview" alt="GitDXD Preview"
@ -473,7 +473,7 @@ export default function Home() {
style={{ width: '100%', height: 'auto', display: 'block' }} style={{ width: '100%', height: 'auto', display: 'block' }}
/> />
</div> </div>
<div style={{ color: '#a3a3a3', marginTop: '12px', lineHeight: '1.6', textAlign: 'center' }}> <div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6', textAlign: 'center' }}>
<p>My very own forgejo git instance, originally started as a private git instance for me and my friends to boycott GitHub but I&#39;ve made it public now so. Join at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev">git.dvorakmortonxd.dev</a></span>.<span className="cursor-blink"></span></p> <p>My very own forgejo git instance, originally started as a private git instance for me and my friends to boycott GitHub but I&#39;ve made it public now so. Join at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev">git.dvorakmortonxd.dev</a></span>.<span className="cursor-blink"></span></p>
</div> </div>
</div> </div>
@ -482,8 +482,8 @@ export default function Home() {
{/* Commits Panel */} {/* Commits Panel */}
<div className="commits-section" style={{ marginTop: '20px' }}> <div className="commits-section" style={{ marginTop: '20px' }}>
<div className="tui-panel" style={panelStyle('var(--green)')}> <div className="tui-panel" style={panelStyle('var(--accent)')}>
<span className="tui-panel-label" style={{ color: 'var(--green)', borderColor: 'var(--green)' }}>CONTRIBUTIONS@GITDXD.GIT</span> <span className="tui-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>CONTRIBUTIONS@GITDXD.GIT</span>
<div className="commits-content" style={{ padding: '24px 12px 16px' }}> <div className="commits-content" style={{ padding: '24px 12px 16px' }}>
<ContributionHeatmap /> <ContributionHeatmap />
</div> </div>
@ -492,11 +492,11 @@ export default function Home() {
{/* REVIVAL INC Panel */} {/* REVIVAL INC Panel */}
<div className="revival-section" style={{ marginTop: '20px' }}> <div className="revival-section" style={{ marginTop: '20px' }}>
<div className="tui-panel" style={panelStyle('#444444')}> <div className="tui-panel" style={panelStyle('var(--white)')}>
<span className="tui-panel-label" style={{ color: '#999999', borderColor: '#444444' }}>REVIVAL.INC</span> <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>REVIVAL.INC</span>
<div style={{ padding: '24px 16px 16px' }}> <div style={{ padding: '24px 16px 16px' }}>
<h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: '#999999', marginBottom: '32px', textAlign: 'center' }}>Revival inc.</h2> <h2 style={{ fontSize: '2.4rem', fontWeight: 'bold', color: 'var(--white)', marginBottom: '32px', textAlign: 'center' }}>Revival inc.</h2>
<div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.15)', width: '80%', margin: '12px auto' }}> <div style={{ marginTop: '12px', marginBottom: '12px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(0, 0, 0, 0.4)', boxShadow: '0 0 30px rgba(255, 255, 255, 0.35)', width: '80%', margin: '12px auto' }}>
<Image <Image
src="/revivalinc.webp" src="/revivalinc.webp"
alt="revival inc thumbnail" alt="revival inc thumbnail"
@ -505,8 +505,8 @@ export default function Home() {
style={{ width: '100%', height: 'auto', display: 'block' }} style={{ width: '100%', height: 'auto', display: 'block' }}
/> />
</div> </div>
<p style={{ fontSize: '1.8rem', color: '#999999', fontWeight: '500', textAlign: 'center' }}>What is it?</p> <p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>What is it?</p>
<div style={{ color: '#a3a3a3', marginTop: '12px', lineHeight: '1.6' }}> <div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6' }}>
<p>It&#39;s a game I made for the game jam &#34;Mini Jame Gam #55&#34;, the theme was Necromancy and the special item was Milk, the game also includes a tutorial so if you wanna try it do it. Check it out at <span className="text-purple-500"><a href="https://martin-dv.itch.io/revival-inc">itch.io</a></span> or play <span className="text-purple-500"><a href="https://dvorakmortonxd.dev/revival-inc">here</a></span>.<span className="cursor-blink"></span></p> <p>It&#39;s a game I made for the game jam &#34;Mini Jame Gam #55&#34;, the theme was Necromancy and the special item was Milk, the game also includes a tutorial so if you wanna try it do it. Check it out at <span className="text-purple-500"><a href="https://martin-dv.itch.io/revival-inc">itch.io</a></span> or play <span className="text-purple-500"><a href="https://dvorakmortonxd.dev/revival-inc">here</a></span>.<span className="cursor-blink"></span></p>
</div> </div>
</div> </div>
@ -515,11 +515,11 @@ 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" style={panelStyle('#f74c00')}> <div className="tui-panel" style={panelStyle('var(--white)')}>
<span className="tui-panel-label" style={{ color: '#f74c00', borderColor: '#f74c00' }}>RUSTYWOLF.RS</span> <span className="tui-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>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: 'var(--white)', 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.2)' }}>
<Image <Image
src="/RustyWolfPreview.webp" src="/RustyWolfPreview.webp"
alt="RustyWolf Browser Preview" alt="RustyWolf Browser Preview"
@ -528,8 +528,8 @@ export default function Home() {
style={{ width: '100%', height: 'auto', display: 'block' }} style={{ width: '100%', height: 'auto', display: 'block' }}
/> />
</div> </div>
<p style={{ fontSize: '1.8rem', color: '#f74c00', fontWeight: '500', textAlign: 'center' }}>What makes it so cool???</p> <p style={{ fontSize: '1.8rem', color: 'var(--white)', fontWeight: '500', textAlign: 'center' }}>What makes it so cool???</p>
<div style={{ color: '#a3a3a3', marginTop: '12px', lineHeight: '1.6' }}> <div style={{ color: 'var(--gray)', marginTop: '12px', lineHeight: '1.6' }}>
<p>A lightweight browser made in Rust with WebKitGTK. It&#39;s the successor to my previous project Venturesome, aiming to provide a fast and minimalist browsing experience. It&#39;s a perfect browser for old machines that struggle with modern browsers. Check it out at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf">GitDXD</a></span>.<span className="cursor-blink"></span></p> <p>A lightweight browser made in Rust with WebKitGTK. It&#39;s the successor to my previous project Venturesome, aiming to provide a fast and minimalist browsing experience. It&#39;s a perfect browser for old machines that struggle with modern browsers. Check it out at <span className="text-purple-500"><a href="https://git.dvorakmortonxd.dev/dvorakmortonxd/RustyWolf">GitDXD</a></span>.<span className="cursor-blink"></span></p>
</div> </div>
</div> </div>
@ -541,9 +541,9 @@ export default function Home() {
<section className="projects"> <section className="projects">
{/* Tech Section */} {/* Tech Section */}
<div className="subsection-wrapper"> <div className="subsection-wrapper">
<div className="subsection-panel" style={panelStyle('var(--accent2)')}> <div className="subsection-panel" style={panelStyle('var(--white)')}>
<span className="subsection-panel-label" style={{ color: 'var(--accent2)', borderColor: 'var(--accent2)' }}>TECH_LIST.JSON</span> <span className="subsection-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>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: 'var(--white)' }}>All my hardware equipment :)</h2>
<div className="project-grid"> <div className="project-grid">
{techProjects.map((project) => ( {techProjects.map((project) => (
<div key={project.title} className="project-card"> <div key={project.title} className="project-card">
@ -561,9 +561,9 @@ export default function Home() {
{/* Coding Section */} {/* Coding Section */}
<div className="subsection-wrapper"> <div className="subsection-wrapper">
<div className="subsection-panel coding-panel" style={panelStyle('var(--purple)')}> <div className="subsection-panel coding-panel" style={panelStyle('var(--accent)')}>
<span className="subsection-panel-label" style={{ color: 'var(--purple)', borderColor: 'var(--purple)' }}>PROJECTS.DOCX</span> <span className="subsection-panel-label" style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}>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: 'var(--accent)' }}>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) => (
<a <a
@ -587,33 +587,31 @@ export default function Home() {
{/* Friends Section */} {/* Friends Section */}
<div className="subsection-wrapper"> <div className="subsection-wrapper">
<div className="subsection-panel friends-panel" style={panelStyle('var(--aqua)', { backgroundColor: 'rgba(50, 205, 50, 0.05)' })}> <div className="subsection-panel friends-panel" style={panelStyle('var(--white)', { backgroundColor: 'rgba(255, 255, 255, 0.02)' })}>
<span className="subsection-panel-label" style={{ color: 'var(--aqua)', borderColor: 'var(--aqua)' }}>FRIENDS.TSX</span> <span className="subsection-panel-label" style={{ color: 'var(--white)', borderColor: 'var(--white)' }}>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: 'var(--white)' }}>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) => (
<ServiceButton <ServiceButton
key={idx} key={idx}
url={friend.realUrl || friend.url} url={friend.realUrl || friend.url}
className="friend" className="friend"
icon={<Image src={friend.img} alt={friend.name} width={68} height={68} className="friend-icon" style={{ borderRadius: '50%', filter: 'brightness(0) invert(75%) sepia(100%) hue-rotate(70deg) saturate(300%)' }} />} icon={<Image src={friend.img} alt={friend.name} width={68} height={68} className="friend-icon" style={{ borderRadius: '50%', filter: 'brightness(0) invert(65%) hue-rotate(70deg) saturate(100%)' }} />}
name={friend.name} name={friend.name}
desc={friend.desc} desc={friend.desc}
/> />
))} ))}
</div> </div>
<div style={{ width: '160px', height: '4px', backgroundColor: 'limegreen', margin: '16px auto 0', borderRadius: '2px', opacity: 0.8 }} /> <div style={{ marginTop: '12px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}>
<h3 style={{ fontSize: '1.5rem', color: 'var(--accent)', fontWeight: '600' }}>Quipee by Bukovina Filip & Vlk Tomáš</h3>
<div style={{ marginTop: '32px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '16px' }}> <div style={{ width: '100%', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(255, 255, 0, 0.3)', boxShadow: '0 0 20px rgba(255, 255, 0, 0.1)' }}>
<h3 style={{ fontSize: '1.5rem', color: 'limegreen', fontWeight: '600' }}>Quipee by Bukovina Filip & Vlk Tomáš</h3>
<div style={{ width: '100%', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(50, 205, 50, 0.3)', boxShadow: '0 0 20px rgba(50, 205, 50, 0.1)' }}>
<Image src="/quipee.webp" alt="Quipee Thumbnail" width={1280} height={720} style={{ width: '100%', height: 'auto', display: 'block' }} /> <Image src="/quipee.webp" alt="Quipee Thumbnail" width={1280} height={720} style={{ width: '100%', height: 'auto', display: 'block' }} />
</div> </div>
<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}> <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center' }}>
<a href="https://quipee.me" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(50, 205, 50, 0.1)', color: 'limegreen', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(50, 205, 50, 0.3)' }}>Web</a> <a href="https://quipee.me" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>Web</a>
<a href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(50, 205, 50, 0.1)', color: 'limegreen', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(50, 205, 50, 0.3)' }}>Android</a> <a href="https://drive.google.com/drive/folders/1oi76JyWs6J84MUmCGV7GvtLUexXI8Jel?usp=share_link" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>Android</a>
<a href="https://testflight.apple.com/join/hP2a1E5x" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(50, 205, 50, 0.1)', color: 'limegreen', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(50, 205, 50, 0.3)' }}>IOS</a> <a href="https://testflight.apple.com/join/hP2a1E5x" target="_blank" rel="noopener noreferrer" style={{ backgroundColor: 'rgba(255, 255, 255, 0.04)', color: 'var(--white)', padding: '6px 16px', borderRadius: '6px', fontSize: '1rem', fontWeight: '500', textDecoration: 'none', border: '1px solid rgba(255, 255, 0, 0.3)' }}>IOS</a>
</div> </div>
</div> </div>
</div> </div>