Skip to content

Commit 787fe1e

Browse files
gafsidjamelgafsidjamel
authored
Create Gafsidjamel
1 parent 3955014 commit 787fe1e

File tree

1 file changed

+201
-0
lines changed

1 file changed

+201
-0
lines changed

‎Gafsidjamel‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!DOCTYPE html>
2+
<html lang="fr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Djamel Gafsi – Portfolio</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
8+
<style>
9+
:root {
10+
--primary: #1f2937;
11+
--accent: #2563eb;
12+
--bg: #f9fafb;
13+
--text: #111827;
14+
}
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
body {
21+
font-family: 'Inter', sans-serif;
22+
background: var(--bg);
23+
color: var(--text);
24+
line-height: 1.6;
25+
}
26+
header {
27+
background: var(--primary);
28+
color: white;
29+
padding: 80px 20px;
30+
text-align: center;
31+
position: relative;
32+
}
33+
header img {
34+
width: 150px;
35+
height: 150px;
36+
border-radius: 50%;
37+
border: 4px solid white;
38+
object-fit: cover;
39+
margin-bottom: 20px;
40+
}
41+
nav {
42+
background: white;
43+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
44+
position: sticky;
45+
top: 0;
46+
z-index: 999;
47+
}
48+
nav ul {
49+
display: flex;
50+
justify-content: center;
51+
gap: 30px;
52+
list-style: none;
53+
padding: 10px 0;
54+
}
55+
nav ul li a {
56+
color: var(--text);
57+
text-decoration: none;
58+
font-weight: 600;
59+
}
60+
section {
61+
padding: 60px 20px;
62+
max-width: 1000px;
63+
margin: auto;
64+
}
65+
h2 {
66+
font-size: 2rem;
67+
color: var(--accent);
68+
margin-bottom: 20px;
69+
}
70+
.grid {
71+
display: grid;
72+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
73+
gap: 20px;
74+
}
75+
.card, .feedback, .project, .social {
76+
background: white;
77+
padding: 20px;
78+
border-radius: 12px;
79+
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
80+
transition: transform 0.3s ease;
81+
}
82+
.card:hover, .project:hover, .feedback:hover {
83+
transform: translateY(-5px);
84+
}
85+
img.logo {
86+
max-width: 100px;
87+
height: auto;
88+
margin-bottom: 10px;
89+
}
90+
.gallery img {
91+
width: 100%;
92+
border-radius: 10px;
93+
}
94+
footer {
95+
background: var(--primary);
96+
color: white;
97+
text-align: center;
98+
padding: 30px 20px;
99+
}
100+
</style>
101+
</head>
102+
<body>
103+
<nav>
104+
<ul>
105+
<li><a href="#about">À propos</a></li>
106+
<li><a href="#skills">Compétences</a></li>
107+
<li><a href="#projects">Projets</a></li>
108+
<li><a href="#experiences">Expériences</a></li>
109+
<li><a href="#contact">Contact</a></li>
110+
</ul>
111+
</nav>
112+
113+
<header>
114+
<img src="https://via.placeholder.com/150" alt="Djamel Gafsi">
115+
<h1>Djamel Gafsi</h1>
116+
<p>Débutant en Génie Électrique | Automatisme | Maintenance</p>
117+
</header>
118+
119+
<section id="about">
120+
<h2>À propos</h2>
121+
<p>Je suis un jeune diplômé passionné de systèmes industriels, d’électricité et de technologies modernes. Curieux, rigoureux et motivé à apprendre continuellement.</p>
122+
</section>
123+
124+
<section id="skills">
125+
<h2>Compétences</h2>
126+
<div class="grid">
127+
<div class="card">⚡ Électricité : câblage, diagnostic, lecture de plans</div>
128+
<div class="card">🛠️ Maintenance industrielle : préventive, corrective</div>
129+
<div class="card">🤖 Automatisme : API Siemens, logique câblée</div>
130+
<div class="card">🧠 Logiciels : AutoCAD, TIA Portal, Excel</div>
131+
</div>
132+
</section>
133+
134+
<section id="projects">
135+
<h2>Projet de fin d’étude</h2>
136+
<div class="project">
137+
<p><strong>Système automatisé pour la surveillance industrielle</strong> – Automate Siemens S7-1200, supervision en temps réel, alerte automatique. Réalisé avec AutoCAD et TIA Portal.</p>
138+
<div class="gallery grid">
139+
<img src="https://images.unsplash.com/photo-1581092919530-d91c5ff4a6e0" alt="API">
140+
<img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2" alt="Schéma industriel">
141+
</div>
142+
</div>
143+
</section>
144+
145+
<section id="experiences">
146+
<h2>Expériences professionnelles</h2>
147+
<div class="grid">
148+
<div class="card">
149+
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/General_Electric_logo.svg" class="logo" alt="GE">
150+
<p><strong>Technicien Électrique</strong> – General Electric</p>
151+
<p>Maintenance de systèmes industriels automatisés.</p>
152+
</div>
153+
<div class="card">
154+
<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Schneider_Electric_2007.svg" class="logo" alt="Schneider">
155+
<p><strong>Stage Automatisme</strong> – Schneider Electric</p>
156+
<p>Programmation et mise en service d’API.</p>
157+
</div>
158+
</div>
159+
</section>
160+
161+
<section>
162+
<h2>Activités récentes</h2>
163+
<ul>
164+
<li>Installation de tableaux industriels (2024)</li>
165+
<li>Tests automatisés sur Siemens S7-1200</li>
166+
<li>Formation CSA Z462 en sécurité électrique</li>
167+
</ul>
168+
</section>
169+
170+
<section>
171+
<h2>Commentaires</h2>
172+
<div class="grid">
173+
<div class="feedback">"Très motivé et curieux – M. LARBI"</div>
174+
<div class="feedback">"Un excellent travail sur notre ligne de production – Ahmed B."</div>
175+
</div>
176+
</section>
177+
178+
<section id="contact">
179+
<h2>Contact</h2>
180+
<div class="grid">
181+
<div class="card">📧 [email protected]</div>
182+
<div class="card">🔗 <a href="https://linkedin.com/in/djamelgafsi">LinkedIn</a></div>
183+
<div class="card">📍 Montréal, QC</div>
184+
</div>
185+
</section>
186+
187+
<section>
188+
<h2>Réseaux sociaux</h2>
189+
<div class="grid">
190+
<div class="social">🔗 <a href="https://linkedin.com/in/djamelgafsi">LinkedIn</a></div>
191+
<div class="social">📸 <a href="#">Instagram</a></div>
192+
<div class="social">📘 <a href="#">Facebook</a></div>
193+
<div class="social">🐦 <a href="#">Twitter</a></div>
194+
</div>
195+
</section>
196+
197+
<footer>
198+
&copy; 2025 Djamel Gafsi – Tous droits réservés.
199+
</footer>
200+
</body>
201+
</html>

0 commit comments

Comments
 (0)