-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (137 loc) · 7.13 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio d'Emma Blanchard, développeuse web spécialisée en HTML, CSS et intégration responsive. Découvrez mes projets !">
<meta name="keywords" content="développeuse web, intégration HTML, HTML, CSS, front-end, portfolio, web design">
<meta name="author" content="Emma Blanchard">
<meta property="og:title" content="Portfolio - Emma Blanchard">
<meta property="og:description" content="Découvrez mes projets en développement web et intégration HTML/CSS.">
<meta property="og:image" content="assets/img/preview.png">
<meta property="og:url" content="https://emma-blnch.github.io/Portfolio/">
<title>Portfolio - Emma Blanchard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navigation -->
<header>
<img src="assets/img/EB_Logo-dark.png" alt="logo-emma-blanchard" id="logo" loading="lazy">
<nav>
<ul>
<li>Accueil</li>
<li>Projets</li>
<li>À propos</li>
<li>Contact</li>
<li id="dark-mode-toggle"><img src="assets/img/dark-mode.png" alt="dark-mode-icon" loading="lazy"></li>
</ul>
<!-- <button id="menu-toggle">☰</button> -->
</nav>
</header>
<a id="cv" href="assets/CV_2025-02-16_Emma_Blanchard.pdf" download="CV-Emma-Blanchard.pdf">CV</a>
<!-- Presentation -->
<section id="accueil" class="intro">
<h1>Je crée des expériences web fluides et performantes, avec un code soigné.</h1>
<h2>- Emma Blanchard -</h2>
</section>
<!-- Stats -->
<section id="stats">
<div class="stat-circle" id="stat-circle">
<span id="stat-value">15+</span>
<p id="stat-label">Projets réalisés</p>
<div class="stat-dots">
</div>
</div>
</section>
<!-- Projets -->
<section id="projets">
<div class="project-grid">
<div class="project-card">
<div class="project-one">
<div class="text1">
<h3 onclick=" window.open('https://github.com/Emma-blnch/GenAI-Hackaton-02-2025', '_blank')">Visualisation de données ↗️</h3>
<p>Développement d'un site de visualisation de données interactif, intégrant une IA via AWS. Gestion de l'affichage et optimisation du rendu dynamique en JavaScript.</p>
<span>Technos : HTML/CSS | JS | Python</span>
<!-- <a href="#" class="btn">En savoir plus</a> -->
</div>
<div class="image1">
<img src="assets/img/preview-data-vizualisation.webp" alt="preview-data-visualization-site" width="600" height="400" loading="lazy">
</div>
</div>
</div>
<div class="project-card">
<div class="project-two">
<div class="text2">
<h3 onclick=" window.open('https://github.com/Emma-blnch/Figma-to-HTML', '_blank')">Intégration d'une maquette Figma ↗️</h3>
<p>Intégration pixel-perfect d’une maquette Figma en HTML/CSS, avec animations JavaScript optimisées pour une meilleure expérience utilisateur.</p>
<span>Technos : HTML/CSS | JS</span>
</div>
<div class="image2">
<img src="assets/img/preview-integration.webp" alt="preview-figma-integration" width="600" height="400" loading="lazy">
</div>
</div>
</div>
<div class="project-card">
<div class="project-three">
<div class="text3">
<h3 onclick=" window.open('https://github.com/Emma-blnch/Portfolio', '_blank')">Site portfolio ↗️</h3>
<p>Création d’un portfolio responsive en HTML/CSS, intégrant un mode sombre et des animations JavaScript pour une navigation fluide.</p>
<span>Technos : HTML/CSS | JS</span>
</div>
<div class="image3">
<img src="assets/img/preview-portfolio.webp" alt="preview-portfolio-site" width="600" height="400" loading="lazy">
</div>
</div>
</div>
<div class="project-card">
<div class="project-four">
<div class="text4">
<h3 onclick=" window.open('https://github.com/Emma-blnch', '_blank')">Mini-version d'un shell ↗️</h3>
<p>EN COURS</p>
<!-- <p>Implémentation d’un shell en C, capable d’exécuter des commandes système en ligne de commande, en gérant les entrées/sorties et les processus.</p> -->
<span>Technos : C | Shell</span>
</div>
<div class="image4">
<img src="assets/img/EB_Logo-dark.png" alt="preview-minishell" width="600" height="400" loading="lazy">
</div>
</div>
</div>
<a href="https://github.com/Emma-blnch" target="_blank" class="btn" style="text-decoration:none">Mon Github</a>
</div>
</section>
<!-- A propos -->
<section id="about">
<img src="assets/img/eblancha.webp" alt="profile-pic-emma" loading="lazy">
<p>Développeuse web junior, spécialisée en intégration HTML/CSS et <strong>optimisation responsive</strong>. <br>Mon crédo ? Combiner <strong>rigueur</strong> et <strong>autonomie</strong> pour construire des sites épurés et performants.
<br><br>Formée à 42 Paris, je recherche un poste où je pourrai mettre mes compétences en front-end au service d'une <strong>équipe dynamique</strong>.
</p>
</section>
<!-- Skills -->
<section id="skills">
<h4>Skills</h4>
<h5>Clean code</h5>
<h5>Optimisation SEO</h5>
<h5>Git/github</h5>
<h5>Créativité</h5>
<h5>Écoute client</h5>
<h5>Autonomie</h5>
</section>
<!-- Contact -->
<section id="contact">
<video autoplay loop muted playsinline src="assets/video/blue-waves.webm" type="video/mp4" id="bg-video" loading="lazy"></video>
<div id="catch">
<p>Vous recherchez <br>
une <strong>développeuse web</strong>
<br>passionnée ?
</p>
</div>
<div class="contact-links">
<button onclick="location.href='mailto:[email protected]';">Mail</button>
<button onclick=" window.open('https://www.linkedin.com/in/emmablnch/', '_blank')">Linkedin</button>
</div>
</section>
<script src="script.js" defer></script> <!-- script pour les animations -->
</body>
</html>
<!-- <h1>Du design au code, je crée des expériences web élégantes et efficaces.</h1> -->