Skip to content

Instantly share code, notes, and snippets.

@mhekel

mhekel/brutalist-portfolio-2.markdown

Created March 31, 2026 07:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mhekel/472688919b6b9835bfb969a62e2ab5c2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mhekel/472688919b6b9835bfb969a62e2ab5c2 to your computer and use it in GitHub Desktop.
Download ZIP
Brutalist-Portfolio-2
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JOHN DOE | CREATIVE ENGINEER</title>
<link rel="stylesheet" href="style.css">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;900&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
<!-- GSAP for Animations (Optional but recommended for pro feel, script below uses vanilla JS fallback concepts or basic CSS) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
</head>
<body>
<!-- Custom Cursor -->
<div class="cursor"></div>
<div class="cursor-follower"></div>
<!-- Navigation -->
<nav>
<div class="nav-logo">JD<span class="accent">.</span></div>
<div class="nav-links">
<a href="#work" class="nav-item">Work</a>
<a href="#research" class="nav-item">Research</a>
<a href="#art" class="nav-item">Art</a>
<a href="#contact" class="nav-item">Contact</a>
</div>
<div class="nav-cta">
<a href="#resume">RESUME ↗</a>
</div>
</nav>
<!-- Hero Section -->
<header class="hero-section" id="top">
<div class="hero-grid">
<div class="hero-main">
<div class="meta-tag">[ EST. 2024 — FULL STACK CREATIVE ]</div>
<h1 class="glitch-text" data-text="BUILDING">BUILDING</h1>
<h1 class="glitch-text" data-text="DIGITAL">DIGITAL</h1>
<h1 class="glitch-text" data-text="REALITY">REALITY<span class="accent">.</span></h1>
<p class="hero-sub">
Merging code, art, and research to create immersive digital experiences.
<br>Based in NYC. Available for global collab.
</p>
<div class="cta-group">
<a href="#projects" class="btn-primary">VIEW PROJECTS</a>
<a href="#contact" class="btn-outline">GET IN TOUCH</a>
</div>
</div>
<div class="hero-sidebar">
<div class="stat-box">
<span class="stat-num">05+</span>
<span class="stat-label">YEARS EXP</span>
</div>
<div class="stat-box">
<span class="stat-num">20+</span>
<span class="stat-label">PROJECTS</span>
</div>
<div class="stat-box active">
<span class="stat-label">CURRENTLY AT</span>
<span class="stat-text">OpenAI (Hypothetical)</span>
</div>
</div>
</div>
</header>
<!-- Latest Updates / Ticker -->
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker-item">LATEST: PUBLISHED PAPER ON NEURAL NETS • NEW ART PIECE "VOID" RELEASED • HACKATHON WINNER 2024 • </div>
<div class="ticker-item">LATEST: PUBLISHED PAPER ON NEURAL NETS • NEW ART PIECE "VOID" RELEASED • HACKATHON WINNER 2024 • </div>
</div>
</div>
<!-- Tech Stack Marquee -->
<section class="tech-stack">
<div class="marquee-container">
<div class="marquee-content">
<span>PYTHON</span><span>JAVASCRIPT</span><span>REACT</span><span>THREE.JS</span><span>PYTORCH</span><span>AWS</span><span>DOCKER</span><span>FIGMA</span><span>BLENDER</span>
<span>PYTHON</span><span>JAVASCRIPT</span><span>REACT</span><span>THREE.JS</span><span>PYTORCH</span><span>AWS</span><span>DOCKER</span><span>FIGMA</span><span>BLENDER</span>
</div>
</div>
</section>
<!-- Work Experience -->
<section class="section" id="work">
<div class="section-header">
<h2>WORK EXPERIENCE</h2>
<span class="section-num">01</span>
</div>
<div class="experience-grid">
<!-- Job 1 -->
<div class="exp-item">
<div class="exp-date">2023 — PRESENT</div>
<div class="exp-role">SENIOR ENGINEER</div>
<div class="exp-company">TECH GIANT INC.</div>
<p class="exp-desc">Leading frontend architecture and design systems. Implemented AI-driven workflows reducing dev time by 40%.</p>
<div class="exp-tags"><span>React</span><span>Node</span><span>AI</span></div>
</div>
<!-- Job 2 -->
<div class="exp-item">
<div class="exp-date">2021 — 2023</div>
<div class="exp-role">FULL STACK DEV</div>
<div class="exp-company">STARTUP LABS</div>
<p class="exp-desc">Built MVP from scratch. Scaled to 1M+ users. Managed AWS infrastructure and CI/CD pipelines.</p>
<div class="exp-tags"><span>Python</span><span>AWS</span><span>Vue</span></div>
</div>
<!-- Job 3 -->
<div class="exp-item">
<div class="exp-date">2019 — 2021</div>
<div class="exp-role">JUNIOR DEV</div>
<div class="exp-company">CREATIVE AGENCY</div>
<p class="exp-desc">Developed interactive websites for Fortune 500 clients using WebGL and GSAP.</p>
<div class="exp-tags"><span>WebGL</span><span>GLSL</span><span>JS</span></div>
</div>
</div>
</section>
<!-- Projects Section -->
<section class="section" id="projects">
<div class="section-header">
<h2>SELECTED PROJECTS</h2>
<span class="section-num">02</span>
</div>
<div class="project-list">
<!-- Project 1 -->
<a href="#" class="project-card">
<div class="project-image">
<img src="https://images.unsplash.com/photo-1481487484168-9b9307a5296d?auto=format&fit=crop&q=80&w=800" alt="Project 1">
</div>
<div class="project-info">
<h3>AI ARCHITECT</h3>
<p>Generative Design Tool</p>
<span class="arrow">↗</span>
</div>
</a>
<!-- Project 2 -->
<a href="#" class="project-card">
<div class="project-image">
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" alt="Project 2">
</div>
<div class="project-info">
<h3>NEURAL SYMPHONY</h3>
<p>Audio Visualization Platform</p>
<span class="arrow">↗</span>
</div>
</a>
<!-- Project 3 -->
<a href="#" class="project-card">
<div class="project-image">
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800" alt="Project 3">
</div>
<div class="project-info">
<h3>CYBER DASH</h3>
<p>Web3 Dashboard Interface</p>
<span class="arrow">↗</span>
</div>
</a>
</div>
</section>
<!-- Research & Publications -->
<section class="section" id="research">
<div class="section-header">
<h2>RESEARCH & PUBS</h2>
<span class="section-num">03</span>
</div>
<div class="list-layout">
<div class="list-item">
<div class="list-date">2024</div>
<div class="list-title">Optimizing LLMs for Edge Devices</div>
<div class="list-meta">Published in IEEE / ML Conference</div>
<div class="list-link">READ PAPER ↗</div>
</div>
<div class="list-item">
<div class="list-date">2023</div>
<div class="list-title">The Future of Generative UI</div>
<div class="list-meta">Medium / UX Collective</div>
<div class="list-link">READ ARTICLE ↗</div>
</div>
<div class="list-item">
<div class="list-date">2022</div>
<div class="list-title">A Study on Human-Computer Symbiosis</div>
<div class="list-meta">University Thesis</div>
<div class="list-link">DOWNLOAD PDF ↗</div>
</div>
</div>
</section>
<!-- Art Work Gallery (Horizontal Scroll) -->
<section class="section" id="art">
<div class="section-header">
<h2>ART WORK</h2>
<span class="section-num">04</span>
</div>
<div class="gallery-scroll">
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=600" alt="Art 1">
<span>ABSTRACT VOID 01</span>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?auto=format&fit=crop&q=80&w=600" alt="Art 2">
<span>GLITCH SERIES II</span>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?auto=format&fit=crop&q=80&w=600" alt="Art 3">
<span>NEON DREAMS</span>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=600" alt="Art 4">
<span>FLUIDITY</span>
</div>
</div>
</section>
<!-- Education, Certs & Achievements (Grid) -->
<section class="section" id="education">
<div class="grid-3-col">
<!-- Education -->
<div class="grid-box">
<h3>EDUCATION</h3>
<ul class="plain-list">
<li>
<strong>M.S. Computer Science</strong><br>
MIT, 2021
</li>
<li>
<strong>B.F.A. Digital Arts</strong><br>
Parsons, 2019
</li>
</ul>
</div>
<!-- Certifications -->
<div class="grid-box">
<h3>CERTIFICATIONS</h3>
<ul class="plain-list">
<li>AWS Solutions Architect</li>
<li>Google ML Engineer</li>
<li>Scrum Master Certified</li>
</ul>
</div>
<!-- Achievements -->
<div class="grid-box">
<h3>ACHIEVEMENTS</h3>
<ul class="plain-list">
<li>1st Place - Global AI Hackathon</li>
<li>Awwwards - Site of the Day</li>
<li>Open Source Contributor of the Month</li>
</ul>
</div>
</div>
</section>
<!-- Blogs / Write-ups -->
<section class="section" id="blog">
<div class="section-header">
<h2>THOUGHTS</h2>
<span class="section-num">05</span>
</div>
<div class="blog-grid">
<article class="blog-card">
<span class="blog-tag">TECH</span>
<h4>Why Brutalism works in 2024</h4>
<a href="#">READ ↗</a>
</article>
<article class="blog-card">
<span class="blog-tag">DESIGN</span>
<h4>Designing for the Void</h4>
<a href="#">READ ↗</a>
</article>
<article class="blog-card">
<span class="blog-tag">AI</span>
<h4>Ethics in Generative Models</h4>
<a href="#">READ ↗</a>
</article>
</div>
</section>
<!-- Footer / Contact -->
<footer id="contact">
<div class="footer-content">
<div class="footer-main">
<h2>LET'S WORK<br>TOGETHER<span class="accent">.</span></h2>
<a href="mailto:hello@johndoe.com" class="email-link">hello@johndoe.com</a>
</div>
<div class="footer-links">
<div class="socials">
<a href="#">LINKEDIN</a>
<a href="#">GITHUB</a>
<a href="#">TWITTER</a>
<a href="#">INSTAGRAM</a>
</div>
<div class="footer-meta">
<span>© 2024 JOHN DOE</span>
<span>DESIGNED IN THE MATRIX</span>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener("DOMContentLoaded", () => {
// --- Custom Cursor Logic ---
const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");
const links = document.querySelectorAll("a, button, .project-card, .list-item, .blog-card, .nav-item");
document.addEventListener("mousemove", (e) => {
// Move cursor
gsap.to(cursor, {
x: e.clientX,
y: e.clientY,
duration: 0.1
});
// Move follower with lag
gsap.to(follower, {
x: e.clientX,
y: e.clientY,
duration: 0.3
});
});
// Cursor Interactions
links.forEach(link => {
link.addEventListener("mouseenter", () => {
cursor.style.transform = "translate(-50%, -50%) scale(1.5)";
follower.style.transform = "translate(-50%, -50%) scale(3)";
follower.style.background = "rgba(0,0,0,0.1)";
follower.style.mixBlendMode = "difference";
});
link.addEventListener("mouseleave", () => {
cursor.style.transform = "translate(-50%, -50%) scale(1)";
follower.style.transform = "translate(-50%, -50%) scale(1)";
follower.style.background = "transparent";
follower.style.mixBlendMode = "normal";
});
});
// --- Scroll Animations (GSAP) ---
gsap.registerPlugin(ScrollTrigger);
// Hero Animation
gsap.from(".hero-main > *", {
y: 100,
opacity: 0,
duration: 1,
stagger: 0.2,
ease: "power4.out"
});
// Section Headers Reveal
gsap.utils.toArray(".section-header h2").forEach(header => {
gsap.from(header, {
scrollTrigger: {
trigger: header,
start: "top 80%",
},
y: 50,
opacity: 0,
duration: 0.8,
ease: "power3.out"
});
});
// Project List Reveal
gsap.utils.toArray(".project-card").forEach(card => {
gsap.from(card, {
scrollTrigger: {
trigger: card,
start: "top 85%",
},
y: 100,
opacity: 0,
duration: 0.8,
ease: "power3.out"
});
});
// Experience Item Reveal
gsap.utils.toArray(".exp-item").forEach(item => {
gsap.from(item, {
scrollTrigger: {
trigger: item,
start: "top 90%",
},
x: -50,
opacity: 0,
duration: 0.6,
ease: "power2.out"
});
});
// Horizontal Scroll Logic for Art Gallery
const artSection = document.querySelector("#art");
const gallery = document.querySelector(".gallery-scroll");
// Simple horizontal scroll via wheel if over gallery
gallery.addEventListener("wheel", (evt) => {
evt.preventDefault();
gallery.scrollLeft += evt.deltaY;
});
// --- Glitch Text Effect on Hover for Hero ---
const glitchTexts = document.querySelectorAll(".glitch-text");
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
glitchTexts.forEach(text => {
text.addEventListener("mouseover", event => {
let iteration = 0;
const originalText = event.target.dataset.text;
const interval = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index) => {
if(index < iteration) {
return originalText[index];
}
return letters[Math.floor(Math.random() * 26)];
})
.join("");
if(iteration >= originalText.length) {
clearInterval(interval);
}
iteration += 1 / 3;
}, 30);
});
});
});
Raw
style.css
:root {
--bg-color: #ffffff;
--text-color: #000000;
--accent-color: #000000; /* Can change to a neon color for flair like #33ff00 */
--border-color: #000000;
--grid-line: 1px solid var(--border-color);
--font-main: 'Space Grotesk', sans-serif; /* Technical/Brutalist feel */
--font-body: 'Inter', sans-serif;
--nav-height: 80px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: none; /* Hide default cursor for custom one */
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-body);
overflow-x: hidden;
}
/* Custom Cursor */
.cursor {
position: fixed;
width: 10px;
height: 10px;
background: var(--text-color);
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}
.cursor-follower {
position: fixed;
width: 40px;
height: 40px;
border: 1px solid var(--text-color);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: left 0.1s, top 0.1s, width 0.3s, height 0.3s, background 0.3s;
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
height: var(--nav-height);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--grid-line);
background: var(--bg-color);
z-index: 1000;
padding: 0;
}
.nav-logo {
font-family: var(--font-main);
font-weight: 900;
font-size: 1.5rem;
padding: 0 2rem;
border-right: var(--grid-line);
height: 100%;
display: flex;
align-items: center;
}
.nav-links {
display: flex;
height: 100%;
}
.nav-item {
display: flex;
align-items: center;
padding: 0 2rem;
text-decoration: none;
color: var(--text-color);
font-family: var(--font-main);
font-weight: 500;
border-right: var(--grid-line);
transition: background 0.3s, color 0.3s;
}
.nav-item:hover {
background: var(--text-color);
color: var(--bg-color);
}
.nav-cta {
margin-left: auto;
padding: 0 2rem;
height: 100%;
display: flex;
align-items: center;
background: var(--text-color);
}
.nav-cta a {
color: var(--bg-color);
text-decoration: none;
font-weight: 700;
}
/* Hero Section */
.hero-section {
margin-top: var(--nav-height);
min-height: 90vh;
border-bottom: var(--grid-line);
}
.hero-grid {
display: grid;
grid-template-columns: 3fr 1fr;
height: 100%;
min-height: 90vh;
}
.hero-main {
padding: 4rem;
display: flex;
flex-direction: column;
justify-content: center;
border-right: var(--grid-line);
}
.meta-tag {
font-family: var(--font-main);
font-size: 0.9rem;
margin-bottom: 2rem;
letter-spacing: 1px;
}
h1 {
font-family: var(--font-main);
font-size: 7vw;
line-height: 0.9;
font-weight: 900;
text-transform: uppercase;
margin: 0;
}
.hero-sub {
font-size: 1.2rem;
max-width: 600px;
margin: 3rem 0;
line-height: 1.5;
}
.cta-group {
display: flex;
gap: 1rem;
}
.btn-primary, .btn-outline {
padding: 1rem 2rem;
font-family: var(--font-main);
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
border: 1px solid var(--text-color);
transition: all 0.3s;
}
.btn-primary {
background: var(--text-color);
color: var(--bg-color);
}
.btn-primary:hover {
background: transparent;
color: var(--text-color);
}
.btn-outline {
background: transparent;
color: var(--text-color);
}
.btn-outline:hover {
background: var(--text-color);
color: var(--bg-color);
}
.hero-sidebar {
display: flex;
flex-direction: column;
}
.stat-box {
flex: 1;
border-bottom: var(--grid-line);
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
transition: background 0.3s;
}
.stat-box:last-child {
border-bottom: none;
}
.stat-box.active {
background: var(--text-color);
color: var(--bg-color);
}
.stat-num {
font-family: var(--font-main);
font-size: 4rem;
font-weight: 900;
line-height: 1;
}
.stat-label {
font-size: 0.8rem;
text-transform: uppercase;
margin-top: 0.5rem;
}
/* Ticker */
.ticker-wrap {
width: 100%;
overflow: hidden;
background-color: var(--text-color);
color: var(--bg-color);
border-bottom: var(--grid-line);
padding: 0.8rem 0;
}
.ticker {
display: flex;
white-space: nowrap;
animation: ticker 20s linear infinite;
}
.ticker-item {
font-family: var(--font-main);
font-size: 1.2rem;
font-weight: 700;
padding-right: 2rem;
}
@keyframes ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* Marquee Tech Stack */
.tech-stack {
border-bottom: var(--grid-line);
padding: 2rem 0;
overflow: hidden;
}
.marquee-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee-content {
display: inline-block;
animation: marquee 15s linear infinite;
}
.marquee-content span {
font-family: var(--font-main);
font-size: 4rem;
font-weight: 900;
color: transparent;
-webkit-text-stroke: 1px var(--text-color);
margin-right: 3rem;
transition: color 0.3s;
}
.marquee-content span:hover {
color: var(--text-color);
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Common Section Styles */
.section {
border-bottom: var(--grid-line);
display: grid;
grid-template-columns: 1fr 3fr;
}
.section-header {
padding: 4rem 2rem;
border-right: var(--grid-line);
position: relative;
}
.section-header h2 {
font-family: var(--font-main);
font-size: 2.5rem;
text-transform: uppercase;
font-weight: 700;
position: sticky;
top: 100px;
}
.section-num {
position: absolute;
top: 2rem;
right: 2rem;
font-family: var(--font-main);
font-size: 1rem;
font-weight: 900;
}
/* Experience Grid */
.experience-grid {
display: grid;
grid-template-columns: 1fr;
}
.exp-item {
padding: 4rem;
border-bottom: var(--grid-line);
transition: background 0.3s;
}
.exp-item:last-child {
border-bottom: none;
}
.exp-item:hover {
background: #f5f5f5;
}
.exp-date {
font-family: var(--font-main);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.exp-role {
font-size: 2.5rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 0.5rem;
font-family: var(--font-main);
}
.exp-company {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.exp-tags span {
display: inline-block;
padding: 0.2rem 0.8rem;
border: 1px solid var(--text-color);
margin-right: 0.5rem;
font-size: 0.8rem;
text-transform: uppercase;
}
/* Projects List */
.project-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.project-card {
text-decoration: none;
color: var(--text-color);
border-right: var(--grid-line);
position: relative;
overflow: hidden;
height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.project-image {
height: 100%;
width: 100%;
overflow: hidden;
}
.project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
filter: grayscale(100%);
}
.project-card:hover .project-image img {
transform: scale(1.1);
filter: grayscale(0%);
}
.project-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1.5rem;
background: var(--bg-color);
border-top: var(--grid-line);
transform: translateY(100%);
transition: transform 0.3s;
}
.project-card:hover .project-info {
transform: translateY(0);
}
.project-info h3 {
font-family: var(--font-main);
font-size: 1.2rem;
margin-bottom: 0.3rem;
}
/* Research List */
.list-layout {
display: flex;
flex-direction: column;
}
.list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 4rem;
border-bottom: var(--grid-line);
transition: all 0.3s;
}
.list-item:last-child {
border-bottom: none;
}
.list-item:hover {
background: var(--text-color);
color: var(--bg-color);
}
.list-item:hover .list-link {
border-color: var(--bg-color);
}
.list-date {
font-family: var(--font-main);
font-weight: 700;
width: 100px;
}
.list-title {
flex: 1;
font-size: 1.5rem;
font-weight: 600;
}
.list-meta {
width: 200px;
font-size: 0.9rem;
}
.list-link {
padding: 0.5rem 1.5rem;
border: 1px solid var(--text-color);
text-transform: uppercase;
font-size: 0.8rem;
}
/* Art Gallery Scroll */
.gallery-scroll {
display: flex;
overflow-x: auto;
padding: 2rem;
gap: 2rem;
align-items: center;
}
.gallery-item {
min-width: 300px;
display: flex;
flex-direction: column;
}
.gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
margin-bottom: 1rem;
border: 1px solid var(--text-color);
}
.gallery-item span {
font-family: var(--font-main);
font-weight: 700;
}
/* Grid 3 Col (Edu, Certs) */
.grid-3-col {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: var(--grid-line);
}
.grid-box {
padding: 4rem;
border-right: var(--grid-line);
}
.grid-box:last-child {
border-right: none;
}
.grid-box h3 {
font-family: var(--font-main);
font-size: 1.5rem;
margin-bottom: 2rem;
text-decoration: underline;
}
.plain-list {
list-style: none;
}
.plain-list li {
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.5;
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.blog-card {
padding: 3rem;
border-right: var(--grid-line);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
transition: background 0.3s;
}
.blog-card:hover {
background: #f0f0f0;
}
.blog-tag {
border: 1px solid var(--text-color);
display: inline-block;
padding: 0.2rem 0.8rem;
width: fit-content;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.blog-card h4 {
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
}
.blog-card a {
color: var(--text-color);
text-decoration: none;
font-weight: 700;
margin-top: auto;
}
/* Footer */
footer {
padding: 4rem;
border-bottom: var(--grid-line);
}
.footer-content {
display: flex;
flex-direction: column;
}
.footer-main h2 {
font-family: var(--font-main);
font-size: 8vw;
line-height: 0.9;
margin-bottom: 2rem;
}
.email-link {
font-size: 2rem;
color: var(--text-color);
text-decoration: none;
border-bottom: 2px solid var(--text-color);
}
.footer-links {
display: flex;
justify-content: space-between;
margin-top: 4rem;
padding-top: 2rem;
border-top: var(--grid-line);
}
.socials a {
color: var(--text-color);
text-decoration: none;
margin-right: 2rem;
font-weight: 700;
font-size: 1.2rem;
}
.footer-meta {
display: flex;
gap: 2rem;
font-size: 0.9rem;
}
/* Responsive */
@media (max-width: 1024px) {
.section { grid-template-columns: 1fr; }
.section-header { border-right: none; border-bottom: var(--grid-line); padding: 2rem; }
.section-header h2 { position: static; }
.hero-grid { grid-template-columns: 1fr; }
.hero-sidebar { flex-direction: row; border-top: var(--grid-line); }
.stat-box { border-bottom: none; border-right: var(--grid-line); }
.project-list { grid-template-columns: 1fr; }
.grid-3-col { grid-template-columns: 1fr; }
.grid-box { border-right: none; border-bottom: var(--grid-line); }
.blog-grid { grid-template-columns: 1fr; }
.blog-card { border-right: none; border-bottom: var(--grid-line); height: auto; }
.nav-links { display: none; } /* Hide on mobile for simple implementation */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment