-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
254 lines (253 loc) · 9.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="Vous trouverez dans ce site Portfolio, mon profils et mes compétences ainsi que divers projets effectués." />
<link
href="https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap"
rel="stylesheet" />
<title>Portfolio - SANCHEZ James</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Bannière haut de page -->
<header>
<hgroup class="header-title">
<h1>James Sanchez</h1>
<h2>Développeur Web Junior</h2>
</hgroup>
</header>
<!-- Contenu Principal -->
<main>
<!-- Boite description -->
<section class="profil-box">
<article class="profil-text">
<h3 class="bold-upp orange">Salutation,</h3>
<p>
Moi, c'est James. Je suis un développeur web étudiant à l'école La
Plateforme. Je suis une personne très curieuse, avec une faim
d'apprendre immense et toujours à la recherche de partages
d'expériences et de connaissances.
</p>
<hr class="profil-bar" />
<p>
Je suis à la recherche d'un endroit pour découvrir, apprendre et
mettre mes connaissances en oeuvre !
</p>
</article>
<!-- Photo de profil -->
<div class="profil-picture">
<img src="/images/profile.webp" alt="james" />
</div>
</section>
<!-- Titre catégorie -->
<section class="cat-section">
<div class="section-title">
<h2>Compétences</h2>
<hr />
</div>
<!-- Section compétences -->
<div class="comp-group">
<!-- Boite Compétences 1 -->
<article class="comp-box left">
<h3 class="comp-title">Front End</h3>
<div class="logo">
<img src="/images/logo-html.webp" alt="logo html" />
<img src="/images/logo-css.webp" alt="logo css" />
</div>
</article>
<!-- Boite Compétences 2 -->
<article class="comp-box center">
<h3 class="comp-title">Back End</h3>
<div class="logo">
<img src="/images/logo-php.webp" alt="logo php" />
<img src="/images/logo-python.webp" alt="logo python" />
</div>
</article>
<!-- Boite Compétences 3 -->
<article class="comp-box right">
<h3 class="comp-title">Outils</h3>
<div class="logo">
<img src="/images/logo-git.webp" alt="logo git" />
<img src="/images/logo-figma.webp" alt="logo figma" />
<img src="/images/logo-vscode.webp" alt="logo vscode" />
</div>
</article>
</div>
</section>
<!-- Titre catégorie -->
<section class="cat-section">
<div class="section-title">
<h2>Projets</h2>
<hr />
</div>
<!-- Section emplacement des projets -->
<div class="project-group">
<!-- Boite projet 4 MatchaTea -->
<div class="project-box">
<div class="project-screenshot">
<img
src="/images/project-matchatea.webp"
alt="page d'accueil du site réalisé" />
</div>
<section class="project-description">
<hgroup class="project-title">
<h3>Matcha Pépite</h3>
<h4>Projet scolaire #4</h4>
<div class="project-tech">
<p class="bold-upp">Tech:</p>
<span class="project-tools">HTML</span>
<span class="project-tools">CSS</span>
</div>
</hgroup>
<article class="project-text">
<p>
Dans le cadre d'un projet de groupe, nous avions 1 semaine
pour développer la partie Front d'un site e-commerce dans le
domaine du thé, en suivant un zoning fourni.
</p>
<a
href="https://github.com/jams-sanchez/matchaTea"
class="bold-upp"
target="_blank"
>Github 🠒</a
>
</article>
</section>
</div>
<!-- Boite projet 3 Tik Tak Toe -->
<div class="project-box">
<div class="project-screenshot">
<img
class="mobile"
src="/images/project-tiktaktoe-mobile.webp"
alt="jeu tik tak toe dans le terminal" />
<img
class="desktop"
src="/images/project-tiktaktoe.webp"
alt="jeu tik tak toe dans le terminal" />
</div>
<section class="project-description">
<hgroup class="project-title">
<h3>Tik Tak Toe</h3>
<h4>Projet scolaire #3</h4>
<div class="project-tech">
<p class="bold-upp">Tech:</p>
<span class="project-tools">Python</span>
</div>
</hgroup>
<article class="project-text">
<p>
Création d'un mini-jeu: Tik Tak Toe pour cette première
découverte de Python. Celui-ci se lance dans le terminal et
doit être jouer avec deux joueurs. Relancer une partie pour
toujours plus de fun.
</p>
<a
href="https://github.com/jams-sanchez/tik-tak-toe"
class="bold-upp"
target="_blank"
>Github 🠒</a
>
</article>
</section>
</div>
<!-- Boite projet 2 Fansite -->
<div class="project-box">
<div class="project-screenshot">
<img
src="/images/project-fansite.webp"
alt="page d'accueil du fan site réalisé" />
</div>
<section class="project-description">
<hgroup class="project-title">
<h3>Fan Site</h3>
<h4>Projet scolaire #2</h4>
<div class="project-tech">
<p class="bold-upp">Tech:</p>
<span class="project-tools">HTML</span>
<span class="project-tools">CSS</span>
</div>
</hgroup>
<article class="project-text">
<p>
Un premier projet de groupe. Un premier travail d'équipe sur
github. 3 personnes, un site propre à chacun, avec une page
d'accueil et barre de navigation en commun qui réuni les 3 fan
sites. Mon thème: Counter-Strike.
</p>
<a
href="https://github.com/Bossola-Yannick/projet-fansite"
class="bold-upp"
target="_blank"
>Github 🠒</a
>
</article>
</section>
</div>
<!-- Boite projet 1 BloomPetals -->
<div class="project-box">
<div class="project-screenshot">
<img
src="/images/project-bloompetals.webp"
alt="page d'accueil du site réalisé" />
</div>
<section class="project-description">
<hgroup class="project-title">
<h3>BloomPetals</h3>
<h4>Projet scolaire #1</h4>
<div class="project-tech">
<p class="bold-upp">Tech:</p>
<span class="project-tools">HTML</span>
<span class="project-tools">CSS</span>
</div>
</hgroup>
<article class="project-text">
<p>
Un premier projet avec pour objectif de créer un site vitrine
pour un magasin de fleurs fictif. Après avoir réaliser mes
premiers pas sur github, j'ai été amené à découvrir HTML et
CSS pour développer ce projet.
</p>
<a
href="https://github.com/jams-sanchez/BloomPetals"
class="bold-upp"
target="_blank"
>Github 🠒</a
>
</article>
</section>
</div>
</div>
</section>
</main>
<!-- Bas de page : Contact -->
<footer>
<h2>Contact</h2>
<section class="contact-box">
<div class="contact-linkGitMail">
<a href="https://github.com/jams-sanchez" target="_blank">
<img src="/images/logo-github.webp" alt="lien profil github" />
</a>
<a
href="https://www.linkedin.com/in/james-sanchez-3a8a80332/"
target="_blank">
<img src="/images/logo-linkedin.webp" alt="lien profil linkedin" />
</a>
<a href="mailto:james.sanchez@laplateforme.io" target="_blank">
<img src="/images/logo-mail.webp" alt="lien email" />
</a>
</div>
<div class="contact-localisation">
<p>Aix-En-Provence, 13100</p>
<img src="/images/logo-localisation.webp" alt="logo localisation" />
</div>
</section>
<div class="copyright">
<p>© Copyright 2025 - SANCHEZ James</p>
</div>
</footer>
</body>
</html>