added a gym section to the website
This commit is contained in:
parent
cbbebbacc5
commit
94c8874b54
2 changed files with 87 additions and 1 deletions
|
|
@ -644,7 +644,7 @@ body {
|
|||
overflow: hidden;
|
||||
border: 1px solid var(--card-border);
|
||||
border-top: none;
|
||||
aspect-ratio: 2 / 1;
|
||||
aspect-ratio: 16 / 9;
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
|
@ -807,12 +807,17 @@ body {
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.gym-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.video-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.project-image {
|
||||
|
|
@ -908,3 +913,60 @@ body {
|
|||
transform: scale(0) rotate(-20deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
GYM PANEL
|
||||
============================================ */
|
||||
.gym-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.gym-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gym-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(168, 153, 132, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.gym-item:hover {
|
||||
background: rgba(250, 189, 47, 0.05);
|
||||
border-color: rgba(250, 189, 47, 0.3);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.gym-icon {
|
||||
opacity: 0.9;
|
||||
transition: opacity 0.3s ease, filter 0.3s ease;
|
||||
}
|
||||
|
||||
.gym-item:hover .gym-icon {
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 6px rgba(250, 189, 47, 0.5));
|
||||
}
|
||||
|
||||
.gym-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--gray);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gym-weight {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
color: var(--fg);
|
||||
font-family: var(--font-custom-mono), monospace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -292,6 +292,30 @@ export default function Home() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gym SBD Panel */}
|
||||
<div className="gym-section">
|
||||
<div className="tui-panel">
|
||||
<span className="tui-panel-label" style={{ color: 'var(--accent2)' }}>├─ GYM_SBD.DB</span>
|
||||
<div className="gym-grid">
|
||||
<div className="gym-item">
|
||||
<Image src="/squat.svg" alt="Squat" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">SQUAT</div>
|
||||
<div className="gym-weight">125kg</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image src="/bench.svg" alt="Bench" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">BENCH</div>
|
||||
<div className="gym-weight">108kg</div>
|
||||
</div>
|
||||
<div className="gym-item">
|
||||
<Image src="/deadlift.svg" alt="Deadlift" width={48} height={48} className="gym-icon" />
|
||||
<div className="gym-label">DEADLIFT</div>
|
||||
<div className="gym-weight">165kg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About Me Panel */}
|
||||
<div className="about-section">
|
||||
<div className="tui-panel">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue