Skip to content

Commit 65f77f5

Browse files
raphbagraphbag
committed
feat: enhance accessibility and improve project details in views
1 parent 421f7fd commit 65f77f5

5 files changed

Lines changed: 360 additions & 42 deletions

File tree

‎src/assets/main.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,26 @@ a {
1515
transition: 0.4s;
1616
padding: 3px;
1717
}
18+
19+
a:focus-visible,
20+
button:focus-visible,
21+
[tabindex]:focus-visible {
22+
outline: 2px solid #646cff;
23+
outline-offset: 2px;
24+
border-radius: 4px;
25+
}
26+
27+
.skip-link {
28+
position: absolute;
29+
top: -100px;
30+
left: 0;
31+
background: #646cff;
32+
color: #fff;
33+
padding: 0.5rem 1rem;
34+
z-index: 1000;
35+
font-weight: 600;
36+
}
37+
38+
.skip-link:focus {
39+
top: 0;
40+
}

‎src/components/Footer.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
<template>
22
<div>
33
<footer>
4-
<p>© {{ new Date().getFullYear() }}</p>
5-
<a href="https://www.linkedin.com/in/raphael-baguelin" target="_blank">
6-
<img src="/linkedin.svg" width="26px" alt="Icon LinkedIn" />
4+
<p>© {{ new Date().getFullYear() }} Raphael Baguelin</p>
5+
<a
6+
href="https://www.linkedin.com/in/raphael-baguelin"
7+
target="_blank"
8+
rel="noopener noreferrer"
9+
aria-label="Profil LinkedIn de Raphael Baguelin"
10+
>
11+
<img src="/linkedin.svg" width="26" height="26" alt="" aria-hidden="true" />
712
</a>
8-
<a href="https://github.com/raphbag" target="_blank">
9-
<img src="/github.svg" width="26px " alt="Icon Github" />
13+
<a
14+
href="https://github.com/raphbag"
15+
target="_blank"
16+
rel="noopener noreferrer"
17+
aria-label="Profil GitHub de Raphael Baguelin"
18+
>
19+
<img src="/github.svg" width="26" height="26" alt="" aria-hidden="true" />
1020
</a>
1121
</footer>
1222
</div>

‎src/components/Header.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { RouterLink } from 'vue-router'
55
<template>
66
<div>
77
<header>
8-
<RouterLink to="/">
9-
<img alt="Logo RB" class="logo" src="/logo.svg" height="50" />
8+
<RouterLink to="/" aria-label="Accueil - Raphael Baguelin">
9+
<img alt="" aria-hidden="true" class="logo" src="/logo.svg" height="50"/>
1010
</RouterLink>
11-
<nav>
11+
<nav aria-label="Navigation principale">
1212
<RouterLink to="/" active-class="active">Home</RouterLink>
1313
<RouterLink to="/projets" active-class="active">Projets</RouterLink>
1414
</nav>

‎src/views/HomeView.vue‎

Lines changed: 212 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
<script setup>
2+
import { RouterLink } from 'vue-router'
3+
import { ref } from 'vue'
4+
5+
const emailCopied = ref(false)
6+
7+
const copyEmail = async () => {
8+
try {
9+
await navigator.clipboard.writeText('baguelinraphael@gmail.com')
10+
emailCopied.value = true
11+
setTimeout(() => {
12+
emailCopied.value = false
13+
}, 2000)
14+
} catch (err) {
15+
console.error('Erreur lors de la copie:', err)
16+
}
17+
}
18+
219
const competences = [
320
{
421
name: 'HTML5',
@@ -83,95 +100,157 @@ const competences = [
83100

84101
<template>
85102
<main>
86-
<section class="hero">
87-
<h1 class="hero__title">Hi, I'm Raphaël</h1>
103+
<section class="hero" aria-labelledby="hero-title">
104+
<h1 id="hero-title" class="hero__title">Raphael Baguelin</h1>
88105
<h2 class="hero__subtitle">
89-
Je suis passionné par l'informatique et les nouvelles technologies.<br />
90-
Je suis actuellement étudiant en cybersécurité.
106+
Etudiant en cybersécurité passionné par l'informatique et les nouvelles technologies.
91107
</h2>
108+
<p class="hero__objective">
109+
Je recherche actuellement une alternance en cybersécurité / réseau.
110+
</p>
111+
<div class="hero__actions">
112+
<RouterLink to="/projets" class="hero__cta hero__cta--primary">Voir mes projets</RouterLink>
113+
<a
114+
href="https://www.linkedin.com/in/raphael-baguelin/overlay/contact-info/?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base%3BATSQ6lFjQ6qTg7Q78ccMPA%3D%3D"
115+
class="hero__cta hero__cta--secondary"
116+
target="_blank"
117+
rel="noopener noreferrer"
118+
>
119+
Me contacter
120+
</a>
121+
</div>
92122
</section>
93-
<section class="competences">
94-
<h1>Mes compétences</h1>
123+
<section class="competences" aria-labelledby="competences-title">
124+
<h1 id="competences-title">Mes compétences</h1>
95125
<h2>Langages</h2>
96-
<div class="container">
126+
<div class="container" role="list">
97127
<a
98128
v-for="competence in competences.filter((c) => c.type === 'language')"
99129
:key="competence.name"
100130
:href="competence.link"
101131
target="_blank"
102132
rel="noopener noreferrer"
133+
role="listitem"
134+
:aria-label="`${competence.name} - ouvrir dans un nouvel onglet`"
103135
>
104136
<img
105-
:key="competence.name"
106137
:src="competence.img"
107-
:alt="`Logo ${competence.name}`"
108-
:title="competence.name"
138+
:alt="competence.name"
139+
loading="lazy"
109140
/>
110141
</a>
111142
</div>
112143
<h2>Outils</h2>
113-
<div class="container">
144+
<div class="container" role="list">
114145
<a
115146
v-for="competence in competences.filter((c) => c.type === 'tool')"
116147
:key="competence.name"
117148
:href="competence.link"
118149
target="_blank"
119150
rel="noopener noreferrer"
151+
role="listitem"
152+
:aria-label="`${competence.name} - ouvrir dans un nouvel onglet`"
120153
>
121154
<img
122-
:key="competence.name"
123155
:src="competence.img"
124-
:alt="`Logo ${competence.name}`"
125-
:title="competence.name"
156+
:alt="competence.name"
157+
loading="lazy"
126158
/>
127159
</a>
128160
</div>
129161
<h2>Cloud</h2>
130-
<div class="container">
162+
<div class="container" role="list">
131163
<a
132164
v-for="competence in competences.filter((c) => c.type === 'cloud')"
133165
:key="competence.name"
134166
:href="competence.link"
135167
target="_blank"
136168
rel="noopener noreferrer"
169+
role="listitem"
170+
:aria-label="`${competence.name} - ouvrir dans un nouvel onglet`"
137171
>
138172
<img
139-
:key="competence.name"
140173
:src="competence.img"
141-
:alt="`Logo ${competence.name}`"
142-
:title="competence.name"
174+
:alt="competence.name"
175+
loading="lazy"
143176
/>
144177
</a>
145178
</div>
146179
<h2>Systèmes d'exploitation</h2>
147-
<div class="container">
180+
<div class="container" role="list">
148181
<a
149182
v-for="competence in competences.filter((c) => c.type === 'os')"
150183
:key="competence.name"
151184
:href="competence.link"
152185
target="_blank"
153186
rel="noopener noreferrer"
187+
role="listitem"
188+
:aria-label="`${competence.name} - ouvrir dans un nouvel onglet`"
154189
>
155190
<img
156-
:key="competence.name"
157191
:src="competence.img"
158-
:alt="`Logo ${competence.name}`"
159-
:title="competence.name"
192+
:alt="competence.name"
193+
loading="lazy"
160194
/>
161195
</a>
162196
</div>
163197
</section>
198+
199+
<section class="contact" id="contact" aria-labelledby="contact-title">
200+
<h1 id="contact-title">Me contacter</h1>
201+
<p class="contact__intro">
202+
Une opportunité d'alternance, une question ou simplement envie d'échanger ? N'hésitez pas à
203+
me contacter.
204+
</p>
205+
<div class="contact__links">
206+
<a href="mailto:baguelinraphael@gmail.com" class="contact__link" @click.prevent="copyEmail">
207+
<svg
208+
xmlns="http://www.w3.org/2000/svg"
209+
width="24"
210+
height="24"
211+
viewBox="0 0 24 24"
212+
fill="none"
213+
stroke="currentColor"
214+
stroke-width="2"
215+
stroke-linecap="round"
216+
stroke-linejoin="round"
217+
>
218+
<rect width="20" height="16" x="2" y="4" rx="2" />
219+
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
220+
</svg>
221+
{{ emailCopied ? 'Copié !' : 'baguelinraphael@gmail.com' }}
222+
</a>
223+
<a
224+
href="https://www.linkedin.com/in/raphael-baguelin"
225+
target="_blank"
226+
rel="noopener noreferrer"
227+
class="contact__link"
228+
>
229+
<img src="/linkedin.svg" width="24" height="24" alt="LinkedIn" />
230+
LinkedIn
231+
</a>
232+
<a
233+
href="https://github.com/raphbag"
234+
target="_blank"
235+
rel="noopener noreferrer"
236+
class="contact__link"
237+
>
238+
<img src="/github.svg" width="24" height="24" alt="GitHub" />
239+
GitHub
240+
</a>
241+
</div>
242+
</section>
164243
</main>
165244
</template>
166245

167246
<style scoped>
168247
.hero {
169-
min-height: 70vh;
248+
min-height: 85vh;
170249
display: flex;
171250
flex-direction: column;
172251
align-items: center;
173252
justify-content: center;
174-
gap: 1rem;
253+
gap: 3rem;
175254
}
176255
177256
.hero__title {
@@ -194,6 +273,51 @@ const competences = [
194273
margin: 0;
195274
font-weight: 300;
196275
color: #d6d6d6;
276+
max-width: 950px;
277+
}
278+
279+
.hero__objective {
280+
font-size: 1.1rem;
281+
font-weight: 600;
282+
color: #ffffff;
283+
background: linear-gradient(45deg, rgba(100, 108, 255, 0.2), rgba(66, 184, 131, 0.2));
284+
border: 1px solid rgba(100, 108, 255, 0.35);
285+
border-radius: 5px;
286+
padding: 0.6rem 1rem;
287+
margin: 0.4rem 0;
288+
text-align: center;
289+
}
290+
291+
.hero__actions {
292+
display: flex;
293+
flex-wrap: wrap;
294+
justify-content: center;
295+
gap: 0.75rem;
296+
}
297+
298+
.hero__cta {
299+
border-radius: 10px;
300+
padding: 0.65rem 1rem;
301+
font-weight: 600;
302+
color: #f2f2f2;
303+
border: 1px solid #4f4f4f;
304+
background-color: #2d2d2d;
305+
}
306+
307+
.hero__cta:hover {
308+
opacity: 0.9;
309+
border-color: #646cff;
310+
transform: translateY(-2px);
311+
transition: all 0.2s ease;
312+
}
313+
314+
.hero__cta--primary {
315+
border: 1px solid rgba(100, 108, 255, 0.7);
316+
background: linear-gradient(45deg, #646cff, #42b883);
317+
}
318+
319+
.hero__cta--secondary {
320+
border: 1px solid #666666;
197321
}
198322
199323
.competences {
@@ -250,5 +374,69 @@ const competences = [
250374
.hero__subtitle {
251375
font-size: 1.2rem;
252376
}
377+
378+
.hero__objective {
379+
font-size: 1rem;
380+
}
381+
}
382+
383+
.contact {
384+
display: flex;
385+
flex-direction: column;
386+
align-items: center;
387+
padding: 3rem 1.5rem;
388+
background: linear-gradient(145deg, #1e1e1e, #242424);
389+
border-radius: 20px;
390+
max-width: 900px;
391+
margin: 2rem auto;
392+
margin-bottom: 6rem;
393+
}
394+
395+
.contact h1 {
396+
margin-bottom: 0.5rem;
397+
}
398+
399+
.contact__intro {
400+
text-align: center;
401+
color: #b0b0b0;
402+
max-width: 600px;
403+
margin-bottom: 1.5rem;
404+
}
405+
406+
.contact__links {
407+
display: flex;
408+
flex-wrap: wrap;
409+
justify-content: center;
410+
gap: 1rem;
411+
}
412+
413+
.contact__link {
414+
display: flex;
415+
align-items: center;
416+
gap: 0.5rem;
417+
padding: 0.6rem 1rem;
418+
border-radius: 10px;
419+
background-color: #2d2d2d;
420+
border: 1px solid #444;
421+
color: #e0e0e0;
422+
font-weight: 500;
423+
transition: all 0.2s ease;
424+
}
425+
426+
.contact__link:hover {
427+
background-color: #3a3a3a;
428+
border-color: #646cff;
429+
transform: translateY(-2px);
430+
}
431+
432+
@media (max-width: 768px) {
433+
.contact__links {
434+
flex-direction: column;
435+
width: 100%;
436+
}
437+
438+
.contact__link {
439+
justify-content: center;
440+
}
253441
}
254442
</style>

0 commit comments

Comments
 (0)