|
1 | 1 | --- |
2 | | -const cards = [ |
3 | | - { |
4 | | - title: 'Languages', |
5 | | - icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`, |
6 | | - items: ['Java', 'C#', 'Python', 'JavaScript', 'Dart', 'Rust'], |
7 | | - span: 'lg:col-span-2', |
8 | | - accent: true, |
9 | | - }, |
10 | | - { |
11 | | - title: 'Web', |
12 | | - icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>`, |
13 | | - items: ['HTML', 'CSS', 'Node.js', 'REST APIs'], |
14 | | - span: '', |
15 | | - accent: false, |
16 | | - }, |
17 | | - { |
18 | | - title: 'Mobile', |
19 | | - icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>`, |
20 | | - items: ['Flutter', 'Kivy'], |
21 | | - span: '', |
22 | | - accent: false, |
23 | | - }, |
24 | | - { |
25 | | - title: 'Cloud & Databases', |
26 | | - icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>`, |
27 | | - items: ['Azure', 'Firebase', 'SQL'], |
28 | | - span: '', |
29 | | - accent: false, |
30 | | - }, |
31 | | - { |
32 | | - title: 'Tools & Practices', |
33 | | - icon: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>`, |
34 | | - items: ['Git', 'CI/CD (GitHub Actions)', 'Unit testing (pytest)', 'Agile', 'Async & network programming'], |
35 | | - span: '', |
36 | | - accent: false, |
37 | | - }, |
| 2 | +const stats = [ |
| 3 | + { value: 6, suffix: '', label: 'Certifications' }, |
| 4 | + { value: 5, suffix: '', label: 'Featured projects' }, |
| 5 | + { value: 14, suffix: '', label: 'Core technologies' }, |
| 6 | + { value: null, text: 'NQF 6', label: 'Qualification' }, |
| 7 | +] |
| 8 | +
|
| 9 | +const groups = [ |
| 10 | + { title: 'Languages', items: ['Java', 'C#', 'Python', 'JavaScript', 'SQL', 'Dart', 'Rust'] }, |
| 11 | + { title: 'Web', items: ['HTML', 'CSS', 'Node.js', 'REST APIs'] }, |
| 12 | + { title: 'Mobile', items: ['Flutter', 'Dart', 'Kivy'] }, |
| 13 | + { title: 'Cloud & Databases', items: ['Azure', 'Firebase'] }, |
| 14 | + { title: 'Tools & Practices', items: ['Git', 'CI/CD (GitHub Actions)', 'Unit testing (pytest)', 'Agile', 'Async & network programming'] }, |
38 | 15 | ] |
39 | 16 | --- |
40 | 17 |
|
41 | 18 | <section id="about" class="py-28 lg:py-36"> |
42 | | - <div class="container"> |
| 19 | + <div class="container-wide"> |
| 20 | + |
| 21 | + <div class="grid grid-cols-1 lg:grid-cols-[1fr_0.85fr] gap-14 lg:gap-20 items-start"> |
43 | 22 |
|
44 | | - <div class="mb-14" data-reveal> |
45 | | - <div class="section-tag"> |
46 | | - <span class="inline-block w-6 h-px" style="background: var(--accent)"></span> |
47 | | - What I build |
| 23 | + <!-- Statement --> |
| 24 | + <div data-reveal> |
| 25 | + <div class="section-tag"> |
| 26 | + <span class="eyebrow-line"></span> |
| 27 | + About |
| 28 | + </div> |
| 29 | + <h2 class="h-display mb-6"> |
| 30 | + I build the whole product,<br class="hidden sm:block" /> |
| 31 | + <span class="gradient-text">front to back.</span> |
| 32 | + </h2> |
| 33 | + <p class="leading-relaxed mb-5" style="color: var(--muted); font-size: 1.08rem; max-width: 560px"> |
| 34 | + Full-stack developer based in Germiston. I work across web front-ends and |
| 35 | + back-ends in Java, C#, Python and Node.js, and cross-platform mobile apps |
| 36 | + in Flutter and Dart, from concept and UI through to database work and |
| 37 | + deployment. |
| 38 | + </p> |
| 39 | + <p class="leading-relaxed" style="color: var(--muted); font-size: 1.08rem; max-width: 560px"> |
| 40 | + I'm completing a Software Engineer qualification (NQF 6) with CTU and hold |
| 41 | + a range of MICT SETA and Microsoft certifications. Open to full-time, |
| 42 | + part-time, contract, and freelance work. |
| 43 | + </p> |
48 | 44 | </div> |
49 | | - <h2 class="font-display font-bold tracking-tight" style="font-size: clamp(2rem, 4vw, 3rem)"> |
50 | | - Technical Expertise |
51 | | - </h2> |
52 | | - <p class="mt-4 max-w-lg" style="color: var(--muted)"> |
53 | | - From concept to deployment across web and mobile. |
54 | | - </p> |
| 45 | + |
| 46 | + <!-- Stats --> |
| 47 | + <div class="grid grid-cols-2 gap-4" data-reveal-stagger> |
| 48 | + {stats.map(stat => ( |
| 49 | + <div class="card p-6 flex flex-col gap-2"> |
| 50 | + <div class="stat__num"> |
| 51 | + {stat.value !== null ? ( |
| 52 | + <span data-count={stat.value}>0</span> |
| 53 | + ) : ( |
| 54 | + <span>{stat.text}</span> |
| 55 | + )} |
| 56 | + {stat.suffix} |
| 57 | + </div> |
| 58 | + <p class="text-sm font-medium" style="color: var(--muted)">{stat.label}</p> |
| 59 | + </div> |
| 60 | + ))} |
| 61 | + </div> |
| 62 | + |
55 | 63 | </div> |
56 | 64 |
|
57 | | - <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" data-reveal-stagger> |
58 | | - {cards.map(card => ( |
59 | | - <div |
60 | | - class={`card p-8 flex flex-col gap-5 ${card.span}`} |
61 | | - style={card.accent ? 'background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(167,139,250,0.04))' : ''} |
62 | | - > |
63 | | - <div |
64 | | - class="w-12 h-12 rounded-xl flex items-center justify-center" |
65 | | - style="background: rgba(124,92,255,0.12); color: var(--accent)" |
66 | | - aria-hidden="true" |
67 | | - set:html={card.icon} |
68 | | - /> |
69 | | - <h3 class="font-display font-semibold text-xl">{card.title}</h3> |
70 | | - <ul class="space-y-2.5"> |
71 | | - {card.items.map(item => ( |
72 | | - <li class="flex items-start gap-3 text-sm" style="color: var(--muted)"> |
73 | | - <span class="mt-1.5 w-1 h-1 rounded-full flex-shrink-0" style="background: var(--accent-2)"></span> |
74 | | - {item} |
75 | | - </li> |
76 | | - ))} |
77 | | - </ul> |
78 | | - </div> |
79 | | - ))} |
| 65 | + <!-- Skill groups --> |
| 66 | + <div class="mt-20 lg:mt-24"> |
| 67 | + <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-9" data-reveal-stagger> |
| 68 | + {groups.map(group => ( |
| 69 | + <div> |
| 70 | + <h3 class="text-xs font-semibold uppercase tracking-[0.18em] mb-4" style="color: var(--accent)"> |
| 71 | + {group.title} |
| 72 | + </h3> |
| 73 | + <div class="flex flex-wrap gap-2.5"> |
| 74 | + {group.items.map(item => ( |
| 75 | + <span class="chip"><span class="chip__dot"></span>{item}</span> |
| 76 | + ))} |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + ))} |
| 80 | + </div> |
80 | 81 | </div> |
81 | 82 |
|
82 | 83 | </div> |
|
0 commit comments