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

Refactor FootBar and global styles for improved layout and visual consistency; simplify social link structure and update styling in Navbar and Section components for a cleaner interface.

Browse source
This commit is contained in:
Mike Karl 2025-10-28 16:17:54 +01:00
parent 0beb20635f
commit 81b57128b5
8 changed files with 23 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/components/button.tsx
View file

@ -11,7 +11,7 @@ export default function Button({
variant = 'primary',
size = 'md',
}: ButtonProps) {
const baseClasses = "cursor-pointer font-medium rounded-lg transition-all duration-300 ease-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed";
const baseClasses = "cursor-pointer font-medium rounded-lg transition-all duration-300 ease-out disabled:opacity-50 disabled:cursor-not-allowed";
const sizeClasses = {
sm: "px-3 py-1.5 text-sm",

6
app/components/card.tsx
View file

@ -13,9 +13,9 @@ export default function Card({
const baseClasses = "relative overflow-hidden rounded-xl transition-all duration-300 ease-out";
const variantClasses = {
default: "bg-gray-900/50 border border-gray-800/50 backdrop-blur-sm",
glass: "bg-white/5 border border-white/10 backdrop-blur-md",
outlined: "bg-transparent border-2 border-gray-700/50"
default: "bg-gradient-to-br bg-gradient-to-br from-stone-800 via-stone-900 to-stone-800 border border-stone-700",
glass: "bg-gradient-to-br bg-gradient-to-br from-white/5 via-white/10 to-white/5 border border-white/10 backdrop-blur-md",
outlined: "bg-transparent border-2 border-stone-700/50"
};
return (

7
app/components/section.tsx
View file

@ -5,7 +5,7 @@ interface SectionProps {
title?: string;
subtitle?: string;
className?: string;
variant?: 'default' | 'hero' | 'feature' | 'minimal';
variant?: 'default' | 'hero' | 'minimal';
}
export default function Section({
@ -18,9 +18,8 @@ export default function Section({
const baseClasses = "relative py-16 lg:py-24";
const variantClasses = {
default: "bg-gray-900/30",
hero: "bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900",
feature: "bg-gray-800/20",
default: "bg-stone-900",
hero: "bg-gradient-to-br from-stone-950 via-stone-900 to-stone-950",
minimal: "bg-transparent"
};

36
app/footbar.tsx
View file

@ -1,14 +1,17 @@
"use client";
import Link from "next/link";
import { Button, Badge } from "./components";
export default function FootBar() {
const currentYear = new Date().getFullYear();
const socialLinks = [
{ name: "GitHub", href: "https://github.com/GoranSalzmann", icon: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" },
{ name: "Email", href: "mailto:karl.mike2002@gmail.com", icon: "M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-.904.732-1.636 1.636-1.636h3.819l6.545 4.91 6.545-4.91h3.819c.904 0 1.636.732 1.636 1.636z" }
{
name: "GitHub", href: "https://github.com/GoranSalzmann"
},
{
name: "Email", href: "mailto:karl.mike2002@gmail.com"
}
];
const quickLinks = [
@ -18,8 +21,7 @@ export default function FootBar() {
];
return (
<footer className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 border-t border-gray-800/50">
<div className="relative container mx-auto px-4 sm:px-6 lg:px-8 py-12">
<footer className="bg-stone-900 p-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Brand Section */}
<div className="lg:col-span-2">
@ -70,9 +72,7 @@ export default function FootBar() {
className="flex items-center gap-3 text-gray-300 hover:text-white transition-all duration-300 hover:translate-x-1 group"
>
<div className="w-8 h-8 bg-gray-800/50 rounded-lg flex items-center justify-center group-hover:bg-blue-500/20 transition-colors duration-300">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
<path d={social.icon} />
</svg>
{ /* Icon */ }
</div>
<span>{social.name}</span>
</a>
@ -82,24 +82,10 @@ export default function FootBar() {
</div>
{/* Bottom Section */}
<div className="mt-12 pt-8 border-t border-gray-800/50">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<div className="text-gray-400 text-sm">
<p>&copy; {currentYear} Mike Karl. All rights reserved.</p>
<p className="mt-1">Built with Next.js and Tailwind CSS</p>
</div>
<div className="flex items-center gap-4">
<Button
variant="glass"
size="sm"
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
>
zum Seitenanfang
</Button>
</div>
</div>
<div className="mt-6 pt-4 border-t text-sm text-gray-500 flex justify-between">
<p>&copy; {currentYear} Mike Karl. All rights reserved.</p>
<p>Built with Next.js and Tailwind CSS</p>
</div>
</div>
</footer>
);
}

72
app/globals.css
View file

@ -1,22 +1,5 @@
@import "tailwindcss";
:root {
--background: #0a0a0a;
--foreground: #e0e0e0;
--surface: #111111;
--surface-elevated: #1a1a1a;
--border: #333333;
--accent: #3b82f6;
--accent-hover: #2563eb;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
* {
box-sizing: border-box;
}
@ -26,60 +9,5 @@ html {
}
body {
background: var(--background) linear-gradient(135deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
color: var(--foreground);
font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
line-height: 1.6;
min-height: 100vh;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
/* 3D Effects */
.glass-effect {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.neon-glow {
box-shadow:
0 0 20px rgba(59, 130, 246, 0.3),
0 0 40px rgba(59, 130, 246, 0.1);
}
.text-glow {
text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
/* Animation utilities */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
}
.float {
animation: float 6s ease-in-out infinite;
}
.pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}

13
app/layout.tsx
View file

@ -1,19 +1,8 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Navbar from "./navbar";
import FootBar from "./footbar";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Welcome - Mike Karl",
description: "Personal website of Mike Karl",
@ -27,7 +16,7 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`bg-stone-950`}
>
<Navbar />
{children}

2
app/navbar.tsx
View file

@ -14,7 +14,7 @@ export default function Navbar() {
];
return (
<nav className="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800/30 shadow-xl">
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-gray-800/30 shadow-xl">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
{/* Logo */}

6
app/page.tsx
View file

@ -2,7 +2,7 @@ import { Section, Card, CardHeader, CardContent, CardFooter, Button, Badge } fro
export default function Home() {
return (
<main className="pt-16">
<main>
{/* Hero Section */}
<Section variant="hero" title="Mike Karl" subtitle="Fullstack Web und Systementwickler">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@ -82,7 +82,7 @@ export default function Home() {
</Section>
{/* Skills Section */}
<Section variant="feature" title="Erfahrung" subtitle="Technisches Wissen und Skills">
<Section title="Erfahrung" subtitle="Technisches Wissen und Skills">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card variant="outlined">
<CardHeader>
@ -141,7 +141,7 @@ export default function Home() {
</Section>
{/* Portfolio Section */}
<Section variant="feature" title="Portfolio" subtitle="Einige meiner Projekte (allein und im Team)">
<Section title="Portfolio" subtitle="Einige meiner Projekte (allein und im Team)">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Card
variant="glass"