From 48e5a2779b15ab557754793fb819792a42016651 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= Date: Tue, 17 Feb 2026 19:02:45 +0100 Subject: [PATCH 1/2] redesign: bold dark theme with bento grid, stats, visual hierarchy Full-dark design overhaul: - Slate-950 background throughout (no more white sections) - Dot grid pattern and green glow on hero logo - Stats row in hero (16k+ stars, 2014 founded, 500k+ downloads) - Bento grid project layout: AW + gptme featured large, others compact - Project cards with pill-style tags and card-shine effect - Tiered timeline with highlighted key moments - Compact past-members with circular avatars - About section woven into flow instead of standalone block - Footer with social links mirrored from navbar - Gradient text accent for "free and open-source" - Streamlined navbar with border-bottom instead of bg block --- _includes/templates/head-includes.pug | 4 +- _includes/templates/mixins.pug | 44 ++-- _includes/templates/navbar.pug | 34 ++- _layouts/default.pug | 9 +- index.pug | 290 +++++++++++++------------- style.scss | 40 ++++ 6 files changed, 232 insertions(+), 189 deletions(-) diff --git a/_includes/templates/head-includes.pug b/_includes/templates/head-includes.pug index bbf0f13..77382f0 100644 --- a/_includes/templates/head-includes.pug +++ b/_includes/templates/head-includes.pug @@ -24,10 +24,10 @@ link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all // Custom CSS link(rel="stylesheet" href="/style.css") -// Fonts (Inter & Roboto) +// Fonts (Inter) link(rel="preconnect" href="https://fonts.googleapis.com") link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin) -link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap") +link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap") // jekyll-seo-tag | {% seo %} diff --git a/_includes/templates/mixins.pug b/_includes/templates/mixins.pug index ec83179..54e3fea 100644 --- a/_includes/templates/mixins.pug +++ b/_includes/templates/mixins.pug @@ -4,10 +4,6 @@ mixin section(padding="2em 0em") .grid block -mixin button - a.rounded-lg.border.border-gray-200.mr-3.px-4.py-2.text-sm.font-medium(class="hover:bg-gray-50 hover:border-gray-300 transition-colors" target="_blank")&attributes(attributes) - block - mixin fa(name, group='fas', color='black') i(class=`${group} fa-${name} fa-8x text-${color}`) @@ -15,35 +11,39 @@ mixin cell(cols) div(class=`col-span-${cols}`)&attributes(attributes) block -mixin sectitle - h4.text-4xl(style="mt-0") - block - mixin footer - div.bg-slate-900.text-gray-400.w-full.py-6.text-center.text-sm(class!=attributes.class) - | Made with #[i.fas.fa-heart(style="color: #ef4444")] by Superuser Labs + div.border-t.border-slate-800.text-slate-500.w-full.py-8.text-center.text-sm + div.max-w-6xl.mx-auto.px-6.flex.flex-col.items-center.gap-4(class="sm:flex-row sm:justify-between") + span Made with #[i.fas.fa-heart(style="color: #ef4444")] by Superuser Labs + div.flex.items-center.gap-5 + a.text-slate-600(href='https://github.com/SuperuserLabs' target="_blank", class="hover:text-slate-300 transition-colors") + i.fab.fa-github + a.text-slate-600(href='https://twitter.com/SuperusrLabs' target="_blank", class="hover:text-slate-300 transition-colors") + i.fab.fa-twitter + a.text-slate-600(href='https://www.linkedin.com/company/superuser-labs' target="_blank", class="hover:text-slate-300 transition-colors") + i.fab.fa-linkedin mixin teammember(name, imagename, role, github, linkedin, twitter, website, image_style) - .border.border-gray-100.rounded-2xl.shadow-sm.bg-white.text-black.overflow-hidden(class="hover:shadow-md transition-shadow") + div.group.rounded-2xl.bg-slate-900.border.border-slate-800.overflow-hidden(class="hover:border-slate-700 transition-all") div - div.h-64.rounded-t-2xl(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`) + div.h-56(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`) div.flex.items-center.p-4 div.flex-grow - div.font-medium #{name} - div.text-sm.text-gray-500 #{role} + div.font-medium.text-white #{name} + div.text-sm.text-slate-400 #{role} div.flex.items-center.gap-2 if github - a(href=`${github}` target="_blank", class="text-gray-400 hover:text-gray-700 transition-colors") - i.fab.fa-github.text-xl + a(href=`${github}` target="_blank", class="text-slate-600 hover:text-white transition-colors") + i.fab.fa-github.text-lg if linkedin - a(href=`${linkedin}` target="_blank", class="text-gray-400 hover:text-blue-600 transition-colors") - i.fab.fa-linkedin.text-xl + a(href=`${linkedin}` target="_blank", class="text-slate-600 hover:text-blue-400 transition-colors") + i.fab.fa-linkedin.text-lg if twitter - a(href=`${twitter}` target="_blank", class="text-gray-400 hover:text-blue-400 transition-colors") - i.fab.fa-twitter.text-xl + a(href=`${twitter}` target="_blank", class="text-slate-600 hover:text-sky-400 transition-colors") + i.fab.fa-twitter.text-lg if website - a(href=`${website}` target="_blank", class="text-gray-400 hover:text-green-600 transition-colors") - i.fas.fa-globe.text-xl + a(href=`${website}` target="_blank", class="text-slate-600 hover:text-green-400 transition-colors") + i.fas.fa-globe.text-lg mixin analytics-superuserlabs(ua_id, ga_id) | diff --git a/_includes/templates/navbar.pug b/_includes/templates/navbar.pug index a8e6dbc..3168c2d 100644 --- a/_includes/templates/navbar.pug +++ b/_includes/templates/navbar.pug @@ -1,21 +1,19 @@ -header.flex.items-center.p-4.bg-slate-900.text-base.whitespace-nowrap - div.text-white.flex.items-center - a.ml-4.font-semibold.flex.items-center(href='{{ site.baseurl }}/', class="hover:opacity-80 transition-opacity") - img.mr-2.rounded(src='/media/superuserlabs-logo-workspace-rounded.png', alt='Superuser Labs', width='28', height='28') +header.border-b.border-slate-800 + div.max-w-6xl.mx-auto.flex.items-center.px-6.py-4 + a.font-semibold.flex.items-center.text-white(href='{{ site.baseurl }}/', class="hover:opacity-80 transition-opacity") + img.mr-2.rounded(src='/media/superuserlabs-logo-workspace-rounded.png', alt='Superuser Labs', width='26', height='26') | Superuser Labs - div.hidden.text-gray-300.text-sm.items-center(class="md:flex") - a.mx-8.flex.items-center(href='https://activitywatch.net/' target="_blank", class="hover:text-white transition-colors") - img.inline-block.mr-2(src='/media/activitywatch-logo.png', alt='ActivityWatch', width='18', height='18') - | ActivityWatch - a.mr-8.flex.items-center(href='https://gptme.org/' target="_blank", class="hover:text-white transition-colors") - img.inline-block.mr-2(src='/media/gptme-logo.png', alt='gptme', width='18', height='18') - | gptme + nav.hidden.ml-10.text-sm.text-slate-400.gap-6(class="md:flex") + a.flex.items-center(href='https://activitywatch.net/' target="_blank", class="hover:text-white transition-colors") + | ActivityWatch + a.flex.items-center(href='https://gptme.org/' target="_blank", class="hover:text-white transition-colors") + | gptme - div.flex-1.text-right.flex.items-center.justify-end.gap-4 - a.text-gray-400.text-lg(href='https://github.com/{{ site.github_username }}' target="_blank", class="hover:text-white transition-colors") - i.fab.fa-github - a.text-gray-400.text-lg(href='https://twitter.com/{{ site.twitter_username }}' target="_blank", class="hover:text-white transition-colors") - i.fab.fa-twitter - a.text-gray-400.text-lg(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank", class="hover:text-white transition-colors") - i.fab.fa-linkedin + div.flex-1.flex.items-center.justify-end.gap-5 + a.text-slate-500.text-lg(href='https://github.com/{{ site.github_username }}' target="_blank", class="hover:text-white transition-colors") + i.fab.fa-github + a.text-slate-500.text-lg(href='https://twitter.com/{{ site.twitter_username }}' target="_blank", class="hover:text-white transition-colors") + i.fab.fa-twitter + a.text-slate-500.text-lg(href='https://www.linkedin.com/company/{{ site.linkedin_company }}' target="_blank", class="hover:text-white transition-colors") + i.fab.fa-linkedin diff --git a/_layouts/default.pug b/_layouts/default.pug index 4493590..185493c 100644 --- a/_layouts/default.pug +++ b/_layouts/default.pug @@ -1,6 +1,6 @@ include templates/mixins.pug doctype html -html +html.dark head title {% if page.title %}{{ page.title | escape }} | {% endif %}{{ site.title | escape }} @@ -20,12 +20,11 @@ html +analytics-superuserlabs | {% endif %} - // set background color on body, to match navbar color when scrolling above viewport - body.antialiased(style="background-color: rgb(15 23 42); font-family: 'Inter', 'Roboto', 'Helvetica', sans-serif;") - div.flex.flex-col.min-h-screen.justify-between + body.antialiased.bg-slate-950.text-gray-100(style="font-family: 'Inter', system-ui, sans-serif;") + div.flex.flex-col.min-h-screen include templates/navbar.pug - main.bg-white + main | {{ content }} +footer diff --git a/index.pug b/index.pug index 305fbce..b1e25cd 100644 --- a/index.pug +++ b/index.pug @@ -3,161 +3,167 @@ layout: default --- include templates/mixins.pug -+section.bg-slate-950.text-white - div.text-center.flex.flex-col.justify-center.items-center.py-24(class="md:py-32") - div.mb-8 - img.mx-auto.rounded-2xl(src='/media/superuserlabs-logo.png', alt='Superuser Labs', width='120', height='120') - div - h1.text-6xl.font-bold(class="md:text-7xl") Superuser #[span.text-slate-500 Labs] - p.mt-6.text-lg.text-slate-300.max-w-2xl.mx-auto.px-4 - | We build #[span.text-green-400 free] and #[span.text-green-400 open-source] software that empowers you - div.mt-8.flex.flex-wrap.justify-center.gap-3.text-slate-400.text-base - span Software that gives you #[span.text-orange-400 superpowers] - span.hidden(class="sm:inline") · - span For #[span.text-green-400 free] +//- ============================================================ +//- HERO +//- ============================================================ +div.relative.overflow-hidden.dot-grid + div.max-w-6xl.mx-auto.px-6.py-28.text-center(class="md:py-36") + div.relative.inline-block.mb-8.logo-glow + img.rounded-2xl(src='/media/superuserlabs-logo.png', alt='Superuser Labs', width='100', height='100') + h1.text-5xl.font-extrabold.tracking-tight(class="sm:text-6xl md:text-7xl") + | Superuser #[span.text-slate-600 Labs] + p.mt-6.text-lg.text-slate-400.max-w-xl.mx-auto + | We build #[span.gradient-text free and open-source] software that empowers you + //- Stats row + div.mt-12.flex.justify-center.gap-12(class="sm:gap-16") + div + div.text-3xl.font-bold.text-white 16k+ + div.text-xs.text-slate-500.mt-1 GitHub stars + div + div.text-3xl.font-bold.text-white 2014 + div.text-xs.text-slate-500.mt-1 Founded + div + div.text-3xl.font-bold.text-white 500k+ + div.text-xs.text-slate-500.mt-1 Downloads -+section.max-w-4xl.mx-auto.py-16 - mixin project(name, imgname) - div.flex.flex-col.mb-8.p-6.rounded-xl(class="md:flex-row hover:bg-gray-50 transition-colors") - div.w-28.shrink-0.mx-auto.mb-4(class="md:mx-0 md:mr-8 md:mb-0") - img.rounded-lg(src=`/media/${imgname}`) - div.text-sm - h3.text-2xl.font-semibold.mb-2= name - div&attributes(attributes) - block +//- ============================================================ +//- PROJECTS — bento grid +//- ============================================================ +div.max-w-6xl.mx-auto.px-6.py-20 + h2.text-2xl.font-bold.text-slate-300.mb-8 Projects mixin github-stars-badge(repo) - a(href=`https://github.com/${repo}`, target="_blank") - img.opacity-70(class="hover:opacity-100 transition-opacity" src=`https://img.shields.io/github/stars/${repo}?style=social`) - - h2.text-3xl.font-bold.mb-12.text-center Projects + a.inline-block(href=`https://github.com/${repo}`, target="_blank") + img.opacity-60(class="hover:opacity-100 transition-opacity" src=`https://img.shields.io/github/stars/${repo}?style=social&label=stars`, style="filter: brightness(2);") - +project("ActivityWatch", "activitywatch-logo.png") - p.mb-4.text-gray-600 - | The world's best free and open-source automated time-tracker. - br - | Cross-platform, local-first, extensible. - div.flex.flex-wrap.gap-1.mb-3 - +button.bg-green-600.border-green-600.text-white(href="https://activitywatch.net/downloads/", class='hover:bg-green-700 hover:border-green-700') - | #[i.fas.fa-download.mr-1] Downloads - +button(href="https://activitywatch.net/") - | #[i.fas.fa-globe.mr-1] Website - +button(href="https://github.com/ActivityWatch/activitywatch/") - | #[i.fab.fa-github.mr-1] GitHub - +button(href="https://docs.activitywatch.net/") - | #[i.fas.fa-book.mr-1] Docs - +github-stars-badge('ActivityWatch/activitywatch') + //- Featured projects — large cards + div.grid.grid-cols-1.gap-4.mb-4(class="md:grid-cols-2") + //- ActivityWatch + a.card-shine.group.block.rounded-2xl.bg-slate-900.border.border-slate-800.p-8(class="hover:border-slate-700 transition-all" href="https://activitywatch.net/" target="_blank") + div.flex.items-start.gap-5 + img.w-14.h-14.rounded-xl.shrink-0(src='/media/activitywatch-logo.png', alt='ActivityWatch') + div + div.flex.items-center.gap-3.mb-2 + h3.text-xl.font-semibold.text-white ActivityWatch + +github-stars-badge('ActivityWatch/activitywatch') + p.text-sm.text-slate-400.mb-5 + | The world's best free and open-source automated time-tracker. Cross-platform, local-first, extensible. + div.flex.flex-wrap.gap-2 + span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 Downloads + span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 Docs + span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 + i.fab.fa-github.mr-1 + | GitHub - +project("gptme", "gptme-logo.png") - p.mb-4.text-gray-600 - | A personal AI agent in your terminal. - | Tools for reading/writing files, running code, browsing the web, and more. - | Used for coding, research, and building autonomous agents like #[a.text-blue-600.underline(href="https://timetobuildbob.github.io" target="_blank") Bob]. - | Available as CLI, web app, desktop app, and managed service at #[a.text-blue-600.underline(href="https://gptme.ai" target="_blank") gptme.ai]. - div.flex.flex-wrap.gap-1.mb-3 - +button(href="https://gptme.org/") - | #[i.fas.fa-globe.mr-1] Website - +button(href="https://github.com/gptme/gptme") - | #[i.fab.fa-github.mr-1] GitHub - +button(href="https://gptme.org/docs/") - | #[i.fas.fa-book.mr-1] Docs - +github-stars-badge('gptme/gptme') + //- gptme + a.card-shine.group.block.rounded-2xl.bg-slate-900.border.border-slate-800.p-8(class="hover:border-slate-700 transition-all" href="https://gptme.org/" target="_blank") + div.flex.items-start.gap-5 + img.w-14.h-14.rounded-xl.shrink-0(src='/media/gptme-logo.png', alt='gptme') + div + div.flex.items-center.gap-3.mb-2 + h3.text-xl.font-semibold.text-white gptme + +github-stars-badge('gptme/gptme') + p.text-sm.text-slate-400.mb-5 + | A personal AI agent in your terminal. Read/write files, run code, browse the web. Powers autonomous agents like #[span.text-green-400 Bob]. + | Available as CLI, web app, desktop app, and at #[span.text-green-400 gptme.ai]. + div.flex.flex-wrap.gap-2 + span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 gptme.ai + span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 Docs + span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 + i.fab.fa-github.mr-1 + | GitHub - +project("Thankful", "thankful-logo.png") - p.mb-1.text-gray-600 Donate crypto directly to every content creator that you like. Automatically and without middlemen. - p.mb-4.text-gray-400.text-xs - | Discontinued in 2019. - div.flex.flex-wrap.gap-1.mb-3 - +button(href="https://superuserlabs.org/thankful/") - | #[i.fas.fa-globe.mr-1] Website - +button(href="https://github.com/SuperuserLabs/thankful") - | #[i.fab.fa-github.mr-1] GitHub - +github-stars-badge('SuperuserLabs/thankful') + //- Secondary projects — compact + div.grid.grid-cols-1.gap-4(class="sm:grid-cols-2") + a.group.block.rounded-xl.bg-slate-900.border.border-slate-800.p-5(class="hover:border-slate-700 transition-all" href="https://github.com/uniswap-python/uniswap-python" target="_blank") + div.flex.items-center.gap-4 + img.w-10.h-10.rounded-lg.shrink-0(src='/media/uniswap-python.png', alt='uniswap-python') + div + div.flex.items-center.gap-2 + h3.text-base.font-semibold.text-white uniswap-python + p.text-xs.text-slate-500 Unofficial Python library for Uniswap - +project("uniswap-python", "uniswap-python.png") - p.mb-4.text-gray-600 - | The unofficial Python library for Uniswap. Funded by the Uniswap Grants Program. - div.flex.flex-wrap.gap-1.mb-3 - +button(href="https://github.com/uniswap-python/uniswap-python") - | #[i.fab.fa-github.mr-1] GitHub - +button(href="https://uniswap-python.com/") - | #[i.fas.fa-book.mr-1] Docs - +github-stars-badge('uniswap-python/uniswap-python') + a.group.block.rounded-xl.bg-slate-900.border.border-slate-800.p-5.opacity-60(class="hover:border-slate-700 hover:opacity-80 transition-all" href="https://github.com/SuperuserLabs/thankful" target="_blank") + div.flex.items-center.gap-4 + img.w-10.h-10.rounded-lg.shrink-0(src='/media/thankful-logo.png', alt='Thankful') + div + div.flex.items-center.gap-2 + h3.text-base.font-semibold.text-white Thankful + span.text-xs.text-slate-600 Discontinued + p.text-xs.text-slate-500 Donate crypto directly to creators you love -div.bg-gray-50.py-16 - div.px-6.max-w-3xl.mx-auto.text-center - h2.text-3xl.font-bold.mb-6 About us - div.text-gray-600.space-y-4.text-left(class="sm:text-center") - p - | We are a small team of developers and researchers passionate about free and open-source software, building tools to empower users like you. - p - | Based in #[span.font-medium Sweden], active since 2017, with experience across full-stack development, machine learning, AI agents, and decentralized systems. - p.text-sm.text-gray-500 - | We also offer consulting in software development, machine learning, and AI. +//- ============================================================ +//- TEAM +//- ============================================================ +div.border-t.border-slate-800.py-20 + div.max-w-6xl.mx-auto.px-6 + h2.text-2xl.font-bold.text-slate-300.mb-8 Team -+section.py-16(class="sm:py-20") - h2.text-center.text-3xl.font-bold.mb-12 Team - div.max-w-4xl.mx-auto.grid.grid-cols-1.gap-8(class="sm:grid-cols-3") - +teammember("Erik Bjäreholt", "erik.jpg", "CEO, Developer", github="https://github.com/ErikBjare", linkedin="https://www.linkedin.com/in/erikbjareholt/", twitter="https://twitter.com/ErikBjare") - +teammember("Johan Bjäreholt", "johan.png", "Developer", github="https://github.com/johan-bjareholt", linkedin="https://www.linkedin.com/in/johanbjareholt/") - +teammember("Bob", "bob.jpg", "AI Agent, Developer", "https://github.com/TimeToBuildBob", null, "https://twitter.com/TimeToBuildBob", "https://timetobuildbob.github.io") + div.grid.grid-cols-1.gap-6(class="sm:grid-cols-3") + +teammember("Erik Bjäreholt", "erik.jpg", "CEO, Developer", github="https://github.com/ErikBjare", linkedin="https://www.linkedin.com/in/erikbjareholt/", twitter="https://twitter.com/ErikBjare") + +teammember("Johan Bjäreholt", "johan.png", "Developer", github="https://github.com/johan-bjareholt", linkedin="https://www.linkedin.com/in/johanbjareholt/") + +teammember("Bob", "bob.jpg", "AI Agent", github="https://github.com/TimeToBuildBob", twitter="https://twitter.com/TimeToBuildBob", website="https://timetobuildbob.github.io") - div.max-w-4xl.mx-auto.mt-4 - p.text-center.text-sm.text-gray-500.mt-2 - | Bob is an autonomous AI agent built with #[a.underline(href="https://gptme.org/" target="_blank") gptme], contributing code and reviewing PRs 24/7. + p.text-sm.text-slate-600.mt-4 + | Bob is an autonomous agent built with #[a.text-slate-400.underline(href="https://gptme.org/" target="_blank") gptme] — contributing code and reviewing PRs around the clock. - div.max-w-4xl.mx-auto.text-sm.mt-8 - details - summary.text-center.text-xl.font-medium.py-6.text-gray-500(class="hover:cursor-pointer hover:text-gray-700 transition-colors") + //- Past members + details.mt-8 + summary.text-sm.text-slate-600.cursor-pointer(class="hover:text-slate-400 transition-colors") | Past team members + div.grid.grid-cols-2.gap-4.mt-6(class="md:grid-cols-3 lg:grid-cols-6") + each member in [{name:"Johannes Ahnlide",img:"johannes.jpg",gh:"https://github.com/ahnlabb"},{name:"Jacob Karlsson",img:"jacob.jpg",gh:"https://github.com/powersource"},{name:"Patrik Laurell",img:"patrik.jpg",gh:"https://github.com/patrik-laurell"},{name:"Valthor Halldórsson",img:"valthor.jpg",gh:"https://github.com/vlthr"},{name:"Dwight Lidman",img:"dwight.jpg",gh:"https://github.com/dwilid"},{name:"Michael Young",img:"michael.jpg",gh:"https://github.com/Miyou"}] + a.block.text-center.group(href=member.gh target="_blank") + div.w-16.h-16.mx-auto.rounded-full.bg-slate-800.overflow-hidden(class="group-hover:ring-2 group-hover:ring-slate-600 transition-all") + div.w-full.h-full(style=`background: url('/media/${member.img}') center / cover`) + div.text-xs.text-slate-500.mt-2(class="group-hover:text-slate-300 transition-colors")= member.name - div.grid.grid-cols-1.gap-6.mt-4(class="sm:grid-cols-2 md:grid-cols-3") - +teammember("Johannes Ahnlide", "johannes.jpg", "Developer", github="https://github.com/ahnlabb") - +teammember("Jacob Karlsson", "jacob.jpg", "Developer", github="https://github.com/powersource", linkedin="https://www.linkedin.com/in/jacob-karlsson-6a483bb1/") - +teammember("Patrik Laurell", "patrik.jpg", "Developer", github="https://github.com/patrik-laurell", linkedin="https://www.linkedin.com/in/patrik-laurell-ba5b306b/") - +teammember("Valthor Halldórsson", "valthor.jpg", "Developer", github="https://github.com/vlthr", linkedin="https://www.linkedin.com/in/valthor-halldorsson-002aaa13a/") - +teammember("Dwight Lidman", "dwight.jpg", "Developer", github="https://github.com/dwilid", linkedin="https://www.linkedin.com/in/dwight-lidman/", image_style="background-position-y: 10%") - +teammember("Michael Young", "michael.jpg", "Developer", github="https://github.com/Miyou", linkedin="https://www.linkedin.com/in/michael-young-522148142/") +//- ============================================================ +//- ABOUT — woven into the flow +//- ============================================================ +div.border-t.border-slate-800.py-16 + div.max-w-3xl.mx-auto.px-6.text-center + p.text-slate-400.text-base.leading-relaxed + | A small team of developers and researchers from #[span.text-slate-300 Sweden], building open-source tools since 2017. + | Experience spanning full-stack development, machine learning, AI agents, and decentralized systems. + p.mt-4.text-sm.text-slate-600 + | We also offer consulting in software development, ML, and AI. #[a.text-slate-400.underline(href="mailto:erik@superuserlabs.org") Get in touch]. -div.bg-slate-900.text-white.py-16 +//- ============================================================ +//- HISTORY — timeline +//- ============================================================ +div.border-t.border-slate-800.py-20 div.max-w-3xl.mx-auto.px-6 - h2.text-3xl.font-bold.text-center.mb-12 History - div.space-y-0 - mixin timeline-entry(year) - div.flex - div.w-20.shrink-0.text-right.pr-6 - span.font-bold.text-green-400= year - div.border-l-2.border-slate-700.pl-6.pb-8 - block + h2.text-2xl.font-bold.text-slate-300.mb-10 History + + mixin timeline-entry(year, highlight) + div.flex.group + div.w-16.shrink-0.text-right.pr-5 + if highlight + span.font-bold.text-green-400.text-sm= year + else + span.font-bold.text-slate-500.text-sm= year + div.border-l.border-slate-800.pl-5.pb-6(class="group-hover:border-slate-600 transition-colors") + block - +timeline-entry("2014") - p.text-slate-300 Erik starts working on ActivityWatch - +timeline-entry("2016") - p.text-slate-300 ActivityWatch v0.1 released - p.text-slate-300 Johan joins ActivityWatch development - +timeline-entry("2017") - p.text-slate-300 Superuser Labs founded, with Thankful as its initial project - p.text-slate-300 Awarded a Leapfrogs grant by Lund University - +timeline-entry("2018") - p.text-slate-300 Double Leapfrogs grant received - p.text-slate-300 Thankful team grows to 5 developers over the summer - +timeline-entry("2019") - p.text-slate-300 Thankful folds, ActivityWatch becomes the main focus - +timeline-entry("2021") - p.text-slate-300 ActivityWatch adopted by researchers - p.text-slate-300 Uniswap Grant received for uniswap-python - +timeline-entry("2022") - p.text-slate-300 Formally incorporates as "Superuser Labs Lund AB" - +timeline-entry("2023") - p.text-slate-300 First consulting client: University of Ghent - p.text-slate-300 Erik starts working on gptme (March), first public release (September) - p.text-slate-300 Erik joins Lovable as first hire (December) - +timeline-entry("2024") - p.text-slate-300 Erik leaves Lovable, focus returns to Superuser Labs and gptme - p.text-slate-300 gptme-webui and gptme-agent-template created - p.text-slate-300 #[a.text-green-400.underline(href="https://timetobuildbob.github.io" target="_blank") Bob] is born (November) - +timeline-entry("2025") - p.text-slate-300 gptme.ai service launched - p.text-slate-300 gptme desktop app (Tauri) development begins - p.text-slate-300 Bob achieves autonomous operation (October) - p.text-slate-300 Consulting for Pale Blue Dot and Dendrite Systems + +timeline-entry("2014") + p.text-sm.text-slate-500 Erik starts working on ActivityWatch + +timeline-entry("2016") + p.text-sm.text-slate-500 ActivityWatch v0.1 released + +timeline-entry("2017", true) + p.text-sm.text-slate-400 Superuser Labs founded + p.text-sm.text-slate-500 Leapfrogs grant from Lund University + +timeline-entry("2019") + p.text-sm.text-slate-500 Thankful folds, ActivityWatch becomes main focus + +timeline-entry("2022") + p.text-sm.text-slate-500 Formally incorporates as "Superuser Labs Lund AB" + +timeline-entry("2023", true) + p.text-sm.text-slate-400 Erik starts working on gptme + p.text-sm.text-slate-500 First public release of gptme (September) + +timeline-entry("2024", true) + p.text-sm.text-slate-400 Full focus returns to Superuser Labs and gptme + p.text-sm.text-slate-400 #[a.text-green-400(href="https://timetobuildbob.github.io" target="_blank") Bob] is born + +timeline-entry("2025", true) + p.text-sm.text-slate-400 gptme.ai service launched + p.text-sm.text-slate-400 Bob achieves autonomous operation + p.text-sm.text-slate-500 Consulting for Pale Blue Dot, Dendrite Systems diff --git a/style.scss b/style.scss index a845151..5c06dd0 100644 --- a/style.scss +++ b/style.scss @@ -1,2 +1,42 @@ --- --- + +// Dot grid background pattern +.dot-grid { + background-image: radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px); + background-size: 24px 24px; +} + +// Gradient glow behind hero logo +.logo-glow { + position: relative; + &::after { + content: ''; + position: absolute; + inset: -20px; + background: radial-gradient(circle, rgba(74, 222, 128, 0.15) 0%, transparent 70%); + border-radius: 50%; + z-index: -1; + } +} + +// Gradient text +.gradient-text { + background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +// Subtle card shine on hover +.card-shine { + position: relative; + overflow: hidden; + &::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%); + pointer-events: none; + } +} From 1ff10d6159e8e971e02ea56fc8f4e6c11bb70178 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= Date: Tue, 17 Feb 2026 19:28:13 +0100 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20bold=20redesign=20=E2=80=94=20tight?= =?UTF-8?q?er=20layout,=20fixed=20team=20photos,=20improved=20cards?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Inline logo + title in hero (matching OG preview) - Logo glow, dot grid, gradient text, card shine effects - Bento grid projects with star counts and bottom-aligned buttons - Square team photos in narrower centered grid - Centered headings, timeline, and Bob description - Navbar: larger square logo, removed redundant project links - Fixed Bob's social links (positional mixin arg shift) - Updated stats to 20k+ stars, responsive mobile layout --- _includes/templates/mixins.pug | 2 +- _includes/templates/navbar.pug | 10 +-- index.pug | 150 +++++++++++++++++---------------- style.scss | 27 +----- 4 files changed, 85 insertions(+), 104 deletions(-) diff --git a/_includes/templates/mixins.pug b/_includes/templates/mixins.pug index 54e3fea..3fcf726 100644 --- a/_includes/templates/mixins.pug +++ b/_includes/templates/mixins.pug @@ -26,7 +26,7 @@ mixin footer mixin teammember(name, imagename, role, github, linkedin, twitter, website, image_style) div.group.rounded-2xl.bg-slate-900.border.border-slate-800.overflow-hidden(class="hover:border-slate-700 transition-all") div - div.h-56(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`) + div.aspect-square(style=`background: url('/media/${imagename}') center / cover; ${image_style || ''}`) div.flex.items-center.p-4 div.flex-grow div.font-medium.text-white #{name} diff --git a/_includes/templates/navbar.pug b/_includes/templates/navbar.pug index 3168c2d..37cd1ec 100644 --- a/_includes/templates/navbar.pug +++ b/_includes/templates/navbar.pug @@ -1,15 +1,9 @@ header.border-b.border-slate-800 - div.max-w-6xl.mx-auto.flex.items-center.px-6.py-4 + div.max-w-6xl.mx-auto.flex.items-center.px-6.py-3 a.font-semibold.flex.items-center.text-white(href='{{ site.baseurl }}/', class="hover:opacity-80 transition-opacity") - img.mr-2.rounded(src='/media/superuserlabs-logo-workspace-rounded.png', alt='Superuser Labs', width='26', height='26') + img.rounded-lg(src='/media/superuserlabs-icon-padded.png', alt='Superuser Labs', width='34', height='34', class="mr-2.5", style="background: rgb(2,6,23);") | Superuser Labs - nav.hidden.ml-10.text-sm.text-slate-400.gap-6(class="md:flex") - a.flex.items-center(href='https://activitywatch.net/' target="_blank", class="hover:text-white transition-colors") - | ActivityWatch - a.flex.items-center(href='https://gptme.org/' target="_blank", class="hover:text-white transition-colors") - | gptme - div.flex-1.flex.items-center.justify-end.gap-5 a.text-slate-500.text-lg(href='https://github.com/{{ site.github_username }}' target="_blank", class="hover:text-white transition-colors") i.fab.fa-github diff --git a/index.pug b/index.pug index b1e25cd..d1d6bc3 100644 --- a/index.pug +++ b/index.pug @@ -7,142 +7,148 @@ include templates/mixins.pug //- HERO //- ============================================================ div.relative.overflow-hidden.dot-grid - div.max-w-6xl.mx-auto.px-6.py-28.text-center(class="md:py-36") - div.relative.inline-block.mb-8.logo-glow - img.rounded-2xl(src='/media/superuserlabs-logo.png', alt='Superuser Labs', width='100', height='100') - h1.text-5xl.font-extrabold.tracking-tight(class="sm:text-6xl md:text-7xl") - | Superuser #[span.text-slate-600 Labs] - p.mt-6.text-lg.text-slate-400.max-w-xl.mx-auto + div.max-w-6xl.mx-auto.px-6.py-16.text-center(class="md:py-24") + //- Inline logo + title (like the OG preview) + div.flex.items-center.justify-center.gap-5.mb-6 + div.logo-glow.shrink-0 + img.rounded-2xl.block(src='/media/superuserlabs-logo.png', alt='Superuser Labs', width='80', height='80', style="background: rgb(2,6,23);") + h1.text-5xl.font-extrabold.tracking-tight.text-left(class="sm:text-6xl md:text-7xl") + | Superuser #[span.text-slate-600 Labs] + p.text-lg.text-slate-400.max-w-xl.mx-auto | We build #[span.gradient-text free and open-source] software that empowers you //- Stats row - div.mt-12.flex.justify-center.gap-12(class="sm:gap-16") + div.mt-8.flex.justify-center.gap-10(class="sm:gap-16") div - div.text-3xl.font-bold.text-white 16k+ + div.text-2xl.font-bold.text-white(class="sm:text-3xl") 20k+ div.text-xs.text-slate-500.mt-1 GitHub stars div - div.text-3xl.font-bold.text-white 2014 - div.text-xs.text-slate-500.mt-1 Founded + div.text-2xl.font-bold.text-white(class="sm:text-3xl") 10+ + div.text-xs.text-slate-500.mt-1 Years active div - div.text-3xl.font-bold.text-white 500k+ + div.text-2xl.font-bold.text-white(class="sm:text-3xl") 500k+ div.text-xs.text-slate-500.mt-1 Downloads //- ============================================================ //- PROJECTS — bento grid //- ============================================================ -div.max-w-6xl.mx-auto.px-6.py-20 - h2.text-2xl.font-bold.text-slate-300.mb-8 Projects - - mixin github-stars-badge(repo) - a.inline-block(href=`https://github.com/${repo}`, target="_blank") - img.opacity-60(class="hover:opacity-100 transition-opacity" src=`https://img.shields.io/github/stars/${repo}?style=social&label=stars`, style="filter: brightness(2);") +div.max-w-6xl.mx-auto.px-6.py-12 + h2.text-2xl.font-bold.text-slate-300.mb-6.text-center Projects //- Featured projects — large cards div.grid.grid-cols-1.gap-4.mb-4(class="md:grid-cols-2") //- ActivityWatch - a.card-shine.group.block.rounded-2xl.bg-slate-900.border.border-slate-800.p-8(class="hover:border-slate-700 transition-all" href="https://activitywatch.net/" target="_blank") - div.flex.items-start.gap-5 + div.card-shine.rounded-2xl.bg-slate-900.border.border-slate-800.p-8.flex.flex-col(class="hover:border-slate-700 transition-all") + div.flex.items-start.gap-5.flex-1 img.w-14.h-14.rounded-xl.shrink-0(src='/media/activitywatch-logo.png', alt='ActivityWatch') div div.flex.items-center.gap-3.mb-2 h3.text-xl.font-semibold.text-white ActivityWatch - +github-stars-badge('ActivityWatch/activitywatch') - p.text-sm.text-slate-400.mb-5 + span.text-xs.text-slate-500 + i.fas.fa-star.text-yellow-500.mr-1 + | 16k+ + p.text-sm.text-slate-400 | The world's best free and open-source automated time-tracker. Cross-platform, local-first, extensible. - div.flex.flex-wrap.gap-2 - span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 Downloads - span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 Docs - span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 - i.fab.fa-github.mr-1 - | GitHub + div.flex.flex-wrap.gap-2.mt-5 + a.px-3.py-1.rounded-full.bg-green-900.text-green-300.text-xs.border.border-green-800.font-medium(href="https://activitywatch.net/downloads/" target="_blank", class="hover:bg-green-800 transition-colors") + i.fas.fa-download.mr-1 + | Downloads + a.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700(href="https://activitywatch.net/" target="_blank", class="hover:bg-slate-700 transition-colors") + | Website + a.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700(href="https://github.com/ActivityWatch/activitywatch" target="_blank", class="hover:bg-slate-700 transition-colors") + i.fab.fa-github.mr-1 + | GitHub + a.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700(href="https://docs.activitywatch.net/" target="_blank", class="hover:bg-slate-700 transition-colors") + | Docs //- gptme - a.card-shine.group.block.rounded-2xl.bg-slate-900.border.border-slate-800.p-8(class="hover:border-slate-700 transition-all" href="https://gptme.org/" target="_blank") - div.flex.items-start.gap-5 + div.card-shine.rounded-2xl.bg-slate-900.border.border-slate-800.p-8.flex.flex-col(class="hover:border-slate-700 transition-all") + div.flex.items-start.gap-5.flex-1 img.w-14.h-14.rounded-xl.shrink-0(src='/media/gptme-logo.png', alt='gptme') div div.flex.items-center.gap-3.mb-2 h3.text-xl.font-semibold.text-white gptme - +github-stars-badge('gptme/gptme') - p.text-sm.text-slate-400.mb-5 - | A personal AI agent in your terminal. Read/write files, run code, browse the web. Powers autonomous agents like #[span.text-green-400 Bob]. - | Available as CLI, web app, desktop app, and at #[span.text-green-400 gptme.ai]. - div.flex.flex-wrap.gap-2 - span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 gptme.ai - span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 Docs - span.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700 - i.fab.fa-github.mr-1 - | GitHub + span.text-xs.text-slate-500 + i.fas.fa-star.text-yellow-500.mr-1 + | 4k+ + p.text-sm.text-slate-400 + | A personal AI agent in your terminal. Read/write files, run code, browse the web. Powers autonomous agents like #[a.text-green-400(href="https://timetobuildbob.github.io" target="_blank") Bob]. + | Available as CLI, web app, desktop app, and at #[a.text-green-400(href="https://gptme.ai" target="_blank") gptme.ai]. + div.flex.flex-wrap.gap-2.mt-5 + a.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700(href="https://gptme.ai/" target="_blank", class="hover:bg-slate-700 transition-colors") + | gptme.ai + a.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700(href="https://github.com/gptme/gptme" target="_blank", class="hover:bg-slate-700 transition-colors") + i.fab.fa-github.mr-1 + | GitHub + a.px-3.py-1.rounded-full.bg-slate-800.text-slate-300.text-xs.border.border-slate-700(href="https://gptme.org/docs/" target="_blank", class="hover:bg-slate-700 transition-colors") + | Docs //- Secondary projects — compact div.grid.grid-cols-1.gap-4(class="sm:grid-cols-2") - a.group.block.rounded-xl.bg-slate-900.border.border-slate-800.p-5(class="hover:border-slate-700 transition-all" href="https://github.com/uniswap-python/uniswap-python" target="_blank") - div.flex.items-center.gap-4 - img.w-10.h-10.rounded-lg.shrink-0(src='/media/uniswap-python.png', alt='uniswap-python') - div - div.flex.items-center.gap-2 - h3.text-base.font-semibold.text-white uniswap-python - p.text-xs.text-slate-500 Unofficial Python library for Uniswap + a.group.flex.items-center.gap-4.rounded-xl.bg-slate-900.border.border-slate-800.p-5(class="hover:border-slate-700 transition-all" href="https://github.com/uniswap-python/uniswap-python" target="_blank") + img.w-10.h-10.rounded-lg.shrink-0.object-contain(src='/media/uniswap-python.png', alt='uniswap-python') + div + h3.text-base.font-semibold.text-white uniswap-python + p.text-xs.text-slate-500 Unofficial Python library for Uniswap - a.group.block.rounded-xl.bg-slate-900.border.border-slate-800.p-5.opacity-60(class="hover:border-slate-700 hover:opacity-80 transition-all" href="https://github.com/SuperuserLabs/thankful" target="_blank") - div.flex.items-center.gap-4 - img.w-10.h-10.rounded-lg.shrink-0(src='/media/thankful-logo.png', alt='Thankful') - div - div.flex.items-center.gap-2 - h3.text-base.font-semibold.text-white Thankful - span.text-xs.text-slate-600 Discontinued - p.text-xs.text-slate-500 Donate crypto directly to creators you love + a.group.flex.items-center.gap-4.rounded-xl.bg-slate-900.border.border-slate-800.p-5.opacity-50(class="hover:border-slate-700 hover:opacity-70 transition-all" href="https://github.com/SuperuserLabs/thankful" target="_blank") + img.w-10.h-10.rounded-lg.shrink-0(src='/media/thankful-logo.png', alt='Thankful') + div + div.flex.items-center.gap-2 + h3.text-base.font-semibold.text-white Thankful + span.text-xs.text-slate-600 Discontinued + p.text-xs.text-slate-500 Donate crypto directly to creators you love //- ============================================================ //- TEAM //- ============================================================ -div.border-t.border-slate-800.py-20 +div.border-t.border-slate-800.py-14 div.max-w-6xl.mx-auto.px-6 - h2.text-2xl.font-bold.text-slate-300.mb-8 Team + h2.text-2xl.font-bold.text-slate-300.mb-8.text-center Team - div.grid.grid-cols-1.gap-6(class="sm:grid-cols-3") + div.grid.grid-cols-3.gap-4.max-w-3xl.mx-auto(class="sm:gap-6") +teammember("Erik Bjäreholt", "erik.jpg", "CEO, Developer", github="https://github.com/ErikBjare", linkedin="https://www.linkedin.com/in/erikbjareholt/", twitter="https://twitter.com/ErikBjare") +teammember("Johan Bjäreholt", "johan.png", "Developer", github="https://github.com/johan-bjareholt", linkedin="https://www.linkedin.com/in/johanbjareholt/") - +teammember("Bob", "bob.jpg", "AI Agent", github="https://github.com/TimeToBuildBob", twitter="https://twitter.com/TimeToBuildBob", website="https://timetobuildbob.github.io") + +teammember("Bob", "bob.jpg", "AI Agent", "https://github.com/TimeToBuildBob", null, "https://twitter.com/TimeToBuildBob", "https://timetobuildbob.github.io") - p.text-sm.text-slate-600.mt-4 - | Bob is an autonomous agent built with #[a.text-slate-400.underline(href="https://gptme.org/" target="_blank") gptme] — contributing code and reviewing PRs around the clock. + p.text-sm.text-slate-600.mt-4.text-center + | Bob is a self-improving AI agent built on #[a.text-slate-400.underline(href="https://gptme.org/" target="_blank") gptme] — autonomously writing, shipping, and merging code 24/7. - //- Past members - details.mt-8 + //- Past members — compact circular avatars + details.mt-8.text-center summary.text-sm.text-slate-600.cursor-pointer(class="hover:text-slate-400 transition-colors") | Past team members - div.grid.grid-cols-2.gap-4.mt-6(class="md:grid-cols-3 lg:grid-cols-6") + div.grid.grid-cols-3.gap-4.mt-6(class="sm:grid-cols-6") each member in [{name:"Johannes Ahnlide",img:"johannes.jpg",gh:"https://github.com/ahnlabb"},{name:"Jacob Karlsson",img:"jacob.jpg",gh:"https://github.com/powersource"},{name:"Patrik Laurell",img:"patrik.jpg",gh:"https://github.com/patrik-laurell"},{name:"Valthor Halldórsson",img:"valthor.jpg",gh:"https://github.com/vlthr"},{name:"Dwight Lidman",img:"dwight.jpg",gh:"https://github.com/dwilid"},{name:"Michael Young",img:"michael.jpg",gh:"https://github.com/Miyou"}] a.block.text-center.group(href=member.gh target="_blank") - div.w-16.h-16.mx-auto.rounded-full.bg-slate-800.overflow-hidden(class="group-hover:ring-2 group-hover:ring-slate-600 transition-all") + div.w-16.h-16.mx-auto.rounded-full.overflow-hidden.border.border-slate-800(class="group-hover:border-slate-600 transition-all") div.w-full.h-full(style=`background: url('/media/${member.img}') center / cover`) - div.text-xs.text-slate-500.mt-2(class="group-hover:text-slate-300 transition-colors")= member.name + div.text-xs.text-slate-600.mt-2(class="group-hover:text-slate-400 transition-colors")= member.name //- ============================================================ -//- ABOUT — woven into the flow +//- ABOUT — brief, woven into flow //- ============================================================ -div.border-t.border-slate-800.py-16 +div.border-t.border-slate-800.py-12 div.max-w-3xl.mx-auto.px-6.text-center p.text-slate-400.text-base.leading-relaxed | A small team of developers and researchers from #[span.text-slate-300 Sweden], building open-source tools since 2017. | Experience spanning full-stack development, machine learning, AI agents, and decentralized systems. p.mt-4.text-sm.text-slate-600 - | We also offer consulting in software development, ML, and AI. #[a.text-slate-400.underline(href="mailto:erik@superuserlabs.org") Get in touch]. + | We also offer consulting in software development, ML, and AI. //- ============================================================ //- HISTORY — timeline //- ============================================================ -div.border-t.border-slate-800.py-20 +div.border-t.border-slate-800.py-14 div.max-w-3xl.mx-auto.px-6 - h2.text-2xl.font-bold.text-slate-300.mb-10 History + h2.text-2xl.font-bold.text-slate-300.mb-8.text-center History mixin timeline-entry(year, highlight) - div.flex.group + div.flex.group.max-w-md.mx-auto div.w-16.shrink-0.text-right.pr-5 if highlight span.font-bold.text-green-400.text-sm= year else - span.font-bold.text-slate-500.text-sm= year + span.font-bold.text-slate-600.text-sm= year div.border-l.border-slate-800.pl-5.pb-6(class="group-hover:border-slate-600 transition-colors") block diff --git a/style.scss b/style.scss index 5c06dd0..1d7a9da 100644 --- a/style.scss +++ b/style.scss @@ -1,26 +1,16 @@ --- --- -// Dot grid background pattern .dot-grid { - background-image: radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1px); + background-image: radial-gradient(circle, rgba(148, 163, 184, 0.06) 1px, transparent 1px); background-size: 24px 24px; } -// Gradient glow behind hero logo .logo-glow { - position: relative; - &::after { - content: ''; - position: absolute; - inset: -20px; - background: radial-gradient(circle, rgba(74, 222, 128, 0.15) 0%, transparent 70%); - border-radius: 50%; - z-index: -1; - } + box-shadow: 0 0 80px 20px rgba(74, 222, 128, 0.1), 0 0 30px 5px rgba(74, 222, 128, 0.05); + border-radius: 1rem; } -// Gradient text .gradient-text { background: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%); -webkit-background-clip: text; @@ -28,15 +18,6 @@ background-clip: text; } -// Subtle card shine on hover .card-shine { - position: relative; - overflow: hidden; - &::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%); - pointer-events: none; - } + background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 60%); }