Skip to content

Commit 70f54cd

Browse files
gafsidjamelgafsidjamel
authored
Create dd
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Djamel Gafsi – Portfolio</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> <style> :root { --primary: #1f2937; --accent: #2563eb; --bg: #f9fafb; --text: #111827; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } header { background: var(--primary); color: white; padding: 80px 20px; text-align: center; position: relative; } header img { width: 150px; height: 150px; border-radius: 50%; border: 4px solid white; object-fit: cover; margin-bottom: 20px; } nav { background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 999; } nav ul { display: flex; justify-content: center; gap: 30px; list-style: none; padding: 10px 0; } nav ul li a { color: var(--text); text-decoration: none; font-weight: 600; } section { padding: 60px 20px; max-width: 1000px; margin: auto; } h2 { font-size: 2rem; color: var(--accent); margin-bottom: 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .card, .feedback, .project, .social { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.3s ease; } .card:hover, .project:hover, .feedback:hover { transform: translateY(-5px); } img.logo { max-width: 100px; height: auto; margin-bottom: 10px; } .gallery img { width: 100%; border-radius: 10px; } footer { background: var(--primary); color: white; text-align: center; padding: 30px 20px; } </style> </head> <body> <nav> <ul> <li><a href="#about">À propos</a></li> <li><a href="#skills">Compétences</a></li> <li><a href="#projects">Projets</a></li> <li><a href="#experiences">Expériences</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <header> <img src="https://via.placeholder.com/150" alt="Djamel Gafsi"> <h1>Djamel Gafsi</h1> <p>Débutant en Génie Électrique | Automatisme | Maintenance</p> </header> <section id="about"> <h2>À propos</h2> <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> </section> <section id="skills"> <h2>Compétences</h2> <div class="grid"> <div class="card">⚡ Électricité : câblage, diagnostic, lecture de plans</div> <div class="card">🛠️ Maintenance industrielle : préventive, corrective</div> <div class="card">🤖 Automatisme : API Siemens, logique câblée</div> <div class="card">🧠 Logiciels : AutoCAD, TIA Portal, Excel</div> </div> </section> <section id="projects"> <h2>Projet de fin d’étude</h2> <div class="project"> <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> <div class="gallery grid"> <img src="https://images.unsplash.com/photo-1581092919530-d91c5ff4a6e0" alt="API"> <img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2" alt="Schéma industriel"> </div> </div> </section> <section id="experiences"> <h2>Expériences professionnelles</h2> <div class="grid"> <div class="card"> <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/General_Electric_logo.svg" class="logo" alt="GE"> <p><strong>Technicien Électrique</strong> – General Electric</p> <p>Maintenance de systèmes industriels automatisés.</p> </div> <div class="card"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Schneider_Electric_2007.svg" class="logo" alt="Schneider"> <p><strong>Stage Automatisme</strong> – Schneider Electric</p> <p>Programmation et mise en service d’API.</p> </div> </div> </section> <section> <h2>Activités récentes</h2> <ul> <li>Installation de tableaux industriels (2024)</li> <li>Tests automatisés sur Siemens S7-1200</li> <li>Formation CSA Z462 en sécurité électrique</li> </ul> </section> <section> <h2>Commentaires</h2> <div class="grid"> <div class="feedback">"Très motivé et curieux – M. LARBI"</div> <div class="feedback">"Un excellent travail sur notre ligne de production – Ahmed B."</div> </div> </section> <section id="contact"> <h2>Contact</h2> <div class="grid"> <div class="card">📧 djamel@email.com</div> <div class="card">🔗 <a href="https://linkedin.com/in/djamelgafsi">LinkedIn</a></div> <div class="card">📍 Montréal, QC</div> </div> </section> <section> <h2>Réseaux sociaux</h2> <div class="grid"> <div class="social">🔗 <a href="https://linkedin.com/in/djamelgafsi">LinkedIn</a></div> <div class="social">📸 <a href="#">Instagram</a></div> <div class="social">📘 <a href="#">Facebook</a></div> <div class="social">🐦 <a href="#">Twitter</a></div> </div> </section> <footer> &copy; 2025 Djamel Gafsi – Tous droits réservés. </footer> </body> </html>
1 parent 3955014 commit 70f54cd

1 file changed

Lines changed: 201 additions & 0 deletions

File tree

‎dd‎

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">📧 djamel@email.com</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)