diff --git a/index.html b/index.html index ce9c791..fa7dbff 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,16 @@ Portfolio Apon +
+
+
+
+
+
+
-

Bonjour, je suis Apon

-

Étudiant en BTS CIEL • Passionné par le numérique et les loisirs créatifs

+

Bonjour, je suis

+

Étudiant en BTS CIEL • Passionné par le numérique

+
+ Me contacter + Mes projets +
-

À propos

+

À propos

-
+

Je m'appelle Apon, j'ai 21 ans. Étudiant en BTS CIEL après un bac général. Passionné par le badminton, les films et séries. J'aime créer et apprendre de nouvelles compétences numériques.

+
+
+
+
+ +
+
Formation
+

BTS CIEL (Cybersécurité, Informatique et réseaux, Electronique)

+
+
+ 2023-2025 + BTS CIEL +
+
+ 2022 + Bac Général +
+
+
+
+
+
+
+ +
+
Passion
+

Développement web, programmation et nouvelles technologies

+
+ Coding + Design + Innovation +
+
+
+
+
+
+ +
+
Loisirs
+

Badminton, cinéma et séries

+
+ Badminton + Cinéma + Séries +
+
+
+
+
+
+

Mes Compétences

+
+
+
+
+
+

Développement Web

+
+
+ HTML/CSS + Intermédiaire +
+
+
+
+
+
+
+ JavaScript + Bases +
+
+
+
+
+
+
+ Bootstrap + Intermédiaire +
+
+
+
+
+
+
+ +
+
+

Informatique

+
+
+ Suite Office + Avancé +
+
+
+
+
+
+
+ Montage PC + Intermédiaire +
+
+
+
+
+
+
+ Résolution de problèmes + Intermédiaire +
+
+
+
+
+
+
+ +
+
+

Soft Skills

+
+
+ Travail d'équipe + Avancé +
+
+
+
+
+
+
+ Communication + Intermédiaire +
+
+
+
+
+
+
+ Organisation + Intermédiaire +
+
+
+
+
+
+
+ +
+
+

Langues

+
+
+ Français + Courant +
+
+
+
+
+
+
+ Anglais + Intermédiaire +
+
+
+
+
+
+
+
+
+
+
+
-

Mes projets

+

Mes Projets

-
+
-
Projet 1
-

Développement web pendant mon stage

+
+ +
+
CMS Simplifié
+

Système de gestion de contenu développé en PHP/MySQL avec zone d'administration et CRUD complet.

+
+ PHP + MySQL + HTML/CSS +
+ Voir le projet
-
+
-
Projet 2
-

Projet personnel pour apprendre à coder

+
+ +
+
Site Web Lycée
+

Création d'un site web pour le lycée avec interface moderne et responsive.

+
+ HTML/CSS + JavaScript + Responsive +
+
-
+
-
Projet 3
-

Projet créatif combinant technologie et loisirs

+
+ +
+
Site avec Mini-Jeux
+

Développement d'un site web avec 4 mini-jeux intégrés pour pratiquer mes compétences.

+
+ JavaScript + HTML/CSS + Animation CSS +
+
@@ -80,38 +303,99 @@
-

Contact

+

Contact

-
+
- +
+ +
Email

aponbarua14@gmail.com
-
+
- +
+ +
Téléphone

+33 7 54 58 73 06

-
+
- +
+ +
LinkedIn
-

Apon

+

Apon Barua
+
+ +
+
+ +
+
GitHub
+

Mes projets

+
+ +
+
+ +
+
+
+
+

Envoyez-moi un message

+
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+
+
+
+
+
+

© 2024 Apon Portfolio. Tous droits réservés.

+
+
+
+
+
+
+ + + + - + \ No newline at end of file diff --git a/script.js b/script.js index 73d9cef..984bca8 100644 --- a/script.js +++ b/script.js @@ -1,8 +1,248 @@ +AOS.init({ + duration: 1000, + once: true, + offset: 100 +}); + +window.addEventListener('load', function() { + const loadingScreen = document.getElementById('loading'); + setTimeout(() => { + loadingScreen.style.opacity = '0'; + loadingScreen.style.visibility = 'hidden'; + document.body.style.overflow = 'auto'; + }, 1000); +}); + const links = document.querySelectorAll('a.nav-link, .navbar-brand'); links.forEach(link => { - link.addEventListener('click', function(e){ + link.addEventListener('click', function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); - target.scrollIntoView({behavior:'smooth'}); + if (target) { + target.scrollIntoView({ behavior: 'smooth' }); + const navbarToggler = document.querySelector('.navbar-toggler'); + const navbarCollapse = document.querySelector('.navbar-collapse'); + if (navbarCollapse.classList.contains('show')) { + navbarToggler.click(); + } + } }); }); + +window.addEventListener('scroll', function() { + const navbar = document.querySelector('.navbar'); + const backToTop = document.getElementById('backToTop'); + + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + + if (window.scrollY > 300) { + backToTop.classList.add('show'); + } else { + backToTop.classList.remove('show'); + } +}); + +document.getElementById('backToTop').addEventListener('click', function() { + window.scrollTo({ top: 0, behavior: 'smooth' }); +}); + +function typeWriter(element, text, speed = 100) { + let i = 0; + element.innerHTML = ''; + + function type() { + if (i < text.length) { + element.innerHTML += text.charAt(i); + i++; + setTimeout(type, speed); + } else { + setTimeout(() => { + deleteText(element, text, speed); + }, 2000); + } + } + + function deleteText(el, txt, spd) { + let j = txt.length; + + function del() { + if (j > 0) { + el.innerHTML = txt.substring(0, j - 1); + j--; + setTimeout(del, spd / 2); + } else { + setTimeout(() => { + typeWriter(element, texts[(textIndex + 1) % texts.length]); + }, 500); + } + } + + del(); + } + + type(); +} + +const texts = ["Apon", "APON", "Passionné"]; +let textIndex = 0; + +document.addEventListener('DOMContentLoaded', function() { + const typingElement = document.querySelector('.typing-text'); + if (typingElement) { + typeWriter(typingElement, texts[0]); + } + + const skillBars = document.querySelectorAll('.progress-bar'); + const skillObserver = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + const bar = entry.target; + const width = bar.style.width; + bar.style.width = '0'; + + setTimeout(() => { + bar.style.width = width; + bar.style.transition = 'width 1.5s ease-in-out'; + }, 300); + + skillObserver.unobserve(bar); + } + }); + }, { threshold: 0.5 }); + + skillBars.forEach(bar => { + skillObserver.observe(bar); + }); + + const projectCards = document.querySelectorAll('.project-card'); + projectCards.forEach(card => { + card.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-15px) scale(1.02)'; + }); + + card.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0) scale(1)'; + }); + }); + + const contactForm = document.getElementById('contactForm'); + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + const inputs = this.querySelectorAll('input, textarea'); + let isValid = true; + + inputs.forEach(input => { + if (!input.value.trim()) { + isValid = false; + input.style.borderColor = 'red'; + } else { + input.style.borderColor = '#e0e0e0'; + } + }); + + if (isValid) { + alert('Message envoyé avec succès !'); + this.reset(); + } else { + alert('Veuillez remplir tous les champs.'); + } + }); + } + + const buttons = document.querySelectorAll('.btn-custom, .btn-outline-custom, .btn-project'); + buttons.forEach(button => { + button.addEventListener('click', function(e) { + const ripple = document.createElement('span'); + const rect = this.getBoundingClientRect(); + const size = Math.max(rect.width, rect.height); + const x = e.clientX - rect.left - size / 2; + const y = e.clientY - rect.top - size / 2; + + ripple.style.width = ripple.style.height = size + 'px'; + ripple.style.left = x + 'px'; + ripple.style.top = y + 'px'; + ripple.classList.add('ripple'); + + this.appendChild(ripple); + + setTimeout(() => { + ripple.remove(); + }, 600); + }); + }); + + const yearElement = document.querySelector('footer p'); + if (yearElement) { + const currentYear = new Date().getFullYear(); + yearElement.innerHTML = `© ${currentYear} Apon Portfolio. Tous droits réservés.`; + } + + window.addEventListener('scroll', function() { + const scrolled = window.pageYOffset; + const hero = document.getElementById('hero'); + if (hero) { + hero.style.backgroundPositionY = -(scrolled * 0.5) + 'px'; + } + }); + + const style = document.createElement('style'); + style.textContent = ` + .ripple { + position: absolute; + border-radius: 50%; + background: rgba(255, 255, 255, 0.6); + transform: scale(0); + animation: ripple-animation 0.6s linear; + } + + @keyframes ripple-animation { + to { + transform: scale(4); + opacity: 0; + } + } + + .btn-custom, .btn-outline-custom, .btn-project { + position: relative; + overflow: hidden; + } + `; + document.head.appendChild(style); +}); + +document.addEventListener('DOMContentLoaded', function() { + const skillItems = document.querySelectorAll('.skill-item'); + + skillItems.forEach(item => { + item.addEventListener('mouseenter', function() { + this.style.transform = 'scale(1.05)'; + this.style.transition = 'transform 0.3s ease'; + }); + + item.addEventListener('mouseleave', function() { + this.style.transform = 'scale(1)'; + }); + }); +}); + +function createParticles() { + const hero = document.getElementById('hero'); + if (!hero) return; + + for (let i = 0; i < 20; i++) { + const particle = document.createElement('div'); + particle.classList.add('particle'); + particle.style.left = Math.random() * 100 + 'vw'; + particle.style.animationDuration = (Math.random() * 10 + 10) + 's'; + particle.style.animationDelay = Math.random() * 5 + 's'; + hero.appendChild(particle); + } +} + +window.addEventListener('load', createParticles); \ No newline at end of file diff --git a/style.css b/style.css index a8d0c25..17c5b56 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,106 @@ -body { - font-family: Arial, sans-serif; - scroll-behavior: smooth; - background-color: #f0f4f8; - color: #333; - margin: 0; +:root { + --primary-color: #0277bd; + --secondary-color: #01579b; + --accent-color: #ff6f00; + --light-blue: #e1f5fe; + --light-green: #e8f5e9; + --light-orange: #fff3e0; + --light-purple: #f3e5f5; + --light-cyan: #e0f7fa; + --dark-color: #333; + --light-color: #f8f9fa; } -h1, h2, h5 { font-weight: 700; } +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + scroll-behavior: smooth; + background-color: var(--light-color); + color: var(--dark-color); + overflow-x: hidden; +} + +.loading-screen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + z-index: 9999; + color: white; +} + +.loading-screen p { + margin-top: 20px; + font-size: 1.2rem; +} + +.spinner { + width: 50px; + height: 50px; + border: 5px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top-color: white; + animation: spin 1s ease-in-out infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.navbar { + transition: all 0.3s ease; + padding: 15px 0; +} + +.navbar.scrolled { + background-color: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(10px); + padding: 10px 0; + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); +} + +.navbar-brand { + font-size: 1.5rem; + color: var(--primary-color) !important; +} + +.navbar-nav a { + transition: color 0.3s, transform 0.3s; + position: relative; + font-weight: 500; + margin: 0 10px; +} + +.navbar-nav a::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background-color: var(--primary-color); + transition: width 0.3s ease; +} + +.navbar-nav a:hover { + color: var(--secondary-color) !important; + transform: translateY(-2px); +} + +.navbar-nav a:hover::after { + width: 100%; +} section { min-height: 100vh; @@ -15,50 +109,519 @@ section { justify-content: center; align-items: center; text-align: center; - padding: 80px 20px; + padding: 100px 20px; + position: relative; } #hero { - background: linear-gradient(135deg, #e1f5fe, #b3e5fc); + background: linear-gradient(135deg, var(--light-blue), #b3e5fc); + position: relative; + overflow: hidden; } -#about { - background: linear-gradient(135deg,#e8f5e9,#c8e6c9); - text-align: center; +#hero::before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url('data:image/svg+xml;utf8,'); + background-size: cover; + background-position: bottom; + animation: wave 20s linear infinite; } -#projects { - background: linear-gradient(135deg,#fff3e0,#ffe0b2); +@keyframes wave { + 0% { background-position-x: 0; } + 100% { background-position-x: 1440px; } } -#contact { - background: linear-gradient(135deg,#f3e5f5,#e1bee7); +.hero-content { + position: relative; + z-index: 1; +} + +.hero-content h1 { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 1.5rem; } .hero-content span { - color: #0277bd; + color: var(--primary-color); + position: relative; + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } -.project-card, .contact-card { +.typing-text::after { + content: "|"; + animation: blink 1s infinite; +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +.lead { + font-size: 1.3rem; + max-width: 600px; + margin: 0 auto; +} + +.floating-elements { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.floating-element { + position: absolute; + font-size: 2rem; + color: rgba(2, 119, 189, 0.2); + animation: float 6s ease-in-out infinite; +} + +.floating-element.el-1 { + top: 20%; + left: 10%; + animation-delay: 0s; +} + +.floating-element.el-2 { + top: 60%; + left: 80%; + animation-delay: 1s; +} + +.floating-element.el-3 { + top: 80%; + left: 20%; + animation-delay: 2s; +} + +.floating-element.el-4 { + top: 40%; + left: 85%; + animation-delay: 3s; +} + +@keyframes float { + 0%, 100% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(10deg); } +} + +.scroll-indicator { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + color: var(--primary-color); + font-size: 0.9rem; + animation: bounce 2s infinite; +} + +.arrow { + width: 2px; + height: 20px; + background-color: var(--primary-color); + margin-top: 5px; + position: relative; +} + +.arrow::after { + content: ""; + position: absolute; + bottom: -5px; + left: -3px; + width: 8px; + height: 8px; + border-right: 2px solid var(--primary-color); + border-bottom: 2px solid var(--primary-color); + transform: rotate(45deg); +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } + 40% { transform: translateY(-10px) translateX(-50%); } + 60% { transform: translateY(-5px) translateX(-50%); } +} + +.btn-custom { + background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); + color: white; + border: none; + padding: 12px 30px; + border-radius: 30px; + transition: all 0.3s; + text-decoration: none; + display: inline-block; + font-weight: 600; + box-shadow: 0 4px 15px rgba(2, 119, 189, 0.3); + position: relative; + overflow: hidden; +} + +.btn-custom::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s; +} + +.btn-custom:hover::before { + left: 100%; +} + +.btn-custom:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(2, 119, 189, 0.4); + color: white; +} + +.btn-outline-custom { + border: 2px solid var(--primary-color); + color: var(--primary-color); + background: transparent; + padding: 10px 28px; + border-radius: 30px; + transition: all 0.3s; + text-decoration: none; + display: inline-block; + font-weight: 600; +} + +.btn-outline-custom:hover { + background: var(--primary-color); + color: white; + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(2, 119, 189, 0.3); +} + +.section-title { + position: relative; + margin-bottom: 3rem; + font-size: 2.5rem; + font-weight: 700; +} + +.section-title::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + border-radius: 2px; +} + +#about { + background: linear-gradient(135deg, var(--light-green), #c8e6c9); +} + +.about-item { + padding: 30px 20px; + transition: all 0.3s ease; border-radius: 15px; - transition: transform 0.3s, box-shadow 0.3s; + height: 100%; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(10px); } -.project-card:hover, .contact-card:hover { - transform: scale(1.05); - box-shadow: 0 12px 25px rgba(0,0,0,0.15); +.about-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); + background: white; } -.navbar-nav a { - transition: color 0.3s, transform 0.3s; +.icon-wrapper { + margin-bottom: 20px; } -.navbar-nav a:hover { - color: #01579b; - transform: scale(1.05); +.timeline { + margin-top: 20px; + text-align: left; } -section p { - font-size: 1.1rem; - max-width: 800px; +.timeline-item { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #eee; } + +.year { + font-weight: bold; + color: var(--primary-color); +} + +.hobbies { + margin-top: 15px; +} + +.hobby-tag { + display: inline-block; + background: var(--light-blue); + color: var(--primary-color); + padding: 5px 10px; + border-radius: 20px; + margin: 5px; + font-size: 0.8rem; + font-weight: 600; +} + +#skills { + background: linear-gradient(135deg, var(--light-cyan), #b2ebf2); +} + +.skill-category { + margin-bottom: 2rem; + padding: 25px; + border-radius: 15px; + background: rgba(255, 255, 255, 0.7); + backdrop-filter: blur(10px); + transition: all 0.3s ease; +} + +.skill-category:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + background: white; +} + +.skill-item { + margin-bottom: 1.5rem; +} + +.skill-name { + display: flex; + justify-content: space-between; + margin-bottom: 0.5rem; + font-size: 0.9rem; +} + +.progress { + height: 10px; + border-radius: 5px; + background-color: #e9ecef; + overflow: hidden; +} + +.progress-bar { + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + border-radius: 5px; + transition: width 1.5s ease-in-out; +} + +.skill-level { + font-weight: 600; + font-size: 0.8rem; + color: var(--primary-color); +} + +#projects { + background: linear-gradient(135deg, var(--light-orange), #ffe0b2); +} + +.project-card { + border-radius: 15px; + transition: all 0.3s ease; + border: none; + overflow: hidden; + height: 100%; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); +} + +.project-card:hover { + transform: translateY(-15px) scale(1.02); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + background: white; +} + +.project-icon { + width: 80px; + height: 80px; + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 20px; + color: white; + font-size: 2rem; +} + +.project-tags { + margin-top: 15px; +} + +.badge { + margin-right: 5px; + margin-bottom: 5px; + font-size: 0.7rem; + padding: 5px 10px; + border-radius: 15px; +} + +.btn-project { + background: transparent; + border: 2px solid var(--primary-color); + color: var(--primary-color); + padding: 1px 20px; + border-radius: 20px; + transition: all 0.3s; + font-weight: 600; +} + +.btn-project:hover { + background: var(--primary-color); + color: white; + transform: translateY(-2px); +} + +#contact { + background: linear-gradient(135deg, var(--light-purple), #e1bee7); +} + +.contact-card { + border-radius: 15px; + transition: all 0.3s ease; + border: none; + height: 100%; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); +} + +.contact-card:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); + background: white; +} + +.contact-icon { + width: 60px; + height: 60px; + background: rgba(2, 119, 189, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 15px; +} + +.contact-form-card { + border-radius: 15px; + border: none; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(10px); +} + +.form-control { + border-radius: 10px; + border: 1px solid #e0e0e0; + padding: 12px 15px; + transition: all 0.3s; +} + +.form-control:focus { + border-color: var(--primary-color); + box-shadow: 0 0 0 0.2rem rgba(2, 119, 189, 0.25); +} + +footer { + background: linear-gradient(135deg, #2c3e50, #34495e) !important; +} + +.social-links a { + display: inline-block; + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + text-align: center; + line-height: 40px; + color: white; + margin-left: 10px; + transition: all 0.3s; +} + +.social-links a:hover { + background: var(--primary-color); + transform: translateY(-3px); +} + +.back-to-top { + position: fixed; + bottom: 30px; + right: 30px; + width: 50px; + height: 50px; + background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); + color: white; + border: none; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + cursor: pointer; + opacity: 0; + visibility: hidden; + transition: all 0.3s; + z-index: 1000; + box-shadow: 0 4px 15px rgba(2, 119, 189, 0.3); +} + +.back-to-top.show { + opacity: 1; + visibility: visible; +} + +.back-to-top:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(2, 119, 189, 0.4); +} + +@media (max-width: 768px) { + section { + padding: 80px 15px; + min-height: auto; + } + + .hero-content h1 { + font-size: 2.5rem; + } + + .section-title { + font-size: 2rem; + } + + .floating-elements { + display: none; + } + + .back-to-top { + bottom: 20px; + right: 20px; + width: 45px; + height: 45px; + } +} \ No newline at end of file