generated from Templates_CodeFirst/templateHtmlCss
NoaSlld
1 month ago
parent
9f13697447
commit
8409064042
@ -0,0 +1,9 @@
|
||||
export function setupCounter(element) {
|
||||
let counter = 0
|
||||
const setCounter = (count) => {
|
||||
counter = count
|
||||
element.innerHTML = `count is ${counter}`
|
||||
}
|
||||
element.addEventListener('click', () => setCounter(counter + 1))
|
||||
setCounter(0)
|
||||
}
|
||||
|
After Width: | Height: | Size: 409 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 571 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 125 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 271 KiB |
@ -1,34 +1,38 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>portfolio3a - One incredible styled html page</title>
|
||||
<link rel="stylesheet" href="mycoolstyle.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Portfolio de Noa Sillard - Découvrez mes projets, compétences et expériences professionnelles">
|
||||
<meta name="keywords" content="Noa Sillard, portfolio, développeur, projets, expériences professionnelles">
|
||||
<title>Noa Sillard - Portfolio</title>
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
<link rel="stylesheet" href="style/header.css">
|
||||
<link rel="stylesheet" href="style/about.css">
|
||||
<link rel="stylesheet" href="style/experience.css">
|
||||
<link rel="stylesheet" href="style/projects.css">
|
||||
<link rel="stylesheet" href="style/skills.css">
|
||||
<link rel="stylesheet" href="style/formation.css">
|
||||
<link rel="stylesheet" href="style/testimonials.css">
|
||||
<link rel="stylesheet" href="style/footer.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Navigation menu -->
|
||||
<ul class="navbar">
|
||||
<li><a href="https://codefirst.iut.uca.fr/home">Code#0</a>
|
||||
<li><a href="http://iut.uca.fr">IUT</a>
|
||||
<li><a href="https://neilyoungarchives.com/">Very good music</a>
|
||||
<li><a href="https://www.youtube.com/watch?v=CY5dTBhRxOA">Very good music too!</a>
|
||||
</ul>
|
||||
|
||||
<!-- Main Content -->
|
||||
<h1>portfolio3a is my first page, and it has got style!</h1>
|
||||
|
||||
<p>Welcome on this template html/css project
|
||||
|
||||
<p>Very simple, some links, some menu... make it your own
|
||||
…
|
||||
|
||||
<p>I have nothing more to say
|
||||
|
||||
<!-- my footer -->
|
||||
<address>Template made in 2022<br>
|
||||
with Code#0 <a href="https://codefirst.iut.uca.fr/home"><img src="images/CodeFirstLogo.png" alt="Code#0" align="middle" border="0" height="40px"/>
|
||||
</a></address>
|
||||
|
||||
<div id="header-container"></div>
|
||||
<main>
|
||||
<div id="about-container"></div>
|
||||
<div id="experience-container"></div>
|
||||
<div id="projects-container"></div>
|
||||
<div id="formation-container"></div>
|
||||
<div id="skills-container"></div>
|
||||
<div id="testimonials-container"></div>
|
||||
</main>
|
||||
<div id="footer-container"></div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/include.js"></script>
|
||||
<script src="js/main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,34 @@
|
||||
// Fonction pour charger le contenu HTML
|
||||
async function loadHTML(url, containerId) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
||||
const html = await response.text();
|
||||
document.getElementById(containerId).innerHTML = html;
|
||||
} catch (error) {
|
||||
console.error('Error loading HTML:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Chargement des sections
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
const sections = [
|
||||
{ url: 'sections/header.html', id: 'header-container' },
|
||||
{ url: 'sections/about.html', id: 'about-container' },
|
||||
{ url: 'sections/skills.html', id: 'skills-container' },
|
||||
{ url: 'sections/formation.html', id: 'formation-container' },
|
||||
{ url: 'sections/experience.html', id: 'experience-container' },
|
||||
{ url: 'sections/projects.html', id: 'projects-container' },
|
||||
{ url: 'sections/testimonials.html', id: 'testimonials-container' },
|
||||
{ url: 'sections/footer.html', id: 'footer-container' }
|
||||
];
|
||||
|
||||
// Chargement parallèle des sections
|
||||
await Promise.all(sections.map(section =>
|
||||
loadHTML(section.url, section.id)
|
||||
));
|
||||
|
||||
// Initialisation des scripts après le chargement du contenu
|
||||
const event = new Event('sectionsLoaded');
|
||||
document.dispatchEvent(event);
|
||||
});
|
||||
@ -0,0 +1,236 @@
|
||||
// Smooth scroll for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile menu
|
||||
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (mobileMenuBtn && navLinks) {
|
||||
mobileMenuBtn.addEventListener('click', () => {
|
||||
mobileMenuBtn.classList.toggle('active');
|
||||
navLinks.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu when clicking on a link
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileMenuBtn.classList.remove('active');
|
||||
navLinks.classList.remove('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Experience card details toggle
|
||||
document.querySelectorAll('.show-more').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const card = button.closest('.experience-card');
|
||||
const details = card.querySelector('.experience-details');
|
||||
|
||||
if (details) {
|
||||
details.classList.toggle('show');
|
||||
button.textContent = details.classList.contains('show') ? 'Voir moins' : 'Voir plus';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Testimonials slider
|
||||
const testimonialCards = document.querySelectorAll('.testimonial-card');
|
||||
const dots = document.querySelectorAll('.dot');
|
||||
const prevBtn = document.querySelector('.control-btn.prev');
|
||||
const nextBtn = document.querySelector('.control-btn.next');
|
||||
let currentTestimonial = 0;
|
||||
let autoSlideInterval;
|
||||
|
||||
function showTestimonial(index) {
|
||||
testimonialCards.forEach(card => card.classList.remove('active'));
|
||||
dots.forEach(dot => dot.classList.remove('active'));
|
||||
|
||||
testimonialCards[index].classList.add('active');
|
||||
dots[index].classList.add('active');
|
||||
}
|
||||
|
||||
function nextTestimonial() {
|
||||
currentTestimonial = (currentTestimonial + 1) % testimonialCards.length;
|
||||
showTestimonial(currentTestimonial);
|
||||
}
|
||||
|
||||
function prevTestimonial() {
|
||||
currentTestimonial = (currentTestimonial - 1 + testimonialCards.length) % testimonialCards.length;
|
||||
showTestimonial(currentTestimonial);
|
||||
}
|
||||
|
||||
function startAutoSlide() {
|
||||
autoSlideInterval = setInterval(nextTestimonial, 5000);
|
||||
}
|
||||
|
||||
function stopAutoSlide() {
|
||||
clearInterval(autoSlideInterval);
|
||||
}
|
||||
|
||||
// Event listeners for testimonial controls
|
||||
if (prevBtn && nextBtn) {
|
||||
prevBtn.addEventListener('click', () => {
|
||||
prevTestimonial();
|
||||
stopAutoSlide();
|
||||
startAutoSlide();
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
nextTestimonial();
|
||||
stopAutoSlide();
|
||||
startAutoSlide();
|
||||
});
|
||||
}
|
||||
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
currentTestimonial = index;
|
||||
showTestimonial(currentTestimonial);
|
||||
stopAutoSlide();
|
||||
startAutoSlide();
|
||||
});
|
||||
});
|
||||
|
||||
// Start auto-sliding
|
||||
startAutoSlide();
|
||||
|
||||
// Pause auto-slide when hovering over testimonials
|
||||
const testimonialSlider = document.querySelector('.testimonials-slider');
|
||||
if (testimonialSlider) {
|
||||
testimonialSlider.addEventListener('mouseenter', stopAutoSlide);
|
||||
testimonialSlider.addEventListener('mouseleave', startAutoSlide);
|
||||
}
|
||||
|
||||
// Project modal
|
||||
const projectData = {
|
||||
1: {
|
||||
title: "Application E-commerce",
|
||||
description: `Une plateforme de commerce électronique complète offrant une expérience d'achat fluide et sécurisée. Caractéristiques principales :
|
||||
|
||||
• Système de panier d'achat dynamique
|
||||
• Intégration de paiement sécurisé
|
||||
• Gestion des stocks en temps réel
|
||||
• Interface administrateur complète
|
||||
• Système de notation et avis clients
|
||||
• Optimisation SEO avancée`,
|
||||
image: "https://via.placeholder.com/800x400",
|
||||
tags: ["React", "Node.js", "MongoDB", "Stripe", "Redux", "AWS"],
|
||||
link: "#"
|
||||
},
|
||||
2: {
|
||||
title: "Dashboard Analytics",
|
||||
description: `Interface d'administration sophistiquée permettant la visualisation et l'analyse de données en temps réel. Fonctionnalités :
|
||||
|
||||
• Graphiques interactifs personnalisables
|
||||
• Tableaux de bord en temps réel
|
||||
• Export de rapports automatisés
|
||||
• Système d'alertes intelligent
|
||||
• Analyse prédictive
|
||||
• Interface responsive`,
|
||||
image: "https://via.placeholder.com/800x400",
|
||||
tags: ["Vue.js", "D3.js", "Firebase", "TypeScript", "TailwindCSS"],
|
||||
link: "#"
|
||||
},
|
||||
3: {
|
||||
title: "Application Mobile Fitness",
|
||||
description: `Application mobile de suivi fitness complète avec synchronisation cloud et analyses détaillées. Caractéristiques :
|
||||
|
||||
• Suivi d'activités personnalisé
|
||||
• Synchronisation multi-appareils
|
||||
• Statistiques détaillées
|
||||
• Plans d'entraînement adaptatifs
|
||||
• Intégration avec appareils connectés
|
||||
• Mode hors ligne`,
|
||||
image: "https://via.placeholder.com/800x400",
|
||||
tags: ["React Native", "Redux", "AWS", "Node.js", "MongoDB"],
|
||||
link: "#"
|
||||
}
|
||||
};
|
||||
|
||||
const modal = document.getElementById('projectModal');
|
||||
const modalImage = modal.querySelector('.modal-image');
|
||||
const modalTitle = modal.querySelector('.modal-title');
|
||||
const modalDescription = modal.querySelector('.modal-description');
|
||||
const modalTags = modal.querySelector('.modal-tags');
|
||||
const modalLink = modal.querySelector('.modal-link');
|
||||
const modalClose = modal.querySelector('.modal-close');
|
||||
|
||||
// Open modal
|
||||
document.querySelectorAll('.project-card').forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
const projectId = card.dataset.project;
|
||||
const project = projectData[projectId];
|
||||
|
||||
modalImage.src = project.image;
|
||||
modalImage.alt = project.title;
|
||||
modalTitle.textContent = project.title;
|
||||
modalDescription.innerHTML = project.description;
|
||||
modalTags.innerHTML = project.tags
|
||||
.map(tag => `<span>${tag}</span>`)
|
||||
.join('');
|
||||
modalLink.href = project.link;
|
||||
|
||||
modal.style.display = 'block';
|
||||
document.body.style.overflow = 'hidden';
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal
|
||||
modalClose.addEventListener('click', () => {
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
});
|
||||
|
||||
window.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all sections for animation
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
|
||||
// Header scroll behavior
|
||||
let lastScroll = 0;
|
||||
const header = document.querySelector('.header');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > lastScroll && currentScroll > 80) {
|
||||
header.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
header.style.transform = 'translateY(0)';
|
||||
}
|
||||
|
||||
lastScroll = currentScroll;
|
||||
});
|
||||
@ -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 }
|
||||
@ -0,0 +1,58 @@
|
||||
<section id="about" class="section about">
|
||||
<div class="container">
|
||||
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<span class="section-subtitle">Alternant développeur Web</span>
|
||||
<h1 class="section-title">À mon propos</h1>
|
||||
<div class="about-description">
|
||||
<p>Enchanté, je me présente, je m'appelle Noa Sillard et je suis étudiant au BUT informatique de Clermont-Ferrand et en recherche d'école de commerce</p>
|
||||
|
||||
<p>Attiré par l'informatique, j'ai confirmé mon intérêt pour ce domaine au lycée et souhaite désormais évoluer vers des métiers en lien avec ce parcours, avec une dimension plus orientée business.</p>
|
||||
|
||||
<p>Je tire ma curiosité, mon organisation et mon autonomie de mes passions que sont les nouvelles technologies mais également
|
||||
l'architecture, l'horlgerie, l'automobile et le sport tel que la musculation ou le tir à l'arc.</p>
|
||||
</div>
|
||||
<div class="about-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">650+</span>
|
||||
<span class="stat-label">Heures de projets académiques de groupe</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">5+</span>
|
||||
<span class="stat-label">Projets réalisés en entreprise</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">30+</span>
|
||||
<span class="stat-label">Collaborateurs</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-right">
|
||||
<div class="about-image">
|
||||
<img src="img/noa-photo-profil.png" alt="Noa Sillard - Développeur Web" class="profile-image">
|
||||
<div class="image-decoration"></div>
|
||||
</div>
|
||||
<div class="about-social">
|
||||
<a href="https://github.com/NoaSlld" target="_blank" rel="noopener noreferrer" class="social-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/noa-sillard/" target="_blank" rel="noopener noreferrer" class="social-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="mailto:noa.sillard@gmail.com" class="social-link">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"/>
|
||||
<path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,63 @@
|
||||
<section id="experience" class="section experience">
|
||||
<div class="container">
|
||||
<span class="section-subtitle">Parcours</span>
|
||||
<h2 class="section-title">Expériences professionnelles</h2>
|
||||
<div class="experience-grid">
|
||||
<article class="experience-card" data-experience="3">
|
||||
<span class="experience-date">2024 - Présent</span>
|
||||
<h3>Alternant développeur web</h3>
|
||||
<p class="experience-company">Coqpit, Clermont-Ferrand</p>
|
||||
<div class="experience-preview">
|
||||
<p>Création de sites webs en autonomie</p>
|
||||
</div>
|
||||
<div class="experience-hover">
|
||||
<!--synthèse en 2 lignes-->
|
||||
<p>• 1120 heures</p>
|
||||
<p>• Suivi du projet directement avec les clients</p>
|
||||
<p>• Création de sites webs avec Wordpress(HTML, SCSS, JS, PHP (laravel))</p>
|
||||
<p>Cliquez pour plus de détails</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="experience-card" data-experience="2">
|
||||
<span class="experience-date">2024 (10 semaines)</span>
|
||||
<h3>Stage en entreprise</h3>
|
||||
<p class="experience-company">Open Studio, Clermont-Ferrand</p>
|
||||
<div class="experience-preview">
|
||||
<p>Développement d'un module du CMS open source Thelia </p>
|
||||
</div>
|
||||
<div class="experience-hover">
|
||||
<p>• Développement du module CustomFrontMenu qui permet à un client de gérer lui même ses menus</p>
|
||||
<p>• Développement de scripts pour automatiser la création de la documentation du CMS </p>
|
||||
<p>Cliquez pour plus de détails</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="experience-card" data-experience="1">
|
||||
<span class="experience-date">2023 (10 semaines)</span>
|
||||
<h3>Stage en entreprise</h3>
|
||||
<p class="experience-company">Code Rhapsody, Lyon</p>
|
||||
<div class="experience-preview">
|
||||
<p>Développement d'une application interne de gestion des temps et de facturation automatisée</p>
|
||||
</div>
|
||||
<div class="experience-hover">
|
||||
<p>• Développement d'une application interne de gestion des temps et de facturation automatisée </p>
|
||||
<p>Cliquez pour plus de détails</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="experienceModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close">×</button>
|
||||
<span class="modal-date"></span>
|
||||
<h3 class="modal-title"></h3>
|
||||
<p class="modal-company"></p>
|
||||
<div class="modal-description"></div>
|
||||
<div class="modal-skills"></div>
|
||||
<div class="modal-achievements"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,8 @@
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<a href="CV.pdf" class="btn-primary" download="CV_SILLARD_Noa.pdf" >Télécharger CV</a>
|
||||
<p>Mon contact: <a href="mailto:noa.sillard@gmail.com">noa.sillard@gmail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,24 @@
|
||||
<section id="formation" class="section formation">
|
||||
<div class="container">
|
||||
<span class="section-subtitle">Parcours</span>
|
||||
<h2 class="section-title">Formation</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h3>2021 - 2025</h3>
|
||||
<h4>Bachelor Universitaire de Technologie Informatique</h4>
|
||||
<p>Clermont-Ferrand</p>
|
||||
<p>Gestion de projet, développement, base de données, réseau, architecture</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-content">
|
||||
<h3>2020 - 2021</h3>
|
||||
<h4>Baccalauréat</h4>
|
||||
<p>Spécialités Maths - Informatique</p>
|
||||
<p>Option Mathématiques Expertes </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,32 @@
|
||||
<header class="header">
|
||||
<meta name="google-site-verification" content="m-d3IkfYglAe2feYCVVdzf0bP1avSiPlO5KHMV30pcw" />
|
||||
<meta property="og:title" content="Noa Sillard - Portfolio et CV" />
|
||||
<meta property="og:description" content="Étudiant en informatique, découvrez mes projets et compétences en développement." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://noaslld.github.io/portfolio/" />
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Noa Sillard - Portfolio" />
|
||||
<meta name="twitter:description" content="Explorez mes projets et expériences en getion de projet et développement informatique" />
|
||||
|
||||
|
||||
<nav class="nav-container">
|
||||
<div class="logo"><a href="#">NS</a></div>
|
||||
<button class="mobile-menu-btn" aria-label="Menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#about">À propos</a></li>
|
||||
<li><a href="#experience">Expériences</a></li>
|
||||
<li><a href="#projects">Réalisations</a></li>
|
||||
<li><a href="#formation">Formation</a></li>
|
||||
<li><a href="#skills">Connaissances</a></li>
|
||||
<li><a href="#testimonials">Avis</a></li>
|
||||
</ul>
|
||||
<div class="nav-actions">
|
||||
<a href="CV.pdf" class="btn-primary" download="CV_SILLARD_Noa.pdf" >Télécharger CV</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
@ -0,0 +1,135 @@
|
||||
<section id="projects" class="section projects">
|
||||
<div class="container">
|
||||
<span class="section-subtitle">Portfolio</span>
|
||||
<h2 class="section-title">Mes Réalisations</h2>
|
||||
<div class="projects-grid">
|
||||
|
||||
<article class="project-card" data-project="6">
|
||||
<div class="project-image">
|
||||
<img src="img/comics.jpg" alt="Transformation en style comics" loading="lazy">
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>Transformation de photos en style "Comics"</h3>
|
||||
<p>Projet de traitement d'image réalisé seul en une petite semaine dont l'objectif est de transformer une photo existante en style "Comics"</p>
|
||||
<p>Disponible sur mon github</p>
|
||||
<div class="project-tags">
|
||||
<span>Python</span>
|
||||
<span>Numpy</span>
|
||||
<span>Scipy</span>
|
||||
<span>Sklearn</span>
|
||||
<span>Matplotlib</span>
|
||||
</div>
|
||||
<button class="btn-primary">Voir les détails</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card" data-project="5">
|
||||
<div class="project-image">
|
||||
<img src="img/data-science.png" alt="Prediction IA" loading="lazy">
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>IA supervisée - Prédiction du prix de l'immobilier</h3>
|
||||
<p>Ce projet réalisé seul en 7 jours dans le cadre de ma 3ème année de BUT vise à prédire les
|
||||
prix de l'immobilier en France en utilisant plusieurs modèles de machine learning</p>
|
||||
<p>Disponible sur mon github</p>
|
||||
<div class="project-tags">
|
||||
<span>Python</span>
|
||||
<span>Numpy</span>
|
||||
<span>Matplotlib</span>
|
||||
<span>Scikit-learn</span>
|
||||
<span>Pandas</span>
|
||||
<span>Lightgbm</span>
|
||||
</div>
|
||||
<button class="btn-primary">Voir les détails</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card" data-project="4">
|
||||
<div class="project-image">
|
||||
<img src="img/cochons-aigris.png" alt="Application Web" loading="lazy">
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>Jeu 3D - Angry bird inversé, les cochons contre attaquent</h3>
|
||||
<p>Projet universitaire en autonomie - 2025 (110 heures)</p>
|
||||
<p>Travail dans une équipe de 4 personnes</p>
|
||||
<div class="project-tags">
|
||||
<span>Three.JS</span>
|
||||
<span>Javascript</span>
|
||||
<span>HTML</span>
|
||||
<span>CSS</span>
|
||||
</div>
|
||||
<button class="btn-primary">Voir les détails</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card" data-project="3">
|
||||
<div class="project-image">
|
||||
<img src="img/verax.png" alt="Application Web" loading="lazy">
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>Applications web et mobile de lutte contre la désinformation</h3>
|
||||
<p>Projet universitaire en autonomie - 2024 (200 heures)</p>
|
||||
<p>Travail dans une équipe de 5 personnes</p>
|
||||
<div class="project-tags">
|
||||
<span>PHP</span>
|
||||
<span>Java</span>
|
||||
<span>Kotlin</span>
|
||||
<span>SQL</span>
|
||||
<span>Docker</span>
|
||||
<span>HTML</span>
|
||||
<span>CSS</span>
|
||||
</div>
|
||||
<button class="btn-primary">Voir les détails</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card" data-project="2">
|
||||
<div class="project-image">
|
||||
<img src="img/edutiles.png" alt="Application Web" loading="lazy">
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>Jeu de dominos (fractions) éducative</h3>
|
||||
<p>2023 (170 heures)</p>
|
||||
<div class="project-tags">
|
||||
<span>Javascript</span>
|
||||
<span>NodeJs</span>
|
||||
<span>socket.io</span>
|
||||
<span>HTML</span>
|
||||
<span>CSS</span>
|
||||
</div>
|
||||
<button class="btn-primary">Voir les détails</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="project-card" data-project="1">
|
||||
<div class="project-image">
|
||||
<img src="img/stormy.png" alt="Application Web" loading="lazy">
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<h3>Application d'organisation pour les étudiants</h3>
|
||||
<p>Projet universitaire en autonomie - 2022 (180 heures)</p>
|
||||
<p></p>
|
||||
<div class="project-tags">
|
||||
<span>NodeJs</span>
|
||||
<span>TypeScript</span>
|
||||
<span>HTML</span>
|
||||
<span>CSS</span>
|
||||
</div>
|
||||
<button class="btn-primary">Voir les détails</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="projectModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close">×</button>
|
||||
<img class="modal-image" src="" alt="">
|
||||
<h3 class="modal-title"></h3>
|
||||
<div class="modal-description"></div>
|
||||
<div class="modal-tags"></div>
|
||||
<a href="#" class="modal-link btn-primary">Voir le projet</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,187 @@
|
||||
<section id="skills" class="section skills">
|
||||
<div class="container">
|
||||
<span class="section-subtitle">Expertise</span>
|
||||
<h2 class="section-title">Mes Connaissances</h2>
|
||||
<div class="skills-grid">
|
||||
|
||||
<div class="skill-card">
|
||||
<h3>Soft skills</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<span>🗣️ Vulgarisation</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span>🤝 Esprit d'équipe</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span>🔑 Autonomie</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span>👥 Gestion d'équipe</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span>🔄 Adaptabilité</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span>💬 Relationnel</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<h3>Base de données</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg"
|
||||
alt="PostgreSQL">
|
||||
<span>PostgreSQL</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg"
|
||||
alt="MongoDB">
|
||||
<span>MongoDB</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mariadb/mariadb-original.svg"
|
||||
alt="MariaDB">
|
||||
<span>MariaDB</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/neo4j/neo4j-original.svg"
|
||||
alt="Neo4j">
|
||||
<span>Neo4j</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/hadoop/hadoop-original.svg"
|
||||
alt="Hadoop">
|
||||
<span>Hadoop</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<h3>Outils</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<img src="img/excel.png"
|
||||
alt="Excel">
|
||||
<span>Excel</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" alt="Google Sheets">
|
||||
<span>Google Sheets</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/New_Power_BI_Logo.svg" alt="Power BI" width="40" height="40">
|
||||
<span>Power BI</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" alt="Git">
|
||||
<span>Git</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bootstrap/bootstrap-original.svg"
|
||||
alt="Bootstrap">
|
||||
<span>Bootstrap</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg"
|
||||
alt="Figma">
|
||||
<span>Figma</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postman/postman-original.svg"
|
||||
alt="Postman">
|
||||
<span>Postman</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg"
|
||||
alt="Docker">
|
||||
<span>Docker</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg"
|
||||
alt="VSCode">
|
||||
<span>VSCode</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<h3>Langues</h3>
|
||||
<div class="skill-list">
|
||||
<div class="skill-list-item">
|
||||
<span class="skill-icon">🇫🇷</span>
|
||||
<span>Français - Natif</span>
|
||||
</div>
|
||||
<div class="skill-list-item">
|
||||
<span class="skill-icon">🇬🇧</span>
|
||||
<span>Anglais - Courant</span>
|
||||
</div>
|
||||
<div class="skill-list-item">
|
||||
<span class="skill-icon">🇪🇸</span>
|
||||
<span>Espagnol - Bases</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<h3>Back-end</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg" alt="PHP">
|
||||
<span>PHP</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg"
|
||||
alt="Python">
|
||||
<span>Python</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg"
|
||||
alt="Node.js">
|
||||
<span>Node.js</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java">
|
||||
<span>Java</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/c/c-original.svg" alt="C">
|
||||
<span>C</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/cplusplus/cplusplus-original.svg"
|
||||
alt="C++">
|
||||
<span>C++</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="skill-card">
|
||||
<h3>Front-end</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"
|
||||
alt="HTML">
|
||||
<span>HTML</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
|
||||
alt="JavaScript">
|
||||
<span>JavaScript</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" alt="CSS">
|
||||
<span>CSS</span>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sass/sass-original.svg" alt="SCSS">
|
||||
<span>SCSS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,100 @@
|
||||
<section id="testimonials" class="section testimonials">
|
||||
<div class="container">
|
||||
<span class="section-subtitle">Témoignages</span>
|
||||
<h2 class="section-title">Ce que disent mes collaborateurs</h2>
|
||||
<div class="testimonials-slider">
|
||||
|
||||
<div class="testimonial-card active">
|
||||
<div class="testimonial-content">
|
||||
<p>"Collaborer avec Noa durant ma deuxième année de BUT informatique a été une chance. Sur notre premier projet d'envergure, Stormy ,
|
||||
j'ai pu mesurer l'étendue de ses compétences. Rare sont ceux qui allient aussi harmonieusement compétences techniques, aisance
|
||||
communicationnelle et sens des priorités dans le domaine du développement logiciel. Son implication et sa résilience ont été
|
||||
déterminantes dans la réussite de ce projet, prouvant qu'il sait assumer des responsabilités et organiser efficacement son
|
||||
travail ainsi que celui de son équipe. Noa est sans conteste un partenaire de projet inestimable, dont l'impact positif va bien
|
||||
au-delà des attentes."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-info">
|
||||
<h4>David d'Almeida</h4>
|
||||
<p>Camarade de 2e année</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
<p>"Noa, c'est le mec avec qui tu veux être en équipe lors d'un projet. Avec sa bonne maîtrise technique et son attitude positive,
|
||||
il arrive à motiver toute l'équipe. Il sait résoudre les problèmes avec efficacité et est une source de motivation pour
|
||||
surpasser les défis techniques. Il renforce la cohésion d'équipe et garantit de très bons résultats à chaque projet."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-info">
|
||||
<h4>Alexis Feron</h4>
|
||||
<p>Camarade de 2e et 3e année</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
<p>"Noa est un camarade volontaire et très disponible, c'est agréable de travailler sur des projets avec
|
||||
lui car il s'y met à fond peu importe la tâche, tout en étant toujours présent pour apporter son aide."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-info">
|
||||
<h4>Shana Cascarra</h4>
|
||||
<p>Camarade de 2e et 3e année</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
<p>"J'ai eu l'occasion de collaborer avec Noa sur plusieurs projets pendant mes études. C'était toujours agréable de
|
||||
travailler avec lui car il était très sérieux et engagé. Lorsque nous avons travaillé ensemble sur un projet de
|
||||
JavaScript, nous avons obtenu un excellent résultat. Noa m'a également apporté son aide dans certaines matières
|
||||
où j'avais des difficultés, notamment en cryptographie."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-info">
|
||||
<h4>Baptiste Dudonné</h4>
|
||||
<p>Camarade de 2e année</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-content">
|
||||
<p>"Lorsque nous travaillons sur le projet Verax, Noa à toujours été un membre travailleur et positif. Etant plus
|
||||
expérimenté que nous il nous a grandement aidé en nous conseillant sur certaines façons d'aborder certaines notions
|
||||
qu'il avait déjà vu apparavant. Lors de situations nouvelles il a été un élément fort de notre
|
||||
groupe d'un point de vu technique et social, surtout lors de certains conflits au sein du groupe de projet."
|
||||
</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-info">
|
||||
<h4>Alexis Laurent</h4>
|
||||
<p>Camarade de 2e année</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="testimonial-controls">
|
||||
<button class="control-btn prev" aria-label="Témoignage précédent">←</button>
|
||||
<div class="testimonial-dots">
|
||||
<button class="dot active" aria-label="Témoignage 1"></button>
|
||||
<button class="dot" aria-label="Témoignage 2"></button>
|
||||
<button class="dot" aria-label="Témoignage 3"></button>
|
||||
<button class="dot" aria-label="Témoignage 4"></button>
|
||||
<button class="dot" aria-label="Témoignage 5"></button>
|
||||
</div>
|
||||
<button class="control-btn next" aria-label="Témoignage suivant">→</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -0,0 +1,796 @@
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--text-color: #1f2937;
|
||||
--bg-color: #ffffff;
|
||||
--accent-color: #3b82f6;
|
||||
--gray-light: #f3f4f6;
|
||||
--gray-dark: #4b5563;
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* Header & Navigation */
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
width: 100%;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--accent-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 8rem 0;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-color);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.about-description {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.about-description p {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.about-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.image-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 1rem;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Projects Section */
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.project-card:hover .project-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.project-content h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.project-content p {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-tags span {
|
||||
background-color: var(--gray-light);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Testimonials Section */
|
||||
.testimonials {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.testimonials-slider {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 3rem auto 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
display: none;
|
||||
background-color: var(--bg-color);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.testimonial-card.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.testimonial-content p {
|
||||
font-size: 1.1rem;
|
||||
color: var(--gray-dark);
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.author-info h4 {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.testimonial-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.testimonial-dots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--gray-dark);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: var(--gray-light);
|
||||
padding: 3rem 0;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Formation Section */
|
||||
.formation {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 3rem auto 0;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: var(--primary-color);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 3rem;
|
||||
width: calc(50% - 2rem);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background-color: var(--bg-color);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.timeline-content:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.timeline-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-content::before {
|
||||
right: -3rem;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) .timeline-content::before {
|
||||
left: -3rem;
|
||||
}
|
||||
|
||||
.timeline-content h3 {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
/* Experience Section */
|
||||
.experience-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.experience-card {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.experience-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.experience-date {
|
||||
display: inline-block;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.experience-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.experience-description {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.experience-details {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.experience-details.show {
|
||||
max-height: 500px;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--gray-light);
|
||||
}
|
||||
|
||||
.show-more {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
padding: 0;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.show-more:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: var(--bg-color);
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--gray-dark);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--primary-color);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-tags span {
|
||||
background-color: var(--gray-light);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-link {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-link:hover {
|
||||
background-color: var(--accent-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Mobile Menu */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 30px;
|
||||
height: 21px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-menu-btn span {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 3px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* Projects Section Update */
|
||||
.project-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.project-content h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.project-content p {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Design Update */
|
||||
@media (max-width: 768px) {
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
background-color: var(--bg-color);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
transition: var(--transition);
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(1) {
|
||||
transform: translateY(9px) rotate(45deg);
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(3) {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.image-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.testimonial-controls {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: calc(100% - 3rem);
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.timeline-content::before {
|
||||
left: -2.5rem !important;
|
||||
}
|
||||
|
||||
.experience-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.about-description {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.about-description p {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.about-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
position: relative;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 100%;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.image-decoration {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 1rem;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.about-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--gray-light);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
transform: translateY(-3px);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.social-link img,
|
||||
.social-link svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.social-link:hover img,
|
||||
.social-link:hover svg {
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
justify-content: center;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-right{
|
||||
padding-right: inherit;
|
||||
}
|
||||
.about-image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.image-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,182 @@
|
||||
section.experience{
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.experience-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.experience-card {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.experience-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.experience-date {
|
||||
display: inline-block;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.experience-card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.experience-company {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.experience-preview {
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.experience-hover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(37, 99, 235, 0.96);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
opacity: 0;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.experience-card:hover .experience-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.experience-hover p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.experience-hover p:last-child {
|
||||
margin-top: 1rem;
|
||||
font-style: italic;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: var(--bg-color);
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--gray-dark);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--primary-color);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-date {
|
||||
display: inline-block;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-company {
|
||||
color: var(--gray-dark);
|
||||
font-weight: 500;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-skills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-skills span {
|
||||
background-color: var(--gray-light);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-achievements {
|
||||
border-top: 1px solid var(--gray-light);
|
||||
padding-top: 1.5rem;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.modal-achievements h4 {
|
||||
color: var(--text-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.experience-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
.footer {
|
||||
background-color: var(--gray-light);
|
||||
padding: 7rem 0 3rem 0;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.social-icon.linkedin {
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232563eb"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>');
|
||||
}
|
||||
|
||||
.social-icon.github {
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232563eb"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>');
|
||||
}
|
||||
|
||||
.social-icon.twitter {
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232563eb"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>');
|
||||
}
|
||||
|
||||
.social-links a:hover .social-icon {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: var(--gray-dark);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
.formation {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 3rem auto 0;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: var(--primary-color);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 3rem;
|
||||
width: calc(50% - 2rem);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
margin-right: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background-color: var(--bg-color);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.timeline-content:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.timeline-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-content::before {
|
||||
right: -3rem;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) .timeline-content::before {
|
||||
left: -3rem;
|
||||
}
|
||||
|
||||
.timeline-content h3 {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline::before {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: calc(100% - 3rem);
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.timeline-content::before {
|
||||
left: -2.5rem !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--bg-color);
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.logo a{
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Mobile Menu */
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 30px;
|
||||
height: 21px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-menu-btn span {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 3px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
background-color: var(--bg-color);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
transition: var(--transition);
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(1) {
|
||||
transform: translateY(9px) rotate(45deg);
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mobile-menu-btn.active span:nth-child(3) {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--text-color: #1f2937;
|
||||
--bg-color: #ffffff;
|
||||
--accent-color: #3b82f6;
|
||||
--gray-light: #f3f4f6;
|
||||
--gray-dark: #4b5563;
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
/*padding: 0 2rem;*/
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 100px 16px;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--text-color);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Boutons communs */
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--accent-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
border: 2px solid var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
@ -0,0 +1,158 @@
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.project-card:hover .project-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.project-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.project-content h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.project-content p {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-tags span {
|
||||
background-color: var(--gray-light);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background-color: var(--bg-color);
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--gray-dark);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--primary-color);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
color: var(--gray-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.modal-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-tags span {
|
||||
background-color: var(--gray-light);
|
||||
color: var(--primary-color);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-link {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-link:hover {
|
||||
background-color: var(--accent-color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
@ -0,0 +1,87 @@
|
||||
.skills {
|
||||
/*background-color: var(--gray-light);*/
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.skill-card {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.skill-card h3 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-item img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.skill-item:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.skill-item span {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-dark);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.skill-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.skill-list-item:hover {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
.testimonials {
|
||||
background-color: var(--gray-light);
|
||||
}
|
||||
|
||||
.testimonials-slider {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 3rem auto 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
display: none;
|
||||
background-color: var(--bg-color);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.testimonial-card.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.testimonial-content p {
|
||||
font-size: 1.1rem;
|
||||
color: var(--gray-dark);
|
||||
font-style: italic;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.author-info h4 {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-color);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-dark);
|
||||
font-style: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.testimonial-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.testimonial-dots {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--gray-dark);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue