feat: ultra-aggressive mobile spacing refinement & native fidelity navigation redesign
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user