karlm/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Home page by adding badges and buttons for enhanced interactivity; update Section components to include variant props for better customization; remove unnecessary styles from Badge and Button components for cleaner code.

Browse source
This commit is contained in:
Mike Karl 2025-10-21 11:55:23 +02:00
parent 3c46fd25e4
commit f0066ac607
3 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/components/badge.tsx
View file

@ -33,10 +33,6 @@ export default function Badge({
return ( return (
<span <span
className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`} className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
style={{
transform: 'translateZ(0)',
willChange: 'transform'
}}
> >
{children} {children}
</span> </span>

4
app/components/button.tsx
View file

@ -33,10 +33,6 @@ export default function Button({
return ( return (
<button <button
className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`} className={`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
style={{
transform: 'translateZ(0)',
willChange: 'transform'
}}
{...props} {...props}
> >
{children} {children}

28
app/page.tsx
View file

@ -16,14 +16,22 @@ export default function Home() {
<h3 className="text-xl font-semibold text-white mb-2">About Me</h3> <h3 className="text-xl font-semibold text-white mb-2">About Me</h3>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-gray-300 leading-relaxed"> <div className="flex flex-wrap gap-2 mb-4">
Passionate developer with expertise in full-stack development, <Badge variant="default">Default</Badge>
system programming, and modern web technologies. <Badge variant="success">Success</Badge>
</p> <Badge variant="info">Info</Badge>
</CardContent> <Badge variant="warning">Warning</Badge>
<CardFooter> <Badge variant="error">Error</Badge>
<Badge variant="glass">Glass</Badge>
</div>
<div className="flex flex-wrap gap-2 mb-4">
<Button variant="primary" size="sm">Learn More</Button>
<Button variant="secondary" size="sm">Learn More</Button>
<Button variant="outline" size="sm">Learn More</Button>
<Button variant="glass" size="sm">Learn More</Button> <Button variant="glass" size="sm">Learn More</Button>
</CardFooter> <Button variant="ghost" size="sm">Learn More</Button>
</div>
</CardContent>
</Card> </Card>
<Card <Card
@ -120,7 +128,7 @@ export default function Home() {
</Section> </Section>
{/* Skills Section */} {/* Skills Section */}
<Section title="Skills & Expertise" subtitle="Technical capabilities and professional skills"> <Section variant="feature" title="Skills & Expertise" subtitle="Technical capabilities and professional skills">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card variant="elevated"> <Card variant="elevated">
<CardHeader> <CardHeader>
@ -180,7 +188,7 @@ export default function Home() {
</Section> </Section>
{/* Portfolio Section */} {/* Portfolio Section */}
<Section title="Featured Projects" subtitle="Some of my notable work and contributions"> <Section variant="feature" title="Featured Projects" subtitle="Some of my notable work and contributions">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card <Card
variant="glass" variant="glass"
@ -332,7 +340,7 @@ export default function Home() {
</Section> </Section>
{/* Contact Section */} {/* Contact Section */}
<Section title="Get In Touch" subtitle="Let's connect and discuss opportunities"/> <Section variant="minimal" title="Get In Touch" subtitle="Let's connect and discuss opportunities"/>
</main> </main>
); );
} }