ajout de contenu reprise du html

main
Etienne Veau 6 months ago
parent 5a3017ad09
commit 7ae0ca2a16

BIN
.DS_Store vendored

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 398 KiB

After

Width:  |  Height:  |  Size: 406 KiB

@ -127,7 +127,6 @@
hamburger.setAttribute('aria-expanded', navMenu.classList.contains('active'));
});
// Fermer le menu quand on clique sur un lien
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');

@ -23,12 +23,10 @@
<header>
<h1 class="typewriter">
<span id="name"></span>
<span class="typewriter-cursor"></span>
</h1>
<br>
<h2 class="typewriter">
<span id="title"></span>
<span class="typewriter-cursor"></span>
</h2>
</header>
@ -40,13 +38,13 @@
Je suis Etienne Veau étudiant en 1er année du B.U.T informatique au sein de LIUT dAubière.
Je suis capable de coder en utilisant les langages de programmations :
C & C++ , HTML, CSS, PHP, Python , Shell ( sh / Bash )
De créer des bases de données en SQL et dutiliser le terminal et ses commandes sous Linux
Je suis capable de coder en utilisant les langages de programmation :
C & C++ , HTML, CSS, PHP, Python , Shell ( sh / Bash ), de créer des bases de données en SQL et
dutiliser le terminal et ses commandes sous Linux.
Je suis quelquun de minutieux, proactif, curieux et discret.
Je suis actuellement a la recherche dune alternance dans une entreprise qui pourra men
Je suis actuellement à la recherche dune alternance dans une entreprise qui pourra men
apprendre
davantage sur la programmation et sur le monde du travail en informatique.
@ -58,7 +56,7 @@
<section class="card">
<h3>Mes Qualités :</h3>
<div class="qualite">
<h4>Minutieux</h4>
<h4><b>Minutieux</b></h4>
<p>Lors de mon expérience professionnelle en tant quagent de maintenance industriel, jai été
chargé du montage, du démontage et de lentretien de chaînes industrielles de plus de 20 mètres.
Ces équipements étaient essentiels au fonctionnement dune usine employant plus de 300
@ -69,7 +67,7 @@
</p>
</div>
<div class="qualite">
<h4>Proactif</h4>
<h4><b>Proactif</b></h4>
<p>Lors de mon expérience en tant quaide-menuisier, jai travaillé sur un chantier denvergure à la
Cité Administrative de Toulouse. Dans ce contexte, jai été amené à collaborer avec un collègue
menuisier atteint de surdité. Face à cette situation, jai assumé le rôle de représentant
@ -81,7 +79,7 @@
</p>
</div>
<div class="qualite">
<h4>Curieux</h4>
<h4><b>Curieux</b></h4>
<p>Ma curiosité me pousse à aller au-delà des attentes, que ce soit dans mon travail ou mes
apprentissages. Je mefforce de toujours approfondir mes connaissances, notamment en recherchant
des informations et du savoir faire complémentaires au cours de lI.U.T afin dy être plus
@ -93,7 +91,7 @@
</p>
</div>
<div class="qualite">
<h4>Discret</h4>
<h4><b>Discret</b></h4>
<p>Je suis une personne discrète, préférant me concentrer sur mon travail et mon entourage proche.
Une qualité qui tend à se perdre de nos jours avec lavènement du partage sur les réseaux
sociaux, comportement dont je préfère me tenir éloigné. Ma nature discrète et réservé se reflète
@ -104,6 +102,48 @@
</p>
</div>
</section>
<section class="card">
<h3>Compétences :</h3>
<div class="qualite">
<p><b>HTML & CSS & PHP :</b><br>
Création de pages web structurées et esthétiques, respectant les standards du web.
Gestion des interactions entre lutilisateur et le site</p>
<p><b>C & C++ :</b><br>
Programmation orientée objet, développement d'algorithmes et gestion fine de la mémoire.</p>
<p><b>Python :</b><br>
Utilisations des bibliothèques Numpy et Matplotlib pour lélaboration de représentations
graphiques
mathématiques diverses</p>
<p><b>SQL :</b><br>
Conception et gestion de bases de données relationnelles, écriture de requêtes complexes pour
extraire et manipuler les données.</p>
<p><b>Shell (sh/Bash) :</b><br>
Utilisation avancée du terminal pour automatiser des processus et gérer des systèmes. Maîtrise
des commandes essentielles pour la navigation, la configuration et l'administration des systèmes
Linux.</p>
<p><b>Compréhension des besoins clients :</b><br>
capacité à recueillir les besoins des clients de manière précise et détaillée. Grâce à une
écoute active. Je m'assure de bien comprendre leurs attentes, leurs
enjeux et leurs objectifs spécifiques.
Je mets également un point d'honneur à vulgariser les informations complexes pour les rendre
accessibles à tous. Cette capacité à transformer des concepts techniques en
termes clairs et compréhensibles garantit une collaboration fluide et une prise de décision
éclairée.</p>
</div>
</section>
</div>
</div>
@ -116,7 +156,6 @@
hamburger.setAttribute('aria-expanded', navMenu.classList.contains('active'));
});
// Fermer le menu quand on clique sur un lien
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');

@ -24,23 +24,7 @@
<div class="projets-grid">
<div class="card projet">
<h3>Gestion des stages (C)</h3>
<p>Application console pour la gestion des stages</p>
<ul>
<li>Manipulation de fichiers</li>
<li>Structures de données complexes</li>
<li>Note : 10.5/20</li>
</ul>
</div>
<div class="card projet">
<h3>Portfolio (Web)</h3>
<p>Site web personnel avec formulaire de contact</p>
<ul>
<li>HTML/CSS/PHP/JavaScript</li>
<li>Design responsive</li>
<li>Note : 15.5/20</li>
</ul>
<h3>Prochainement...</h3>
</div>
</div>
</div>
@ -52,8 +36,6 @@
navMenu.classList.toggle('active');
hamburger.setAttribute('aria-expanded', navMenu.classList.contains('active'));
});
// Fermer le menu quand on clique sur un lien
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');

@ -1,4 +1,3 @@
/* Reset et base */
* {
margin: 0;
padding: 0;
@ -12,7 +11,6 @@ body {
color: #e6e6e6;
}
/* Navigation */
nav {
background-color: #2d2d2d;
padding: 1rem;
@ -40,16 +38,14 @@ nav a:hover {
color: #7e7e7e;
}
/* Conteneur principal */
.container {
max-width: 1200px;
max-width: 1000px;
width: 100%;
margin: 2rem auto;
padding: 2rem;
box-sizing: border-box;
}
/* Cartes */
.card {
background-color: #2d2d2d;
border-radius: 8px;
@ -59,14 +55,13 @@ nav a:hover {
}
/* Grilles */
.grid-container {
display: grid;
max-width: 800px;
max-width: 1800px;
grid-template-columns: 1fr;
}
/* Qualifications */
.qualite {
margin: 1rem 0;
padding: 2rem;
@ -75,7 +70,7 @@ nav a:hover {
}
/* Timeline */
.timeline-item {
padding: 1.5rem;
border-left: 3px solid #8d9093;
@ -94,10 +89,6 @@ nav a:hover {
border-radius: 50%;
}
/* Formulaire */
.form-group {
margin-bottom: 1rem;
}
input,
textarea {
@ -122,13 +113,13 @@ textarea {
/* Page Contact */
.contact-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 100px);
/* Ajuste la hauteur selon la navbar */
}
.cv-preview {
@ -174,7 +165,7 @@ textarea {
}
/* Menu Hamburger */
.hamburger {
display: none;
background: none;
@ -202,20 +193,7 @@ textarea {
}
/* Effet machine à écrire */
.typewriter {
position: relative;
display: inline-block;
}
.typewriter-cursor {
position: absolute;
right: -8px;
width: 3px;
height: 80%;
background-color: #f0f2f4;
animation: blink 1s infinite;
}
b {
color: #989494;
@ -240,7 +218,7 @@ b {
nav ul {
position: fixed;
top: 3.5rem;
top: 1rem;
left: 0;
right: 0;
background-color: #2d2d2d;

@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
let currentText = 0;
let currentChar = 0;
const speed = 100; // Vitesse de frappe en ms
const speed = 100;
function typeWriter() {
if (currentText < texts.length) {
@ -18,17 +18,11 @@ document.addEventListener('DOMContentLoaded', () => {
currentText++;
currentChar = 0;
if (currentText < texts.length) {
setTimeout(typeWriter, speed * 2); // Pause entre les lignes
} else {
// Supprimer les curseurs après l'animation
document.querySelectorAll('.typewriter-cursor').forEach(cursor => {
cursor.style.display = 'none';
});
setTimeout(typeWriter, speed * 2);
}
}
}
}
// Démarrer l'animation après un court délai
setTimeout(typeWriter, 500);
});
Loading…
Cancel
Save