commit a19b8ee75b8322c7fbda9b3af8fc503fb83a315d Author: Aya Tess tess Date: Fri Dec 12 01:26:44 2025 +0100 Initial commit: Portfolio Aya Ben Mabrouk diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..f88235f Binary files /dev/null and b/.DS_Store differ diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..b01b66b --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + { + "associatedIndex": 7 +} + + + + + + + + + + + + + + + + + + + 1765353883129 + + + + + + \ No newline at end of file diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..3da208b --- /dev/null +++ b/Dockerfile @@ -0,0 +1,8 @@ +# Utiliser une image de base d'un serveur web léger +FROM nginx:stable-alpine + +# Copier tout le contenu du répertoire courant (.) dans le répertoire de service de Nginx +COPY . /usr/share/nginx/html + +# Exposer le port par défaut du serveur web (80) +EXPOSE 80 \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/assets/README.md b/assets/README.md new file mode 100644 index 0000000..347e92b --- /dev/null +++ b/assets/README.md @@ -0,0 +1,38 @@ +# 🌸 Portfolio – Aya Ben Mabrouk + +Bienvenue sur mon portfolio ! +Je suis **Aya Ben Mabrouk**, étudiante en **2ème année de BTS CIEL (Cybersécurité, Informatique et Électronique)**. +Ce site présente mes compétences, mes projets ainsi que mon expérience professionnelle, notamment mon stage en clinique. + +--- + +## 🚀 Technologies utilisées + +- **HTML5 / CSS3 / JavaScript** +- **Docker & Docker Compose** +- **Devicon (icônes professionnelles)** +- **Organisation de projet propre en architecture `/src`** + +--- + +## 🐳 Lancer le projet avec Docker + +Assurez-vous d’avoir Docker installé, puis exécutez : + +cd ~/Documents/portfolio + +Lien : http://localhost:8080 +```bash +./init.sh + +. +├── docker-compose.yml +├── Dockerfile +├── init.sh +└── src/ + ├── index.html + ├── style.css + ├── script.js + └── assets/ + └── portrait_aya.jpg + diff --git a/assets/cms.preview.jpg b/assets/cms.preview.jpg new file mode 100644 index 0000000..09cae02 Binary files /dev/null and b/assets/cms.preview.jpg differ diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..c8d337c --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,7 @@ +services: + portfolio: + build: . + ports: + - "8080:80" + container_name: portfolio + restart: unless-stopped \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..d942c9a --- /dev/null +++ b/index.html @@ -0,0 +1,221 @@ + + + + + + Portfolio - Aya Ben Mabrouk + + + + + + + + +

+

+ ABM +

+ Aya Ben Mabrouk + BTS CIEL — Développement & Réseaux +

+

+ + +

+ +

+ + +

+

+

Portfolio de Aya Ben Mabrouk

+

+ Étudiante en 2ème année de BTS CIEL — développement web, systèmes & réseaux. + Je conçois des solutions simples et élégantes, et j'aime résoudre des problèmes concrets. +

+

+ Voir mes projets + Me contacter +

+

+ + +

+ + +

+

+

À propos

+

+ +

+

+

+ Je m'appelle Aya Ben Mabrouk. Actuellement en deuxième année de BTS CIEL, + je m'intéresse au développement web, à l'administration système et réseau, et aux systèmes embarqués. + J'apprécie les interfaces soignées et l'optimisation technique. +

+

+ Je suis organisée, curieuse et motivée. J'apprends continuellement et j'aime travailler sur des + projets concrets et stimulants. +

+ + +

+ +

+

Langages : HTML, CSS, JavaScript, PHP, Python

+

Réseaux : TCP/IP, VLAN, DHCP, Linux

+

Outils : Git, Docker, MySQL

+

+

+

+ + +

+

Compétences

+ +

+

HTML

+

CSS

+

JavaScript

+

PHP

+

MySQL

+

Linux

+

Docker

+

+

+ + +

+

Projets

+ +

+

Mini CMS – Création d’un système de gestion de contenu

+ +

Aperçu du CMS

+ +

+ J’ai développé un mini CMS permettant de créer, modifier et supprimer du contenu. + Il intègre un système d’authentification, une interface administrateur moderne et une gestion dynamique des contenus. +

+ +

PHP / MySQL
CRUD complet
Gestion des utilisateurs
Interface moderne

+ +

+ + Voir le code sur GitHub + +

+

+

+ + +

+

Mon expérience en entreprise

+ +

+

Stage – Support Informatique & Réseau
Clinique Privée

+

+ Dans un environnement réel en clinique, j'ai participé à la gestion du parc informatique : +

+ +

Configuration de postes
Mise en réseau et gestion des accès
Installation d’imprimantes
Support utilisateurs quotidien
Gestion de droits sur des logiciels internes

+ +

Ce stage m’a permis de renforcer mes compétences techniques et ma rigueur.

+

+

+ + +

+

Parcours

+ +

+ +

+ +

+ 2025 - 2026 +

BTS CIEL — 2ᵉ année, développement & réseaux

+

+

+ +

+ +

+ 2024 - 2025 +

BTS CIEL — 1ʳᵉ année, bases en programmation

+

+ +

+ + + +

+ 2024 - 2023 +

Baccalauréat — Général - Mention Bien, Economique & social

+ +

+ + +

+

+ + +

+

Contact

+ +

+ Une opportunité, une idée, une question ? Contacte-moi ! +

+ +

+ + Email + + + LinkedIn + +

+

+ +

+ + + + + + diff --git a/portfolio.iml b/portfolio.iml new file mode 100644 index 0000000..9a5cfce --- /dev/null +++ b/portfolio.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..cbb4200 --- /dev/null +++ b/script.js @@ -0,0 +1,80 @@ +// Smooth scroll pour les liens d'ancrage +const links = document.querySelectorAll('a[href^="#"]'); + +links.forEach(link => { + link.addEventListener('click', event => { + const targetId = link.getAttribute('href'); + if (targetId.length > 1) { + event.preventDefault(); + const target = document.querySelector(targetId); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + } + }); +}); + +// Gestion du formulaire de contact +const contactForm = document.getElementById('contactForm'); +const formFeedback = document.getElementById('formFeedback'); + +if (contactForm) { + contactForm.addEventListener('submit', event => { + event.preventDefault(); + + const formData = new FormData(contactForm); + const name = formData.get('name').trim(); + const email = formData.get('email').trim(); + const message = formData.get('message').trim(); + + // Validation simple + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if (name && emailRegex.test(email) && message) { + formFeedback.textContent = `Merci ${name}, ton message a bien été reçu !`; + formFeedback.className = 'form__feedback success'; + formFeedback.style.display = 'block'; + contactForm.reset(); + + // Masquer le message après 5 secondes + setTimeout(() => { + formFeedback.style.display = 'none'; + }, 5000); + } else { + formFeedback.textContent = 'Merci de remplir tous les champs avec des informations valides.'; + formFeedback.className = 'form__feedback error'; + formFeedback.style.display = 'block'; + } + }); +} + +const currentYearElement = document.getElementById('currentYear'); +if (currentYearElement) { + currentYearElement.textContent = new Date().getFullYear(); +} + +// Animation au scroll (optionnel, pour un effet plus subtil) +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Appliquer l'animation aux cartes +document.querySelectorAll('.card, .timeline__item').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f9d94c0 --- /dev/null +++ b/style.css @@ -0,0 +1,348 @@ +/* ============================================ + PORTFOLIO — AYA BEN MABROUK + Thème girly professionnel : rose poudré + blanc + ============================================ */ + +:root { + --rose-light: #f8e9ef; + --rose: #e7c4cf; + --rose-gold: #d7a9a3; + --rose-dark: #b07d84; + --white: #ffffff; + --text: #3a3a3a; + --muted: #6b6b6b; + + --radius: 16px; + --shadow: 0 8px 24px rgba(0,0,0,0.08); + --shadow-light: 0 4px 16px rgba(0,0,0,0.05); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +/* ============================================ + GLOBAL + ============================================ */ + +body { + background: var(--rose-light); + color: var(--text); + line-height: 1.6; +} + +h2 { + text-align: center; + margin-bottom: 2rem; + font-size: 2rem; + color: var(--rose-dark); + font-weight: 700; +} + +section { + padding: 4rem 8%; +} + +/* ============================================ + HEADER + ============================================ */ + +.main-header { + background: linear-gradient(135deg, var(--rose), var(--rose-gold)); + color: var(--white); + padding: 1.5rem 8%; + display: flex; + justify-content: space-between; + align-items: center; + box-shadow: var(--shadow); +} + +.logo { + display: flex; + align-items: center; + gap: 1rem; +} + +.logo-abm { + background: var(--white); + color: var(--rose-dark); + padding: 0.6rem 1rem; + border-radius: var(--radius); + font-size: 1.4rem; + font-weight: 700; +} + +.logo-info { + display: flex; + flex-direction: column; +} + +.logo-subtitle { + font-size: 0.85rem; + opacity: 0.9; +} + +.main-nav a { + color: var(--white); + text-decoration: none; + font-weight: 600; + margin-left: 1rem; + transition: 0.2s; +} + +.main-nav a:hover { + opacity: 0.7; +} + +/* ============================================ + HERO SECTION + ============================================ */ + +.hero { + display: flex; + justify-content: space-between; + align-items: center; + gap: 3rem; +} + +.hero-content h1 { + font-size: 2.4rem; + color: var(--rose-dark); +} + +.hero-description { + max-width: 500px; + color: var(--muted); + margin: 1rem 0; +} + +.hero-actions { + margin-top: 1rem; + display: flex; + gap: 1rem; +} + +.btn { + padding: 0.9rem 1.4rem; + border-radius: var(--radius); + text-decoration: none; + font-weight: 600; + display: inline-block; +} + +.btn-project { + background: var(--rose-gold); + color: var(--white); +} + +.btn-contact { + background: var(--white); + border: 2px solid var(--rose-gold); + color: var(--rose-dark); +} + +.hero-profile-card { + background: var(--white); + width: 220px; + height: 220px; + border-radius: 50%; + box-shadow: var(--shadow); + display: flex; + align-items: center; + justify-content: center; +} + +.profile-placeholder { + background: linear-gradient(135deg, var(--rose), var(--rose-gold)); + width: 180px; + height: 180px; + border-radius: 50%; + color: var(--white); + font-size: 3rem; + display: flex; + justify-content: center; + align-items: center; +} + +/* ============================================ + ABOUT + ============================================ */ + +.about-details-grid { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 2rem; +} + +.about-bio { + font-size: 1rem; + color: var(--muted); +} + +.social-links a { + font-size: 2rem; + margin-right: 1rem; +} + +/* ============================================ + SKILLS + ============================================ */ + +.skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; +} + +.skill-card { + background: var(--white); + padding: 1.2rem; + border-radius: var(--radius); + box-shadow: var(--shadow-light); + text-align: center; +} + +.skill-card i { + font-size: 2.6rem; + margin-bottom: 0.4rem; +} + +/* ============================================ + PROJECTS + ============================================ */ + +.project-card { + background: var(--white); + padding: 2rem; + border-radius: var(--radius); + box-shadow: var(--shadow); + max-width: 750px; + margin: auto; +} + +.project-card h3 { + font-size: 1.6rem; + color: var(--rose-dark); +} + +.project-preview { + width: 100%; + border-radius: var(--radius); + margin: 1.2rem 0; +} + +.project-card ul { + margin: 1rem 0 1.5rem; +} + +.project-actions { + margin-top: 1rem; +} + +.project-btn { + background: var(--rose-dark); + color: var(--white); + padding: 0.8rem 1.4rem; + border-radius: var(--radius); + text-decoration: none; + font-weight: 600; +} + +/* ============================================ + EXPERIENCE + ============================================ */ + +.experience-card { + background: var(--white); + padding: 2rem; + border-radius: var(--radius); + box-shadow: var(--shadow); + max-width: 800px; + margin: auto; +} + +.experience-card h3 { + color: var(--rose-dark); +} + +/* ============================================ + TIMELINE + ============================================ */ + +.timeline { + border-left: 3px solid var(--rose-dark); + padding-left: 2rem; +} + +.timeline-item { + position: relative; + margin-bottom: 2rem; +} + +.timeline-dot { + width: 14px; + height: 14px; + background: var(--rose-dark); + border-radius: 50%; + position: absolute; + left: -29px; + top: 5px; +} + +/* ============================================ + CONTACT + ============================================ */ + +.contact-links { + text-align: center; + margin-bottom: 2rem; +} + +.contact-btn { + background: var(--rose-dark); + color: var(--white); + padding: 0.8rem 1.4rem; + border-radius: var(--radius); + text-decoration: none; + margin: 0 0.5rem; +} + +.form-container { + max-width: 600px; + margin: auto; +} + +.contact-form input, +.contact-form textarea { + width: 100%; + padding: 1rem; + border-radius: var(--radius); + border: 1px solid var(--rose); + margin-bottom: 1rem; +} + +.submit-btn { + background: var(--rose-gold); + border: none; + color: var(--white); + padding: 0.8rem 1.4rem; + border-radius: var(--radius); + cursor: pointer; + font-weight: 600; +} + +/* ============================================ + FOOTER + ============================================ */ + +footer { + text-align: center; + padding: 2rem; + background: var(--rose-dark); + color: var(--white); + margin-top: 3rem; +}