diff --git a/public/email_qr_black.svg b/public/email_qr_black.svg new file mode 100644 index 0000000..91eedcf --- /dev/null +++ b/public/email_qr_black.svg @@ -0,0 +1,2602 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/github_logo.svg b/public/github_logo.svg new file mode 100644 index 0000000..25a4403 --- /dev/null +++ b/public/github_logo.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/linkedin_logo.svg b/public/linkedin_logo.svg new file mode 100644 index 0000000..1af642c --- /dev/null +++ b/public/linkedin_logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/theme_button.svg b/public/theme_button.svg new file mode 100644 index 0000000..92c0de4 --- /dev/null +++ b/public/theme_button.svg @@ -0,0 +1,16 @@ + + + + dark-mode + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/features/header-display/header-contact-links/header-contact-links.component.css b/src/app/features/header-display/header-contact-links/header-contact-links.component.css index e69de29..569d5af 100644 --- a/src/app/features/header-display/header-contact-links/header-contact-links.component.css +++ b/src/app/features/header-display/header-contact-links/header-contact-links.component.css @@ -0,0 +1,334 @@ +.svg-button-container { + position: relative; + cursor: pointer; + overflow: hidden; + transition: transform 0.2s ease; + -webkit-tap-highlight-color: transparent; + user-select: none; +} + +/* Add .svg-icon class to target just the SVGs */ +.svg-icon { + transition: filter 0.3s ease; +} + +/* Change SVG color on hover using filter */ +.svg-button-container:hover .svg-icon, +.svg-button-container:active .svg-icon { + /* This creates a light beige/sepia filter similar to nier-light */ + filter: invert(80%) sepia(12%) saturate(176%) hue-rotate(343deg) + brightness(106%) contrast(97%); +} + +/* Background fill effect */ +.svg-button-container::before { + content: ""; + position: absolute; + left: 0; + top: 3px; + bottom: 3px; + width: 0; + height: auto; + background-color: var(--color-nier-dark, rgba(30, 30, 30, 0.8)); + transition: width 0.2s ease; + z-index: 0; +} + +.svg-button-container:hover::before { + width: 100%; +} + +/* Glitch effect on hover */ +.svg-button-container::after { + content: attr(data-label); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-nier-text-light, rgba(230, 230, 230, 0.9)); + opacity: 0; + z-index: 2; + pointer-events: none; + font-size: 0.7rem; + text-transform: uppercase; + font-family: "Noto Sans JP", monospace; +} + +.svg-button-container:hover::after { + animation: nier-button-glitch 0.6s ease forwards; +} + +/* Scan line effect */ +.svg-button-container .scan-line { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 1px; + background-color: var(--color-nier-text-light, rgba(230, 230, 230, 0.9)); + opacity: 0; + z-index: 3; + pointer-events: none; +} + +.svg-button-container:hover .scan-line { + animation: nier-button-scan 0.3s ease forwards; +} + +/* The glitch effect animation */ +@keyframes nier-button-glitch { + 0%, + 100% { + opacity: 0; + transform: translateX(0); + clip-path: inset(0 0 0 0); + } + 10% { + opacity: 0.2; + transform: translateX(-2px); + clip-path: inset(10% 0 80% 0); + } + 12% { + opacity: 0; + transform: translateX(0); + } + 20% { + opacity: 0.2; + transform: translateX(2px); + clip-path: inset(30% 0 50% 0); + } + 22% { + opacity: 0; + transform: translateX(0); + } + 30% { + opacity: 0.1; + transform: translateX(-1px); + clip-path: inset(50% 0 20% 0); + } + 32% { + opacity: 0; + transform: translateX(0); + } +} + +/* The scan line animation */ +@keyframes nier-button-scan { + 0% { + opacity: 0.5; + left: -100%; + } + 100% { + opacity: 0; + left: 100%; + } +} + +/* Button click effect */ +.svg-button-container:active { + transform: scale(0.95); +} + +.svg-button-container:active::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(255, 255, 255, 0.1); + opacity: 0; + animation: nier-button-flash 0.2s ease; +} + +@keyframes nier-button-flash { + 0% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} + +/* Touch device optimization */ +@media (hover: none) { + .svg-button-container:active::before { + width: 100%; + } + + .svg-button-container:active .scan-line { + animation: nier-button-scan 0.3s ease forwards; + } +} + +.nier-link { + position: relative; + cursor: pointer; + color: var(--color-nier-dark, #333); + transition: color 0.2s ease; + overflow: hidden; + display: inline-block; + -webkit-tap-highlight-color: transparent; + text-decoration: none; + padding: 0 2px; + font-weight: 500; +} + +/* Underline effect */ +.nier-link::before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0; + height: 1px; + background-color: var(--color-nier-darker, #111); + transition: width 0.2s ease; + z-index: 0; +} + +.nier-link:hover, +.nier-link:focus { + color: var(--color-nier-darker, #111); + outline: none; + font-weight: 600; +} + +.nier-link:hover::before, +.nier-link:focus::before { + width: 100%; + height: 1px; +} + +/* Glitch effect on hover */ +.nier-link::after { + content: attr(data-label); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + color: var(--color-nier-darker, #111); + opacity: 0; + z-index: 2; + pointer-events: none; + font-weight: 600; +} + +.nier-link:hover::after { + animation: nier-link-glitch 0.6s ease forwards; +} + +/* Subtle scan line on hover */ +.nier-link .scan-line { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 1px; + background-color: var(--color-nier-darker, #111); + opacity: 0; + z-index: 3; + pointer-events: none; +} + +.nier-link:hover .scan-line { + animation: nier-link-scan 0.3s ease forwards; +} + +/* Glitch effect animation */ +@keyframes nier-link-glitch { + 0%, 100% { + opacity: 0; + transform: translateX(0); + clip-path: inset(0 0 0 0); + } + 10% { + opacity: 0.3; + transform: translateX(-1px); + clip-path: inset(10% 0 80% 0); + } + 12% { + opacity: 0; + transform: translateX(0); + } + 20% { + opacity: 0.3; + transform: translateX(1px); + clip-path: inset(30% 0 50% 0); + } + 22% { + opacity: 0; + transform: translateX(0); + } + 30% { + opacity: 0.2; + transform: translateX(-1px); + clip-path: inset(50% 0 20% 0); + } + 32% { + opacity: 0; + transform: translateX(0); + } +} + +/* Scan line animation */ +@keyframes nier-link-scan { + 0% { + opacity: 0.6; + left: -100%; + } + 100% { + opacity: 0; + left: 100%; + } +} + +/* Click effect */ +.nier-link:active { + transform: translateY(1px); + color: #111; +} + +.nier-link:active::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); + opacity: 0; + animation: nier-link-flash 0.2s ease; +} + +@keyframes nier-link-flash { + 0% { + opacity: 0.3; + } + 100% { + opacity: 0; + } +} + +/* Touch device optimization */ +@media (hover: none) { + .nier-link:active::before { + width: 100%; + } + + .nier-link:active { + color: var(--color-nier-darker, #111); + font-weight: 600; + } + + .nier-link:active .scan-line { + animation: nier-link-scan 0.3s ease forwards; + } +} diff --git a/src/app/features/header-display/header-contact-links/header-contact-links.component.html b/src/app/features/header-display/header-contact-links/header-contact-links.component.html index da5f4db..574f2b7 100644 --- a/src/app/features/header-display/header-contact-links/header-contact-links.component.html +++ b/src/app/features/header-display/header-contact-links/header-contact-links.component.html @@ -1 +1,47 @@ -

header-contact-links works!

+
+
+
+ +
+
+ GitHub Logo + +
+
+ + +
+
+ LinkedIn Logo + +
+
+ +
+
+ Theme Button + +
+
+ +
+
+

Operating from french tech-hideout

+
+
+

+ Tech operative ready > + + Deploy my skills + + +

+
+
+ +
+ + Email QR Code + +
+
diff --git a/src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.css b/src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.css similarity index 100% rename from src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.css rename to src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.css diff --git a/src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.html b/src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.html similarity index 100% rename from src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.html rename to src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.html diff --git a/src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.spec.ts b/src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.spec.ts similarity index 100% rename from src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.spec.ts rename to src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.spec.ts diff --git a/src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.ts b/src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.ts similarity index 100% rename from src/app/features/header-display/header-switch-theme-button/header-switch-theme-button.component.ts rename to src/app/features/header-display/header-contact-links/header-switch-theme-button/header-switch-theme-button.component.ts diff --git a/src/app/layout/components/header/header.component.html b/src/app/layout/components/header/header.component.html index c8cb426..f0d6fbe 100644 --- a/src/app/layout/components/header/header.component.html +++ b/src/app/layout/components/header/header.component.html @@ -1,36 +1,156 @@
+
- - - - +
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + +
+ + diff --git a/src/app/shared/ui/button/button.component.html b/src/app/shared/ui/button/button.component.html index 3208640..7bd3f66 100644 --- a/src/app/shared/ui/button/button.component.html +++ b/src/app/shared/ui/button/button.component.html @@ -1,5 +1,5 @@