| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ilmcode | the journal</title> |
| |
| |
| <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;500;600&family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet"> |
|
|
| <style> |
| |
| :root { |
| --bg-body: #F5F5F7; |
| --bg-card: #FFFFFF; |
| --text-main: #111111; |
| --text-muted: #666666; |
| --accent: #000000; |
| --radius-large: 32px; |
| --radius-pill: 50px; |
| --font-main: 'Inter', sans-serif; |
| --font-serif: 'Playfair Display', serif; |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: var(--font-main); |
| background-color: var(--bg-body); |
| color: var(--text-main); |
| line-height: 1.6; |
| -webkit-font-smoothing: antialiased; |
| } |
| |
| a { text-decoration: none; color: inherit; } |
| ul { list-style: none; } |
| img { max-width: 100%; display: block; } |
| |
| |
| .container { |
| max-width: 1400px; |
| margin: 0 auto; |
| padding: 0 40px; |
| } |
| |
| .container-narrow { |
| max-width: 800px; |
| margin: 0 auto; |
| padding: 0 40px; |
| } |
| |
| .hidden { display: none !important; } |
| .fade-in { animation: fadeIn 0.5s ease forwards; } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .btn-pill { |
| background-color: var(--accent); |
| color: white; |
| padding: 12px 32px; |
| border-radius: var(--radius-pill); |
| font-weight: 500; |
| font-size: 0.95rem; |
| transition: transform 0.2s, opacity 0.2s; |
| display: inline-block; |
| } |
| |
| .btn-pill:hover { transform: scale(1.02); opacity: 0.9; } |
| .section-spacer { padding: 100px 0; } |
| |
| |
| .hero { |
| text-align: center; |
| padding: 120px 0 80px; |
| background-color: white; |
| border-bottom-left-radius: var(--radius-large); |
| border-bottom-right-radius: var(--radius-large); |
| } |
| |
| .hero-label { |
| font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; |
| color: var(--text-muted); margin-bottom: 24px; display: block; |
| } |
| |
| .hero h1 { |
| font-size: 4.5rem; font-weight: 600; letter-spacing: -0.04em; |
| line-height: 1.1; margin-bottom: 24px; text-transform: lowercase; |
| } |
| |
| .serif-highlight { font-family: var(--font-serif); font-weight: 400; } |
| |
| .hero p { |
| font-size: 1.25rem; color: var(--text-muted); max-width: 600px; margin: 0 auto; |
| } |
| |
| |
| .filters { |
| display: flex; justify-content: center; gap: 16px; margin-top: 60px; flex-wrap: wrap; |
| } |
| |
| .filter-btn { |
| background: transparent; border: 1px solid #e0e0e0; padding: 10px 24px; |
| border-radius: var(--radius-pill); cursor: pointer; font-family: var(--font-main); |
| font-size: 0.9rem; transition: all 0.2s; |
| } |
| |
| .filter-btn.active, .filter-btn:hover { |
| background: var(--text-main); color: white; border-color: var(--text-main); |
| } |
| |
| |
| .blog-grid { |
| display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); |
| gap: 32px; margin-top: 60px; |
| } |
| |
| .blog-card { |
| background: var(--bg-card); border-radius: var(--radius-large); padding: 24px; |
| transition: transform 0.3s ease, box-shadow 0.3s ease; |
| display: flex; flex-direction: column; height: 100%; cursor: pointer; |
| } |
| |
| .blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); } |
| |
| .card-image-wrapper { |
| width: 100%; height: 240px; border-radius: 20px; |
| margin-bottom: 24px; overflow: hidden; position: relative; |
| } |
| |
| .card-image-wrapper img { |
| width: 100%; height: 100%; object-fit: cover; |
| transition: transform 0.5s ease; |
| } |
| |
| .blog-card:hover .card-image-wrapper img { transform: scale(1.05); } |
| |
| .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } |
| |
| .tag { |
| font-size: 0.8rem; font-weight: 600; background: #F0F0F0; |
| padding: 6px 14px; border-radius: 6px; text-transform: lowercase; |
| } |
| |
| .read-time { font-size: 0.8rem; color: #888; } |
| |
| .blog-card h3 { |
| font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; |
| margin-bottom: 12px; line-height: 1.2; text-transform: lowercase; |
| } |
| |
| .blog-card p { |
| color: var(--text-muted); font-size: 1rem; margin-bottom: 24px; flex-grow: 1; |
| } |
| |
| .card-footer { |
| border-top: 1px solid #f0f0f0; padding-top: 20px; |
| display: flex; align-items: center; gap: 12px; |
| } |
| |
| .author-avatar { |
| width: 32px; height: 32px; background: #ddd; border-radius: 50%; |
| } |
| |
| .author-name { font-size: 0.9rem; font-weight: 500; } |
| |
| |
| #post-view { padding-top: 60px; } |
| |
| .back-btn { |
| background: none; border: none; cursor: pointer; |
| font-size: 1rem; font-weight: 500; color: var(--text-muted); |
| display: flex; align-items: center; gap: 8px; margin-bottom: 40px; |
| font-family: var(--font-main); |
| } |
| |
| .back-btn:hover { color: var(--text-main); } |
| |
| .post-header { text-align: center; margin-bottom: 60px; } |
| |
| .post-tag { |
| display: inline-block; background: #111; color: white; |
| padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; |
| margin-bottom: 24px; text-transform: lowercase; |
| } |
| |
| .post-title { |
| font-size: 3.5rem; line-height: 1.1; font-weight: 600; |
| letter-spacing: -0.03em; text-transform: lowercase; margin-bottom: 30px; |
| } |
| |
| .post-meta-row { |
| display: flex; justify-content: center; align-items: center; gap: 30px; |
| color: var(--text-muted); font-size: 0.95rem; |
| } |
| |
| .post-hero-image { |
| width: 100%; height: 500px; object-fit: cover; border-radius: var(--radius-large); |
| margin-bottom: 60px; |
| } |
| |
| .post-content p { |
| font-size: 1.2rem; line-height: 1.8; color: #333; margin-bottom: 30px; |
| } |
| |
| .post-content h2 { |
| font-size: 2rem; margin-top: 50px; margin-bottom: 20px; |
| text-transform: lowercase; letter-spacing: -0.02em; |
| } |
| |
| |
| .newsletter { |
| background: var(--text-main); color: white; border-radius: var(--radius-large); |
| padding: 80px 40px; text-align: center; margin: 100px 0; |
| } |
| |
| .newsletter h2 { font-size: 2.5rem; margin-bottom: 16px; text-transform: lowercase; } |
| .newsletter p { color: #ccc; margin-bottom: 32px; } |
| |
| .input-group { max-width: 400px; margin: 0 auto; position: relative; } |
| .input-group input { width: 100%; padding: 16px 24px; border-radius: var(--radius-pill); border: none; outline: none; font-family: var(--font-main); } |
| .input-group button { position: absolute; right: 4px; top: 4px; background: var(--text-main); color: white; border: none; padding: 12px 24px; border-radius: var(--radius-pill); cursor: pointer; font-weight: 600; } |
| |
| |
| @media (max-width: 768px) { |
| .hero h1, .post-title { font-size: 2.5rem; } |
| .blog-grid { grid-template-columns: 1fr; } |
| .post-hero-image { height: 300px; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div id="listing-view"> |
| <section class="hero"> |
| <div class="container"> |
| <span class="hero-label">The Journal</span> |
| <h1> |
| insights on <br /> |
| <span class="serif-highlight">tech</span>, career & <span class="serif-highlight">wellbeing</span>. |
| </h1> |
| <p>exploring the intersection of technical excellence and mental resilience. stories for the next generation.</p> |
|
|
| <div class="filters"> |
| <button class="filter-btn active">all stories</button> |
| <button class="filter-btn">technical</button> |
| <button class="filter-btn">mental wealth</button> |
| <button class="filter-btn">student spotlight</button> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="container section-spacer"> |
| <div class="blog-grid"> |
| |
| |
| <article class="blog-card" onclick="openPost('why burnout is not a badge of honor.', 'mental wealth', 'sarah j.')"> |
| <div class="card-image-wrapper"> |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" alt="Blog Visual"> |
| </div> |
| <div class="card-meta"> |
| <span class="tag">mental wealth</span> |
| <span class="read-time">5 min read</span> |
| </div> |
| <h3>why burnout is not a badge of honor.</h3> |
| <p>In the high-speed world of coding, rest is often seen as weakness. Here is why resting makes you a better developer.</p> |
| <div class="card-footer"> |
| <div class="author-avatar"></div><span class="author-name">sarah j.</span> |
| </div> |
| </article> |
|
|
| <article class="blog-card" onclick="openPost('mastering react: beyond the syntax.', 'technical', 'amina k.')"> |
| <div class="card-image-wrapper"> |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" alt="Blog Visual"> |
| </div> |
| <div class="card-meta"> |
| <span class="tag">technical</span> |
| <span class="read-time">8 min read</span> |
| </div> |
| <h3>mastering react: beyond the syntax.</h3> |
| <p>Understanding the component lifecycle is crucial, but understanding state philosophy is what gets you hired.</p> |
| <div class="card-footer"> |
| <div class="author-avatar"></div><span class="author-name">amina k.</span> |
| </div> |
| </article> |
|
|
| <article class="blog-card" onclick="openPost('the power of mentorship in 2025.', 'community', 'team ilmcode')"> |
| <div class="card-image-wrapper"> |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" alt="Blog Visual"> |
| </div> |
| <div class="card-meta"> |
| <span class="tag">community</span> |
| <span class="read-time">4 min read</span> |
| </div> |
| <h3>the power of mentorship in 2025.</h3> |
| <p>How our community sessions are reshaping the way juniors approach their first job interviews.</p> |
| <div class="card-footer"> |
| <div class="author-avatar"></div><span class="author-name">team ilmcode</span> |
| </div> |
| </article> |
|
|
| <article class="blog-card" onclick="openPost('ai agents: friend or foe?', 'tech update', 'technet team')"> |
| <div class="card-image-wrapper"> |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" alt="Blog Visual"> |
| </div> |
| <div class="card-meta"> |
| <span class="tag">technical</span> |
| <span class="read-time">6 min read</span> |
| </div> |
| <h3>ai agents: friend or foe?</h3> |
| <p>Navigating the new landscape of automated coding and how to position yourself as an AI-augmented developer.</p> |
| <div class="card-footer"> |
| <div class="author-avatar"></div><span class="author-name">technet team</span> |
| </div> |
| </article> |
|
|
| <article class="blog-card" onclick="openPost('building a portfolio that speaks.', 'career', 'design lead')"> |
| <div class="card-image-wrapper"> |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" alt="Blog Visual"> |
| </div> |
| <div class="card-meta"> |
| <span class="tag">career</span> |
| <span class="read-time">3 min read</span> |
| </div> |
| <h3>building a portfolio that speaks.</h3> |
| <p>Recruiters spend less than 30 seconds on your site. Make those seconds count with these ux tips.</p> |
| <div class="card-footer"> |
| <div class="author-avatar"></div><span class="author-name">design lead</span> |
| </div> |
| </article> |
|
|
| <article class="blog-card" onclick="openPost('imposter syndrome & the junior dev.', 'mental wealth', 'sarah j.')"> |
| <div class="card-image-wrapper"> |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" alt="Blog Visual"> |
| </div> |
| <div class="card-meta"> |
| <span class="tag">mental wealth</span> |
| <span class="read-time">5 min read</span> |
| </div> |
| <h3>imposter syndrome & the junior dev.</h3> |
| <p>You are not alone. Practical steps to ground yourself when you feel like you don't belong in the room.</p> |
| <div class="card-footer"> |
| <div class="author-avatar"></div><span class="author-name">sarah j.</span> |
| </div> |
| </article> |
|
|
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="post-view" class="hidden fade-in"> |
| <div class="container"> |
| <button class="back-btn" onclick="goBack()"> |
| ← back to journal |
| </button> |
| </div> |
|
|
| <article class="container-narrow"> |
| <div class="post-header"> |
| <span class="post-tag" id="dynamic-tag">category</span> |
| <h1 class="post-title" id="dynamic-title">Blog Title Here</h1> |
| <div class="post-meta-row"> |
| <span id="dynamic-author">author name</span> |
| <span>•</span> |
| <span>October 24, 2025</span> |
| <span>•</span> |
| <span>5 min read</span> |
| </div> |
| </div> |
|
|
| |
| <img src="https://i.ibb.co/zVJ92SNT/1726902614112.jpg" class="post-hero-image" alt="Article Cover"> |
|
|
| <div class="post-content"> |
| <p> |
| <span style="font-size: 1.5rem; font-weight: 500;">W</span>e often believe that to succeed in technology, we must sacrifice our peace of mind. The narrative of the "10x developer" usually involves sleepless nights, endless caffeine, and a disregard for personal boundaries. At ilmcode, we challenge this narrative. |
| </p> |
| <p> |
| True technical excellence doesn't come from burnout; it comes from clarity. When the mind is cluttered with anxiety and exhaustion, code quality suffers. The architecture becomes brittle, bugs multiply, and the joy of creation fades away. |
| </p> |
| |
| <h2>the human element in code</h2> |
| <p> |
| Every line of code is a decision made by a human being. If that human is stressed, the decision-making process is compromised. This is why we integrate "Care" into our curriculum. It is not just about learning syntax; it is about learning how to learn without breaking yourself. |
| </p> |
| <p> |
| We have seen students transform not just their GitHub repositories, but their lives. By prioritizing mental wealth, they become more resilient problem solvers. They learn to ask for help. They learn that a break is not a failure—it is a strategy. |
| </p> |
|
|
| <h2>practical steps forward</h2> |
| <p> |
| Start small. Define your working hours and stick to them. Find a community that uplifts you rather than competes with you. And remember, your value is not defined by your commit history, but by the sustainable impact you create over time. |
| </p> |
| </div> |
| </article> |
| </div> |
|
|
| |
| <div class="container"> |
| <section class="newsletter"> |
| <h2>never miss an update.</h2> |
| <p>join 2,000+ members getting career and wellbeing tips weekly.</p> |
| <div class="input-group"> |
| <input type="email" placeholder="hello@ilmcode.com"> |
| <button>subscribe</button> |
| </div> |
| </section> |
| </div> |
|
|
| |
| <script> |
| |
| const listingView = document.getElementById('listing-view'); |
| const postView = document.getElementById('post-view'); |
| |
| |
| const postTitle = document.getElementById('dynamic-title'); |
| const postTag = document.getElementById('dynamic-tag'); |
| const postAuthor = document.getElementById('dynamic-author'); |
| |
| function openPost(title, tag, author) { |
| |
| window.scrollTo(0, 0); |
| |
| |
| postTitle.innerText = title; |
| postTag.innerText = tag; |
| postAuthor.innerText = author; |
| |
| |
| listingView.classList.add('hidden'); |
| postView.classList.remove('hidden'); |
| } |
| |
| function goBack() { |
| |
| window.scrollTo(0, 0); |
| |
| |
| postView.classList.add('hidden'); |
| listingView.classList.remove('hidden'); |
| } |
| </script> |
|
|
| </body> |
| </html> |
