Skip to content

Commit 5b4decb

Browse files
zimbakovtechzimbakovtech
committed
2 parents 2d9724f + ca37e41 commit 5b4decb

16 files changed

+1518
-382
lines changed

‎app/layout.tsx‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,77 @@
11
import "../styles/globals.css";
22
import type { Metadata } from "next";
3-
import { Poppins } from "next/font/google";
4-
5-
const poppins = Poppins({
6-
subsets: ["latin"],
7-
weight: ["300", "400", "500", "600", "700"],
8-
display: "swap",
9-
});
103

114
export const metadata: Metadata = {
125
metadataBase: new URL("https://zimbakov.dev"),
13-
title: "Damjan Zimbakov - Portfolio",
6+
title: {
7+
default: "Damjan Zimbakov - Software Engineer & Product Creator",
8+
template: "%s | Damjan Zimbakov",
9+
},
1410
description:
15-
"Portfolio of Damjan Zimbakov - CS Student, Mobile App Developer, ML Enthusiast",
11+
"Computer Science student and software engineer specializing in mobile app development, AI/ML, and innovative digital solutions. Building the future one line of code at a time.",
12+
keywords: [
13+
"Damjan Zimbakov",
14+
"Software Engineer",
15+
"Mobile App Developer",
16+
"Flutter Developer",
17+
"Full Stack Developer",
18+
"AI/ML Engineer",
19+
"Computer Science",
20+
"React Developer",
21+
"Next.js Developer",
22+
"Product Creator",
23+
],
24+
authors: [{ name: "Damjan Zimbakov", url: "https://zimbakov.dev" }],
25+
creator: "Damjan Zimbakov",
26+
publisher: "Damjan Zimbakov",
1627
icons: {
17-
icon: "/memoji.ico",
28+
icon: [
29+
{ url: "/memoji.ico", sizes: "any" },
30+
{ url: "/memoji.ico", type: "image/x-icon" },
31+
],
1832
shortcut: "/memoji.ico",
1933
apple: "/memoji.ico",
2034
},
2135
openGraph: {
22-
title: "Damjan Zimbakov - Portfolio",
23-
description: "CS Student | Mobile App Developer | ML Enthusiast",
2436
type: "website",
37+
locale: "en_US",
2538
url: "https://zimbakov.dev",
39+
title: "Damjan Zimbakov - Software Engineer & Product Creator",
40+
description: "Computer Science student and software engineer specializing in mobile app development, AI/ML, and innovative digital solutions.",
41+
siteName: "Damjan Zimbakov Portfolio",
2642
images: [
2743
{
2844
url: "/og_image.png",
2945
width: 1200,
3046
height: 630,
31-
alt: "Damjan Zimbakov - Portfolio",
47+
alt: "Damjan Zimbakov - Software Engineer & Product Creator",
48+
type: "image/png",
3249
},
3350
],
3451
},
3552
twitter: {
3653
card: "summary_large_image",
37-
title: "Damjan Zimbakov — Portfolio",
38-
description: "CS Student | Mobile App Developer | ML Enthusiast",
54+
title: "Damjan Zimbakov - Software Engineer & Product Creator",
55+
description: "Computer Science student and software engineer specializing in mobile app development, AI/ML, and innovative digital solutions.",
3956
images: ["/og_image.png"],
57+
creator: "@damjanzimbakov",
58+
},
59+
robots: {
60+
index: true,
61+
follow: true,
62+
googleBot: {
63+
index: true,
64+
follow: true,
65+
"max-video-preview": -1,
66+
"max-image-preview": "large",
67+
"max-snippet": -1,
68+
},
69+
},
70+
verification: {
71+
google: "your-google-verification-code", // Add your Google Search Console verification code
72+
},
73+
alternates: {
74+
canonical: "https://zimbakov.dev",
4075
},
4176
};
4277

@@ -47,11 +82,13 @@ export default function RootLayout({
4782
}) {
4883
return (
4984
<html lang="en" className="scroll-smooth">
50-
<body
51-
className={`${poppins.className} bg-bg text-text-primary antialiased`}
52-
>
53-
{children}
85+
<head>
86+
<link rel="preconnect" href="https://fonts.googleapis.com" />
87+
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
88+
</head>
89+
<body className="bg-bg-primary text-text-primary antialiased">
90+
{children}
5491
</body>
5592
</html>
5693
);
57-
}
94+
}

‎app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1+
"use client";
12
import Header from "../components/Header";
23
import Hero from "../components/Hero";
3-
import Section from "../components/Section";
44
import About from "../components/About";
55
import ProjectsGrid from "../components/ProjectsGrid";
66
import Contact from "../components/Contact";
77
import Footer from "../components/Footer";
88

99
export default function Page() {
1010
return (
11-
<main>
11+
<main className="relative">
1212
<Header />
1313
<Hero />
1414
<About />
@@ -17,4 +17,4 @@ export default function Page() {
1717
<Footer />
1818
</main>
1919
);
20-
}
20+
}

‎components/About.tsx‎

Lines changed: 147 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,184 @@
1-
import { GraduationCap, Code, Brain, Coffee } from "lucide-react";
1+
import { GraduationCap, Code, Brain, Coffee, Zap, Target, Users, Lightbulb } from "lucide-react";
22
import { Reveal, RevealContainer } from "./animation/Reveal";
3+
import GlowCard from "./ui/GlowCard";
4+
import { motion } from "framer-motion";
35

46
const About = () => {
57
const highlights = [
68
{
79
icon: GraduationCap,
810
title: "Computer Science Student",
9-
description:
10-
"Currently pursuing my degree in Computer Science, focusing on software engineering principles and modern development practices.",
11+
description: "Pursuing my degree with focus on software engineering, algorithms, and modern development practices.",
12+
color: "#00d4ff",
1113
},
1214
{
1315
icon: Code,
14-
title: "Mobile App Developer",
15-
description:
16-
"Specialized in cross-platform Flutter development, creating seamless experiences for both iOS and Android platforms.",
16+
title: "Full-Stack Developer",
17+
description: "Specialized in cross-platform development, creating seamless experiences across web and mobile platforms.",
18+
color: "#8b5cf6",
1719
},
1820
{
1921
icon: Brain,
20-
title: "ML Enthusiast",
21-
description:
22-
"Passionate about machine learning and AI, building predictive models and exploring the future of intelligent applications.",
22+
title: "AI/ML Enthusiast",
23+
description: "Building intelligent applications and exploring the intersection of machine learning and user experience.",
24+
color: "#00ff88",
2325
},
2426
{
2527
icon: Coffee,
2628
title: "Problem Solver",
27-
description:
28-
"Love tackling complex challenges and turning ideas into reality through clean, efficient, and maintainable code.",
29+
description: "Passionate about tackling complex challenges and turning innovative ideas into reality through clean code.",
30+
color: "#f472b6",
2931
},
3032
];
3133

34+
const stats = [
35+
{ label: "Projects Completed", value: "15+", icon: Target },
36+
{ label: "Technologies Mastered", value: "12+", icon: Zap },
37+
{ label: "Lines of Code", value: "50K+", icon: Code },
38+
{ label: "Happy Clients", value: "8+", icon: Users },
39+
];
40+
41+
const skills = [
42+
{ category: "Frontend", items: ["React", "Next.js", "TypeScript", "Tailwind CSS"] },
43+
{ category: "Mobile", items: ["Flutter", "Dart", "React Native", "iOS/Android"] },
44+
{ category: "Backend", items: ["Python", "FastAPI", "Node.js", "PostgreSQL"] },
45+
{ category: "DevOps", items: ["Docker", "Nginx", "Git", "CI/CD"] },
46+
{ category: "AI/ML", items: ["TensorFlow", "PyTorch", "Scikit-learn", "OpenAI"] },
47+
{ category: "Tools", items: ["VS Code", "Figma", "Postman", "Firebase"] },
48+
];
49+
3250
return (
33-
<section id="about" className="py-10 px-4 sm:px-6 relative">
34-
<div className="pointer-events-none absolute -top-6 left-0 right-0 h-12 bg-gradient-to-b from-transparent to-bg" />
35-
<div className="container mx-auto max-w-6xl">
36-
<RevealContainer as="div" className="text-center mb-12 sm:mb-16">
37-
<Reveal as="h2">
38-
<span className="text-3xl sm:text-4xl md:text-5xl font-semibold text-text-primary mb-4 sm:mb-6 inline-block">
39-
About <span className="text-accent">Me</span>
51+
<section id="about" className="py-20 px-4 sm:px-6 relative">
52+
{/* Background Elements */}
53+
<div className="absolute inset-0 grid-pattern opacity-5" />
54+
55+
<div className="container mx-auto max-w-7xl relative z-10">
56+
<RevealContainer as="div" className="text-center mb-16">
57+
<Reveal as="div" className="mb-6">
58+
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass border border-accent-primary/30 text-sm font-medium text-accent-primary">
59+
<Lightbulb size={16} />
60+
About Me
4061
</span>
4162
</Reveal>
42-
<Reveal
43-
as="p"
44-
className="text-base sm:text-lg text-text-secondary max-w-3xl mx-auto leading-relaxed"
45-
>
46-
I&apos;m a passionate Computer Science student and developer who
47-
loves creating innovative solutions that make a real difference.
48-
From mobile applications to AI-powered platforms, I enjoy exploring
49-
the intersection of technology and user experience.
63+
64+
<Reveal as="h2" className="text-4xl sm:text-5xl lg:text-6xl font-display font-bold mb-6">
65+
Crafting Digital <span className="text-gradient">Experiences</span>
66+
</Reveal>
67+
68+
<Reveal as="p" className="text-lg sm:text-xl text-text-secondary max-w-4xl mx-auto leading-relaxed">
69+
I'm a passionate Computer Science student and developer who thrives on creating
70+
innovative solutions that make a real impact. My journey spans from mobile applications
71+
to AI-powered platforms, always exploring the cutting edge of technology.
5072
</Reveal>
5173
</RevealContainer>
5274

75+
{/* Highlights Grid */}
5376
<RevealContainer
5477
as="div"
55-
className="grid gap-6 sm:gap-8 md:grid-cols-2 lg:grid-cols-4 mb-12 sm:mb-16"
56-
stagger={0.12}
78+
className="grid gap-6 md:grid-cols-2 lg:grid-cols-4 mb-20"
79+
stagger={0.1}
5780
>
58-
{highlights.map((highlight) => (
59-
<Reveal
60-
key={highlight.title}
61-
as="div"
62-
className="group p-6 rounded-2xl bg-surface border border-border hover:border-accent/50 transition-all duration-300 hover:shadow-lg hover:shadow-accent/10"
63-
>
64-
<div className="mb-4">
65-
<highlight.icon className="w-8 h-8 text-accent group-hover:scale-110 transition-transform duration-300" />
66-
</div>
67-
<h3 className="font-semibold text-text-primary mb-3">
68-
{highlight.title}
69-
</h3>
70-
<p className="text-sm text-text-secondary leading-relaxed">
71-
{highlight.description}
72-
</p>
81+
{highlights.map((highlight, index) => (
82+
<Reveal key={highlight.title} as="div">
83+
<GlowCard glowColor={highlight.color} className="h-full">
84+
<div className="text-center">
85+
<motion.div
86+
className="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4"
87+
style={{ backgroundColor: `${highlight.color}20` }}
88+
whileHover={{ rotate: 360 }}
89+
transition={{ duration: 0.6 }}
90+
>
91+
<highlight.icon
92+
className="w-8 h-8"
93+
style={{ color: highlight.color }}
94+
/>
95+
</motion.div>
96+
<h3 className="font-semibold text-text-primary mb-3 text-lg">
97+
{highlight.title}
98+
</h3>
99+
<p className="text-sm text-text-secondary leading-relaxed">
100+
{highlight.description}
101+
</p>
102+
</div>
103+
</GlowCard>
73104
</Reveal>
74105
))}
75106
</RevealContainer>
107+
108+
{/* Stats Section */}
109+
<RevealContainer as="div" className="mb-20">
110+
<Reveal as="div" className="glass rounded-3xl p-8 lg:p-12">
111+
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
112+
{stats.map((stat, index) => (
113+
<motion.div
114+
key={stat.label}
115+
className="text-center"
116+
initial={{ opacity: 0, y: 20 }}
117+
whileInView={{ opacity: 1, y: 0 }}
118+
transition={{ delay: index * 0.1 }}
119+
viewport={{ once: true }}
120+
>
121+
<div className="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-accent-primary/20 mb-4">
122+
<stat.icon className="w-6 h-6 text-accent-primary" />
123+
</div>
124+
<div className="text-3xl lg:text-4xl font-bold text-gradient mb-2">
125+
{stat.value}
126+
</div>
127+
<div className="text-sm text-text-secondary font-medium">
128+
{stat.label}
129+
</div>
130+
</motion.div>
131+
))}
132+
</div>
133+
</Reveal>
134+
</RevealContainer>
135+
136+
{/* Skills Grid */}
137+
<RevealContainer as="div" className="grid gap-6 md:grid-cols-2 lg:grid-cols-3" stagger={0.1}>
138+
{skills.map((skillGroup, index) => (
139+
<Reveal key={skillGroup.category} as="div">
140+
<GlowCard className="h-full">
141+
<div className="mb-4">
142+
<h3 className="text-xl font-semibold text-text-primary mb-3">
143+
{skillGroup.category}
144+
</h3>
145+
</div>
146+
<div className="flex flex-wrap gap-2">
147+
{skillGroup.items.map((skill, skillIndex) => (
148+
<motion.span
149+
key={skill}
150+
className="px-3 py-1.5 text-sm bg-surface-secondary rounded-lg text-text-secondary border border-border-primary hover:border-accent-primary/50 transition-colors"
151+
initial={{ opacity: 0, scale: 0.8 }}
152+
whileInView={{ opacity: 1, scale: 1 }}
153+
transition={{ delay: index * 0.1 + skillIndex * 0.05 }}
154+
viewport={{ once: true }}
155+
whileHover={{ scale: 1.05 }}
156+
>
157+
{skill}
158+
</motion.span>
159+
))}
160+
</div>
161+
</GlowCard>
162+
</Reveal>
163+
))}
164+
</RevealContainer>
165+
166+
{/* Personal Touch */}
167+
<RevealContainer as="div" className="mt-20">
168+
<Reveal as="div" className="glass rounded-3xl p-8 lg:p-12 text-center">
169+
<h3 className="text-2xl lg:text-3xl font-display font-bold text-text-primary mb-6">
170+
Beyond the Code
171+
</h3>
172+
<p className="text-lg text-text-secondary max-w-3xl mx-auto leading-relaxed">
173+
When I'm not coding, you'll find me exploring the latest tech trends,
174+
contributing to open-source projects, or mentoring fellow developers.
175+
I believe in continuous learning and sharing knowledge with the community.
176+
</p>
177+
</Reveal>
178+
</RevealContainer>
76179
</div>
77180
</section>
78181
);
79182
};
80183

81-
export default About;
184+
export default About;

0 commit comments

Comments
 (0)