feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign

This commit is contained in:
2026-02-15 20:15:04 +01:00
parent 6244425551
commit cb32b9d62f
19 changed files with 722 additions and 376 deletions

View File

@@ -1,54 +1,69 @@
import { BookOpen, Code2, Terminal, Wrench } from 'lucide-react';
import * as React from 'react';
import { BookOpen, Code2, Terminal, Wrench } from "lucide-react";
import * as React from "react";
export const Hero: React.FC = () => {
return (
<section className="relative bg-slate-900 text-white py-20 md:py-24 overflow-hidden">
<section className="relative bg-slate-900 text-white py-16 md:py-24 overflow-hidden text-center">
{/* Background pattern */}
<div className="absolute inset-0 opacity-10">
<div className="absolute inset-0" style={{
backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)',
backgroundSize: '40px 40px'
}} />
<div
className="absolute inset-0"
style={{
backgroundImage:
"radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
backgroundSize: "32px 32px",
}}
/>
</div>
<div className="container relative z-10">
<div className="max-w-4xl mx-auto text-center">
<div className="max-w-4xl mx-auto">
{/* Main heading */}
<h1 className="text-4xl md:text-6xl font-bold mb-6 animate-slide-up">
<h1 className="text-4xl md:text-6xl font-bold mb-4 md:mb-6 animate-slide-up leading-tight">
Digital Problem Solver
</h1>
<p className="text-xl md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in">
I work on Digital problems and build tools, scripts, and systems to solve them.
<p className="text-lg md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in px-4 md:px-0">
I work on Digital problems and build tools, scripts, and systems to
solve them.
</p>
{/* Quick stats or focus areas */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12 animate-fade-in">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12 animate-fade-in">
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Code2 className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Code</div>
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Code
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Wrench className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Tools</div>
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Tools
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<Terminal className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Automation</div>
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Automation
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
<BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">Learning</div>
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
Learning
</div>
</div>
</div>
{/* Topics */}
<div className="mt-8 text-sm text-slate-400 animate-fade-in">
<span className="font-semibold text-slate-300">Topics:</span> Vibe coding with AI Debugging Mac tools Automation Small scripts Learning notes FOSS
<span className="font-semibold text-slate-300">Topics:</span> Vibe
coding with AI Debugging Mac tools Automation Small scripts
Learning notes FOSS
</div>
</div>
</div>
</section>
);
};
};