-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprojet1.html
210 lines (207 loc) · 8.33 KB
/
projet1.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simon Daguet-Kargl | Développeur Front-end</title>
<meta name="description"
content="Enchanté, moi c'est Simon Daguet-Kargl je suis un développeur front-end basé sur Bordeaux et sur Nantes. Découvrez mon portfolio !" />
<link rel="icon" href="images/emoji_u1f5a5_favicon.svg" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/project1.css" />
<link rel="stylesheet" href="css/queries-project1.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet" />
</head>
<body>
<header>
<nav>
<ul class="project-nav">
<li><a class="link" href="index.html">Revenir à l'accueil</a></li>
<li class="button-project"><a class="button button-project" href="index.html#discuss">Me contacter</a></li>
</ul>
</nav>
</header>
<main>
<section class="accueil">
<div class="accueil-flex">
<div class="container">
<div class="div">
<h1 class="strong-name">
<div>Projet</div>
</h1>
<h2>La refonte du site du musée d’Aquitaine</h2>
<p>
C’est un projet réalisé dans le cadre de ma formation en MMI
pour lequel nous étions 4. Nous avons designé et développé ce
site en 2 semaines.
<a href="#design" class="discover">Découvrez-en plus ↓</a>
</p>
</div>
</div>
<div class="img-container">
<div class="image image-one">
<img src="images/projet_musee/presentation_musee_aquitaine_refonte.webp" alt="première image du projet" />
</div>
<div class="image image-two">
<img src="images/projet_musee/presentation_musee_aquitaine_refonte2.webp" alt="deuxième image du projet" />
</div>
<div class="image image-three">
<img src="images/projet_musee/presentation_musee_aquitaine_refonte3.webp" alt="image du projet 3" />
</div>
</div>
</div>
</section>
<section>
<h2 class="project-main">
<div>Le</div>
<div>déroulement</div>
<div>du</div>
<div>projet</div>
</h2>
<div class="accueil-flex">
<div class="project-texts">
<p>
La 1ère semaine était consacrée au webdesign. Nous avons eu à
choisir quels éléments et quelles dispositions reprendre ou ajouter.
Nous avons utilisé l’outil de travail collaboratif figma
notamment.
</p>
<p>
Nous avons codé le site la 2ème semaine et nous travaillions
ensemble grâce à github. Il nous a fallu veiller à l’accessibilité
du site.
</p>
</div>
<div class="project-img-container">
<img src="images/projet_musee/presentation_musee_aquitaine_refonte4.webp" alt="image du projet 1" />
</div>
</div>
</section>
<section class="design" id="design">
<h2 class="project-main">
<div>Nos</div>
<div>choix</div>
<div>pour</div>
<div>le</div>
<div>design</div>
</h2>
<div class="accueil-flex">
<div class="design-grid">
<div class="design-flex">
<div class="div-bordeaux"></div>
<div class="div-grey"></div>
<div class="div-dark-grey"></div>
</div>
<div class="design-image"><img src="images/projet_musee/presentation_musee_aquitaine_refonte.webp"
alt="immage montrant l'accessibilité du site" /></div>
</div>
<div class="project-texts">
<h3>Couleurs et branding</h3>
<p>
Nous avons choisi de donner un côté “prestige” au site, adapté à
un site pour un musée présentant de belles œuvres et une riche
histoire. C’est pour cela que nous avons choisi une police serif
pour les titres et une plus classique, sans serif pour les textes,
pour sa modernité et son accessibilité.
</p>
<p>
Les couleurs ont également été choisies pour cela et nous avons
voulu le site très aéré pour l’aspect esthétique.
</p>
</div>
</div>
<div class="flex-fonts">
<span class="titles-font">Noto Serif KR</span>
<span class="text-font">lato regular</span>
</div>
<div class="accessibility">
<div class="project-texts">
<h3>Accessibilité</h3>
<p>
Le site devait être accessible. Il fallait qu’il puisse être simple d’utilisation sur toute taille d’écran,
particulièrement en version mobile. Mais également, le site se devait d’être inclusif, en respectant des
normes d’accessibilités, d’expérience utilisateur et de référencement web.
</p>
<p>
Nos couleurs présentent ainsi de bons contrastes et nos images ont été optimisées pour être moins lourdes
sans trop compromettre leur qualité.
</p>
</div>
</div>
</div>
</div>
</section>
<aside>
<section class="aside">
<h3>Vous avez aimé ce projet ? Travaillons ensemble !</h3>
<a class="button" href="index.html#discuss">Contactez-moi</a>
</section>
</aside>
<section id="some-projects">
<h2>Découvrez d’autres de mes projets</h2>
<div class="projects">
<article class="other-project">
<a class="project-link" href="projet2.html">
<div class="other-img-container">
<img src="images/projet_treejs/treejs_hero.webp" alt="lien vers mon projet tree js" loading="lazy" style="
height: 360px;
" />
</div>
<div class="text-container">
<h3>Web et 3D</h3>
<p>
remier site réalisé avec Three.JS. La plante grandit au scroll.
</p>
<div class="tags">
<span class="tag">Three.JS</span>
<span class="tag">GSAP</span>
</div>
<a class="project-button" href="projet2.html">
<img class="arrow" src="images/icons/arrow_up.svg" alt="arrow icon" />
</a>
</div>
</a>
</article>
<article class="other-project">
<a class="project-link" href="projet3.html">
<div class="other-img-container">
<img src="images/projet_befake/befake_homepage.webp" alt="présentation application befake, backend"
loading="lazy" style="height: 360px;" />
</div>
<div class="text-container">
<h3>Application web avec Ruby on Rails</h3>
<p>
Projet backend avec le framework Ruby on Rails, parodie du réseau social BeReal avec Midjourney.
</p>
<div class="tags">
<span class="tag">backend</span>
<span class="tag">Bootstrap</span>
</div>
<a class="project-button" href="projet3.html">
<img class="arrow" src="images/icons/arrow_up.svg" alt="arrow icon" />
</a>
</div>
</a>
</article>
</div>
</section>
</main>
<footer>
<p>
© Simon Daguet-Kargl - <span class="date">2023</span><a class="legal-notices"
href="mentions-legales.html">Mentions Légales</a>
</p>
</footer>
<script>
document.querySelector(".date").textContent = new Date().getFullYear();
</script>
</body>
</html>