Skip to content

Commit 2dade46

Browse files
MartzcodeMartzcode
committed
- Split to components
1 parent 2374295 commit 2dade46

10 files changed

Lines changed: 325 additions & 208 deletions

‎index.html‎

Lines changed: 3 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -108,59 +108,10 @@
108108
<body class="font-sans antialiased bg-bg-main text-text-main transition-colors duration-400">
109109

110110
<!-- Navigation -->
111-
<nav
112-
class="fixed top-0 w-full py-6 z-[1000] bg-bg-main/85 backdrop-blur-md border-b border-border-color transition-all duration-300">
113-
<div class="container mx-auto px-8 flex justify-between items-center max-w-[1100px]">
114-
<div class="logo font-extrabold text-[1.3rem] flex items-center gap-2">
115-
<span class="w-6 h-6 bg-primary inline-block"
116-
style="mask: url('assets/icons/terminal-icon.svg') no-repeat center / contain; -webkit-mask: url('assets/icons/terminal-icon.svg') no-repeat center / contain;"
117-
aria-hidden="true"></span>
118-
<span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Martzcode</span>
119-
</div>
120-
121-
<ul class="nav-menu hidden md:flex gap-10 list-none transition-all duration-300" id="nav-menu">
122-
<li><a href="#skills"
123-
class="font-medium text-[0.95rem] hover:text-primary transition-colors">Compétences</a></li>
124-
<li><a href="#experience"
125-
class="font-medium text-[0.95rem] hover:text-primary transition-colors">Expériences</a></li>
126-
<li><a href="#education"
127-
class="font-medium text-[0.95rem] hover:text-primary transition-colors">Formation</a></li>
128-
<li><a href="#contact"
129-
class="font-medium text-[0.95rem] hover:text-primary transition-colors">Contact</a>
130-
</li>
131-
</ul>
132-
133-
<div class="flex items-center gap-4">
134-
<button
135-
class="w-10 h-10 rounded-full flex items-center justify-center transition-all bg-primary text-white dark:text-[#0f172a]"
136-
id="theme-toggle" aria-label="Basculer le mode">
137-
<i class="fas fa-moon"></i>
138-
</button>
139-
<button class="md:hidden text-2xl" id="hamburger" aria-label="Ouvrir le menu">
140-
<i class="fas fa-bars"></i>
141-
</button>
142-
</div>
143-
</div>
144-
</nav>
111+
<div data-component="navbar"></div>
145112

146113
<!-- Mobile Menu -->
147-
<div id="mobile-nav"
148-
class="fixed inset-0 bg-bg-main z-[1100] opacity-0 pointer-events-none transition-all duration-500 flex flex-col items-center justify-center gap-6 md:hidden">
149-
150-
<!-- Subtle background blur for the overlay -->
151-
<div class="absolute inset-0 backdrop-blur-xl"></div>
152-
153-
<div class="relative z-10 flex flex-col items-center gap-6 w-full px-8">
154-
<a href="#skills"
155-
class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Compétences</a>
156-
<a href="#experience"
157-
class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Expériences</a>
158-
<a href="#education"
159-
class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Formation</a>
160-
<a href="#contact"
161-
class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Contact</a>
162-
</div>
163-
</div>
114+
<div data-component="mobile-nav"></div>
164115

165116
<main id="scroll-container">
166117
<!-- Hero Section -->
@@ -474,19 +425,7 @@ <h2 class="text-4xl md:text-5xl font-extrabold mb-2">Discutons de votre projet</
474425
</section>
475426
</main>
476427

477-
<footer
478-
class="fixed bottom-0 w-full py-4 z-[1000] bg-bg-main/85 backdrop-blur-md border-t border-border-color transition-all duration-300">
479-
<div
480-
class="container mx-auto px-8 flex flex-col md:flex-row justify-between items-center max-w-[1100px] text-text-dim text-sm">
481-
<p>&copy; 2026 Marcello Samiandrisoa.</p>
482-
<div class="flex gap-6 mt-2 md:mt-0">
483-
<a href="https://github.com/martzcode" target="_blank" aria-label="GitHub"
484-
class="hover:text-primary transition-colors text-lg"><i class="fab fa-github"></i></a>
485-
<a href="https://linkedin.com/in/marcello-samiandrisoa" target="_blank" aria-label="LinkedIn"
486-
class="hover:text-primary transition-colors text-lg"><i class="fab fa-linkedin"></i></a>
487-
</div>
488-
</div>
489-
</footer>
428+
<div data-component="footer"></div>
490429

491430
<script src="script.js"></script>
492431
</body>

0 commit comments

Comments
 (0)