From cad2f277bf82519630316436e974f04f32807bd5 Mon Sep 17 00:00:00 2001 From: apon Date: Tue, 25 Nov 2025 22:43:31 +0100 Subject: [PATCH] Premier commit de mon portfolio --- index.html | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 8 ++++ style.css | 64 +++++++++++++++++++++++++++++ 3 files changed, 189 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..ce9c791 --- /dev/null +++ b/index.html @@ -0,0 +1,117 @@ + + + + + +Portfolio Apon + + + + + + + + +
+
+

Bonjour, je suis Apon

+

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

+
+
+ +
+
+

À 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.

+
+
+
+
+ + +
+
+

Mes projets

+
+
+
+
+
Projet 1
+

Développement web pendant mon stage

+
+
+
+
+
+
+
Projet 2
+

Projet personnel pour apprendre à coder

+
+
+
+
+
+
+
Projet 3
+

Projet créatif combinant technologie et loisirs

+
+
+
+
+
+
+ +
+
+

Contact

+
+
+ +
+ +
Email
+

aponbarua14@gmail.com

+
+ +
+
+
+ +
Téléphone
+

+33 7 54 58 73 06

+
+
+
+ +
+ +
LinkedIn
+

Apon

+
+ +
+
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..73d9cef --- /dev/null +++ b/script.js @@ -0,0 +1,8 @@ +const links = document.querySelectorAll('a.nav-link, .navbar-brand'); +links.forEach(link => { + link.addEventListener('click', function(e){ + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + target.scrollIntoView({behavior:'smooth'}); + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..a8d0c25 --- /dev/null +++ b/style.css @@ -0,0 +1,64 @@ +body { + font-family: Arial, sans-serif; + scroll-behavior: smooth; + background-color: #f0f4f8; + color: #333; + margin: 0; +} + +h1, h2, h5 { font-weight: 700; } + +section { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 80px 20px; +} + +#hero { + background: linear-gradient(135deg, #e1f5fe, #b3e5fc); +} + +#about { + background: linear-gradient(135deg,#e8f5e9,#c8e6c9); + text-align: center; +} + +#projects { + background: linear-gradient(135deg,#fff3e0,#ffe0b2); +} + +#contact { + background: linear-gradient(135deg,#f3e5f5,#e1bee7); +} + +.hero-content span { + color: #0277bd; +} + +.project-card, .contact-card { + border-radius: 15px; + transition: transform 0.3s, box-shadow 0.3s; +} + +.project-card:hover, .contact-card:hover { + transform: scale(1.05); + box-shadow: 0 12px 25px rgba(0,0,0,0.15); +} + +.navbar-nav a { + transition: color 0.3s, transform 0.3s; +} + +.navbar-nav a:hover { + color: #01579b; + transform: scale(1.05); +} + +section p { + font-size: 1.1rem; + max-width: 800px; +}