Initial commit: Portfolio Aya Ben Mabrouk
This commit is contained in:
Aya Tess tess
77
.idea/workspace.xml
generated
Normal file
77
.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="AutoImportSettings">
|
||||||
|
<option name="autoReloadType" value="SELECTIVE" />
|
||||||
|
</component>
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="c9fb54f2-bf4d-42a7-867b-ebcad9281633" name="Changes" comment="">
|
||||||
|
<change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/Dockerfile" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/assets/cms.preview.jpg" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/docker-compose.yml" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/portfolio.iml" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/script.js" afterDir="false" />
|
||||||
|
<change afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
|
||||||
|
</list>
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectColorInfo">{
|
||||||
|
"associatedIndex": 7
|
||||||
|
}</component>
|
||||||
|
<component name="ProjectId" id="36e4ozg1hRHvlJhv8Y5NUATXvf1" />
|
||||||
|
<component name="ProjectViewState">
|
||||||
|
<option name="hideEmptyMiddlePackages" value="true" />
|
||||||
|
<option name="showLibraryContents" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent"><![CDATA[{
|
||||||
|
"keyToString": {
|
||||||
|
"ModuleVcsDetector.initialDetectionPerformed": "true",
|
||||||
|
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||||
|
"RunOnceActivity.TerminalTabsStorage.copyFrom.TerminalArrangementManager.252": "true",
|
||||||
|
"RunOnceActivity.git.unshallow": "true",
|
||||||
|
"SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||||
|
"git-widget-placeholder": "main",
|
||||||
|
"kotlin-language-version-configured": "true",
|
||||||
|
"node.js.detected.package.eslint": "true",
|
||||||
|
"node.js.detected.package.tslint": "true",
|
||||||
|
"node.js.selected.package.eslint": "(autodetect)",
|
||||||
|
"node.js.selected.package.tslint": "(autodetect)",
|
||||||
|
"nodejs_package_manager_path": "npm",
|
||||||
|
"vue.rearranger.settings.migration": "true"
|
||||||
|
}
|
||||||
|
}]]></component>
|
||||||
|
<component name="RecentsManager">
|
||||||
|
<key name="MoveFile.RECENT_KEYS">
|
||||||
|
<recent name="$PROJECT_DIR$" />
|
||||||
|
</key>
|
||||||
|
</component>
|
||||||
|
<component name="SharedIndexes">
|
||||||
|
<attachedChunks>
|
||||||
|
<set>
|
||||||
|
<option value="bundled-jdk-9823dce3aa75-bf35d07a577b-intellij.indexing.shared.core-IU-252.26830.84" />
|
||||||
|
<option value="bundled-js-predefined-d6986cc7102b-3aa1da707db6-JavaScript-IU-252.26830.84" />
|
||||||
|
</set>
|
||||||
|
</attachedChunks>
|
||||||
|
</component>
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="c9fb54f2-bf4d-42a7-867b-ebcad9281633" name="Changes" comment="" />
|
||||||
|
<created>1765353883129</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1765353883129</updated>
|
||||||
|
<workItem from="1765353884119" duration="13778000" />
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
<option name="version" value="3" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
Dockerfile
Normal file
8
Dockerfile
Normal file
@@ -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
|
||||||
38
assets/README.md
Normal file
38
assets/README.md
Normal file
@@ -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
|
||||||
|
|
||||||
BIN
assets/cms.preview.jpg
Normal file
BIN
assets/cms.preview.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1005 KiB |
7
docker-compose.yml
Normal file
7
docker-compose.yml
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
services:
|
||||||
|
portfolio:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "8080:80"
|
||||||
|
container_name: portfolio
|
||||||
|
restart: unless-stopped
|
||||||
221
index.html
Normal file
221
index.html
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portfolio - Aya Ben Mabrouk</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="main-header">
|
||||||
|
<div class="logo">
|
||||||
|
<span class="logo-abm">ABM</span>
|
||||||
|
<div class="logo-info">
|
||||||
|
<span>Aya Ben Mabrouk</span>
|
||||||
|
<span class="logo-subtitle">BTS CIEL — Développement & Réseaux</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="main-nav">
|
||||||
|
<a href="#about">À propos</a>
|
||||||
|
<a href="#skills">Compétences</a>
|
||||||
|
<a href="#projects">Projets</a>
|
||||||
|
<a href="#experience">Expériences</a>
|
||||||
|
<a href="#parcours">Parcours</a>
|
||||||
|
<a href="#contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- SECTION HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1>Portfolio de Aya Ben Mabrouk</h1>
|
||||||
|
<p class="hero-description">
|
||||||
|
É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.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#projects" class="btn btn-project">Voir mes projets</a>
|
||||||
|
<a href="#contact" class="btn btn-contact">Me contacter</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-profile-card">
|
||||||
|
<div class="profile-placeholder">AB</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION A PROPOS -->
|
||||||
|
<section id="about" class="about-section">
|
||||||
|
<div class="about-header">
|
||||||
|
<h2>À propos</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-details-grid">
|
||||||
|
<div class="about-bio">
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Je suis organisée, curieuse et motivée. J'apprends continuellement et j'aime travailler sur des
|
||||||
|
projets concrets et stimulants.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="mailto:ayabmk13@gmail.com" target="_blank">
|
||||||
|
<i class="devicon-google-plain colored"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/ayabmk13" target="_blank">
|
||||||
|
<i class="devicon-linkedin-plain colored"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/Ayaabmk" target="_blank">
|
||||||
|
<i class="devicon-github-original"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about-keywords">
|
||||||
|
<p><strong>Langages :</strong> HTML, CSS, JavaScript, PHP, Python</p>
|
||||||
|
<p><strong>Réseaux :</strong> TCP/IP, VLAN, DHCP, Linux</p>
|
||||||
|
<p><strong>Outils :</strong> Git, Docker, MySQL</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION COMPETENCES -->
|
||||||
|
<section id="skills">
|
||||||
|
<h2>Compétences</h2>
|
||||||
|
|
||||||
|
<div class="skills-grid">
|
||||||
|
<div class="skill-card"><i class="devicon-html5-plain colored"></i><p>HTML</p></div>
|
||||||
|
<div class="skill-card"><i class="devicon-css3-plain colored"></i><p>CSS</p></div>
|
||||||
|
<div class="skill-card"><i class="devicon-javascript-plain colored"></i><p>JavaScript</p></div>
|
||||||
|
<div class="skill-card"><i class="devicon-php-plain colored"></i><p>PHP</p></div>
|
||||||
|
<div class="skill-card"><i class="devicon-mysql-plain colored"></i><p>MySQL</p></div>
|
||||||
|
<div class="skill-card"><i class="devicon-linux-plain colored"></i><p>Linux</p></div>
|
||||||
|
<div class="skill-card"><i class="devicon-docker-plain colored"></i><p>Docker</p></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION PROJETS -->
|
||||||
|
<section id="projects">
|
||||||
|
<h2>Projets</h2>
|
||||||
|
|
||||||
|
<div class="project-card">
|
||||||
|
<h3>Mini CMS – Création d’un système de gestion de contenu</h3>
|
||||||
|
|
||||||
|
<img src="assets/cms.preview.jpg" alt="Aperçu du CMS" class="project-preview">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>PHP / MySQL</li>
|
||||||
|
<li>CRUD complet</li>
|
||||||
|
<li>Gestion des utilisateurs</li>
|
||||||
|
<li>Interface moderne</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="project-actions">
|
||||||
|
<a class="project-btn" target="_blank" href="https://github.com/Ayaabmk">
|
||||||
|
Voir le code sur GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION EXPERIENCE -->
|
||||||
|
<section id="experience">
|
||||||
|
<h2>Mon expérience en entreprise</h2>
|
||||||
|
|
||||||
|
<div class="experience-card">
|
||||||
|
<h3>Stage – Support Informatique & Réseau<br>Clinique Privée</h3>
|
||||||
|
<p>
|
||||||
|
Dans un environnement réel en clinique, j'ai participé à la gestion du parc informatique :
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>Configuration de postes</li>
|
||||||
|
<li>Mise en réseau et gestion des accès</li>
|
||||||
|
<li>Installation d’imprimantes</li>
|
||||||
|
<li>Support utilisateurs quotidien</li>
|
||||||
|
<li>Gestion de droits sur des logiciels internes</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>Ce stage m’a permis de renforcer mes compétences techniques et ma rigueur.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION PARCOURS -->
|
||||||
|
<section id="parcours" class="timeline-section">
|
||||||
|
<h2>Parcours</h2>
|
||||||
|
|
||||||
|
<div class="timeline">
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<span class="timeline-dot"></span>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date">2025 - 2026</span>
|
||||||
|
<p>BTS CIEL — 2ᵉ année, développement & réseaux</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
<span class="timeline-dot"></span>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date">2024 - 2025</span>
|
||||||
|
<p>BTS CIEL — 1ʳᵉ année, bases en programmation</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timeline-item">
|
||||||
|
|
||||||
|
|
||||||
|
<span class="timeline-dot"></span>
|
||||||
|
<div class="timeline-content">
|
||||||
|
<span class="timeline-date">2024 - 2023</span>
|
||||||
|
<p>Baccalauréat — Général - Mention Bien, Economique & social</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION CONTACT -->
|
||||||
|
<section id="contact" class="contact-section">
|
||||||
|
<h2>Contact</h2>
|
||||||
|
|
||||||
|
<p class="contact-subtitle">
|
||||||
|
Une opportunité, une idée, une question ? Contacte-moi !
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="contact-links">
|
||||||
|
<a href="mailto:ayabmk13@gmail.com" class="contact-btn">
|
||||||
|
<i class="fas fa-envelope"></i> Email
|
||||||
|
</a>
|
||||||
|
<a href="https://www.linkedin.com/in/ayabmk13" target="_blank" class="contact-btn">
|
||||||
|
<i class="fab fa-linkedin"></i> LinkedIn
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2025 Aya Ben Mabrouk - Portfolio</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
portfolio.iml
Normal file
8
portfolio.iml
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="GENERAL_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
80
script.js
Normal file
80
script.js
Normal file
@@ -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);
|
||||||
|
});
|
||||||
348
style.css
Normal file
348
style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user