diff --git a/apropos.html b/apropos.html new file mode 100644 index 0000000..0fc06d4 --- /dev/null +++ b/apropos.html @@ -0,0 +1,117 @@ + + + + + + À propos - Portfolio de Yahya MABROUK + + + + +
+
+
+

Yahya MABROUK

+

Étudiant en BUT1 Informatique

+
+ +
+
+ +
+

À propos de moi

+ +
+
+

Qui suis-je?

+

+ Bonjour, je m'appelle Yahya MABROUK, étudiant marocain + en première année du BUT Informatique à l'IUT de + Clermont Auvergne. Passionné par l'économie, domaine + dans lequel j'ai obtenu mon baccalauréat en 2024, j'ai + ensuite choisi de me réorienter vers l'informatique en + France afin de suivre ma deuxième passion. +

+ +

+ Grâce à ce changement, j'ai développé une grande + capacité d'adaptation, en passant d'un domaine à un + autre, dans un nouvel environnement, et en apprenant + rapidement les technologies du secteur. +

+ +

Mon parcours académique

+
+
+

2024 - 2027

+

BUT Informatique - IUT Clermont Ferrand

+
+
+

2023 - 2024

+

Baccalauréat en sciences économiques

+
+
+ +

Mes compétences

+
+
+

Langages de programmation

+
    +
  • HTML/CSS
    • +
  • SQL
    • +
  • C
    • +
  • C++
    • +
  • C#
    • +
  • BASH
    • +
+
+ +
+

Outils & Technologies

+
    +
  • Git/GitHub
    • +
  • Canva
    • +
+
+ +
+

Compétences personnelles

+
    +
  • Capacité d'adaptation
    • +
  • Sens de l'organisation
    • +
  • Force de proposition
    • +
+
+
+

Langues

+
    +
  • Arabe
    • +
  • Français
    • +
  • Anglais
    • +
  • Amazigh
    • +
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index b0468a1..b13136f 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,64 @@ - - - - Portfolio_ - One incredible styled html page - - + + + + + + Portfolio - Étudiant BUT Informatique + + + + +
+
+
+

Yahya MABROUK

+

Étudiant en BUT1 Informatique

+
+ +
+
- +
+
+

+ Bonjour, je suis + Yahya MABROUK +

+

+ Passionné par le développement web et la programmation, je + construis mon avenir dans le monde du numérique à travers ma + formation et mes projets personnels. +

+
+ En savoir plus + Télécharger mon CV +
+
+
+ Image de profil +
+
- - - - -

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

- -

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/realisations.html b/realisations.html new file mode 100644 index 0000000..dfe6a39 --- /dev/null +++ b/realisations.html @@ -0,0 +1,107 @@ + + + + + + Réalisations - Portfolio de Yahya MABROUK + + + + +
+
+
+

Yahya MABROUK

+

Étudiant en BUT1 Informatique

+
+ +
+
+ +
+

Réalisations Techniques

+ +
+

+ Durant ma première année de BUT Informatique, j'ai participé + à plusieurs projets académiques qui m'ont permis de + développer mes compétences techniques et personnelles. + Voici un aperçu de mes principales réalisations. +

+
+ +
+
+

+ Site Web Personnel +

+
+ Projet réalisé individuellement dans le cadre du cours de développement des interfaces web. +
+

+ J'ai conçu un site web personnel et professionnel + en utilisant HTML, CSS et PHP. Le site comprend + plusieurs pages liées par un menu et intègre des + éléments variés tels que des liens, images, + vidéos, tableaux et un formulaire. Le code a + été optimisé pour garantir clarté et efficacité. +

+ +
+

Technologies utilisées:

+
    +
  • HTML
    • +
  • CSS
    • +
  • PHP
    • +
+
+
+
+ Illustration du projet de site web personnel +
+
+ +
+
+

Programme de Gestion de Stages

+
+ Projet réalisé en binôme dans le cadre du cours d'algorithmique de l'IUT. +
+

+ J'ai développé un programme en langage C pour la gestion + des offres de stages, intégrant l'enregistrement des + candidatures, les affectations des étudiants et + l'évaluation finale par un jury. Ce projet m'a permis + d'appliquer les notions de structures de données, + de pointeurs et de gestion de fichiers. +

+
+

Technologies utilisées:

+
    +
  • C
    • +
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..18e55f0 --- /dev/null +++ b/style.css @@ -0,0 +1,643 @@ +:root { + --background-color: #f8f9fa; + --background-section: #f8f9fa; + --text-color: #333; + --title-color: #222; + --subtitle-color: #444; + --muted-text: #666; + --link-color: #3060d0; + --primary-color: #3060d0; + --primary-hover: #254db9; + --card-bg: white; + --card-shadow: rgba(0, 0, 0, 0.05); + --border-color: #ddd; + --footer-bg: #333; + --footer-text: #aaa; + --footer-title: white; + --button-text: white; + --tag-bg: #e0e8ff; + --tech-bg: white; + --box-shadow: rgba(0, 0, 0, 0.15); + --solid-border: white; + --header-bg: #fff; + --header-shadow: rgba(0, 0, 0, 0.1); + --nav-link: #555; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; +} + +body { + font-family: Arial, Helvetica, sans-serif; + line-height: 1.6; + color: var(--text-color); + background-color: var(--background-color); +} + +header { + background-color: var(--header-bg); + box-shadow: 0 2px 5px var(--header-shadow); + position: sticky; + top: 0; + z-index: 100; + padding: 15px 0; +} + +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.navbar .nom { + display: flex; + align-items: baseline; + gap: 15px; +} + +.navbar .nom h1 { + font-size: 1.5rem; + color: var(--primary-color); + margin-bottom: 0; + font-family: 'Arial', sans-serif; + font-weight: 700; + letter-spacing: 0.5px; +} + +.navbar .nom p { + font-size: 1rem; + color: var(--muted-text); + font-style: italic; +} + +nav ul { + display: flex; + list-style: none; +} + +nav ul li { + margin-left: 20px; +} + +nav ul li a { + text-decoration: none; + color: var(--nav-link); + font-weight: 500; + padding: 5px 0; + position: relative; +} + +nav ul li a:hover, +nav ul li a.active { + color: var(--primary-color); +} + +nav ul li a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background-color: var(--primary-color); + transition: width 0.3s; +} + +nav ul li a:hover::after, +nav ul li a.active::after { + width: 100%; +} + +.section { + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; + padding-top: 90px; + margin-top: -50px; +} + +.section-accueil { + display: flex; + align-items: center; + justify-content: space-between; + padding: 100px 20px; + max-width: 1200px; + margin: 0 auto; + background-color: var(--background-section); + border-radius: 15px; + box-shadow: 0 5px 15px var(--card-shadow); +} + +.titre-section { + font-size: 2rem; + text-align: center; + margin-bottom: 40px; + position: relative; + color: var(--title-color); +} + +.titre-section::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background-color: var(--primary-color); +} + +.presentation { + max-width: 600px; +} + +.presentation h2 { + font-size: 2.5rem; + margin-bottom: 25px; + position: relative; + display: inline-block; +} + +.presentation h2::after { + content: ''; + position: absolute; + width: 70%; + height: 3px; + background-color: var(--primary-color); + bottom: -10px; + left: 0; +} + +.nom-highlight { + color: var(--primary-color); + font-weight: 700; +} + +.presentation p { + font-size: 1.1rem; + margin-bottom: 30px; + color: var(--text-color); +} + +.boutons { + display: flex; + gap: 15px; +} + +.bouton { + display: inline-block; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: 500; + transition: all 0.3s; +} + +.primaire { + background-color: var(--primary-color); + color: var(--button-text); + border: 1px solid var(--primary-color); +} + +.primaire:hover { + background-color: var(--primary-hover); + border-color: var(--primary-hover); +} + +.secondaire { + background-color: transparent; + color: var(--primary-color); + border: 1px solid var(--primary-color); +} + +.secondaire:hover { + background-color: var(--primary-color); + color: var(--button-text); +} + +.image-container { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + position: relative; +} + +.image-container img { + max-width: 60%; + height: auto; + border-radius: 50%; + box-shadow: 0 8px 20px var(--box-shadow); + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 5px solid var(--solid-border); + z-index: 1; +} + +.contenu-apropos { + display: flex; + gap: 50px; +} + +.texte-apropos { + flex: 2; +} + +.texte-apropos h3 { + margin-top: 30px; + margin-bottom: 15px; + color: #3060d0; +} + +.texte-apropos p { + margin-bottom: 15px; +} + +.parcours { + margin: 20px 0; +} + +.etape { + margin-bottom: 20px; +} + +.etape h4 { + color: #3060d0; + margin-bottom: 5px; +} + +.competences { + display: flex; + flex-wrap: wrap; + gap: 30px; + margin-top: 20px; +} + +.categorie { + flex: 1; + min-width: 200px; +} + +.categorie h4 { + margin-bottom: 10px; + color: #444; +} + +.categorie ul { + list-style-type: none; +} + +.categorie ul li { + margin-bottom: 8px; + padding-left: 15px; + position: relative; +} + +.categorie ul li::before { + content: '▹'; + position: absolute; + left: 0; + color: #3060d0; +} + +.intro { + max-width: 800px; + margin: 0 auto 40px; + text-align: center; +} + +.realisation { + display: flex; + margin-bottom: 60px; + gap: 40px; + align-items: center; +} + +.realisation.inverse { + flex-direction: row-reverse; +} + +.description { + flex: 3; +} + +.description h3 { + margin-bottom: 15px; + color: #3060d0; +} + +.description p { + margin-bottom: 15px; +} + +.tags { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 20px; +} + +.tags span { + background-color: #e0e8ff; + color: #3060d0; + padding: 5px 12px; + border-radius: 20px; + font-size: 0.85rem; +} + +.technologies { + margin-top: 20px; + background-color: #f8f9fa; + padding: 15px; + border-radius: 8px; +} + +.technologies h4 { + margin-bottom: 10px; + color: #444; +} + +.technologies ul { + display: flex; + flex-wrap: wrap; + gap: 15px; + list-style: none; +} + +.technologies li { + background-color: white; + padding: 5px 12px; + border-radius: 5px; + font-size: 0.9rem; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.interets-container { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} + +.interet { + flex: 1; + min-width: 300px; + background-color: white; + padding: 25px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); +} + +.interet h3 { + color: #3060d0; + margin-bottom: 20px; + text-align: center; +} + +.interet h3 i { + margin-right: 10px; +} + +footer { + background-color: var(--footer-bg); + color: var(--footer-title); + padding-top: 40px; +} + +.copyright { + text-align: center; + padding: 20px 0; + border-top: 1px solid var(--border-color); + color: var(--footer-text); +} + +.contenu-contact { + display: flex; + flex-wrap: wrap; + gap: 50px; + align-items: flex-start; +} + +.coordonnees { + flex: 1; + min-width: 300px; +} + +.coordonnees h3 { + color: var(--primary-color); + margin-bottom: 20px; +} + +.coordonnees p { + margin-bottom: 20px; + line-height: 1.6; +} + +.info-contact { + background-color: var(--card-bg); + padding: 25px; + border-radius: 10px; + box-shadow: 0 5px 15px var(--card-shadow); + margin-bottom: 30px; +} + +.info-contact p { + margin-bottom: 15px; +} + +.info-contact i { + color: var(--primary-color); + margin-right: 10px; + width: 20px; + text-align: center; +} + +.reseaux-sociaux { + margin-top: 30px; +} + +.reseaux-sociaux ul { + list-style: none; + padding: 0; +} + +.reseaux-sociaux ul li { + margin-bottom: 10px; +} + +.reseaux-sociaux ul li a { + display: inline-flex; + align-items: center; + color: var(--text-color); + text-decoration: none; + transition: color 0.3s; +} + +.reseaux-sociaux ul li a:hover { + color: var(--primary-color); +} + +.reseaux-sociaux ul li a i { + width: 30px; + color: var(--primary-color); +} + +.formulaire-contact { + flex: 1.5; + background-color: var(--card-bg); + padding: 30px; + border-radius: 10px; + box-shadow: 0 5px 15px var(--card-shadow); + min-width: 350px; +} + +.formulaire-contact h3 { + color: var(--primary-color); + margin-bottom: 25px; +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: var(--title-color); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 12px; + border: 1px solid var(--border-color); + border-radius: 5px; + background-color: var(--background-color); + color: var(--text-color); + font-family: inherit; + transition: border-color 0.3s; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); +} + +.form-group textarea { + resize: vertical; + min-height: 150px; +} + +.form-submit { + text-align: right; +} + +.form-submit button { + background-color: var(--primary-color); + color: var(--button-text); + border: none; + padding: 12px 25px; + border-radius: 5px; + cursor: pointer; + font-weight: 500; + transition: background-color 0.3s; +} + +.form-submit button:hover { + background-color: var(--primary-hover); +} + +@media (max-width: 992px) { + .section-accueil { + flex-direction: column; + text-align: center; + gap: 40px; + } + + .presentation { + max-width: 100%; + } + + .boutons { + justify-content: center; + } + + .contenu-apropos { + flex-direction: column; + } + + .realisation, + .realisation.inverse { + flex-direction: column; + } +} + +@media (max-width: 768px) { + .navbar { + flex-direction: column; + text-align: center; + } + + nav ul { + margin-top: 15px; + flex-wrap: wrap; + justify-content: center; + } + + nav ul li { + margin: 5px 10px; + } + + .competences { + flex-direction: column; + } + + .interets-container { + flex-direction: column; + } +} + +/**/ +.image-realisation { + flex: 2; + display: flex; + justify-content: center; + align-items: center; +} + +.image-realisation img { + max-width: 100%; + height: auto; + border-radius: 8px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); + border: 1px solid var(--border-color); + transition: transform 0.3s ease; +} + +.image-realisation img:hover { + transform: scale(1.05); +} + +.realisation.inverse .description { + order: 2; +} + +.realisation.inverse .image-realisation { + order: 1; +} + +@media (max-width: 992px) { + .image-realisation { + max-width: 500px; + margin: 20px auto 0; + } +} \ No newline at end of file