johanleroy/Portfolio_angular
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set animation

Browse Source
This commit is contained in:
JLEROY
2025-04-24 14:06:54 +02:00
parent 4244d96601
commit 1c21c8539f
26 changed files with 614 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/app/public/public-layout/public-layout.component.html
View File

@@ -1,26 +1,50 @@
<div class="min-h-screen bg-[#FFFAFF]">
<header class="bg-[#181818] text-[#FFFAFF] shadow-lg fixed w-full z-10">
<div class="min-h-screen bg-primary-white text-primary-white dark:bg-primary-dark dark:text-primary-white transition-colors duration-300">
<header class="bg-primary-light dark:bg-primary-blue shadow-lg fixed w-full z-100">
<div class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<!-- Logo / Nom -->
<div class="text-xl font-bold">
<a routerLink="/" class="flex items-center">
<span class="text-[#3E92CC]">Johan</span>
<span class="text-primary-dark dark:text-primary-light">Johan</span>
<span class="ml-1">Leroy</span>
</a>
</div>
<!-- Navigation -->
<nav class="hidden md:flex space-x-8">
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
<nav class="hidden md:flex items-center space-x-8">
<a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
<!-- Dark Mode Toggle Button pour Desktop -->
<button (click)="toggleDarkMode()" class="focus:outline-none p-1 rounded-full hover:bg-gray-700 transition-colors">
<!-- Icône soleil (visible en mode sombre) -->
<svg *ngIf="isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Icône lune (visible en mode clair) -->
<svg *ngIf="!isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</nav>
<!-- Menu mobile -->
<div class="md:hidden">
<button (click)="toggleMobileMenu()" class="text-[#FFFAFF] focus:outline-none">
<div class="flex items-center md:hidden">
<!-- Dark Mode Toggle Button pour Mobile -->
<button (click)="toggleDarkMode()" class="mr-4 focus:outline-none p-1 rounded-full hover:bg-gray-700 transition-colors">
<!-- Icône soleil (visible en mode sombre) -->
<svg *ngIf="isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Icône lune (visible en mode clair) -->
<svg *ngIf="!isDarkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<!-- Menu mobile -->
<button (click)="toggleMobileMenu()" class="text-primary-white focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
@@ -31,10 +55,10 @@
<!-- Menu mobile déroulant -->
<div *ngIf="mobileMenuOpen" class="md:hidden mt-4 pb-4">
<div class="flex flex-col space-y-3">
<a routerLink="/" class="hover:text-[#3E92CC] transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-[#3E92CC] transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-[#3E92CC] transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-[#3E92CC] transition-colors">Mes projets</a>
<a routerLink="/" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Accueil</a>
<a routerLink="/formations" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes formations</a>
<a routerLink="/experience" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mon expérience professionnelle</a>
<a routerLink="/projets" class="hover:text-primary-dark dark:hover:text-primary-light transition-colors">Mes projets</a>
</div>
</div>
</div>

29
src/app/public/public-layout/public-layout.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router';
import {NgIf} from '@angular/common';
@@ -12,12 +12,37 @@ import {NgIf} from '@angular/common';
templateUrl: './public-layout.component.html',
styleUrl: './public-layout.component.css'
})
export class PublicLayoutComponent {
export class PublicLayoutComponent implements OnInit {
mobileMenuOpen = false;
isDarkMode = false;
toggleMobileMenu() {
this.mobileMenuOpen = !this.mobileMenuOpen;
}
ngOnInit() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (savedTheme === null && prefersDark)) {
this.isDarkMode = true;
document.documentElement.classList.add('dark');
} else {
this.isDarkMode = false;
document.documentElement.classList.remove('dark');
}
}
toggleDarkMode() {
this.isDarkMode = !this.isDarkMode;
if (this.isDarkMode) {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}
}