Skip to content

Commit c53c6ef

Browse files
gulec2000gulec2000
committed
edit bento skills
1 parent c9605b1 commit c53c6ef

5 files changed

Lines changed: 203 additions & 149 deletions

File tree

‎frontend/src/App.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import "@/App.css";
2-
import { LanguageProvider } from "@/context/LanguageContext";
3-
import Sidebar from "@/components/Sidebar";
4-
import Hero from "@/components/Hero";
5-
import Experience from "@/components/Experience";
6-
import Projects from "@/components/Projects";
7-
import Skills from "@/components/Skills";
8-
import Blog from "@/components/Blog";
9-
import Contact from "@/components/Contact";
2+
import { LanguageProvider } from "./context/LanguageContext";
3+
import Sidebar from "./components/Sidebar";
4+
import Hero from "./components/Hero";
5+
import Experience from "./components/Experience";
6+
import Projects from "./components/Projects";
7+
import SkillsBento from "./components/SkillsBento";
8+
import Blog from "./components/Blog";
9+
import Contact from "./Contact";
1010

1111
function App() {
1212
return (
@@ -17,7 +17,7 @@ function App() {
1717
<Hero />
1818
<Experience />
1919
<Projects />
20-
<Skills />
20+
<SkillsBento />
2121
<Blog />
2222
<Contact />
2323
<footer className="border-t border-zinc-800 py-8 px-6 md:px-12">

‎frontend/src/components/Sidebar.js‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { useState } from "react";
2-
import { useLang } from "@/context/LanguageContext";
3-
import { contactInfo } from "@/data/translations";
2+
import { useLang } from "../context/LanguageContext";
3+
import { contactInfo } from "../data/translations";
44
import { Menu, X, Download } from "lucide-react";
5-
import { motion, AnimatePresence } from "framer-motion";
6-
import VisitorCounter from "./VisitorCounter"; // Import the new component
7-
import myCV from '../Serdar_Gulec_CV.pdf';
5+
import { motion, AnimatePresence } from "motion/react";
6+
import VisitorCounter from "../VisitorCounter";
87

98
const navKeys = ["about", "experience", "projects", "skills", "blog", "contact"];
109

11-
function NavLinks({ onClick }) {
10+
function NavLinks({ onClick }: { onClick?: () => void }) {
1211
const { t } = useLang();
1312
return (
1413
<nav className="flex flex-col gap-1">
@@ -20,7 +19,7 @@ function NavLinks({ onClick }) {
2019
onClick={onClick}
2120
className="nav-link font-mono text-xs tracking-[0.2em] uppercase text-zinc-400 hover:text-amber-400 transition-colors py-2 px-3 rounded-sm hover:bg-zinc-900"
2221
>
23-
{t.nav[key]}
22+
{t.nav[key as keyof typeof t.nav]}
2423
</a>
2524
))}
2625
</nav>
@@ -83,11 +82,10 @@ export default function Sidebar() {
8382
<NavLinks />
8483
</div>
8584
<div className="flex flex-col gap-5">
86-
<VisitorCounter /> {/* Real-time counter added here */}
85+
<VisitorCounter />
8786
<LangToggle />
8887
<a
89-
href={myCV}
90-
download="Serdar_Gulec_CV.pdf"
88+
href="#"
9189
data-testid="cv-download-button"
9290
className="flex items-center gap-2 border border-zinc-700 hover:border-amber-500/60 text-zinc-400 hover:text-amber-400 font-mono text-xs tracking-wider uppercase px-3 py-2 rounded-sm transition-colors"
9391
>
@@ -130,11 +128,10 @@ export default function Sidebar() {
130128
>
131129
<NavLinks onClick={() => setMobileOpen(false)} />
132130
<div className="w-full max-w-[200px]">
133-
<VisitorCounter /> {/* Also added to mobile menu */}
131+
<VisitorCounter />
134132
</div>
135133
<a
136-
href={myCV}
137-
download="Serdar_Gulec_CV.pdf"
134+
href="#"
138135
onClick={() => setMobileOpen(false)}
139136
className="flex items-center gap-2 border border-zinc-700 text-zinc-400 hover:text-amber-400 font-mono text-xs tracking-wider uppercase px-4 py-2.5 rounded-sm transition-colors"
140137
>
@@ -147,4 +144,4 @@ export default function Sidebar() {
147144
</AnimatePresence>
148145
</>
149146
);
150-
}
147+
}

‎frontend/src/components/SkillsBento.js‎

Lines changed: 156 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import React from 'react';
22
import { motion } from 'motion/react';
3+
import { useLang } from "../context/LanguageContext";
34
import {
4-
Code2,
5-
Cpu,
65
Globe,
76
Layers,
8-
Layout,
9-
MessageSquare,
10-
Smartphone,
117
Zap,
128
Terminal,
139
Database,
14-
Palette
10+
Cloud,
11+
ShieldCheck,
12+
Activity,
13+
Anchor,
14+
GitBranch,
15+
Settings
1516
} from 'lucide-react';
1617

1718
const SkillCard = ({
@@ -52,118 +53,168 @@ const SkillCard = ({
5253
);
5354

5455
export default function SkillsBento() {
56+
const { t } = useLang();
57+
5558
return (
56-
<section className="py-24 px-6 max-w-7xl mx-auto">
57-
<div className="mb-12">
58-
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4 uppercase tracking-tighter">
59-
Technical <span className="text-amber-500">Arsenal</span>
60-
</h2>
61-
<p className="text-zinc-400 max-w-2xl font-mono text-sm">
62-
A curated selection of technologies and tools I use to bring digital experiences to life.
63-
</p>
59+
<section id="skills" className="py-24 md:py-32 px-6 md:px-12 border-t border-zinc-800 relative overflow-hidden">
60+
{/* Subtle background texture */}
61+
<div className="absolute inset-0 opacity-[0.02] pointer-events-none">
62+
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')]" />
6463
</div>
6564

66-
<div className="grid grid-cols-1 md:grid-cols-4 md:grid-rows-3 gap-4 h-auto md:h-[800px]">
67-
{/* Main Skill - React/Frontend (Large) */}
68-
<SkillCard
69-
title="Frontend Engineering"
70-
icon={Layout}
71-
className="md:col-span-2 md:row-span-2"
72-
delay={0.1}
73-
>
74-
<p className="text-zinc-400 text-sm mb-6">
75-
Building highly interactive, performant, and accessible user interfaces using modern frameworks.
76-
</p>
77-
<div className="bg-zinc-950 rounded-xl p-4 border border-zinc-800 font-mono text-[11px] text-zinc-500 overflow-hidden">
78-
<div className="flex gap-2 mb-2">
79-
<div className="w-2 h-2 rounded-full bg-red-500/50" />
80-
<div className="w-2 h-2 rounded-full bg-amber-500/50" />
81-
<div className="w-2 h-2 rounded-full bg-green-500/50" />
65+
<div className="max-w-7xl mx-auto relative z-10">
66+
<div className="mb-12">
67+
<motion.h2
68+
initial={{ opacity: 0, y: 20 }}
69+
whileInView={{ opacity: 1, y: 0 }}
70+
viewport={{ once: true }}
71+
className="font-heading text-3xl sm:text-4xl font-bold uppercase tracking-tight text-white mb-2"
72+
>
73+
{t.skills.title}
74+
</motion.h2>
75+
<p className="font-mono text-sm text-zinc-500 mb-4">{t.skills.subtitle}</p>
76+
<div className="h-px w-16 bg-amber-500 mb-12" />
77+
</div>
78+
79+
<div className="grid grid-cols-1 md:grid-cols-4 md:grid-rows-3 gap-4 h-auto md:h-[850px]">
80+
{/* Main Skill - Platform Engineering (Large) */}
81+
<SkillCard
82+
title="Platform Engineering"
83+
icon={Cloud}
84+
className="md:col-span-2 md:row-span-2"
85+
delay={0.1}
86+
>
87+
<p className="text-zinc-400 text-sm mb-6">
88+
Orchestrating mission-critical workloads on OpenShift and Kubernetes with a focus on high availability and scalability.
89+
</p>
90+
<div className="bg-zinc-950 rounded-xl p-4 border border-zinc-800 font-mono text-[11px] text-zinc-500 overflow-hidden">
91+
<div className="flex items-center justify-between mb-3 border-b border-zinc-800 pb-2">
92+
<span className="text-amber-500/80">cluster-status.sh</span>
93+
<div className="flex gap-1">
94+
<div className="w-1.5 h-1.5 rounded-full bg-green-500" />
95+
<span className="text-[9px] text-green-500/70 uppercase">Healthy</span>
96+
</div>
97+
</div>
98+
<div className="space-y-1">
99+
<div className="flex justify-between">
100+
<span>Nodes:</span>
101+
<span className="text-zinc-300">Ready (12/12)</span>
102+
</div>
103+
<div className="flex justify-between">
104+
<span>Deployments:</span>
105+
<span className="text-zinc-300">Synced (ArgoCD)</span>
106+
</div>
107+
<div className="flex justify-between">
108+
<span>Operators:</span>
109+
<span className="text-zinc-300">Up-to-date</span>
110+
</div>
111+
</div>
112+
</div>
113+
</SkillCard>
114+
115+
{/* Infrastructure as Code (Medium) */}
116+
<SkillCard
117+
title="Infrastructure as Code"
118+
icon={Layers}
119+
className="md:col-span-2 md:row-span-1"
120+
delay={0.2}
121+
>
122+
<div className="bg-zinc-950 rounded-xl p-3 border border-zinc-800 font-mono text-[10px] text-zinc-500">
123+
<code className="block">
124+
<span className="text-purple-400">resource</span> <span className="text-amber-500">"aws_instance"</span> <span className="text-blue-400">"web"</span> &#123;<br />
125+
&nbsp;&nbsp;<span className="text-zinc-400">ami</span> = <span className="text-green-400">data.ami.id</span><br />
126+
&nbsp;&nbsp;<span className="text-zinc-400">instance_type</span> = <span className="text-green-400">"t3.medium"</span><br />
127+
&#125;
128+
</code>
82129
</div>
83-
<code className="block">
84-
<span className="text-purple-400">const</span> <span className="text-blue-400">Portfolio</span> = () =&gt; &#123; <br />
85-
&nbsp;&nbsp;<span className="text-purple-400">return</span> (<br />
86-
&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span className="text-amber-500">motion.div</span><br />
87-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="text-blue-300">animate</span>=&#123;&#123; <span className="text-blue-300">scale</span>: <span className="text-orange-400">1</span> &#125;&#125;<br />
88-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span className="text-blue-300">whileHover</span>=&#123;&#123; <span className="text-blue-300">y</span>: -<span className="text-orange-400">5</span> &#125;&#125;<br />
89-
&nbsp;&nbsp;&nbsp;&nbsp;/&gt;<br />
90-
&nbsp;&nbsp;);<br />
91-
&#125;;
92-
</code>
93-
</div>
94-
</SkillCard>
130+
</SkillCard>
131+
132+
{/* CI/CD & GitOps (Small) */}
133+
<SkillCard
134+
title="GitOps & CI/CD"
135+
icon={GitBranch}
136+
delay={0.3}
137+
>
138+
<div className="flex items-center gap-2 mt-2">
139+
<div className="flex -space-x-2">
140+
<div className="w-6 h-6 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">Git</div>
141+
<div className="w-6 h-6 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">Argo</div>
142+
<div className="w-6 h-6 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">Helm</div>
143+
</div>
144+
</div>
145+
</SkillCard>
95146

96-
{/* Performance (Medium) */}
97-
<SkillCard
98-
title="Optimization"
99-
icon={Zap}
100-
className="md:col-span-2 md:row-span-1"
101-
delay={0.2}
102-
>
103-
<div className="flex items-end gap-4">
104-
<div className="flex-1">
105-
<div className="h-2 bg-zinc-800 rounded-full overflow-hidden">
147+
{/* Monitoring (Small) */}
148+
<SkillCard
149+
title="Observability"
150+
icon={Activity}
151+
delay={0.4}
152+
>
153+
<div className="mt-2 h-8 flex items-end gap-0.5">
154+
{[40, 70, 45, 90, 65, 80, 50, 85].map((h, i) => (
106155
<motion.div
107-
initial={{ width: 0 }}
108-
whileInView={{ width: '98%' }}
109-
transition={{ duration: 1.5, delay: 0.5 }}
110-
className="h-full bg-amber-500"
156+
key={i}
157+
initial={{ height: 0 }}
158+
whileInView={{ height: `${h}%` }}
159+
transition={{ duration: 0.5, delay: 0.5 + (i * 0.05) }}
160+
className="flex-1 bg-amber-500/40 rounded-t-sm"
111161
/>
112-
</div>
113-
<div className="flex justify-between mt-2 font-mono text-[10px] text-zinc-500 uppercase">
114-
<span>Lighthouse Score</span>
115-
<span className="text-amber-500">98/100</span>
116-
</div>
162+
))}
117163
</div>
118-
</div>
119-
</SkillCard>
164+
</SkillCard>
120165

121-
{/* Architecture (Small) */}
122-
<SkillCard
123-
title="Architecture"
124-
icon={Layers}
125-
delay={0.3}
126-
/>
166+
{/* Automation (Small) */}
167+
<SkillCard
168+
title="Automation"
169+
icon={Terminal}
170+
className="md:col-span-1 md:row-span-1"
171+
delay={0.5}
172+
/>
127173

128-
{/* Backend (Small) */}
129-
<SkillCard
130-
title="Backend"
131-
icon={Database}
132-
delay={0.4}
133-
/>
174+
{/* Cloud Providers (Medium) */}
175+
<SkillCard
176+
title="Cloud Ecosystem"
177+
icon={Globe}
178+
className="md:col-span-2 md:row-span-1"
179+
delay={0.6}
180+
>
181+
<div className="flex flex-wrap gap-2 mt-2">
182+
{['AWS', 'Azure', 'OpenShift', 'GitLab'].map(tag => (
183+
<span key={tag} className="px-2 py-1 bg-zinc-800/50 rounded-md text-[10px] font-mono text-zinc-400 border border-zinc-700/50">
184+
{tag}
185+
</span>
186+
))}
187+
</div>
188+
</SkillCard>
134189

135-
{/* Mobile (Small) */}
136-
<SkillCard
137-
title="Mobile First"
138-
icon={Smartphone}
139-
className="md:col-span-1 md:row-span-1"
140-
delay={0.5}
141-
/>
190+
{/* Security (Small) */}
191+
<SkillCard
192+
title="Cloud Security"
193+
icon={ShieldCheck}
194+
delay={0.7}
195+
/>
196+
</div>
142197

143-
{/* Design (Medium) */}
144-
<SkillCard
145-
title="UI/UX Design"
146-
icon={Palette}
147-
className="md:col-span-2 md:row-span-1"
148-
delay={0.6}
149-
>
150-
<div className="flex gap-2 mt-2">
151-
{['#F59E0B', '#18181B', '#27272A', '#3F3F46'].map(color => (
152-
<div
153-
key={color}
154-
className="w-6 h-6 rounded-lg border border-white/10"
155-
style={{ backgroundColor: color }}
156-
/>
157-
))}
198+
{/* Certifications */}
199+
{t.skills.certifications && (
200+
<div className="mt-16">
201+
<h3 className="font-heading text-xl font-bold uppercase tracking-tight text-white mb-2">
202+
{t.skills.certTitle}
203+
</h3>
204+
<div className="h-px w-12 bg-amber-500 mb-6" />
205+
<div className="flex flex-wrap gap-2">
206+
{t.skills.certifications.map((cert: string) => (
207+
<span
208+
key={cert}
209+
className="font-mono text-[11px] tracking-wider text-amber-500/80 border border-zinc-800 bg-[#121212]/60 px-3 py-1.5 rounded-sm hover:border-amber-500/40 hover:bg-[#121212] transition-colors cursor-default flex items-center"
210+
>
211+
<ShieldCheck size={10} className="mr-1.5 opacity-60" />
212+
{cert}
213+
</span>
214+
))}
215+
</div>
158216
</div>
159-
</SkillCard>
160-
161-
{/* Terminal/DevOps (Small) */}
162-
<SkillCard
163-
title="DevOps"
164-
icon={Terminal}
165-
delay={0.7}
166-
/>
217+
)}
167218
</div>
168219
</section>
169220
);

0 commit comments

Comments
 (0)