Skip to content

Commit d3bc28c

Browse files
Klaynight-devKlaynight-dev
committed
style: remove personal details, remove crossed-out headers, fix notebook padding, and scale up font size
1 parent 886c9f1 commit d3bc28c

5 files changed

Lines changed: 52 additions & 94 deletions

File tree

‎src/App.svelte‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
<!-- Main container holding sidebar, content, and the marker tray -->
102102
<div class="min-h-screen bg-whiteboard text-slate-800 flex flex-col items-center py-6 px-4 md:py-10 relative">
103103

104-
<div class="w-full max-w-6xl flex flex-col lg:flex-row gap-6 items-stretch relative">
104+
<div class="w-full max-w-7xl flex flex-col lg:flex-row gap-6 items-stretch relative">
105105

106106
<!-- Toast Notification -->
107107
{#if showToast}
@@ -184,7 +184,6 @@
184184
<Papicon icon="graduation-hat" size={20} />
185185
</span>
186186
<h3 class="text-lg font-hand font-bold text-slate-800 flex items-center gap-2">
187-
<span class="rature-marker text-slate-400 font-normal">Études</span>
188187
<span>Parcours Scolaire</span>
189188
</h3>
190189
</div>
@@ -194,10 +193,10 @@
194193
{@const dotColor = dotColors[i % dotColors.length]}
195194
<div class="relative py-1">
196195
<div class="absolute w-3.5 h-3.5 rounded-full {dotColor} -left-[31px] top-2.5 border-2 border-white"></div>
197-
<span class="text-xs font-hand font-bold text-[var(--marker-color)] uppercase tracking-wider">{item.date}</span>
198-
<h4 class="text-sm font-hand font-bold text-slate-900 mt-1">{item.title}</h4>
199-
<p class="text-xs text-slate-500 font-marker mt-0.5">{item.subtitle}</p>
200-
<p class="text-xs text-slate-655 mt-2 leading-relaxed font-sans">{item.description}</p>
196+
<span class="text-sm font-hand font-bold text-[var(--marker-color)] uppercase tracking-wider">{item.date}</span>
197+
<h4 class="text-base font-hand font-bold text-slate-900 mt-1">{item.title}</h4>
198+
<p class="text-sm text-slate-500 font-marker mt-0.5">{item.subtitle}</p>
199+
<p class="text-sm text-slate-655 mt-2 leading-relaxed font-sans">{item.description}</p>
201200
</div>
202201
{/each}
203202
</div>
@@ -210,7 +209,6 @@
210209
<Papicon icon="briefcase" size={20} />
211210
</span>
212211
<h3 class="text-lg font-hand font-bold text-slate-800 flex items-center gap-2">
213-
<span class="rature-marker-double text-slate-400 font-normal">Job</span>
214212
<span>Expériences</span>
215213
</h3>
216214
</div>
@@ -220,12 +218,12 @@
220218
{@const dotColor = dotColors[i % dotColors.length]}
221219
<div class="relative py-1">
222220
<div class="absolute w-3.5 h-3.5 rounded-full {dotColor} -left-[31px] top-2.5 border-2 border-white"></div>
223-
<span class="text-xs font-hand font-bold text-[var(--marker-color)] uppercase tracking-wider">{item.date}</span>
224-
<h4 class="text-sm font-hand font-bold text-slate-900 mt-1">{item.title}</h4>
225-
<p class="text-xs text-slate-500 font-marker mt-0.5">{item.subtitle}</p>
226-
<p class="text-xs text-slate-655 mt-2 leading-relaxed font-sans">{item.description}</p>
221+
<span class="text-sm font-hand font-bold text-[var(--marker-color)] uppercase tracking-wider">{item.date}</span>
222+
<h4 class="text-base font-hand font-bold text-slate-900 mt-1">{item.title}</h4>
223+
<p class="text-sm text-slate-500 font-marker mt-0.5">{item.subtitle}</p>
224+
<p class="text-sm text-slate-655 mt-2 leading-relaxed font-sans">{item.description}</p>
227225
{#if item.url}
228-
<a href={item.url} target="_blank" rel="noopener noreferrer" class="text-xs text-[var(--marker-color)] font-bold hover:underline mt-2 inline-block font-hand">
226+
<a href={item.url} target="_blank" rel="noopener noreferrer" class="text-sm text-[var(--marker-color)] font-bold hover:underline mt-2 inline-block font-hand">
229227
{item.urlLabel || "Lien"} →
230228
</a>
231229
{/if}
@@ -237,7 +235,6 @@
237235
<!-- 6 competencies as colored sticky notes -->
238236
<div>
239237
<h3 class="text-lg font-hand font-bold text-slate-800 mb-4 flex items-center gap-2">
240-
<span class="rature-marker text-slate-400 font-normal">Compétences</span>
241238
<span>Compétences Clés</span>
242239
</h3>
243240
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -250,11 +247,11 @@
250247
<div class="post-it post-it-{color} {rotation} rounded-xl p-4 flex flex-col gap-2 relative">
251248
<div class="tape-torn tape-{tapeColor} absolute top-[-9px] left-[35%] w-16 h-5 opacity-70"></div>
252249

253-
<h4 class="text-xs font-hand font-bold text-slate-800">{competence.title}</h4>
250+
<h4 class="text-sm font-hand font-bold text-slate-800">{competence.title}</h4>
254251
<div class="flex flex-wrap gap-2 mt-2">
255252
{#each competence.links as link}
256253
<a href={link.url} target="_blank" rel="noopener noreferrer"
257-
class="text-[10px] px-2 py-0.5 bg-white/70 hover:bg-white border-2 border-slate-700 text-slate-800 rounded font-marker transition-all transform hover:scale-105 inline-flex items-center gap-1">
254+
class="text-xs px-2 py-0.5 bg-white/70 hover:bg-white border-2 border-slate-700 text-slate-800 rounded font-marker transition-all transform hover:scale-105 inline-flex items-center gap-1">
258255
<span class="text-slate-500"><Papicon icon="link" size={10} /></span> {link.label}
259256
</a>
260257
{/each}
@@ -272,7 +269,6 @@
272269
<Papicon icon="grid" size={20} />
273270
</span>
274271
<h3 class="text-lg font-hand font-bold text-slate-800 flex items-center gap-2">
275-
<span class="rature-marker text-slate-400 font-normal">Projets Pro</span>
276272
<span>Tous mes projets</span>
277273
</h3>
278274
</div>
@@ -328,18 +324,18 @@
328324
</div>
329325

330326
<div class="p-5 flex flex-col gap-3 flex-1">
331-
<span class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 bg-white/60 text-slate-700 w-fit rounded font-hand">
327+
<span class="text-xs font-bold uppercase tracking-wider px-2 py-0.5 bg-white/60 text-slate-700 w-fit rounded font-hand">
332328
{project.category}
333329
</span>
334-
<h4 class="text-base font-hand font-bold text-slate-900 group-hover:text-[var(--marker-color)] transition-colors">
330+
<h4 class="text-lg font-hand font-bold text-slate-900 group-hover:text-[var(--marker-color)] transition-colors">
335331
{project.title}
336332
</h4>
337-
<p class="text-xs text-slate-700 leading-relaxed flex-1 font-marker">
333+
<p class="text-sm text-slate-700 leading-relaxed flex-1 font-marker">
338334
{project.description}
339335
</p>
340336
<div class="flex flex-wrap gap-1 mt-2">
341337
{#each project.tags as tag}
342-
<span class="text-[9px] px-1.5 py-0.5 bg-white/40 text-slate-650 rounded border border-slate-300 font-hand">
338+
<span class="text-xs px-1.5 py-0.5 bg-white/40 text-slate-650 rounded border border-slate-300 font-hand">
343339
#{tag}
344340
</span>
345341
{/each}
@@ -367,7 +363,6 @@
367363
<Papicon icon="mail" size={20} />
368364
</span>
369365
<h3 class="text-lg font-hand font-bold text-slate-800 flex items-center gap-2">
370-
<span class="rature-marker-double text-slate-400 font-normal">Contactez-moi</span>
371366
<span>Formulaire de contact</span>
372367
</h3>
373368
</div>
@@ -376,45 +371,45 @@
376371
<!-- Form -->
377372
<form onsubmit={handleMockSubmit} class="flex flex-col gap-4">
378373
<div class="flex flex-col gap-1.5">
379-
<label for="fullname" class="text-xs text-slate-700 font-hand font-bold">Nom complet</label>
374+
<label for="fullname" class="text-sm text-slate-700 font-hand font-bold">Nom complet</label>
380375
<input
381376
type="text"
382377
id="fullname"
383378
bind:value={fullname}
384379
required
385380
placeholder="Ex: John Doe"
386-
class="px-4 py-2.5 bg-white border-2 border-slate-700 focus:border-[var(--marker-color)] rounded-xl text-sm text-slate-800 outline-none transition-colors border-sketch font-hand"
381+
class="px-4 py-2.5 bg-white border-2 border-slate-700 focus:border-[var(--marker-color)] rounded-xl text-base text-slate-800 outline-none transition-colors border-sketch font-hand"
387382
/>
388383
</div>
389384

390385
<div class="flex flex-col gap-1.5">
391-
<label for="email" class="text-xs text-slate-700 font-hand font-bold">Adresse Email</label>
386+
<label for="email" class="text-sm text-slate-700 font-hand font-bold">Adresse Email</label>
392387
<input
393388
type="email"
394389
id="email"
395390
bind:value={email}
396391
required
397392
placeholder="Ex: john@example.com"
398-
class="px-4 py-2.5 bg-white border-2 border-slate-700 focus:border-[var(--marker-color)] rounded-xl text-sm text-slate-800 outline-none transition-colors border-sketch font-hand"
393+
class="px-4 py-2.5 bg-white border-2 border-slate-700 focus:border-[var(--marker-color)] rounded-xl text-base text-slate-800 outline-none transition-colors border-sketch font-hand"
399394
/>
400395
</div>
401396

402397
<div class="flex flex-col gap-1.5">
403-
<label for="message" class="text-xs text-slate-700 font-hand font-bold">Votre message</label>
398+
<label for="message" class="text-sm text-slate-700 font-hand font-bold">Votre message</label>
404399
<textarea
405400
id="message"
406401
bind:value={message}
407402
required
408403
rows="4"
409404
placeholder="Écrivez votre message ici..."
410-
class="px-4 py-2.5 bg-white border-2 border-slate-700 focus:border-[var(--marker-color)] rounded-xl text-sm text-slate-800 outline-none resize-none transition-colors border-sketch font-hand"
405+
class="px-4 py-2.5 bg-white border-2 border-slate-700 focus:border-[var(--marker-color)] rounded-xl text-base text-slate-800 outline-none resize-none transition-colors border-sketch font-hand"
411406
></textarea>
412407
</div>
413408

414409
<button
415410
type="submit"
416411
disabled={isSending}
417-
class="btn-sketch self-end font-hand py-2 px-5 cursor-pointer text-xs flex items-center gap-1.5"
412+
class="btn-sketch self-end font-hand py-2 px-5 cursor-pointer text-sm flex items-center gap-1.5"
418413
>
419414
{isSending ? "Envoi en cours..." : "Envoyer le message"}
420415
{#if !isSending}
@@ -439,11 +434,11 @@
439434

440435
<div class="pl-8">
441436
<div class="text-[var(--marker-color)]"><Mail size={20} /></div>
442-
<h4 class="text-sm font-hand font-bold text-slate-800 mt-2">Contact direct</h4>
443-
<p class="text-xs text-slate-650 leading-relaxed mt-2 font-marker">
437+
<h4 class="text-base font-hand font-bold text-slate-800 mt-2">Contact direct</h4>
438+
<p class="text-sm text-slate-650 leading-relaxed mt-2 font-marker">
444439
Le formulaire de contact ci-contre simule une soumission locale. Pour toute demande professionnelle, vous pouvez me contacter directement par mail à :
445440
</p>
446-
<a href="mailto:{personalInfo.email}" class="text-sm text-[var(--marker-color)] hover:underline font-bold mt-2 block font-hand">
441+
<a href="mailto:{personalInfo.email}" class="text-base text-[var(--marker-color)] hover:underline font-bold mt-2 block font-hand">
447442
{personalInfo.email}
448443
</a>
449444
</div>
@@ -470,7 +465,7 @@
470465
</div>
471466

472467
<!-- Footer details -->
473-
<footer class="text-[10px] text-slate-500 font-hand text-center py-2 shrink-0">
468+
<footer class="text-xs text-slate-500 font-hand text-center py-2 shrink-0">
474469
© {new Date().getFullYear()} {personalInfo.name}. Conçu avec Svelte 5 & Bun. UI Tableau Blanc.
475470
</footer>
476471
</main>

‎src/app.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@
113113
border: 2px solid #27272a;
114114
box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.08);
115115
position: relative;
116+
padding-left: 52px !important;
116117
}
117118

118119
/* Notebook spirals on the left */

‎src/lib/components/PresetView.svelte‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
À propos de moi
5656
</h2>
5757

58-
<div class="text-slate-700 leading-relaxed space-y-4 text-sm font-sans pl-1">
58+
<div class="text-slate-700 leading-relaxed space-y-4 text-base font-sans pl-1">
5959
{#each biography as paragraph}
6060
<p>
6161
{@html paragraph}
@@ -82,8 +82,8 @@
8282
<div class="text-slate-850">
8383
<Sparkles size={20} />
8484
</div>
85-
<h3 class="font-hand font-bold text-slate-900 text-base">{service.title}</h3>
86-
<p class="text-xs text-slate-700 leading-relaxed font-marker">
85+
<h3 class="font-hand font-bold text-slate-900 text-lg">{service.title}</h3>
86+
<p class="text-sm text-slate-700 leading-relaxed font-marker">
8787
{service.description}
8888
</p>
8989
</div>
@@ -117,29 +117,29 @@
117117

118118
<div class="p-5 flex flex-col gap-3 flex-1 mt-1">
119119
<div class="flex items-center justify-between">
120-
<span class="text-[9px] font-hand font-bold tracking-wider uppercase px-2 py-0.5 bg-slate-100 border border-slate-300 text-slate-700 rounded-md">
120+
<span class="text-xs font-hand font-bold tracking-wider uppercase px-2 py-0.5 bg-slate-100 border border-slate-300 text-slate-700 rounded-md">
121121
{project.category}
122122
</span>
123123
</div>
124124

125-
<h3 class="text-base font-hand font-bold text-slate-900 group-hover:text-[var(--marker-color)] transition-colors">
126-
{project.title}
125+
<h3 class="text-lg font-hand font-bold text-slate-900 group-hover:text-[var(--marker-color)] transition-colors">
126+
{project.title}
127127
</h3>
128128

129-
<p class="text-xs text-slate-600 leading-relaxed flex-1 font-marker">
129+
<p class="text-sm text-slate-600 leading-relaxed flex-1 font-marker">
130130
{project.description}
131131
</p>
132132

133133
<div class="flex flex-wrap gap-1 mt-2">
134134
{#each project.tags as tag}
135-
<span class="text-[9px] px-1.5 py-0.5 bg-slate-50 text-slate-500 rounded border border-slate-200 font-hand">
135+
<span class="text-xs px-1.5 py-0.5 bg-slate-50 text-slate-500 rounded border border-slate-200 font-hand">
136136
#{tag}
137137
</span>
138138
{/each}
139139
</div>
140140
</div>
141141

142-
<div class="px-5 py-3 bg-slate-50/80 border-t border-slate-250 rounded-b-2xl flex items-center justify-between font-hand font-bold text-xs">
142+
<div class="px-5 py-3 bg-slate-50/80 border-t border-slate-250 rounded-b-2xl flex items-center justify-between font-hand font-bold text-sm">
143143
<a href={project.url} target="_blank" rel="noopener noreferrer"
144144
class="text-slate-700 hover:text-[var(--marker-color)] flex items-center gap-1.5 transition-colors">
145145
<Eye size={13} /> Voir le site
@@ -178,11 +178,11 @@
178178
<div class="notebook-spiral-hole-left"></div>
179179
</div>
180180

181-
<h3 class="text-xs font-hand font-bold text-slate-800 uppercase tracking-wider pl-1">{category.name}</h3>
181+
<h3 class="text-sm font-hand font-bold text-slate-800 uppercase tracking-wider pl-1">{category.name}</h3>
182182

183183
<div class="flex flex-wrap gap-2 mt-1 pl-1">
184184
{#each category.skills as skill}
185-
<div class="inline-flex items-center gap-2 px-2.5 py-1.5 bg-white border border-slate-350 rounded-lg text-xs text-slate-850 hover:border-slate-500 transition-colors font-sans shadow-sm hover:scale-102">
185+
<div class="inline-flex items-center gap-2 px-2.5 py-1.5 bg-white border border-slate-350 rounded-lg text-sm text-slate-850 hover:border-slate-500 transition-colors font-sans shadow-sm hover:scale-102">
186186
{#if skill.type === 'img' && skill.icon && logoMap[skill.icon]}
187187
<img src={logoMap[skill.icon]} alt={skill.name} class="w-4 h-4 object-contain shrink-0" />
188188
{:else if skill.type === 'cdn' && skill.icon}
@@ -220,7 +220,7 @@
220220
<Quote size={28} />
221221
</div>
222222

223-
<p class="text-xs text-slate-700 leading-relaxed italic flex-1 z-10 font-marker pt-2">
223+
<p class="text-sm text-slate-700 leading-relaxed italic flex-1 z-10 font-marker pt-2">
224224
"{item.text}"
225225
</p>
226226

@@ -235,8 +235,8 @@
235235
</div>
236236
{/if}
237237
<div class="min-w-0">
238-
<h4 class="text-xs font-hand font-bold text-slate-850 truncate">{item.name}</h4>
239-
<p class="text-[9px] text-slate-500 font-marker truncate leading-none mt-1">{item.role}</p>
238+
<h4 class="text-sm font-hand font-bold text-slate-850 truncate">{item.name}</h4>
239+
<p class="text-xs text-slate-500 font-marker truncate leading-none mt-1">{item.role}</p>
240240
</div>
241241
</div>
242242
</div>

0 commit comments

Comments
 (0)