-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
231 lines (211 loc) · 14.4 KB
/
index.php
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Création de sites web WordPress | AlexCréationWeb</title>
<!-- <link rel="stylesheet" href="styles-mini.css"> -->
<link rel="stylesheet" href="styles.css">
<meta name="title" content="Création de sites web WordPress | AlexCréationWeb" />
<meta name="description" content="Création de sites internet et applications web entre Besançon et Pontarlier dans le Doubs et le Jura - Développeur WordPress" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://alexcreationweb.fr/" />
<meta property="og:title" content="Création de sites web WordPress | AlexCréationWeb" />
<meta property="og:description" content="Création de sites internet et applications web entre Besançon et Pontarlier dans le Doubs et le Jura - Développeur WordPress" />
<meta property="og:image" content="/img/og-ACW.webp" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://alexcreationweb.fr/" />
<meta property="twitter:title" content="Création de sites web WordPress | AlexCréationWeb" />
<meta property="twitter:description" content="Création de sites internet et applications web entre Besançon et Pontarlier dans le Doubs et le Jura - Développeur WordPress" />
<meta property="twitter:image" content="/img/og-ACW.webp" />
<link rel="canonical" href="https://alexcreationweb.fr/">
<!-- Favicon pour différents navigateurs et appareils -->
<!-- <link rel="icon" href="/favicon.ico" type="image/x-icon"> -->
<link rel="icon" href="/favicon-32x32.png" type="image/png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#000" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#FFF" media="(prefers-color-scheme: light)">
<meta name="google-site-verification" content="kr23kkoZ0vyyrqvXDdr4zmNJplpLqsw3i5BWJw7pJVw" />
</head>
<body>
<header>
<div class="header-l">
<div class="logo-nav">
<div class="logo">
<!-- <div class="logo__img">
<img src="/img/image_og_300-157.webp" alt="Logo AlexCréationWeb">
</div> -->
<p class="logo__title">AlexCréationWeb<span class="underscore flash">_</span></p>
</div>
<!-- <nav class="navigation">
<a class="navigation__link active" href="#skills">Compétences</a>
<a class="navigation__link" href="#projects">Réalisations</a>
<a class="navigation__link" href="#path">Parcours</a>
<a class="navigation__link" href="#about">A propos</a>
</nav> -->
</div>
<div class="hero">
<div class="block__hero">
<div class="hero__img">
<img src="/img/Alex-Alpha-350px.webp" width="250px" height="350px" alt="Alexandre Foulc développeur web">
</div>
<div class="hero__content">
<h1 class="hero__title">Alexandre Foulc</h1>
<p class="hero__subtitle">Développeur WordPress</p>
<p class="hero__description">Passionné et créatif, je développe des sites et des applications web évolutives et performantes.</p>
</div>
</div>
<div class="block__btn">
<a type="button" class="info__btn" href="https://www.linkedin.com/in/alexandre-foulc/" target="_blank" title="Profil LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
</svg>LinkedIn
</a>
<a type="button" class="info__btn" href="https://github.com/Alex-Web-Github" target="_blank" title="Compte Github">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
</svg>Github
</a>
<a target="_blank" class="info__btn disabled" role="link" aria-disabled="true" title="CV disponible sur demande">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
<path d="M22 0h-20v24h14l6-6v-18zm-6 18h4.36l-4.36 4.385v-4.385zm-3 1h-8v1h8v-1zm0-3h-8v1h8v-1zm6-2v-1h-14v1h14zm-7.059-4.968c-1.147-.265-2.214-.497-1.697-1.473 1.573-2.97.417-4.559-1.244-4.559-1.694 0-2.821 1.65-1.244 4.559.532.982-.575 1.214-1.697 1.473-1.024.237-1.062.745-1.059 1.635l.001.333h7.997l.001-.323c.004-.896-.03-1.407-1.058-1.645zm7.059.968h-4v1h4v-1zm0-2v-1h-4v1h4zm0-4h-4v1h4v-1z" />
</svg>mon CV
</a>
<button type="button" class="info__btn email__btn">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" />
</svg>cliquer pour voir l'e-mail
</button>
</div>
</div>
</div>
</header>
<main class="main-l">
<section class="section-l">
<h2 class="section__title">Compétences</h2>
<div class="section__content section__skills">
<div class="skill__block">
<div class="block__title">
<img src="/img/icon-front-end-60px.webp" width="60px" height="60px" alt="icon Front-End">
<h3 class="skill__title">Front-End</h3>
</div>
<ul class="skill__list">
<li class="skill__list__item">Maquetter une application</li>
<li class="skill__list__item">Développer une interface utilisateur web Responsive</li>
<li class="skill__list__item">Développer un thème WordPress sur-mesure</li>
<li class="skill__list__item">Référencement naturel & web-performances :<br>application des bonnes pratiques </li>
</ul>
<!-- Icones des Compétences -->
<div class="block__icons">
<img src="/img/icons/html5-original.svg" width="50px" height="50px" title="HTML 5" class="icons" alt="icon html">
<img src="/img/icons/css3-original.svg" width="50px" height="50px" title="CSS 3" class="icons" alt="icon css">
<img src="/img/icons/javascript-original.svg" width="50px" height="50px" title="JavaScript" class="icons" alt="icon javascript">
<img src="/img/icons/bootstrap-original.svg" width="50px" height="50px" title="Bootstrap" class="icons" alt="icon bootstrap">
<img src="/img/icons/sass-original.svg" width="50px" height="50px" title="préprocesseur SASS" class="icons" alt="icon sass">
<img src="/img/icons/figma-original.svg" width="50px" height="50px" title="Figma" class="icons" alt="icon figma">
</div>
</div>
<!-- skills Front-End -->
<div class="skill__block">
<div class="block__title">
<img src="/img/icon-back-end-60px.webp" width="60px" height="60px" alt="icon Back-End">
<h3 class="skill__title">Back-End</h3>
</div>
<ul class="skill__list">
<li class="skill__list__item">Concevoir une application</li>
<li class="skill__list__item">Concevoir et mettre en place une base de données</li>
<li class="skill__list__item">Développer des composants métier</li>
<li class="skill__list__item">Développer la partie back-end d'une application web</li>
</ul>
<!-- Icones des Compétences -->
<div class="block__icons">
<img src="/img/icons/php-original.svg" width="50px" height="50px" title="PHP" class="icons" alt="icon php">
<img src="/img/icons/mysql-original-wordmark.svg" width="50px" height="50px" title="MySQL" class="icons" alt="icon mysql">
<img src="/img/icons/symfony-original-wordmark.svg" width="50px" height="50px" title="Symfony" class="icons" alt="icon symfony">
<img src="/img/icons/wordpress-original.svg" width="50px" height="50px" title="WordPress" class="icons" alt="icon wordpress">
<img src="/img/icons/git-original-wordmark.svg" width="50px" height="50px" title="Git" class="icons" alt="icon git">
<img src="/img/icons/github-original.svg" width="50px" height="50px" title="GitHub" class="icons" alt="icon github">
</div>
</div>
<!-- skills Back-End -->
</div>
</section>
<section class="section-l">
<h2 class="section__title">Réalisations</h2>
<div class="section__content">
<!-- Boutons de filtre -->
<div class="filter__container">
<button class="filter active" data-type="all">Tout voir</button>
<button class="filter" data-type="personnal">Mes Réalisations</button>
<button class="filter" data-type="student">Projets étudiants</button>
<button class="filter" data-type="sequane">Réalisations Séquane</button>
</div>
<!-- Projets -->
<div class="project__container">
<?php
// Récupération des projets depuis le fichier JSON
$projectsJson = file_get_contents('contenu/my-projects.json');
$projects = json_decode($projectsJson, true); ?>
<?php foreach ($projects as $project): ?>
<?php include 'templates/_project-card.php'; ?>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="section-l">
<h2 class="section__title">Qui suis-je ?</h2>
<div class="section__content">
<p class="presentation__text">
Tout a commencé dans les années 80, lorsque j’ai posé mes mains sur un ordinateur pour la première fois (un Thomson TO7...) et taper mes premières ligne de code (en Microsoft Basic) : Une révélation ! De ces premiers instants passés à explorer l’informatique est née une curiosité insatiable. En 2001, avec l'arrivée d'Internet, j’ai mis en ligne ma première page web, sans me douter que cette expérience poserait les bases d’une nouvelle aventure.</p>
<p class="presentation__text">
Les années ont passé, et mon chemin m’a mené vers une autre passion : la Montagne (<span class="text--underline"><a href="https://sportsnatureevasion.com" target="_blank">découvrir mon activité de Guide 
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" />
<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" />
</svg>
)</a></span>. Mais très vite, un constat s’est imposé : être visible en ligne devenait essentiel. Ce besoin a ravivé une flamme... J'ai alors choisi d'évoluer et de me reéinventer. Je me suis formé aux nouvelles technologies du web pour assouvir mon besoin d'apprendre, disposer de plus de connaissances pour créer selon mes besoins/envies mais aussi mieux comprendre les évolutions futures de ce secteur.
</p>
<p class="presentation__text">Curieux, rigoureux, enthousiaste, je me suis façonné à travers les défis. Aujourd’hui, chaque projet est une nouvelle exploration, un challenge à relever.</br>
Mon ambition ? Concevoir des expériences web modernes, performantes et uniques.</p>
</div>
</section>
<section class="section-l">
<h2 class="section__title">Parcours / Expériences</h2>
<div class="section__content section__path">
<div class="step step--right">
<p class="step__title"> Freelance - depuis Mars 2025</p>
<p class="step__description">Développeur WordPress | Applications PHP / Symfony</p>
</div>
<div class="step step--left">
<p class="step__title">Apprentissage | SÉQUANE - Nov. 2023 - Déc. 2024</p>
<p class="step__description">Concepteur Développeur d'Applications PHP / Symfony</p>
</div>
<div class="step step--right">
<p class="step__title">STUDI / Digital School - Oct. 2022 - Juin 2023</p>
<p class="step__description">Titre Professionnel Développeur Web / Web Mobile</p>
</div>
<div class="step step--left">
<p class="step__title">WP Chef - 2021</p>
<p class="step__description">Certification RS 5170 : Concevoir des sites WordPress professionnels</p>
</div>
<div class="step step--right">
<p class="step__title">École Française de Papeterie et des Industries
Graphiques de Grenoble</p>
<p class="step__description">Obtention du diplôme d’Ingénieur en 09/2000</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-l">
<p class="footer__text">AlexCréationWeb | 2023 - <?= date("Y"); ?>
</p>
</div>
</footer>
<script src="/js/global.js" defer></script>
</body>
</html>