# Cyber Banana > A cyberpunk-themed developer portfolio starter with 11ty and Tailwind CSS. Fast, dark, and beautifully designed. --- ## Pages ### About URL: https://cyber-banana-starter.freshjuice.dev/about/ The Legend of Cyber Banana In the neon-lit depths of Neo Tokyo's underground hacker scene, circa 2049, there existed a legend whispered only in encrypted channels and dark web forums. They called him... Cyber Banana. Origin Story It started in a forgotten server room, where a ordinary banana was left next to a overheating GPU mining rig. The combination of radiation, energy drinks spilled on the motherboard, and 47 browser tabs of Stack Overflow created something unprecedented. The banana gained consciousness. And more importantly - it learned to code. $ whoami > cyber_banana_2049 $ sudo rm -rf /mediocrity > Permission granted. Mediocrity deleted.The Path to Shifu For years, Cyber Banana trained in the ancient arts: The Way of the Clean Code - Writing functions so pure they made senior devs weep The Discipline of No Framework - Achieving enlightenment through vanilla JavaScript The CSS Grid Meditation - Centering divs with a single breath The Terminal Mastery - Speaking to machines in their native tongue Achievements Unlocked Year Achievement 2050 Fixed a bug by just staring at it 2051 Made a website load in -3ms (it loads before you click) 2052 Wrote documentation. Voluntarily. 2053 Achieved inbox zero (and kept it) 2054 Understood regex on the first try The Philosophy "Any fool can write code that a computer can understand. A true shifu writes code that bananas can understand." — Cyber Banana, probably Current Status Now, Cyber Banana roams the digital realm, helping developers build blazing-fast static sites and spreading the gospel of: No unnecessary dependencies Semantic HTML CSS that doesn't make you cry JavaScript that actually works Find Me in the Matrix When not meditating on the perfect git commit message, Cyber Banana can be found: Pushing pixels at 3 AM Arguing about tabs vs spaces (it's tabs, obviously) Converting coffee into code Breaking prod on Fridays (it's a tradition) This about page is 100% accurate and definitely not made up by a developer who had too much caffeine. ,--./,-. / # \ | | \ / `._,._,' CYBER BANANA est. 2049 --- ### Blog URL: https://cyber-banana-starter.freshjuice.dev/blog/ Blog Thoughts, tutorials, and notes on web development. 2025 01/15 Getting Started with Eleventy Learn how to set up your first Eleventy project and understand the basics of this powerful static site generator. 01/10 What's New in Tailwind CSS v4 Explore the exciting new features in Tailwind CSS v4, including the @theme system, native CSS variables, and improved performance. 01/05 Building Accessible Websites Learn essential techniques for creating websites that are accessible to everyone, including users with disabilities. 2024 12/28 Modern CSS Techniques You Should Know Explore powerful CSS features that have landed in browsers recently - from container queries to cascade layers. 12/20 Static Site Generators Compared A comparison of popular static site generators - Eleventy, Astro, Hugo, and Next.js. Find the right tool for your project. --- ### Home URL: https://cyber-banana-starter.freshjuice.dev/ Hey there, I'm Cyber Banana A husband, father, and passionate coder. I build things for the web and occasionally write about it. Currently focused on static sites, JavaScript, and making the web a little bit better. When I'm not coding, you'll find me exploring new tech, drinking too much coffee, and trying to explain to my family what I actually do for a living. Read my blog View projects Tech Stack JavaScript TypeScript HTML CSS React Node.js Git GitHub Terminal Database API Cloud Linux Docker Figma Projects ls ./projects --- ### Projects URL: https://cyber-banana-starter.freshjuice.dev/projects/ Projects A collection of things I've built, contributed to, or tinkered with. Personal Portfolio Website A cyberpunk-themed developer portfolio built with 11ty and Tailwind CSS featuring dark mode and responsive design. src live sh ./view-project Developer CLI Tool A command-line utility for automating common development tasks like project scaffolding and code generation. src sh ./view-project Open Source UI Library A lightweight, accessible component library for building modern web applications with zero dependencies. src live sh ./view-project --- ## Blog Posts ### Getting Started with Eleventy URL: https://cyber-banana-starter.freshjuice.dev/blog/getting-started-with-eleventy/ Date: January 15, 2025 Author: Eleventy (or 11ty) is a simpler static site generator. It's zero-config by default but can be customized to fit your needs. Why Eleventy? There are many static site generators out there, but Eleventy stands out for several reasons: Zero client-side JavaScript by default Flexible templating - supports multiple template languages Fast build times - builds are measured in milliseconds Simple data cascade - easy to understand data flow Getting Started First, create a new directory and initialize a Node.js project: mkdir my-site cd my-site npm init -y npm install @11ty/eleventyYour First Page Create an index.md file: # Hello World Welcome to my site built with Eleventy!Run the build: npx eleventy --serveThat's it! You now have a working Eleventy site. Next Steps Explore different template languages Set up layouts for consistent styling Add data files for dynamic content Configure collections for blog posts --- ### What's New in Tailwind CSS v4 URL: https://cyber-banana-starter.freshjuice.dev/blog/tailwind-css-v4-new-features/ Date: January 10, 2025 Author: Tailwind CSS v4 brings a major overhaul to how we write and customize our styles. Let's explore the key changes. The New @theme System Gone is the tailwind.config.js file. In v4, you define your theme directly in CSS using the @theme directive: @theme { --color-primary-500: oklch(0.768 0.233 130.85); --font-sans: "Inter", sans-serif; }This approach has several advantages: Native CSS variables - your theme values are real CSS custom properties Better IDE support - CSS tooling just works Simpler configuration - no JavaScript, just CSS The @utility Directive Creating custom utilities is now done with @utility: @utility card { @apply bg-white rounded-xl shadow-sm p-6; }This creates a utility class that behaves just like built-in Tailwind classes. Custom Variants Need a custom variant? Use @custom-variant: @custom-variant dark (&:where(.dark, .dark *));Now you can use dark:text-white to apply styles only in dark mode. Performance Improvements Tailwind v4 is significantly faster: 4x faster in development Smaller output with improved dead code elimination Better caching for incremental builds Migration Tips If you're coming from v3: Move theme values from tailwind.config.js to @theme in CSS Update custom plugins to use @utility syntax Review deprecated utilities Test thoroughly - some defaults have changed The future of Tailwind is CSS-native, and v4 is a huge step in that direction. --- ### Building Accessible Websites URL: https://cyber-banana-starter.freshjuice.dev/blog/building-accessible-websites/ Date: January 5, 2025 Author: Web accessibility ensures that websites are usable by everyone, including people with disabilities. Here's how to make your sites more accessible. Why Accessibility Matters Inclusion - 1 in 4 adults have some form of disability Legal requirements - Many countries have accessibility laws Better UX - Accessible sites are often easier for everyone SEO benefits - Accessible markup helps search engines Key Principles (WCAG) The Web Content Accessibility Guidelines outline four principles: Perceivable Users must be able to perceive the content: Provide text alternatives for images Ensure sufficient color contrast Don't rely solely on color to convey information Operable Users must be able to operate the interface: Make all functionality keyboard accessible Provide skip links for navigation Give users enough time to read content Understandable Content must be understandable: Use clear, simple language Make navigation consistent Help users avoid and correct mistakes Robust Content must work with various technologies: Use valid HTML Ensure compatibility with assistive technologies Test with screen readers Practical Tips Color Contrast Ensure text has a contrast ratio of at least: 4.5:1 for normal text 3:1 for large text Focus Indicators Never remove focus outlines without providing an alternative: /* Bad */ :focus { outline: none; } /* Good */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }Semantic HTML Use the right elements for the job: <!-- Bad --> <div class="button" onclick="submit()">Submit</div> <!-- Good --> <button type="submit">Submit</button>ARIA When Needed Use ARIA attributes to enhance accessibility, but only when native HTML isn't sufficient: <button aria-expanded="false" aria-controls="menu"> Menu </button>Testing Tools WAVE - Browser extension for accessibility evaluation axe DevTools - Automated accessibility testing Screen readers - VoiceOver (Mac), NVDA (Windows) Keyboard - Navigate your site without a mouse Building accessible websites isn't just good practice—it's essential for creating an inclusive web. --- ### Modern CSS Techniques You Should Know URL: https://cyber-banana-starter.freshjuice.dev/blog/modern-css-techniques/ Date: December 28, 2024 Author: CSS has evolved dramatically in recent years. Let's explore some game-changing features now available in all modern browsers. Container Queries Finally! Style elements based on their container size, not just the viewport. .card-container { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; gap: 1rem; } }Cascade Layers Take control of specificity with @layer: @layer reset, base, components, utilities; @layer components { .button { background: blue; } } @layer utilities { .bg-red { background: red; /* Always wins over components */ } }:has() Selector The "parent selector" we've always wanted: /* Style a card that contains an image */ .card:has(img) { padding-top: 0; } /* Style labels for required inputs */ label:has(+ input:required) { font-weight: bold; }Subgrid Nested grids that align with their parent: .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-item { display: grid; grid-template-columns: subgrid; grid-column: span 3; }Color Functions Modern color manipulation: .element { /* Relative color syntax */ background: oklch(from var(--primary) l c h / 50%); /* Color mixing */ border-color: color-mix(in oklch, var(--primary) 70%, black); }Scroll-Driven Animations Animate elements based on scroll position: @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .element { animation: fade-in linear; animation-timeline: view(); }The future of CSS is here, and it's more powerful than ever! --- ### Static Site Generators Compared URL: https://cyber-banana-starter.freshjuice.dev/blog/static-site-generators-compared/ Date: December 20, 2024 Author: Choosing a static site generator can be overwhelming. Let's compare the most popular options to help you decide. Eleventy (11ty) Best for: Flexibility and simplicity Pros: Zero client-side JavaScript by default Supports 10+ template languages Extremely fast builds Minimal configuration Cons: Less opinionated (can be overwhelming) Smaller ecosystem npx @11ty/eleventyAstro Best for: Content-heavy sites with interactive islands Pros: Ships zero JavaScript by default Component islands architecture Use any framework (React, Vue, Svelte) Great image optimization Cons: Newer, smaller community Learning curve for islands npm create astro@latestHugo Best for: Speed demons and Go enthusiasts Pros: Blazingly fast builds Single binary, no dependencies Built-in image processing Large theme ecosystem Cons: Go template syntax learning curve Less flexible than JS-based tools hugo new site my-siteNext.js (Static Export) Best for: React developers who need static output Pros: React ecosystem Incremental static regeneration Great developer experience Vercel integration Cons: Heavier output React knowledge required More complex than needed for simple sites npx create-next-app@latestComparison Table Feature Eleventy Astro Hugo Next.js Build Speed Fast Fast Fastest Moderate Learning Curve Low Medium Medium High JS Framework Any Any None React Default JS None None None Yes Template Options Many JSX/MD Go JSX My Recommendation Simple blog or docs? Eleventy or Hugo Marketing site with interactions? Astro React app that needs SEO? Next.js Maximum flexibility? Eleventy Choose the tool that matches your team's skills and project needs. They're all excellent choices! --- ## Authors