-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject.html
208 lines (168 loc) · 10.7 KB
/
project.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="portfolio.css">
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="project.css">
<link rel="icon" href="/software.png" type="image/x-icon">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
</head>
<body>
<div class="container-fluid"> <!--begin container-->
<div class="row "><!--begin row to sperate navbar elements-->
<nav class="navbar navbar-expand-lg col-md-12 " data-bs-theme="dark"> <!--begin navbar-->
<div class="container-fluid">
<!--navbar elements-->
<a class="navbar-brand fs-2 fw-bold col-5 offset-1" href="about.html">About<span
class="text-warning mx-2">Me</span></a>
<!--burger menu-->
<button class="navbar-toggler btn-lg " type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class=" navbar-toggler-icon "></span>
</button>
<!--other navbar elements-->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link fw-semibold mx-3" aria-current="page" href="index.html">ACCUEIL</a>
</li>
<li class="nav-item ">
<a class="nav-link fw-semibold mx-3 " href="./about.html">À PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link fw-semibold mx-3" href="./resume.html">MON CV</a>
</li>
<li class="nav-item">
<a class="nav-link active fw-semibold mx-3" href="./project.html">PROJETS</a>
</li>
<li class="nav-item">
<a class="nav-link fw-semibold mx-3" href="./contact.html">CONTACT</a>
</li>
</ul>
</div>
</div> <!--end row-->
</nav> <!--end navbar-->
<main><!--begin main contents projects-->
<!--responsive-->
<div style="margin-top: 4%;" class="row ms-xl-5 ms-lg-5 ms-md-5 ms-sm-5 ms-2 ">
<!--title-->
<p class="fs-1 text-light fw-bold"><span class="first-text">Mes</span> <span
class="text-warning second-text">Projets</span></p>
<!--text id for responsive font size-->
<p id="text" class=" fw-medium col-xl-5 third-text " style="color: #9CA3AF ;font-family: 'Cherry Swash', serif
;font-style: normal;">
Découvrez mon portefeuille diversifié de projets, témoignant de mes compétences, de ma
créativité et de mon dévouement dans divers domaines, reflétant mon parcours dans
l'innovation.
</p>
<div></div> <!--div to seperate elements-->
<!--begin first project-->
<div class=" resume col-xl-3 col-lg-3 col-md-11 col-sm-11 col-11 first-project my-xl-0 my-lg-0 my-md-4 my-sm-4 my-4"
style="height:80%">
<!--project 1 image -->
<img src="./project1.png" class="img-fluid rounded border border-primary "
style="margin-left: 6%;width:90%;margin-top:2%;height:160px" alt="">
<p style="margin-left: 5%;" class="fs-3 fw-bold text-warning my-2">Application Deadline</p>
<!--text id for responsive font size-->
<span id="text" class=" fw-medium " style="color: #6B7280 ;font-family: 'Cherry Swash', serif
;font-style: normal;">
Un outil de gestion des délais au niveau de l'entreprise pour la maintenance rationalisée,
les rendez-vous clients, et plus encore.
</span>
<br>
<a href="https://github.com/mohamedmaghzaoui/DeadlineApp-Frontend"
class="btn btn-outline-warning offset-8 my-2 see-more"> <i class="bi bi-github me-1"></i>
Voir plus
</a>
</div> <!--end first project-->
<br> <!--br to seperate projects for small screen-->
<!--begin second project-->
<div class="resume second-project col-xl-3 my-xl-0 my-lg-0 my-md-4 my-sm-4 my-4 offset-xl-1 offset-lg-1 col-lg-3 col-md-11 col-sm-11 col-11"
style="height:80%">
<!--second project image-->
<img src="./project2.png" class="img-fluid rounded border border-primary "
style="margin-left: 6%;width:90%;margin-top:2% ;height:160px" alt="">
<p style="margin-left: 5%;" class="fs-3 fw-bold text-warning">
Backoffice </p>
<!--text id for responsive font size-->
<span id="text" class=" fw-medium " style="color: #6B7280 ;font-family: 'Cherry Swash', serif
;font-style: normal;">
Une plateforme sécurisée avec Symfony pour une gestion efficace et intuitive de mon
portfolio garantissant la performance et la simplicité
</span>
<br>
<a href="https://github.com/mohamedmaghzaoui/BackOffice"
class="btn btn-outline-warning offset-8 my-2 see-more "><i class="bi bi-github me-1"></i>
Voir
plus</a>
</div> <!--end second project-->
<!--begin third project-->
<div class="resume third-project col-xl-3 my-xl-0 my-lg-0 my-md-4 my-sm-4 my-4 offset-xl-1 offset-lg-1 col-lg-3 col-md-11 col-sm-11 col-11"
style="height:80%">
<!--third project image-->
<img src="./project3.png" class="img-fluid rounded border border-primary "
style="margin-left: 6%;width:90%;margin-top:2%;height:160px" alt="">
<p style="margin-left: 5%;" class="fs-3 fw-bold text-warning">Station Météo </p>
<span id="text" class=" fw-medium " style="color: #6B7280 ;font-family: 'Cherry Swash', serif
;font-style: normal;">
Une application développé en équipe pour visualiser différentes valeurs environnementales,
avec un backend Symfony et un frontend React
</span>
<br>
<a href="https://github.com/mohamedmaghzaoui/stationMeteo"
class="btn btn-outline-warning offset-8 my-2 see-more "><i class="bi bi-github me-1"></i>
Voir
plus</a>
</div><!--end third project-->
<!--begin fourth project-->
<div class="resume resume col-xl-3 col-lg-3 col-md-11 col-sm-11 col-11 first-project my-4"
style="height:80%">
<!--third project image-->
<img src="./chat-app-project.png" class="img-fluid rounded border border-primary "
style="margin-left: 6%;width:90%;margin-top:2%;height:160px" alt="">
<p style="margin-left: 5%;" class="fs-3 fw-bold text-warning">
Chat Application </p>
<span id="text" class=" fw-medium " style="color: #6B7280 ;font-family: 'Cherry Swash', serif
;font-style: normal;">
Une plateforme de messagerie instantanée développée avec Laravel, React, Docker, et MySQL,
intégrant CI/CD, sécurité, et interface réactive.
</span>
<br>
<a href="https://github.com/mohamedmaghzaoui/chat-app"
class="btn btn-outline-warning offset-8 my-2 see-more "><i class="bi bi-github me-1"></i>
Voir
plus</a>
</div><!--end fourth project-->
<!--begin fifth project-->
<div class="resume second-project col-xl-3 my-4 offset-xl-1 offset-lg-1 col-lg-3 col-md-11 col-sm-11 col-11"
style="height:80%">
<!--second project image-->
<img src="./ai-gen-app.png" class="img-fluid rounded border border-primary "
style="margin-left: 6%;width:90%;margin-top:2% ;height:160px" alt="">
<p style="margin-left: 5%;" class="fs-3 fw-bold text-warning">
AiGen </p>
<!--text id for responsive font size-->
<span id="text" class=" fw-medium " style="color: #6B7280 ;font-family: 'Cherry Swash', serif
;font-style: normal;">
Une application React-Django utilisant l'API Gemini pour générer des données JSON/YAML
dynamiques et personnalisées
</span>
<br>
<a href="https://github.com/mohamedmaghzaoui/AIGen"
class="btn btn-outline-warning offset-8 my-2 see-more "><i class="bi bi-github me-1"></i>
Voir
plus</a>
</div> <!--end fifth project-->
</div>
</main><!--end main content (projects)-->
< </div><!--end row-->
</div><!--end container-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>