diff --git a/2048.html b/2048.html new file mode 100644 index 0000000..bb67f4e --- /dev/null +++ b/2048.html @@ -0,0 +1,25 @@ + + + + + + + 2048 + + + + +
+
+

2048

+
+ Score: 0 +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/CV-Veau_Etienne-Alternance.pdf b/CV-Veau_Etienne-Alternance.pdf new file mode 100644 index 0000000..3096555 Binary files /dev/null and b/CV-Veau_Etienne-Alternance.pdf differ diff --git a/CV-Veau_Etienne-Alternance.png b/CV-Veau_Etienne-Alternance.png new file mode 100644 index 0000000..905dcca Binary files /dev/null and b/CV-Veau_Etienne-Alternance.png differ diff --git a/CrossyRoad.mp4 b/CrossyRoad.mp4 new file mode 100644 index 0000000..3a6b18b Binary files /dev/null and b/CrossyRoad.mp4 differ diff --git a/J-W.png b/J-W.png new file mode 100644 index 0000000..bd92e7e Binary files /dev/null and b/J-W.png differ diff --git a/Taze.png b/Taze.png new file mode 100644 index 0000000..dc7ce36 Binary files /dev/null and b/Taze.png differ diff --git a/bash.png b/bash.png new file mode 100644 index 0000000..5b226b0 Binary files /dev/null and b/bash.png differ diff --git a/c.png b/c.png new file mode 100644 index 0000000..d80d6d2 Binary files /dev/null and b/c.png differ diff --git a/competences.html b/competences.html new file mode 100644 index 0000000..fceb7a3 --- /dev/null +++ b/competences.html @@ -0,0 +1,249 @@ + + + + + + + Etienne Veau - Compétences + + + + + + +
+
+ + + + +
+

Compétences :

+ +
+

HTML & CSS & PHP : + + ★★★★☆ +
+ Création de pages web structurées et esthétiques, respectant les standards du web. + Gestion des interactions entre l’utilisateur et le site. +

+
+ +
+

C & C++ : + + ★★★☆☆ +
+ Programmation orientée objet, développement d'algorithmes et gestion fine de la mémoire. +

+
+ +
+

Python : + + ★★★☆☆ +
+ Utilisation des bibliothèques Numpy et Matplotlib pour l’élaboration de représentations + graphiques mathématiques diverses. +

+
+ +
+

SQL : + + ★★★★☆ +
+ Conception et gestion de bases de données relationnelles, écriture de requêtes complexes pour + extraire et manipuler les données. +

+
+ +
+

Shell (sh/Bash) : + + ★★★☆☆ +
+ 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. +

+
+
+

C# : + + ★★★★☆ +
+ Développement d'applications orientées objet en utilisant le langage C#. Maîtrise des concepts + de la programmation, manipulation des structures de données pour créer + des applications robustes et efficaces avec .NET & MAUI. +

+
+ +
+

Administration Réseaux (Bases) : + + ★★★★★ +
+ Connaissance des principes fondamentaux de l'administration des réseaux acquises grâce a la + configuration d'un réseau de machine de l'I.U.T +

+
+ +
+

Gestion de Projet Informatique : + + ★★★☆☆ +
+ Capacité à gérer un projet informatique de manière méthodique, en planifiant les différentes + phases de développement, en assurant le respect des délais et des budgets. Utilisation des + outils de gestion de projet (MSProject) pour garantir la réussite des projets + tout en répondant aux besoins des clients et en garantissant la qualité des livrables. +

+
+ +
+

Arduino & Programmation Embarquée : + + ★★★★☆ +
+ Utilisation de la plateforme Arduino pour la création de projets électroniques et la + programmation embarquée. Connaissance des capteurs, des actionneurs, et des principes de base de + l'interface entre le matériel et le logiciel pour développer des systèmes embarqués interactifs + et autonomes. +

+
+ +
+

Compréhension des besoins clients : + + ★★★★☆ +
+ 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. + Sensibilisé à la Méthode AGILE. +

+
+ +
+

Anglais : + + ★★★☆☆ +
+ J'ai un niveau B1 en anglais, ce qui me permet de communiquer efficacement à l'écrit et à + l'oral. + Je peux comprendre et participer à des conversations sur des sujets familiers, tels que le + travail, les études et la vie quotidienne. + Je suis également capable de rédiger des emails ou des rapports clairs et structurés en anglais. + Bien que je continue à améliorer mon vocabulaire et ma fluidité, je suis confiant dans ma + capacité à collaborer avec des collègues et des clients anglophones. +

+
+
+ +
+

Mes Qualités :

+
+

Minutieux

+

Lors de mon expérience professionnelle en tant qu’agent de maintenance + industriel, j’ai été + chargé du montage, du démontage et de + l’entretien de chaînes industrielles de plus de 20 mètres. + Ces équipements étaient essentiels au fonctionnement d’une usine employant plus + de 300 personnes. + Cette responsabilité exigeait une grande précision, chaque intervention devant + garantir la sécurité et la performance de l’installation. + Je suis donc capable de faire preuve d’une minutie exemplaire, un atout + indispensable pour mener à bien les missions qui me seront confiées. +

+
+
+

Proactif

+

Lors de mon expérience en tant qu’aide-menuisier, j’ai travaillé sur un + chantier d’envergure à la + Cité Administrative de Toulouse. Dans ce contexte, j’ai été amené à collaborer + avec un collègue + menuisier atteint de surdité. Face à cette situation, j’ai assumé le rôle de + représentant principal + de l’entreprise, que ce soit lors de réunions de chantier ou dans les échanges + avec les autres corps de métier. + De plus, j’ai pris l’initiative de concevoir un gabarit adapté pour optimiser + le travail, ce qui a permis de respecter les délais + imposés tout en facilitant la collaboration. Cet engagement témoigne de ma capacité à + anticiper les besoins, à prendre des initiatives + et à agir efficacement dans des situations complexes. +

+
+
+

Curieux

+

Ma curiosité me pousse à aller au-delà des attentes, que ce soit dans mon + travail ou mes + apprentissages. Je m’efforce de toujours approfondir mes connaissances, + notamment en recherchant + des informations et du savoir-faire complémentaires au cours + de l’I.U.T afin d’y être plus + complet et performant. Comme lors de la SAE + sur la création d’un portfolio avec les langages de + programmation HTML, CSS et PHP, où j’ai + intégré un fond d’écran dynamique à mon site avec le + langage JavaScript que nous n’avions pas encore étudié à ce moment-là. Cette + soif d’apprendre me + permet de m’adapter rapidement à de nouveaux environnements et d’apporter une vraie + valeur ajoutée à chaque projet auquel je contribue. +

+
+
+

Discret

+

Je suis une personne discrète, préférant me concentrer sur mon + travail et mon entourage proche. + Ma nature discrète et réservée se reflète dans ma manière + d’interagir : je préserve la confidentialité d’informations sensibles, + respecte les limites de chacun et maintiens un climat professionnel + sérieux. Cette discrétion est un + atout dans le cadre de relations de travail, où elle favorise un climat de + confiance et de respect mutuel. +

+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..5db3cd4 --- /dev/null +++ b/contact.html @@ -0,0 +1,54 @@ + + + + + + + Contact - Etienne Veau + + + + + +
+
+ Contactez-moi +



+
+ Envoyer un e-mail +
+
+
+ + + + + + \ No newline at end of file diff --git a/cpp.png b/cpp.png new file mode 100644 index 0000000..b4093da Binary files /dev/null and b/cpp.png differ diff --git a/cs.png b/cs.png new file mode 100644 index 0000000..1c99647 Binary files /dev/null and b/cs.png differ diff --git a/css.png b/css.png new file mode 100644 index 0000000..5a5b690 Binary files /dev/null and b/css.png differ diff --git a/cursus.html b/cursus.html new file mode 100644 index 0000000..0a23efa --- /dev/null +++ b/cursus.html @@ -0,0 +1,90 @@ + + + + + + + Formation - Etienne Veau + + + + + + + + + + + +
+

Parcours Scolaire

+ +
+
+

2024 - Présent

+

BUT Informatique - IUT d'Aubière


+

Initiation au développement informatique, sensibilisation à la bonne gestion des ressources mémoires + et à l'importance de la vitesse d'execution des programmes.

+

Mon objectif personnel au sein de cette formation est d'acquérir du savoir-faire et des bonnes + pratiques de programmations afin de devenir un excellent développeur.

+
+ +
+

2020-2023

+

Licence Génie Mécanique et Aéronautique

+

Université Paul Sabatier - Toulouse (31)

+

Programmation Python, conception mécanique (CATIA V5 , SINUTRAIN)

+
+

Durant ces trois années, j’ai approfondi mes connaissances en physique, en conception mécanique, + ainsi qu’en manipulation de logiciels divers. J’ai développé des compétences analytiques et une + réelle capacité à travailler sur des projets techniques exigeants. J’ y ai découvert la + programmation avec les langages Python et SinuTrain ainsi qu'un attrait pour la robotique. J’ai + choisi d’interrompre ce cursus au début de la troisième année pour me rediriger vers un BUT + informatique, domaine qui me passionne et dans lequel je m'épanouïs pleinement. +

+
+ +
+

2020

+

Baccalauréat Scientifique

+

Spécialité Physique-Chimie

+

Lycée Bernart de Ventadour - Ussel (19)

+
+

Cette formation m’a permis d’acquérir des bases solides en sciences, en mathématiques et en + logique. +

+
+
+
+ + + + \ No newline at end of file diff --git a/cv.html b/cv.html new file mode 100644 index 0000000..efd5e17 --- /dev/null +++ b/cv.html @@ -0,0 +1,54 @@ + + + + + + + CV- Etienne Veau + + + + + + +
+
+ Aperçu CV Etienne Veau + + Télécharger mon CV + +
+
+ + + + + \ No newline at end of file diff --git a/eleclerc.png b/eleclerc.png new file mode 100644 index 0000000..d7cedff Binary files /dev/null and b/eleclerc.png differ diff --git a/exppro.html b/exppro.html new file mode 100644 index 0000000..a994a79 --- /dev/null +++ b/exppro.html @@ -0,0 +1,117 @@ + + + + + + + Formation - Etienne Veau + + + + + + +
+

Expériences Professionnelles

+ +
+
+

2023 (Avril) - 2024 (Août)

+
+

Jeld-Wen Fenêtres et Portes , Ussel (19)

+ illustrations Jeld-Wen +
+
+
+

Agent de fabrication (3x8):Montage de portes et réalisation de petites menuiseries. +

+

Aide-menuisier:Travail en longs déplacements de 4 semaines, à la cité administrative + de Toulouse.

+

Agent de maintenance industriel:Entretien de chaudières industrielles et de machines + de production telles que déligneuses, presses, emballeuses, et empileuses.

+

Conducteur de ligne:Anticiper et faire preuve d'autonomie pour optimiser les délais et + atteindre les objectifs de production.

+
+
+
+ +
+

Juin - Juillet 2022

+
+

C.TAZE , Bort Les Orgues (19)

+ illustrations C.TAZE +
+
+
+

Agent électricien:
Installation et maintenance de matériels électriques.

+

Participation à des projets d’éclairage extérieur et intérieur dans des zones industrielles. +

+
+
+
+ +
+

Décembre 2021, 2022 & Juillet-Août 2022

+
+

E.Leclerc Ussel (19)

+ illustrations E.Leclerc +
+
+
+

Employé de grandes surfaces:
Gestion des rayons alimentaires, réassort quotidien et + contrôle des stocks.

+

Accueil et conseil client pour les demandes spécifiques.

+

Caissier.

+
+
+
+ +
+

2018-2019

+
+

McDonald's Ussel (19)

+ illustrations McDonald's +
+
+
+

Équipier:
Gestion des commandes et interaction avec la clientèle.

+

Formation de nouveaux employés sur les procédures internes.

+

Sensibilisation à l’importance de l’hygiène dans le milieu de la restauration.

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/html.png b/html.png new file mode 100644 index 0000000..b0e68ef Binary files /dev/null and b/html.png differ diff --git a/images/CodeFirstLogo.png b/images/CodeFirstLogo.png deleted file mode 100644 index a9741c8..0000000 Binary files a/images/CodeFirstLogo.png and /dev/null differ diff --git a/images/dino-sprite.png b/images/dino-sprite.png new file mode 100644 index 0000000..9a1bc3c Binary files /dev/null and b/images/dino-sprite.png differ diff --git a/index.html b/index.html index 3c2faa4..11db0f8 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,102 @@ - - + + + - portfolio1a - One incredible styled html page - + + + Etienne Veau - Portfolio + + + +
+
+

+ +

+
+ +
+
+

A propos de moi :

+
+ photo de moi +

+ Je suis Etienne Veau étudiant en 1er année du B.U.T informatique au sein de L’IUT + d’Aubière. + + Je suis capable de coder en utilisant les langages de programmation : + C, C++, C#, HTML, CSS, PHP, Python, Shell + (sh / Bash), de créer des bases de données en SQL et d’utiliser le + terminal et ses commandes sous Linux. + Je suis aussi porteur de connaissances sur l'administration réseaux et ses configurations + de base. + + Je suis quelqu’un de minutieux, proactif, curieux et discret. - -

+ Je suis actuellement à la recherche d’une alternance dans une entreprise qui pourra m’en + apprendre davantage sur la programmation et sur le monde du travail en + informatique. - -

portfolio1a is my first page, and it has got style!

+ Cette alternance qui débutera en Septembre 2025 aura des cycles de 3 mois. +

+
-

Welcome on this template html/css project +

-

Very simple, some links, some menu... make it your own -… +

-

I have nothing more to say +

+ + + + + + + + + +
+
- -
Template made in 2022
- with Code#0 Code#0 -
+ + +
+
+ + + + \ No newline at end of file diff --git a/jetsky.pdf b/jetsky.pdf new file mode 100644 index 0000000..7dc9196 Binary files /dev/null and b/jetsky.pdf differ diff --git a/mail.png b/mail.png new file mode 100644 index 0000000..a05a6dd Binary files /dev/null and b/mail.png differ diff --git a/mcdo.png b/mcdo.png new file mode 100644 index 0000000..a5bcc19 Binary files /dev/null and b/mcdo.png differ diff --git a/moi.png b/moi.png new file mode 100644 index 0000000..343b1b4 Binary files /dev/null and b/moi.png differ diff --git a/mon-vrai-tpweb/Cursus_scolaire.html b/mon-vrai-tpweb/Cursus_scolaire.html new file mode 100644 index 0000000..2b19d4e --- /dev/null +++ b/mon-vrai-tpweb/Cursus_scolaire.html @@ -0,0 +1,120 @@ + + + + + + + Cursus Scolaire + + + + + +
+ +
+ +
+
+

Mon Cursus Scolaire

Lorem, ipsum dolor sit amet elementos consectetur + ducere adipisicing elit. Eius, eaque? + +
+
retour a l'accueil
+
+ +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/mon-vrai-tpweb/IMG1.JPG b/mon-vrai-tpweb/IMG1.JPG new file mode 100644 index 0000000..f8a7e32 Binary files /dev/null and b/mon-vrai-tpweb/IMG1.JPG differ diff --git a/mon-vrai-tpweb/IMG2.JPG b/mon-vrai-tpweb/IMG2.JPG new file mode 100644 index 0000000..a54f629 Binary files /dev/null and b/mon-vrai-tpweb/IMG2.JPG differ diff --git a/mon-vrai-tpweb/IMG3.JPG b/mon-vrai-tpweb/IMG3.JPG new file mode 100644 index 0000000..a119824 Binary files /dev/null and b/mon-vrai-tpweb/IMG3.JPG differ diff --git a/mon-vrai-tpweb/IMGF.JPG b/mon-vrai-tpweb/IMGF.JPG new file mode 100644 index 0000000..28517b5 Binary files /dev/null and b/mon-vrai-tpweb/IMGF.JPG differ diff --git a/mon-vrai-tpweb/IMGH.JPG b/mon-vrai-tpweb/IMGH.JPG new file mode 100644 index 0000000..d070098 Binary files /dev/null and b/mon-vrai-tpweb/IMGH.JPG differ diff --git a/mon-vrai-tpweb/IMGM.JPG b/mon-vrai-tpweb/IMGM.JPG new file mode 100644 index 0000000..da36f21 Binary files /dev/null and b/mon-vrai-tpweb/IMGM.JPG differ diff --git a/mon-vrai-tpweb/IMGN.JPG b/mon-vrai-tpweb/IMGN.JPG new file mode 100644 index 0000000..1a6ec77 Binary files /dev/null and b/mon-vrai-tpweb/IMGN.JPG differ diff --git a/mon-vrai-tpweb/en-savoir-plus-bouton.html b/mon-vrai-tpweb/en-savoir-plus-bouton.html new file mode 100644 index 0000000..a4e6d5f --- /dev/null +++ b/mon-vrai-tpweb/en-savoir-plus-bouton.html @@ -0,0 +1,158 @@ + + + + + + + mon-portfolio + + + + + +
+ +
+
+
+
+

Presentation

Lorem ipsum dolor Lorem ipsum dolor sit amet consectetur adipisicing elit. + Repellendus voluptatibus beatae labore magni culpa cum perferendis corporis doloribus obcaecati ex + neque, magnam perspiciatis vel odio eaque illo reiciendis nihil quaerat suscipit deleniti facilis atque. + Omnis quod beatae eligendi, ipsum voluptate voluptatibus dolor dolorum ipsam nam! Eum voluptatem id + harum. Animi fuga odio, tempore autem ullam aperiam, libero totam quos explicabo eius, officia expedita + voluptate voluptatem exercitationem corrupti non neque culpa pariatur consequatur quidem provident. + Incidunt aut aliquid quasi suscipit doloremque voluptatum ipsa aspernatur eaque alias veritatis odio, + numquam nulla amet consequatur, illum corrupti at veniam libero culpa voluptatem ea dolorum? Omnis + temporibus esse rem ex nesciunt necessitatibus vitae saepe sunt quo! Minima dolore ea, voluptate amet + porro a in ex tempora obcaecati dicta quos aliquid quaerat, officia natus vel corrupti est perferendis + perspiciatis eveniet nostrum? Nam, libero nulla pariatur magni explicabo corrupti quae quis harum hic + consectetur sit totam, porro eveniet tenetur officiis et accusamus obcaecati odit alias nisi molestiae + delectus rerum. Ad sapiente blanditiis eaque dolorem dolor omnis assumenda. Cumque magni nihil facere + id, accusantium veritatis nisi vero voluptatum vitae sed rerum, adipisci doloribus beatae itaque quas + nam. Ipsum assumenda doloribus beatae repudiandae hic molestias tempora obcaecati, omnis similique sunt + a ratione quibusdam fuga nam blanditiis minima vitae fugit molestiae in autem asperiores tempore + expedita, commodi incidunt. Aperiam, modi, aut nemo sint cupiditate voluptas nobis, quod optio minus + accusantium libero. Odit dignissimos eum doloremque autem quod deleniti, voluptates dolorum quo, amet + blanditiis similique nobis, ipsam eveniet accusamus nihil iste? Beatae, quos sed quia eius dignissimos + reprehenderit minima, deleniti soluta veniam neque eaque facere nulla molestias omnis harum. Fuga + architecto vitae corrupti, harum deleniti tenetur voluptatem a esse eveniet omnis pariatur magnam odit + libero minus. Accusamus magni consequatur corporis repudiandae dolores animi, perspiciatis qui + aspernatur dolorum cum voluptatum ipsa porro pariatur eligendi ratione accusantium, aliquam fugit + placeat facilis temporibus quaerat vitae consectetur. Quia, optio nihil? Dignissimos doloremque deserunt + placeat, laudantium cumque minima reprehenderit incidunt suscipit pariatur delectus? Accusamus eius + repudiandae vel. Amet tempore aut tempora culpa quos excepturi nam quod, consectetur fugit atque aliquam + nulla quam, assumenda ratione! Recusandae deserunt officiis reiciendis eligendi possimus voluptas sunt + dolores blanditiis? Magnam non fugiat doloribus voluptates! Error, sed recusandae! Deleniti deserunt + aspernatur dolore tenetur ipsum officia atque placeat nihil eaque! Molestiae maiores voluptatem alias + veniam tempore repudiandae sunt quas, cum illo, architecto autem explicabo, numquam aliquid et + exercitationem. Dolorem id mollitia quia dolorum laboriosam tempora aliquid, placeat voluptatem + molestiae accusantium dolor fugit delectus saepe numquam, voluptatum, deleniti soluta reiciendis? + Obcaecati possimus esse odit dignissimos eligendi aspernatur maiores tempore sunt natus alias, + necessitatibus atque, at quisquam reiciendis, explicabo molestiae? Iure quasi porro ad similique magnam + saepe praesentium, obcaecati consectetur dignissimos autem dolor laborum voluptatibus?sit amet + consectetur adipisicing elit. Ducimus, quod! Lorem ipsum dolor sit amet consectetur adipisicing elit. + Distinctio aperiam laborum aspernatur tempora! Hic est repudiandae expedita nam. Qui nihil dolores + commodi esse aliquid autem modi veritatis architecto aut alias id eveniet omnis beatae dolorem tempore + libero laboriosam ea dolor, voluptates natus. Harum tenetur voluptatibus incidunt soluta officia rerum + debitis? +
retour a l'accueil +
+

Caracteristique

Lorem,Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, incidunt + fuga, quos beatae officia expedita corrupti, voluptates quo dolor quaerat asperiores fugiat earum nihil + alias aliquid cupiditate perspiciatis? Eveniet neque sint asperiores incidunt, ut nesciunt voluptatum + corrupti temporibus necessitatibus consequuntur autem quaerat tempora, facilis veniam perferendis! Minus + ad deserunt doloremque nulla veritatis magnam. Nobis nisi modi minima vitae fugiat, saepe nihil + consequatur aliquid deleniti. Ducimus magnam consequatur amet id ullam, aperiam sapiente culpa sed + accusantium blanditiis dolore, quam minus saepe aliquid pariatur placeat eius odit veritatis deleniti + reiciendis corporis nostrum perferendis error non. Sed nobis totam ut nesciunt distinctio voluptas quas! + Minus omnis dicta vel, aperiam sunt ducimus rerum a earum voluptatem nesciunt dolorem qui enim atque + ipsa. Cum dignissimos tenetur dicta corrupti maiores earum incidunt hic harum rerum voluptate doloribus, + dolorum modi amet reprehenderit eos quod ea quae aut doloremque! Veritatis praesentium, in aspernatur + culpa est ipsa? Eaque, aliquam id consequuntur illo laborum quam ipsa, minima repellendus eligendi + tempora ex sed, optio fugiat? Asperiores minus quisquam dolores quia eius, suscipit qui corporis harum + inventore, ex natus praesentium maiores! Officia quis molestiae deserunt illo quisquam ad qui ipsam + repellat dicta sunt earum natus dolores, modi ex neque iure iusto recusandae vero harum culpa atque + voluptatem minima aliquid molestias. Sequi voluptatibus qui, saepe eius quam quibusdam nesciunt nostrum + corporis tempore voluptas dolores dicta, assumenda quaerat blanditiis reprehenderit! Porro voluptate + cupiditate itaque harum ad natus est, eos debitis expedita odit a temporibus accusamus molestias culpa + nisi animi quae? Itaque excepturi id ullam eos veritatis sequi ea est architecto illo nisi esse, + repudiandae nesciunt neque consequatur suscipit modi. Omnis, eligendi dolore porro soluta excepturi + perspiciatis distinctio alias? Numquam distinctio exercitationem, harum totam optio quod vero possimus + sit, officia eligendi et ducimus repellendus temporibus? Amet aperiam dignissimos ea animi molestias + sunt rem expedita sed. ipsum dolor sit amet consectetur adipisicing elit. Eius, eaque?Lorem ipsum dolor + sit amet consectetur adipisicing elit. Incidunt, harum veritatis. Modi necessitatibus laudantium tempora + alias corrupti similique, voluptatem optio non, voluptatum enim repellendus. Sit quam excepturi tempora + illum quidem. +
retour a l'accueil +
+
+ + + + + + + \ No newline at end of file diff --git a/mon-vrai-tpweb/en_savoir_plus.css b/mon-vrai-tpweb/en_savoir_plus.css new file mode 100644 index 0000000..31f1840 --- /dev/null +++ b/mon-vrai-tpweb/en_savoir_plus.css @@ -0,0 +1,138 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +body { + position: relative; + top: 78px; + display: flex; + flex-direction: column; +} + +body, +html, +article, +section { + font-family: 'Courier New', monospace; + color: #00ff00; +} + +.navbar { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 3; + height: 40px; +} + + +.liens-nav { + list-style: none; + display: flex; + gap: 20px; + padding: 60px; + position: relative; +} + +.liens-nav a { + color: #00ff00; + text-decoration: none; + font-size: 1em; + transition: color 0.3s ease; +} + +.liens-nav a:hover { + color: #3b9836; +} + +.navbar .liens-nav .active { + text-decoration: underline; + +} + +.hidden { + display: none; + position: absolute; + flex-direction: column; + cursor: pointer; + padding: 10px 0px; + background-color: #000000d3; + ; + z-index: 5; +} + +.hidden a { + cursor: pointer; + padding: 10px 0px; + +} + +.survol:hover .hidden { + display: flex; +} + + +section { + position: relative; + margin: auto; + z-index: 1; + width: 80%; + padding: 20px; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); + +} + +article { + position: relative; + z-index: 1; + width: 90%; + margin: auto; + padding: 20px; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); +} + +.pres { + display: flex; + padding: 10px; +} + +.pres img { + max-width: 50px; + height: auto; + border-radius: 10%; + margin-right: 10px; +} + +a { + text-decoration: none; + color: #1ccd1c; +} + +a:hover { + color: #21641d; +} + +footer { + background-color: #0000009a; + align-items: center; + width: 100%; + z-index: 3; + margin-top: 20px; +} \ No newline at end of file diff --git a/mon-vrai-tpweb/form.css b/mon-vrai-tpweb/form.css new file mode 100644 index 0000000..16f9659 --- /dev/null +++ b/mon-vrai-tpweb/form.css @@ -0,0 +1,158 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +body { + position: relative; + top: 78px; +} + +body, +html, +article, +section { + font-family: 'Courier New', monospace; + color: #00ff00; +} + + +.navbar { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 3; + height: 40px; +} + + + + +.liens-nav { + list-style: none; + display: flex; + gap: 20px; + padding: 60px; + position: relative; +} + +.liens-nav a { + color: #00ff00; + text-decoration: none; + font-size: 1em; + transition: color 0.3s ease; +} + +.liens-nav a:hover { + color: #3b9836; +} + +.navbar .liens-nav .active { + text-decoration: underline; + +} + +.hidden { + display: none; + position: absolute; + flex-direction: column; + cursor: pointer; + padding: 10px 0px; + background-color: #000000d3; + ; + z-index: 5; +} + +.hidden a { + cursor: pointer; + padding: 10px 0px; + +} + +.survol:hover .hidden { + display: flex; +} + + + + + +aside a:hover { + color: #3b9836; +} + + +.pres { + display: flex; + padding: 10px; +} + + +h2 { + display: flex; + flex-direction: column; + align-items: center; +} + +form { + max-width: 600px; + margin: auto; + padding: 20px; + background-color: #010101ae; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +label { + display: block; + margin-bottom: 5px; +} + + +input, +select, +textarea { + width: 95%; + padding: 10px; + margin-bottom: 10px; + border: 2px solid #35a015; + border-radius: 5px; +} + +button { + padding: 10px 20px; + margin-right: 10px; + background-color: #16a927; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +button:hover { + background-color: #056017; +} + +footer { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + align-items: center; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + z-index: 3; + height: 10px; +} \ No newline at end of file diff --git a/mon-vrai-tpweb/index.php b/mon-vrai-tpweb/index.php new file mode 100644 index 0000000..c572d1a --- /dev/null +++ b/mon-vrai-tpweb/index.php @@ -0,0 +1,178 @@ + + + + + + + page contact + + + + + +
+ +
+ '', + 'email' => '', + 'téléphone' => '', + 'motif' => '', + 'datetime' => '', + 'première_demande' => '', + 'message' => '' + ]; + + if ($_SERVER["REQUEST_METHOD"] === "POST") { + if (empty($_POST['nom'])) { + $errors[] = "Le champ nom est requis."; + } else { + $formData['nom'] = htmlspecialchars($_POST['nom']); + } + + if (empty($_POST['email'])) { + $errors[] = "Le champ email est requis."; + } elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { + $errors[] = "L'adresse email est invalide."; + } else { + $formData['email'] = htmlspecialchars($_POST['email']); + } + + $formData['téléphone'] = htmlspecialchars($_POST['téléphone']); + $formData['motif'] = htmlspecialchars($_POST['motif']); + $formData['datetime'] = htmlspecialchars($_POST['datetime']); + $formData['première_demande'] = htmlspecialchars($_POST['première_demande']); + $formData['message'] = htmlspecialchars($_POST['message']); + + if (empty($_POST['message'])) { + $errors[] = "Le champ message est requis."; + } + + if (empty($errors)) { + echo "

Merci pour votre message !

"; + echo "

Voici le récapitulatif de votre demande :

"; + echo "

Nom : " . $formData['nom'] . "

"; + echo "

Email : " . $formData['email'] . "

"; + echo "

Téléphone : " . $formData['téléphone'] . "

"; + echo "

Motif : " . $formData['motif'] . "

"; + echo "

Date et heure : " . $formData['datetime'] . "

"; + echo "

Première demande : " . $formData['première_demande'] . "

"; + echo "

Message : " . nl2br($formData['message']) . "

"; + exit; + } + } + ?> + +

Contactez-moi :

+
+ + + + + + + + + + + + + + + + + > Oui + > Non + + + + + + +
+ + "; + foreach ($errors as $error) { + echo "
  • $error
    • "; + } + echo ""; + } + ?> + + + + + + + \ No newline at end of file diff --git a/mon-vrai-tpweb/logo_insta.jpg b/mon-vrai-tpweb/logo_insta.jpg new file mode 100644 index 0000000..a9b3526 Binary files /dev/null and b/mon-vrai-tpweb/logo_insta.jpg differ diff --git a/mon-vrai-tpweb/logo_snap.jpg b/mon-vrai-tpweb/logo_snap.jpg new file mode 100644 index 0000000..449f615 Binary files /dev/null and b/mon-vrai-tpweb/logo_snap.jpg differ diff --git a/mon-vrai-tpweb/logo_youtube.jpg b/mon-vrai-tpweb/logo_youtube.jpg new file mode 100644 index 0000000..b48dbeb Binary files /dev/null and b/mon-vrai-tpweb/logo_youtube.jpg differ diff --git a/mon-vrai-tpweb/mon-portfolio.css b/mon-vrai-tpweb/mon-portfolio.css new file mode 100644 index 0000000..57674c9 --- /dev/null +++ b/mon-vrai-tpweb/mon-portfolio.css @@ -0,0 +1,233 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +body { + position: relative; + top: 78px; +} + +body, +html, +article, +section { + font-family: 'Courier New', monospace; + color: #00ff00; +} + + +.navbar { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 3; + height: 40px; +} + + + + +.liens-nav { + list-style: none; + display: flex; + gap: 20px; + padding: 60px; + position: relative; +} + +.liens-nav a { + color: #00ff00; + text-decoration: none; + font-size: 1em; + transition: color 0.3s ease; +} + +.liens-nav a:hover { + color: #3b9836; +} + +.navbar .liens-nav .active { + text-decoration: underline; + +} + +.hidden { + display: none; + position: absolute; + flex-direction: column; + cursor: pointer; + padding: 10px 0px; + background-color: #000000d3; + ; + z-index: 5; +} + +.hidden a { + cursor: pointer; + padding: 10px 0px; + +} + +.survol:hover .hidden { + display: flex; +} + + +section { + position: relative; + z-index: 1; + width: 40%; + margin-left: 10%; + padding: 20px; + float: left; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); + +} + +article { + position: relative; + z-index: 1; + width: 80%; + margin: auto; + padding: 20px; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); +} + +aside { + position: relative; + float: inline-end; + z-index: 1; + width: 25%; + margin-right: 10%; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); +} + +aside ul { + list-style: none; +} + +aside li { + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 0; +} + +aside a { + display: flex; + align-items: center; + text-decoration: none; + color: #00ff00; +} + +aside img { + width: 20px; + height: auto; + margin-left: 10px; +} + +aside a:hover { + color: #3b9836; +} + + +.pres { + display: flex; + padding: 10px; +} + + + + +.pres img { + max-width: 50px; + height: auto; + border-radius: 10%; + margin-right: 10px; +} + + + + +aside img { + position: relative; + height: 50px; + width: 50px; + border-radius: 20%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.384), + 0 6px 20px rgba(0, 255, 0, 0.3); +} + + +a { + text-decoration: none; + color: #00ff0096; +} + +span { + padding: 10px; +} + +a img { + padding: 1px; +} + +a:hover { + text-decoration: underline; +} + + +h1, +h2 { + color: #12c012; + text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e; +} + +footer { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + align-items: center; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + z-index: 3; + height: 10px; +} + + +@media (max-width: 800px) { + + section { + flex-direction: column; + align-items: center; + width: 75%; + } + + aside { + margin-left: 0; + margin-top: 20px; + width: 80%; + } +} \ No newline at end of file diff --git a/mon-vrai-tpweb/mon-portfolio.html b/mon-vrai-tpweb/mon-portfolio.html new file mode 100644 index 0000000..ec7adb6 --- /dev/null +++ b/mon-vrai-tpweb/mon-portfolio.html @@ -0,0 +1,134 @@ + + + + + + + Mon Portfolio - Veau Etienne + + + + + + +
    + +
    + + + +
    + +
    +
    +

    Présentation

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, quod!

    + En savoir plus +
    + +
    +

    Caractéristiques

    +

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, eaque?

    + En savoir plus +
    +
    +
    +
    + + +
    + + + + + + + \ No newline at end of file diff --git a/mon-vrai-tpweb/page_image.css b/mon-vrai-tpweb/page_image.css new file mode 100644 index 0000000..3e6bf78 --- /dev/null +++ b/mon-vrai-tpweb/page_image.css @@ -0,0 +1,163 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +body { + position: relative; + top: 78px; + display: flex; + flex-direction: column; +} + +body, +html, +article, +section { + font-family: 'Courier New', monospace; + color: #00ff00; +} + + +.navbar { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 3; + height: 40px; +} + + + + +.liens-nav { + list-style: none; + display: flex; + gap: 20px; + padding: 60px; + position: relative; +} + +.liens-nav a { + color: #00ff00; + text-decoration: none; + font-size: 1em; + transition: color 0.3s ease; +} + +.liens-nav a:hover { + color: #3b9836; +} + +.navbar .liens-nav .active { + text-decoration: underline; + +} + +.hidden { + display: none; + position: absolute; + flex-direction: column; + cursor: pointer; + padding: 10px 0px; + background-color: #000000d3; + z-index: 5; +} + +.hidden a { + cursor: pointer; + padding: 10px 0px; + +} + +.survol:hover .hidden { + display: flex; +} + + +section { + position: relative; + z-index: 1; + width: 60%; + margin: auto; + padding: 20px; + float: left; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); + +} + +figure { + position: relative; + z-index: 1; + width: 80%; + margin: auto; + padding: 20px; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); +} + + +.pres { + display: flex; + padding: 10px; +} + + +body img { + width: 100%; + height: auto; +} + +.pres .trombinoscope { + max-width: 40px; + height: 60px; + border-radius: 10%; + margin-right: 10px; + margin-top: 10px; +} + + +a { + text-decoration: none; + color: #00ff0096; +} + +a:hover { + text-decoration: underline; +} + + +h1, +h2 { + color: #12c012; + text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e; +} + +h1 { + text-align: center; + color: #0d9d03; + margin-bottom: 30px; +} + +footer { + background-color: #0000009a; + align-items: center; + width: 100%; + z-index: 3; + margin-top: 20px; +} \ No newline at end of file diff --git a/mon-vrai-tpweb/page_image.html b/mon-vrai-tpweb/page_image.html new file mode 100644 index 0000000..776814a --- /dev/null +++ b/mon-vrai-tpweb/page_image.html @@ -0,0 +1,107 @@ + + + + + + + page image + + + +
    + +
    + + +

    Galerie d'Art Surréaliste

    +
    +
    + + Description de l'image 1 + +
    La porte du désert
    +
    + +
    + + Description de l'image 2 + +
    Le temps qui s'échappe
    +
    + +
    + + Description de l'image 3 + +
    L'oeil dans l'oeuf
    +
    +
    + + + + + + \ No newline at end of file diff --git a/mon-vrai-tpweb/page_video.css b/mon-vrai-tpweb/page_video.css new file mode 100644 index 0000000..8e6d1c1 --- /dev/null +++ b/mon-vrai-tpweb/page_video.css @@ -0,0 +1,164 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +body { + position: relative; + top: 100px; +} + +body, +html, +article, +section { + font-family: 'Courier New', monospace; + color: #00ff00; +} + + +.navbar { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 3; + height: 40px; +} + + + + +.liens-nav { + list-style: none; + display: flex; + gap: 20px; + padding: 60px; + position: relative; +} + +.liens-nav a { + color: #00ff00; + text-decoration: none; + font-size: 1em; + transition: color 0.3s ease; +} + +.liens-nav a:hover { + color: #3b9836; +} + +.navbar .liens-nav .active { + text-decoration: underline; + +} + +.hidden { + display: none; + position: absolute; + flex-direction: column; + cursor: pointer; + padding: 10px 0px; + background-color: #000000d3; + ; + z-index: 5; +} + +.hidden a { + cursor: pointer; + padding: 10px 0px; + +} + +.survol:hover .hidden { + display: flex; +} + + + +article { + position: relative; + z-index: 1; + width: 80%; + margin: auto; + padding: 20px; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), + 0 6px 20px rgba(1, 250, 1, 0.535); +} + + + + +.pres { + display: flex; + padding: 10px; +} + + + + +.pres img { + max-width: 50px; + height: auto; + border-radius: 10%; + margin-right: 10px; +} + + + +a { + text-decoration: none; + color: #00ff0096; +} + + +a:hover { + text-decoration: underline; +} + + +h1, +h2 { + color: #12c012; + text-shadow: 0 0 10px #e3efe339, 0 0 20px #f3f7f35e; +} + +vidéo { + margin: 20px; +} + +section { + display: flex; + flex-direction: column; + width: 50%; + height: 320px; + padding: 20px; + background-color: rgba(0, 0, 0, 0.803); + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.635), 0 6px 20px rgba(1, 250, 1, 0.535); + margin-left: 20px; +} + +footer { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + align-items: center; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + z-index: 3; + height: 10px; +} \ No newline at end of file diff --git a/mon-vrai-tpweb/page_vidéo.html b/mon-vrai-tpweb/page_vidéo.html new file mode 100644 index 0000000..6a589f1 --- /dev/null +++ b/mon-vrai-tpweb/page_vidéo.html @@ -0,0 +1,105 @@ + + + + + + + page vidéo + + +
    + +
    + + + +
    + + +
    +
    +

    Présentation

    +

    La BMW M8 Gran Coupé Competition xDrive est équipée d'un moteur longitudinal avant huit cylindres en + V suralimenté développant un couple maximum de 750 Nm dès 1800 trs/min ainsi qu'une puissance + maximum de 625 ch à 6000 trs/min transmise aux quatre roues de 20 pouces par le biais d'une boîte de + vitesses automatique à 8 rapports.

    +
    +
    +
    + + + + + + + + + + + + \ No newline at end of file diff --git a/mon-vrai-tpweb/photodemoi.jpg b/mon-vrai-tpweb/photodemoi.jpg new file mode 100644 index 0000000..13dcd7c Binary files /dev/null and b/mon-vrai-tpweb/photodemoi.jpg differ diff --git a/mon-vrai-tpweb/table.css b/mon-vrai-tpweb/table.css new file mode 100644 index 0000000..b38ad53 --- /dev/null +++ b/mon-vrai-tpweb/table.css @@ -0,0 +1,159 @@ +canvas { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} + +body { + position: relative; + top: 78px; + display: flex; + flex-direction: column; +} + +body, +html, +article, +section { + font-family: 'Courier New', monospace; + color: #00ff00; +} + +.navbar { + background-color: #0000009a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 3; + height: 40px; +} + + +.liens-nav { + list-style: none; + display: flex; + gap: 20px; + padding: 60px; + position: relative; +} + +.liens-nav a { + color: #00ff00; + text-decoration: none; + font-size: 1em; + transition: color 0.3s ease; +} + +.liens-nav a:hover { + color: #3b9836; +} + +.navbar .liens-nav .active { + text-decoration: underline; + +} + +.hidden { + display: none; + position: absolute; + flex-direction: column; + cursor: pointer; + padding: 10px 0px; + background-color: #000000d3; + z-index: 5; +} + +.hidden a { + cursor: pointer; + padding: 10px 0px; + +} + +.survol:hover .hidden { + display: flex; +} + + + +.pres { + display: flex; + padding: 10px; +} + +.pres img { + max-width: 50px; + height: auto; + border-radius: 10%; + margin-right: 10px; +} + +body a { + text-decoration: none; + color: #f2f6f2; + text-align: center; + margin-top: 20px; +} + + + +a:hover { + color: #21641d; +} + + +table { + width: 80%; + border-collapse: collapse; + margin-top: 20px; + background-color: #070707af; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + border-radius: 10px; + margin: auto; +} + +caption { + font-size: 1.5em; + margin-bottom: 10px; + color: #f6f7f6; + +} + +th, +td { + padding: 15px; + text-align: left; + border: 1px solid #ddd; +} + +th { + background-color: #444; + color: white; +} + +td { + background-color: #030303bd; + color: white; +} + +td img { + width: 60px; + height: auto; + display: block; + margin: 0 auto; +} + +footer { + background-color: #0000009a; + width: 100%; + z-index: 3; + margin-top: 20px; + color: #00ff00; +} \ No newline at end of file diff --git a/mon-vrai-tpweb/table.html b/mon-vrai-tpweb/table.html new file mode 100644 index 0000000..5585e95 --- /dev/null +++ b/mon-vrai-tpweb/table.html @@ -0,0 +1,143 @@ + + + + + + + Planning Hebdomadaire + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Mes activités extra-scolaires
    JourCréneauxActivitésImages
    Lundi17:00 - 18:30RévisionsRévisions
    21:00 - 22:30Root Me
    Mardi18:00 - 19:30NatationNatation
    Mercredi21:00 - 22:30MusculationMusculation
    Vendredi
    Samedi10:00 - 11:30RévisionsFootball
    15:00 - 16:30Football
    Dimanche10:00 - 11:30RévisionsRévisions
    15:00 - 16:30
    + + + + + +retour a l'accueil + + + \ No newline at end of file diff --git a/mycoolstyle.css b/mycoolstyle.css deleted file mode 100644 index 92d69df..0000000 --- a/mycoolstyle.css +++ /dev/null @@ -1,32 +0,0 @@ -body { - padding-left: 11em; - font-family: Georgia, 'Georgia', "Times New Roman", - Times, serif; - color: darksalmon; - background-color: rgb(39, 39, 84) } - ul.navbar { - list-style-type: none; - padding: 0; - margin: 0; - position: absolute; - top: 2em; - left: 1em; - width: 9em } - h1 { - font-family: Helvetica, Geneva, Arial, - SunSans-Regular, sans-serif } - ul.navbar li { - background: white; - margin: 0.5em 0; - padding: 0.3em; - border-right: 1em solid darksalmon } - ul.navbar a { - text-decoration: none } - a:link { - color: blue } - a:visited { - color: darkblue } - address { - margin-top: 1em; - padding-top: 1em; - border-top: thin dotted } \ No newline at end of file diff --git a/php.png b/php.png new file mode 100644 index 0000000..15d12bb Binary files /dev/null and b/php.png differ diff --git a/projets.html b/projets.html new file mode 100644 index 0000000..898a172 --- /dev/null +++ b/projets.html @@ -0,0 +1,284 @@ + + + + + + + Projets - Etienne Veau + + + + + + +
    +

    Mes projets

    + +
    +
    +

    Exploitation d'une Base de Données – Projet OCTAVE

    +

    Contexte : Projet réalisé en trinôme à l'IUT.

    +

    Objectifs du projet : Concevoir une étude de marché pour le lancement d'une plateforme fictive + de streaming musical, en s'appuyant sur plusieurs jeux de données publics (issus de Kaggle).

    +

    Travail réalisé : Nous avons choisi trois jeux de données portant sur les habitudes d'écoute + de musique en ligne, les ventes par format et l'accès à Internet dans le monde. Après validation + auprès de l'enseignant, nous avons conçu un modèle relationnel (MCD/MLD), puis créé un script Python + pour construire et remplir notre base PostgreSQL. Nous avons également nettoyé les données + (suppression des doublons, renommage, jointures) et produit des visualisations pertinentes + (graphiques, heatmaps, histogrammes) afin d'extraire des tendances utiles à la stratégie de + lancement d’OCTAVE.

    +

    Résultats du projet : Ce projet m’a permis de développer des compétences concrètes en + traitement de données massives, en modélisation relationnelle, en automatisation via + Python/SQLAlchemy et en dataviz avec Matplotlib. Il m’a aussi sensibilisé à l’importance d’adapter + une stratégie commerciale aux spécificités régionales (connexion internet, genre musical, âge, type + d’abonnement).

    +

    Document :

    +
    +
    + +
    +
    +

    Développement d'un jeu de société - Qawale

    +

    Contexte : Projet personnel de développement d'application mobile cross-platform.

    +

    Objectifs du projet : Recréer le jeu de société Qawale en version numérique en utilisant .NET + MAUI et C#, + permettant de jouer sur différentes plateformes (iOS, Android, Windows).

    +

    Travail réalisé : J'ai développé une application complète incluant : +

      +
    • Une interface utilisateur intuitive et responsive
      • +
    • Un mode deux joueurs local
      • +
    • Un système de validation des coups selon les règles officielles
      • +
    • Une intelligence artificielle pour jouer contre l'ordinateur
      • +
    • Un système de sauvegarde des parties
      • +
    +

    +

    Technologies utilisées : +

      +
    • .NET MAUI pour le développement cross-platform
      • +
    • C# pour la logique du jeu
      • +
    • XAML pour l'interface utilisateur
      • +
    +

    +

    Résultats du projet : Ce projet m'a permis d'approfondir mes compétences en développement + avec .NET MAUI, en programmation orientée objet avec C#, et en conception d'interfaces utilisateur. + J'ai également acquis de l'expérience dans la gestion de la logique de jeu complexe et dans + l'implémentation d'IA basiques.

    +

    Code source : Voir le dépôt Git

    +
    +
    + +
    +
    +

    Création d’un Portfolio Web

    +

    Contexte : Projet réalisé seul à l'IUT, visant à présenter nos + compétences techniques sous forme de site web personnel.

    +

    Objectifs du projet : Développer un portfolio web en utilisant HTML, CSS et PHP, permettant de + valoriser mes projets, mon parcours et mes compétences, tout en respectant les bonnes pratiques du + développement web.

    +

    Travail réalisé : J’ai conçu une interface responsive en HTML/CSS, intégrant plusieurs + sections (présentation,cursus,contact). En complément, je me suis autoformé + les bases de Java afin d’ajouter un fond d’écran animé et interactif, apportant une touche dynamique + à l’interface.

    +

    Résultats du projet : Ce projet m’a permis d’approfondir mes compétences en développement web + (HTML/CSS/PHP), d’améliorer ma capacité à mener un projet seul de bout en bout, et de découvrir les + bases de la programmation en Java. Il m’a également sensibilisé à l’importance de l’UX/UI et à la + cohérence graphique dans un site vitrine. j'ai obtenu la note de 16/20 pour mon travail la moyenne + pour ma promo est de 14/20

    +

    Site : Voir le + portfolio

    +

    +
    +
    + + + +
    +
    +

    Création d'une Base de Données (SQL)

    +

    Contexte : Projet d'étude en trinôme à l'IUT.

    +

    Objectifs du projet : Concevoir de A à Z une base de données correspondant à une entreprise de + location.

    +

    Travail réalisé : Nous avons choisi de créer une entreprise louant des Jet-ski et avons mis en + place un MCD/MLD avant de concevoir le script SQL permettant de créer et remplir notre base de + données avec un jeu d'essais.

    +

    Résultats du projet : Ce projet m'a appris à appliquer concrètement mes connaissances SQL, le + respect des 3 formes normales, la mise en place de vérifications automatiques des données pour + assurer la robustesse de la base, ainsi que la création de jeux de données et de requêtes tests pour + vérifier son bon fonctionnement. Dans ce projet, la partie sur la création de l'entreprise m'a + sensibilisé aux démarches RSE et m'a permis d'imaginer différentes facettes du fonctionnement d'une + PME.

    +

    Document :

    +

    +
    +
    + + +
    +
    +

    Administration d'un système Linux

    +

    Contexte : Projet d'étude individuel à l'IUT.

    +

    Objectifs du projet : Installer sur une machine vierge une distribution Debian, la configurer + en installant des paquets et des systèmes, partitionner des disques, et mettre en place des + Backports et l'utilisation de FlatPak.

    +

    Travail réalisé : Ce projet m'a permis de m'exercer en autonomie à la recherche d'informations + sur internet afin de comprendre et réaliser les tâches demandées. Je me suis également grandement + familiarisé avec l'utilisation du terminal et ses lignes de commandes. Enfin, cela m'a permis d'en + apprendre plus sur le fonctionnement d'un espace disque et d'un système d'exploitation.

    +

    Résultats du projet : J'ai réussi à installer une distribution Debian, à la configurer avec + les paquets demandés, à partitionner les disques et à mettre en place les Backports ainsi que + FlatPak. J'ai également appris à utiliser le terminal de manière efficace, ce qui m'a permis de + gagner en autonomie dans la gestion de systèmes Linux.

    +
    +
    + + +
    +
    +

    Gestion des stages de l'I.U.T

    +

    Contexte : Projet d'étude en binôme à l'IUT.

    +

    Objectifs du projet : Concevoir un algorithme capable de traiter les demandes de stage de + l'IUT.

    +

    Travail réalisé : Le programme devait pouvoir gérer l'espace "Responsable", capable d'affecter + un étudiant à un stage sur lequel il aurait préalablement candidaté. Il y avait également un espace + de saisie des notes ainsi que la possibilité de procéder à l'ajout de nouvelles offres de stage. + L'espace "Étudiant" permettait à l'étudiant de consulter les stages disponibles ainsi que d'y + candidater.

    +

    Résultats du projet : Ce projet m'a permis de me familiariser avec le langage C et m'a appris + à gérer des tableaux de manière efficace (Chargement, Recherche, Tri, Affichage). Cela m'a également + permis d'utiliser différents types de fichiers afin d'effectuer des sauvegardes.

    + +
    +
    + + +
    +
    +

    Création d'un jeu type tour par tour

    +

    Contexte : Projet d'étude en binôme à l'IUT.

    +

    Objectifs du projet : Concevoir un jeu de combat tour par tour entre un chevalier et des + monstres, basé sur le principe de Pierre-Feuille-Ciseaux.

    +

    Travail réalisé : Le cahier des charges étant très complet, j'ai dû apporter un soin + particulier au respect de l'utilisation des différentes structures (Pile, File, Liste). Ce projet a + renforcé ma compréhension des structures de données et m'a introduit à la notion de complexité et à + l'utilisation de fichiers binaires pour effectuer des sauvegardes.

    +

    Sujet du projet : +

    +
    +
    +

    Mes projets personnels

    + +
    +
    +

    Conception d'une réplique de jeu vidéo

    +

    Contexte : Projet personnel depuis janvier 2025.

    +

    Objectifs du projet : Reproduire le jeu "Crossy Road" avec Unity et concevoir un algorithme + imbattable en C#.

    +

    Travail réalisé : Ce projet consiste à reproduire fidèlement le jeu, puis à créer un + algorithme en C# capable d'interagir avec le jeu afin qu'il soit imbattable. Une fois le programme + fonctionnel, je souhaite entraîner une IA capable de battre le jeu et comparer les deux solutions + pour analyser celle qui obtient le meilleur score.

    +

    Résultats du projet : Ce projet me permettra de m'autoformer sur Unity et C#, de travailler + sur + un projet complexe, et sera une bonne introduction aux notions d'IA et de robotique.

    + +
    +
    + +
    +
    +

    Vidéo d'inspiration : Voir sur YouTube

    +
    +
    + + +
    +
    +

    Développement du jeu 2048

    +

    Contexte : Projet personnel réalisé pour approfondir mes compétences en développement web.

    +

    Objectifs du projet : Recréer le célèbre jeu 2048 en utilisant HTML, CSS et JavaScript, tout + en + développant une interface utilisateur moderne et responsive.

    +

    Travail réalisé : J'ai développé une version complète du jeu 2048 en intégrant plusieurs + fonctionnalités : +

      +
    • Un système de score en temps réel
      • +
    • Des animations fluides pour les déplacements et fusions
      • +
    • Une grille 4x4 réactive aux touches directionnelles
      • +
    • Un bouton de nouvelle partie
      • +
    +

    +

    Résultats du projet : Ce projet m'a permis de renforcer mes compétences en JavaScript, + notamment + dans la manipulation de tableaux 2D, la gestion des événements clavier, et la création d'animations + CSS. + J'ai également approfondi en gestion de + la + logique de jeu.

    +

    Jouer : Jouer à 2048

    +
    +
    +
    + + + + + + + + + \ No newline at end of file diff --git a/python.png b/python.png new file mode 100644 index 0000000..720537b Binary files /dev/null and b/python.png differ diff --git a/rapport.pdf b/rapport.pdf new file mode 100644 index 0000000..ec79b02 Binary files /dev/null and b/rapport.pdf differ diff --git a/script_2048.js b/script_2048.js new file mode 100644 index 0000000..340afa1 --- /dev/null +++ b/script_2048.js @@ -0,0 +1,223 @@ +class Game2048 { + constructor() { + this.grid = Array(4).fill().map(() => Array(4).fill(0)); + this.score = 0; + this.gridElement = document.querySelector('.grid'); + this.scoreElement = document.getElementById('score'); + this.setupGrid(); + this.addNumber(); + this.addNumber(); + this.setupEventListeners(); + this.showInstructions(); // Ajout de l'appel à la nouvelle méthode + } + + setupGrid() { + for (let i = 0; i < 16; i++) { + const cell = document.createElement('div'); + cell.classList.add('cell'); + this.gridElement.appendChild(cell); + } + this.updateGrid(); + } + + updateGrid() { + const cells = this.gridElement.getElementsByClassName('cell'); + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 4; j++) { + const value = this.grid[i][j]; + const cell = cells[i * 4 + j]; + const previousValue = parseInt(cell.getAttribute('data-value')) || 0; + + cell.textContent = value || ''; + cell.setAttribute('data-value', value); + + // Ajouter les animations + if (value && value !== previousValue) { + // Animation de fusion si la valeur a doublé + if (previousValue && value === previousValue * 2) { + cell.classList.add('merge'); + } + // Animation de glissement selon la direction + else if (value) { + const lastMove = this.lastMoveDirection; + if (lastMove) { + cell.classList.add(`slide-${lastMove}`); + } + } + } + + // Retirer les classes d'animation après leur exécution + cell.addEventListener('animationend', () => { + cell.classList.remove('merge', 'slide-left', 'slide-right', 'slide-up', 'slide-down'); + }); + } + } + this.scoreElement.textContent = this.score; + } + + addNumber() { + const emptyCells = []; + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 4; j++) { + if (this.grid[i][j] === 0) { + emptyCells.push({ x: i, y: j }); + } + } + } + if (emptyCells.length) { + const { x, y } = emptyCells[Math.floor(Math.random() * emptyCells.length)]; + this.grid[x][y] = Math.random() < 0.9 ? 2 : 4; + } + } + + move(direction) { + let moved = false; + const gridCopy = JSON.parse(JSON.stringify(this.grid)); + + // Convertir la direction en format plus simple + this.lastMoveDirection = direction.toLowerCase().replace('arrow', ''); + + switch (direction) { + case 'ArrowLeft': + moved = this.moveLeft(); + break; + case 'ArrowRight': + moved = this.moveRight(); + break; + case 'ArrowUp': + moved = this.moveUp(); + break; + case 'ArrowDown': + moved = this.moveDown(); + break; + } + + if (moved) { + this.addNumber(); + this.updateGrid(); + if (this.isGameOver()) { + alert('Game Over! Score: ' + this.score); + } + } + } + + moveRow(row) { + let arr = row.filter(x => x !== 0); + for (let i = 0; i < arr.length - 1; i++) { + if (arr[i] === arr[i + 1]) { + arr[i] *= 2; + this.score += arr[i]; + arr.splice(i + 1, 1); + } + } + while (arr.length < 4) arr.push(0); + return arr; + } + + moveLeft() { + let moved = false; + for (let i = 0; i < 4; i++) { + const oldRow = [...this.grid[i]]; + const newRow = this.moveRow([...oldRow]); + this.grid[i] = newRow; + if (JSON.stringify(oldRow) !== JSON.stringify(newRow)) moved = true; + } + return moved; + } + + moveRight() { + let moved = false; + for (let i = 0; i < 4; i++) { + const oldRow = [...this.grid[i]]; + const newRow = this.moveRow([...oldRow].reverse()).reverse(); + this.grid[i] = newRow; + if (JSON.stringify(oldRow) !== JSON.stringify(newRow)) moved = true; + } + return moved; + } + + moveUp() { + let moved = false; + for (let j = 0; j < 4; j++) { + const oldColumn = this.grid.map(row => row[j]); + const newColumn = this.moveRow([...oldColumn]); + for (let i = 0; i < 4; i++) { + if (this.grid[i][j] !== newColumn[i]) { + moved = true; + this.grid[i][j] = newColumn[i]; + } + } + } + return moved; + } + + moveDown() { + let moved = false; + for (let j = 0; j < 4; j++) { + const oldColumn = this.grid.map(row => row[j]); + const newColumn = this.moveRow([...oldColumn].reverse()).reverse(); + for (let i = 0; i < 4; i++) { + if (this.grid[i][j] !== newColumn[i]) { + moved = true; + this.grid[i][j] = newColumn[i]; + } + } + } + return moved; + } + + isGameOver() { + // Check for empty cells + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 4; j++) { + if (this.grid[i][j] === 0) return false; + } + } + + // Check for possible merges + for (let i = 0; i < 4; i++) { + for (let j = 0; j < 4; j++) { + const current = this.grid[i][j]; + if ((j < 3 && current === this.grid[i][j + 1]) || + (i < 3 && current === this.grid[i + 1][j])) { + return false; + } + } + } + return true; + } + + setupEventListeners() { + document.addEventListener('keydown', (e) => { + if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) { + e.preventDefault(); + this.move(e.key); + } + }); + + document.getElementById('new-game').addEventListener('click', () => { + this.grid = Array(4).fill().map(() => Array(4).fill(0)); + this.score = 0; + this.addNumber(); + this.addNumber(); + this.updateGrid(); + }); + } + + showInstructions() { + const message = document.createElement('div'); + message.className = 'instruction-message'; + message.textContent = '↑ ↓ ← → Utilisez les flèches du clavier pour jouer'; + document.body.appendChild(message); + + // Supprime le message après 60 secondes + setTimeout(() => { + message.remove(); + }, 60000); + } +} + +// Start the game when the page loads +document.addEventListener('DOMContentLoaded', () => { + new Game2048(); +}); \ No newline at end of file diff --git a/sql.png b/sql.png new file mode 100644 index 0000000..c33be25 Binary files /dev/null and b/sql.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..059ce18 --- /dev/null +++ b/style.css @@ -0,0 +1,437 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', sans-serif; + line-height: 1.6; + background-color: #020D19; + color: #f0f8ff; +} + +nav { + background-color: #011222; + padding: 1rem; + position: fixed; + width: 100%; + top: 0; + z-index: 1000; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 2rem; +} + +nav a { + color: #fbf7f9; + text-decoration: none; + padding: 0.5rem 1rem; + transition: color 0.3s; +} + +nav a:hover { + color: #48577f; +} + +.typewriter { + color: #d1d1ec; +} + +p { + text-align: justify; +} + +.cadre_photo { + display: flex; + align-items: center; + gap: 1rem; + margin: 1rem 0; + padding: 2rem; + background-color: #02071a; + border-radius: 5px; +} + +.cadre_photo .photo { + width: 185px; + height: 185px; + border-radius: 18%; + border: 3px solid #000009; + box-shadow: #020D19; + object-fit: cover; +} + +.cadre_photo p { + flex: 1; + color: #e6e6e6; + font-size: 1rem; + line-height: 1.5; + +} + +.qualite { + margin: 1rem 0; + padding: 2rem; + background-color: #040818; + border-radius: 5px; +} + +.container { + max-width: 1000px; + width: 100%; + margin: 2rem auto; + padding: 2rem; + box-sizing: border-box; +} + +.card { + background-color: #040212; + border-radius: 8px; + padding: 1rem; + margin-bottom: 1rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + +} + + +.grid-container { + display: grid; + max-width: 1800px; + grid-template-columns: 1fr; +} + + +.timeline-item .header-content { + display: flex; + /* Utilise flexbox pour aligner le titre et l'image sur une ligne */ + align-items: center; + /* Aligne verticalement l'image et le texte */ + gap: 5rem; + /* Ajoute un espace entre le texte et l'image */ +} + +.timeline-item .header-content img { + width: 200px; + /* Largeur de l'image */ + height: auto; + /* Conserve les proportions de l'image */ + border-radius: 8px; + /* Coins arrondis */ + object-fit: cover; + /* Assure un bon rendu de l'image */ + z-index: -1; +} + +.timeline-item { + padding: 1.5rem; + border-left: 3px solid #082d51; + margin-bottom: 2rem; + position: relative; +} + +.timeline-item::before { + content: ''; + position: absolute; + left: -8px; + top: 0; + width: 12px; + height: 12px; + background: #0d2b42; + border-radius: 50%; +} + + +.logos-container { + margin: 1rem auto; + /* Centrer le rectangle */ + + background-color: #011222; + /* Couleur de fond similaire à votre thème */ + + + display: flex; + + justify-content: center; + /* Centrer les logos horizontalement */ + align-items: center; + + gap: 1rem; + /* Espacement entre les logos */ +} + +.logos-container::-webkit-scrollbar { + display: none; + /* Masquer la barre de défilement */ +} + +.logo { + width: 65px; + /* Taille des logos */ + height: 65px; + /* Taille des logos */ + + + object-fit: contain; + /* Ajuste l'image sans la déformer */ +} + + +input, +textarea { + width: 100%; + padding: 0.5rem; + background-color: #333; + border: 1px solid #444; + color: #f0f8ff; + border-radius: 4px; +} + +.btn { + display: inline-block; + padding: 0.5rem 1.5rem; + background-color: #011222; + color: #f0f8ff; + border: none; + border-radius: 4px; + cursor: pointer; + text-decoration: none; +} + +.game-btn { + display: inline-block; + padding: 10px 20px; + background-color: #0d082e; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.game-btn:hover { + background-color: #45a049; + transform: scale(1.05); +} + + +.contact-container { + display: flex; + justify-content: center; + align-items: center; + min-height: calc(100vh - 100px); + +} + +.cv-preview { + text-align: center; + max-width: 800px; + padding: 2rem; +} + +.cv-image { + width: 100%; + max-width: 600px; + height: auto; + border: 1px solid #333; + border-radius: 8px; + margin-bottom: 2rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +.download-btn { + display: inline-block; + padding: 1rem 2rem; + font-size: 1.1rem; + background-color: #011222; + transition: background-color 0.3s; +} + +.download-btn:hover { + background-color: #040212; +} + + +.stars { + color: #48577f; + font-size: 1.2rem; + margin-left: 0.5rem; +} + + + +@media (max-width: 768px) { + .cv-preview { + padding: 1rem; + } + + .cv-image { + max-width: 100%; + } + + .download-btn { + width: 100%; + } + + .cadre_photo { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + margin: 1rem 0; + padding: 2rem; + background-color: #02071a; + border-radius: 5px; + } +} + + + +.hamburger { + display: none; + background: none; + border: none; + color: #f0f8ff; + font-size: 2rem; + cursor: pointer; + position: absolute; + right: 1rem; + top: -0.5rem; +} + +.hamburger:hover { + color: #48577f; +} + + +.cursus { + max-width: 1300px; + width: 90%; + margin-top: 2rem; + margin-left: 2rem; + padding: 2rem; + box-sizing: border-box; +} + + +b { + color: #729cea; +} + +@keyframes blink { + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } +} + +@media (max-width: 768px) { + .hamburger { + display: block; + } + + nav ul { + position: fixed; + top: 0rem; + left: 0; + right: 0; + background-color: #011222; + flex-direction: column; + gap: 0; + padding: 1rem 0; + display: none; + } + + nav ul.active { + display: flex; + } + + nav ul li { + width: 100%; + text-align: center; + } + + nav ul li a { + padding: 1rem; + display: block; + } + + .container { + width: 95%; + padding: 0 1rem; + margin: 6rem auto 2rem; + } +} + +/* Styles pour la vidéo intégrée */ +.video-container { + position: relative; + width: 100%; + margin: 20px 0; + overflow: hidden; + border-radius: 10px; + cursor: pointer; +} + +.video-wrapper { + position: relative; + padding-bottom: 56.25%; + /* Ratio 16:9 */ + height: 0; + transition: all 0.3s ease; +} + +.video-wrapper.expanded { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90vw; + height: 90vh; + padding-bottom: 0; + z-index: 1000; +} + +.video-wrapper iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 10px; +} + +.video-wrapper video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; +} + +.video-wrapper.expanded video { + object-fit: contain; +} + +.video-btn { + display: inline-block; + padding: 8px 16px; + background-color: #ff0000; + color: white; + text-decoration: none; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +.video-btn:hover { + background-color: #cc0000; +} \ No newline at end of file diff --git a/style_2048.css b/style_2048.css new file mode 100644 index 0000000..082151d --- /dev/null +++ b/style_2048.css @@ -0,0 +1,238 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: #faf8ef; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: Arial, sans-serif; +} + +.container { + width: 460px; + text-align: center; +} + +.header { + margin-bottom: 20px; +} + +h1 { + font-size: 48px; + color: #776e65; + margin-bottom: 10px; +} + +.score-container { + display: inline-block; + background: #bbada0; + padding: 10px 20px; + border-radius: 3px; + color: white; + font-weight: bold; + margin: 10px; +} + +#new-game { + background: #8f7a66; + color: white; + border: none; + padding: 10px 20px; + border-radius: 3px; + cursor: pointer; +} + +.grid { + background: #bbada0; + padding: 15px; + border-radius: 6px; + display: grid; + grid-template-columns: repeat(4, 100px); + /* Définition explicite de la largeur */ + grid-gap: 15px; + position: relative; + box-shadow: 0 0 0 2px #bbada0; + /* Ajout d'une bordure sous forme d'ombre */ + margin: 0 auto; + /* Centrage horizontal */ + width: fit-content; + /* Ajustement automatique de la largeur */ +} + +.cell { + width: 100px; + height: 100px; + background: rgba(238, 228, 218, 0.35); + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + font-size: 36px; + font-weight: bold; + color: #776e65; + transition: all 0.15s ease; + position: relative; +} + +/* Animations de déplacement */ +.cell.merge { + animation: merge 0.2s ease-in-out; +} + +.cell.slide-left { + animation: slideLeft 0.2s ease-in-out; +} + +.cell.slide-right { + animation: slideRight 0.2s ease-in-out; +} + +.cell.slide-up { + animation: slideUp 0.2s ease-in-out; +} + +.cell.slide-down { + animation: slideDown 0.2s ease-in-out; +} + +@keyframes merge { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } +} + +@keyframes slideLeft { + 0% { + transform: translateX(100px); + } + + 100% { + transform: translateX(0); + } +} + +@keyframes slideRight { + 0% { + transform: translateX(-100px); + } + + 100% { + transform: translateX(0); + } +} + +@keyframes slideUp { + 0% { + transform: translateY(100px); + } + + 100% { + transform: translateY(0); + } +} + +@keyframes slideDown { + 0% { + transform: translateY(-100px); + } + + 100% { + transform: translateY(0); + } +} + +.cell[data-value="2"] { + background: #eee4da; +} + +.cell[data-value="4"] { + background: #ede0c8; +} + +.cell[data-value="8"] { + background: #f2b179; + color: #f9f6f2; +} + +.cell[data-value="16"] { + background: #f59563; + color: #f9f6f2; +} + +.cell[data-value="32"] { + background: #f67c5f; + color: #f9f6f2; +} + +.cell[data-value="64"] { + background: #f65e3b; + color: #f9f6f2; +} + +.cell[data-value="128"] { + background: #edcf72; + color: #f9f6f2; + font-size: 32px; +} + +.cell[data-value="256"] { + background: #edcc61; + color: #f9f6f2; + font-size: 32px; +} + +.cell[data-value="512"] { + background: #edc850; + color: #f9f6f2; + font-size: 32px; +} + +.cell[data-value="1024"] { + background: #edc53f; + color: #f9f6f2; + font-size: 28px; +} + +.cell[data-value="2048"] { + background: #edc22e; + color: #f9f6f2; + font-size: 28px; +} + +.instruction-message { + position: fixed; + top: 20px; + left: 50%; + transform: translateX(-50%); + background-color: rgba(119, 110, 101, 0.9); + color: white; + padding: 15px 25px; + border-radius: 5px; + font-size: 16px; + animation: fadeOut 1s ease-in 59s forwards; + z-index: 1000; +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + visibility: hidden; + } +} \ No newline at end of file diff --git a/sujet.pdf b/sujet.pdf new file mode 100644 index 0000000..e95b84e Binary files /dev/null and b/sujet.pdf differ diff --git a/type.js b/type.js new file mode 100644 index 0000000..3d3232c --- /dev/null +++ b/type.js @@ -0,0 +1,27 @@ +document.addEventListener('DOMContentLoaded', () => { + const texts = [ + { element: document.getElementById('presentation'), text: 'Etienne Veau -- Étudiant en B.U.T Informatique' }, + ]; + + let currentText = 0; + let currentChar = 0; + const speed = 100; + + function typeWriter() { + if (currentText < texts.length) { + if (currentChar < texts[currentText].text.length) { + texts[currentText].element.textContent += texts[currentText].text.charAt(currentChar); + currentChar++; + setTimeout(typeWriter, speed); + } else { + currentText++; + currentChar = 0; + if (currentText < texts.length) { + setTimeout(typeWriter, speed * 2); + } + } + } + } + + setTimeout(typeWriter, 500); +}); \ No newline at end of file