diff --git a/CV.html b/CV.html new file mode 100644 index 000000000..39678b8e9 --- /dev/null +++ b/CV.html @@ -0,0 +1,82 @@ + + + + + + Codestin Search App + + + + + + + +
+

Mon CV

+ +
+ +
+

Informations Personnelles

+

Nom : Armourdom Suvan

+

Formation : BUT Réseaux et Télécommunications

+

Spécialisation : Réseaux et Cybersécurité

+
+ + +
+

Formation

+
+

BUT Réseaux et Télécommunications

+

En cours

+

Spécialisation dans les réseaux informatiques et la cybersécurité

+
+
+ + +
+

Compétences Techniques

+
    +
  • Programmation : C, HTML, CSS, JavaScript
    • +
  • Réseaux : Configuration, sécurisation, protocoles réseau
    • +
  • Cybersécurité : Analyse de vulnérabilités, audits de sécurité
    • +
  • Systèmes : GNU/Linux (Debian), Administration système
    • +
  • IoT : Raspberry Pi, capteurs, transmission de données
    • +
  • Sécurité : Chiffrement (LUKS), politiques de mots de passe
    • +
+
+ + +
+

Projets Académiques (SAÉ)

+
+

SAÉ 101 - Hygiène Informatique et Cybersécurité

+

Sensibilisation aux bonnes pratiques de cybersécurité et protection des données

+
+
+

SAÉ 102 - Initiation aux Réseaux Informatiques

+

Configuration Raspberry Pi, administration SSH, interfaçage de capteurs

+
+
+

SAÉ 103 - Dispositifs de Transmission

+

Analyse de documents techniques, caractérisation des supports de transmission

+
+
+

SAÉ 104 - Présence sur Internet

+

Création d'un portfolio professionnel avec HTML, CSS et JavaScript

+
+
+

SAÉ 105 - Traitement des Données

+

Gestion utilisateurs, chiffrement de données avec LUKS, commandes GNU/Linux

+
+
+
+
+ + diff --git a/acceuil.html b/acceuil.html new file mode 100644 index 000000000..913c53c19 --- /dev/null +++ b/acceuil.html @@ -0,0 +1,30 @@ + + + + + + Codestin Search App + + + + + + + +
+
+

Bienvenue sur mon portfolio

+

Bonjour ! Je m'appelle Armourdom Suvan, je suis un passionné de technologie, spécialisé dans les réseaux et la cybersécurité.

+

Je suis actuellement en BUT RÉSEAU et TELECOM.

+

Découvrez mon travail, mes projets et apprenez-en plus sur moi.

+ Voir mes projets +
+
+ + diff --git "a/comp\303\251tence.html" "b/comp\303\251tence.html" new file mode 100644 index 000000000..bc953837b --- /dev/null +++ "b/comp\303\251tence.html" @@ -0,0 +1,52 @@ + + + + + + Codestin Search App + + + + + + + +
+
+

Mes Compétences

+

Voici un aperçu de mes compétences en programmation, réseaux et cybersécurité.

+
+
+ +
+
+
+

Programmation

+

Maîtrise des langages C, et HTML/CSS/.

+
+
+

Réseaux

+

Connaissance des protocoles réseau, configuration et sécurisation.

+
+
+

Cybersécurité

+

Analyse de vulnérabilités, audits de sécurité et bonnes pratiques.

+
+
+
+ + + + + diff --git a/contact.html b/contact.html new file mode 100644 index 000000000..c1d362de3 --- /dev/null +++ b/contact.html @@ -0,0 +1,48 @@ + + + + + + Codestin Search App + + + + + + + +
+
+

Contactez-moi

+

Je serais ravi de répondre à vos questions ou de collaborer avec vous !

+ + +
+

Mes coordonnées

+
+

Email : armourdom.suvan@example.com

+

LinkedIn : linkedin.com/in/armourdom-suvan

+

GitHub : github.com/armourdom-suvan

+
+
+ + +
+

Envoyez-moi un message

+
+ + + + +
+
+
+
+ + diff --git a/index.html b/index.html new file mode 100644 index 000000000..325daba7d --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + Codestin Search App + + + + + + + +
+
+

Bienvenue sur mon portfolio

+

Bonjour ! Je m'appelle Armourdom Suvan, je suis un passionné de technologie, spécialisé dans les réseaux et la cybersécurité.

+

Je suis actuellement en BUT RÉSEAU et TELECOM.

+

Découvrez mon travail, mes projets et apprenez-en plus sur moi.

+ Voir mes projets +
+
+ + diff --git a/pagecss.css b/pagecss.css new file mode 100644 index 000000000..f300dcebe --- /dev/null +++ b/pagecss.css @@ -0,0 +1,443 @@ +/* === Arrière-plan global === */ +body { + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); /* Dégradé sombre */ + color: #fff; + overflow-x: hidden; /* Évite les débordements horizontaux */ +} + +/* === Barre de navigation === */ +.navbar { + background: linear-gradient(to right, #112240, #0a192f); + padding: 1rem; + display: flex; + justify-content: center; + gap: 1.5rem; +} + +.navbar a { + color: #64ffda; + text-decoration: none; + font-size: 1rem; + font-weight: bold; + transition: color 0.3s; +} + +.navbar a:hover { + color: #0ef; + text-shadow: 0 0 10px #64ffda, 0 0 20px #0ef; +} + +/* === Section Accueil pleine page === */ +.hero { + height: 100vh; /* Prend toute la hauteur de l'écran */ + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); + text-align: center; + padding: 20px; +} + +.hero-content { + background: rgba(17, 34, 64, 0.9); /* Fond semi-transparent */ + padding: 40px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); + width: 90%; + max-width: 600px; +} + +.hero-content h1 { + font-size: 2.5rem; + margin-bottom: 20px; + color: #64ffda; + text-shadow: 0 0 10px #64ffda, 0 0 20px #0ef; +} + +.hero-content p { + font-size: 1.2rem; + margin-bottom: 30px; + color: #fff; +} + +.cta-btn { + display: inline-block; + padding: 10px 20px; + font-size: 1rem; + font-weight: bold; + color: #0a192f; + background: #64ffda; + border-radius: 5px; + text-decoration: none; + transition: transform 0.3s, box-shadow 0.3s; +} + +.cta-btn:hover { + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(100, 255, 218, 0.6); +} + +/* === Section Compétences pleine page === */ +.skills { + height: 100vh; /* Prend toute la hauteur de l'écran */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); + text-align: center; + padding: 20px; +} + +.skills-container { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; +} + +.skill-card { + background: rgba(17, 34, 64, 0.9); /* Fond semi-transparent */ + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); + width: 280px; + text-align: center; + transition: transform 0.3s, box-shadow 0.3s; +} + +.skill-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(100, 255, 218, 0.6); +} + +.skill-card h3 { + font-size: 1.5rem; + margin-bottom: 15px; + color: #64ffda; + text-shadow: 0 0 10px #64ffda, 0 0 20px #0ef; +} + +.skill-card p { + font-size: 1rem; + color: #fff; +} + + +/* === Sections globales === */ +main { + padding: 60px 20px; + text-align: center; +} + +/* Style pour les sections avec fond semi-transparent */ +section, .project-card, .cv-section { + background: rgba(17, 34, 64, 0.9); /* Fond semi-transparent */ + padding: 20px; + border-radius: 10px; /* Coins arrondis */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Ombre */ + margin: 20px auto; + max-width: 800px; /* Largeur maximale */ +} + +/* === Projets du Portfolio === */ +.project-card { + margin: 20px auto; + padding: 20px; + max-width: 500px; + background: #112240; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); + transition: transform 0.3s, box-shadow 0.3s; + color: #fff; +} + +.project-card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 20px rgba(100, 255, 218, 0.8); +} + +textarea { + width: 100%; + min-height: 80px; + margin-top: 10px; + padding: 10px; + border: 1px solid #64ffda; + border-radius: 5px; + background: #0a192f; + color: #fff; + font-family: 'Poppins', sans-serif; + resize: vertical; +} + +textarea:focus { + outline: none; + border-color: #0ef; +} + +/* === Boutons généraux === */ +button, .cta-btn, .download-btn { + background: #64ffda; + border: none; + padding: 10px 20px; + color: #0a192f; + font-weight: bold; + border-radius: 5px; + cursor: pointer; + transition: transform 0.3s, box-shadow 0.3s; +} + +button:hover, .cta-btn:hover, .download-btn:hover { + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(100, 255, 218, 0.6); +} + +/* === Section Contact pleine page === */ +.contact-hero { + height: 100vh; /* Prend toute la hauteur de l'écran */ + display: flex; + justify-content: center; /* Centré horizontalement */ + align-items: center; /* Centré verticalement */ + background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364); /* Dégradé sombre */ + text-align: center; + padding: 20px; +} + +.contact-content { + background: rgba(17, 34, 64, 0.9); /* Fond semi-transparent */ + padding: 40px; + border-radius: 10px; /* Coins arrondis */ + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Ombre */ + width: 90%; + max-width: 600px; +} + +.contact-content h1 { + font-size: 2.5rem; + margin-bottom: 20px; + color: #64ffda; + text-shadow: 0 0 10px #64ffda, 0 0 20px #0ef; /* Effet lumineux */ +} + +.contact-content p { + font-size: 1.2rem; + margin-bottom: 30px; + color: #fff; +} + +/* Formulaire de contact */ +form { + display: flex; + flex-direction: column; +} + +form input, form textarea { + width: 100%; + margin-bottom: 20px; + padding: 10px; + border: none; + border-radius: 5px; + background: #112240; /* Fond sombre */ + color: #fff; /* Texte blanc */ + font-family: 'Poppins', sans-serif; + font-size: 1rem; +} + +form input:focus, form textarea:focus { + outline: none; + border: 2px solid #64ffda; +} + +form button { + background: #64ffda; + color: #0a192f; + padding: 10px 20px; + border: none; + border-radius: 5px; + font-weight: bold; + cursor: pointer; + transition: transform 0.3s, box-shadow 0.3s; +} + +form button:hover { + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(100, 255, 218, 0.6); +} + +/* === Styles pour la page CV === */ +.cv-container { + max-width: 900px; + margin: 0 auto; +} + +.cv-block { + background: rgba(17, 34, 64, 0.9); + padding: 25px; + margin: 25px 0; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); + border-left: 4px solid #64ffda; + transition: transform 0.3s, box-shadow 0.3s; +} + +.cv-block:hover { + transform: translateX(5px); + box-shadow: 0 6px 15px rgba(100, 255, 218, 0.4); +} + +.cv-block h2 { + color: #64ffda; + font-size: 1.8rem; + margin-bottom: 15px; + text-shadow: 0 0 10px rgba(100, 255, 218, 0.5); +} + +.cv-block h3 { + color: #0ef; + font-size: 1.3rem; + margin-top: 15px; + margin-bottom: 8px; +} + +.cv-item { + margin: 20px 0; + padding: 15px; + background: rgba(10, 25, 47, 0.5); + border-radius: 8px; + border-left: 3px solid #0ef; +} + +.cv-date { + color: #64ffda; + font-style: italic; + margin: 5px 0; +} + +.skills-list { + list-style: none; + padding: 0; +} + +.skills-list li { + padding: 10px 0; + padding-left: 25px; + position: relative; + transition: color 0.3s; +} + +.skills-list li:before { + content: "▹"; + position: absolute; + left: 0; + color: #64ffda; + font-size: 1.5rem; +} + +.skills-list li:hover { + color: #64ffda; + padding-left: 30px; +} + +/* === Styles supplémentaires pour la page Contact === */ +.contact-info { + margin: 30px 0; + padding: 20px; + background: rgba(10, 25, 47, 0.5); + border-radius: 10px; + border: 2px solid #64ffda; +} + +.contact-info h2 { + color: #64ffda; + font-size: 1.5rem; + margin-bottom: 15px; + text-align: center; +} + +.contact-details { + text-align: left; +} + +.contact-details p { + margin: 15px 0; + font-size: 1.1rem; +} + +.contact-link { + color: #0ef; + text-decoration: none; + transition: color 0.3s, text-shadow 0.3s; +} + +.contact-link:hover { + color: #64ffda; + text-shadow: 0 0 10px #64ffda; +} + +.contact-form-section { + margin-top: 30px; +} + +.contact-form-section h2 { + color: #64ffda; + font-size: 1.5rem; + margin-bottom: 20px; + text-align: center; +} + +/* === Animations === */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + animation: fadeIn 0.8s ease-out forwards; +} + +/* === Style pour le scroll === */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #0a192f; +} + +::-webkit-scrollbar-thumb { + background: #64ffda; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: #0ef; +} + +/* === Responsive Design === */ +@media (max-width: 768px) { + .navbar { + flex-direction: column; + gap: 0.5rem; + } + + .hero-content h1 { + font-size: 2rem; + } + + .skills-container { + flex-direction: column; + } + + .skill-card { + width: 100%; + } +} diff --git a/portfolio.html b/portfolio.html new file mode 100644 index 000000000..24681a8d6 --- /dev/null +++ b/portfolio.html @@ -0,0 +1,60 @@ + + + + + + Codestin Search App + + + + + + + +
+

Mes Projets

+ + +
+

SAE 101 : Se sensibiliser à l'hygiène informatique et à la cybersécurité

+

Description : Ce projet était centré sur la sensibilisation de l’hygiène informatique et à la cybersécurité. L’objectif était de comprendre les bonnes pratiques pour protéger les données personnelles et professionnelles, ainsi que de se familiariser avec les principaux risques numériques (phishing, malwares, mots de passe faibles, etc.). Ce projet a permis de renforcer les connaissances en cybersécurité et en protection des informations.

+ +
+ + +
+

SAE 102 : S’initier aux réseaux informatiques

+

Description : Le projet consiste à configurer une carte Raspberry Pi pour qu'elle puisse être administrée à distance via SSH. Les étudiants apprendront à commander une LED connectée, à interfacer des capteurs pour mesurer la température et l'humidité, et à transmettre ces données sur un serveur local ou distant pour affichage. Les livrables incluent un dossier technique, un compte rendu, et une présentation finale

+ +
+ + +
+

SAE 103 : Découvrir un dispositif de transmission

+

Description : Ce projet vise à développer des compétences en analyse et interprétation de documents techniques liés aux mesures et aux transmissions. Il comprend la compréhension des documents de mesure, l’analyse des schémas et câblages, ainsi que la caractérisation des supports de transmission comme les câbles ou fibres optiques. Une partie essentielle du projet est aussi d’apprendre à présenter les résultats de manière claire et professionnelle à un client ou un collaborateur. Cette SAÉ permet d’acquérir des compétences techniques et communicationnelles indispensables dans le domaine des systèmes de transmission.

+ +
+ + +
+

SAE 104 : Se présenter sur Internet

+

Description : Ce projet consiste à créer un portfolio en ligne afin de se présenter sur internet de manière professionnelle. Il comprend une page de présentation pour mettre en avant son parcours et ses compétences, ainsi qu’un CV en ligne détaillant les expériences et formations. D’autres pages peuvent être ajoutées, comme une galerie de projets, une page de contact ou encore un blog pour partager des réflexions et réalisations. L’objectif est de développer une identité numérique soignée en utilisant des technologies web telles que HTML, CSS et JavaScript, tout en assurant un design attractif et fonctionnel.

+ +
+ + +
+

SAE 105 : Traiter des données

+

Description : Ce projet est axé sur le traitement des données, incluant la création de comptes utilisateurs, l'établissement d'une politique de mots de passe solides, et l'utilisation de commandes de base sous GNU/Linux. Il aborde également le chiffrement des données, en particulier la création d'une partition chiffrée sous Debian via LUKS, afin de garantir la sécurité et la confidentialité des données dans des environnements sensibles , .

+ +
+ +
+ +