diff --git a/src/css/style.css b/src/css/style.css deleted file mode 100644 index 14d8d8d..0000000 --- a/src/css/style.css +++ /dev/null @@ -1,258 +0,0 @@ -/* =================================== - CSS STRUCTURE: - 1. Global Styles - 2. Layout Components - 3. UI Components - 4. Media Queries (Responsive) - =================================== */ - -/* =================================== - 1. GLOBAL STYLES - =================================== */ - -/* Reset and base styles */ -a { - text-decoration: none; -} - -/* Color Variables */ -:root { - --clr-navy: #070f2b; - --clr-gradient-mid: #3572ef; - --clr-gradient-end: #3abef9; - --clr-linkedin: #2856c7; - --clr-white: #ffffff; -} - -/* =================================== - 2. LAYOUT COMPONENTS - =================================== */ - -/* Background and animations */ -.gradient-bg { - background: linear-gradient( - 300deg, - var(--clr-navy), - var(--clr-gradient-mid), - var(--clr-gradient-end) - ); - background-size: 180% 180%; - animation: gradient-animation 10s ease infinite; -} - -@keyframes gradient-animation { - 0% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } - - 100% { - background-position: 0% 50%; - } -} - -/* Main section layout */ -#main { - min-height: 100vh; - display: flex; - align-items: center; -} - -/* Language Selector */ -.language-selector-wrapper { - position: absolute; - top: 10px; - right: 10px; - z-index: 1000; -} - -/* Custom Select Styles */ -.custom-select { - position: relative; - width: 110px; -} - -.custom-select-trigger { - padding: 8px 32px 8px 12px; - font-size: 13px; - font-weight: 600; - color: white; - background-color: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(10px); - border: 2px solid rgba(255, 255, 255, 0.3); - border-radius: 12px; - cursor: pointer; - transition: all 0.3s ease; - background-image: url("../assets/images/arrow-down.svg"); - background-repeat: no-repeat; - background-position: right 10px center; - background-size: 10px; - user-select: none; -} - -.custom-select-trigger:hover { - background-color: rgba(255, 255, 255, 0.25); - border-color: rgba(255, 255, 255, 0.5); - transform: translateY(-2px); -} - -.custom-select.open .custom-select-trigger { - background-color: rgba(255, 255, 255, 0.3); - border-color: white; - box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); -} - -.custom-options { - position: absolute; - top: calc(100% + 5px); - left: 0; - right: 0; - background-color: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(10px); - border: 2px solid rgba(255, 255, 255, 0.3); - border-radius: 12px; - overflow: hidden; - opacity: 0; - visibility: hidden; - transform: translateY(-10px); - transition: all 0.3s ease; -} - -.custom-select.open .custom-options { - opacity: 1; - visibility: visible; - transform: translateY(0); -} - -.custom-option { - padding: 8px 12px; - font-size: 13px; - font-weight: 600; - color: white; - cursor: pointer; - transition: all 0.2s ease; - user-select: none; -} - -.custom-option:hover { - background-color: rgba(255, 255, 255, 0.2); -} - -.custom-option.selected { - background-color: rgba(255, 255, 255, 0.25); -} - -/* =================================== - 3. UI COMPONENTS - =================================== */ - -/* Button icons */ -.btn-icon { - width: 18px; - height: 18px; - margin-right: 6px; - filter: brightness(0) invert(1); -} - -/* LinkedIn button */ -.btn-linkedin { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - background-color: var(--clr-linkedin); - color: var(--clr-white); - border: 2px solid var(--clr-linkedin); -} - -.btn-linkedin:hover { - background-color: var(--clr-navy); - color: var(--clr-white); -} - -.btn-linkedin:focus, -.btn-linkedin:active { - background-color: var(--clr-white); - color: var(--clr-navy); - box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.25); -} - -.btn-linkedin:focus .btn-icon, -.btn-linkedin:active .btn-icon { - filter: brightness(0) invert(0); -} - -/* GitHub button */ -.btn-github-outline { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - background-color: transparent; - color: var(--clr-white); - border: 2px solid var(--clr-white); -} - -.btn-github-outline:hover { - background-color: var(--clr-white); - color: var(--clr-navy); - border-color: var(--clr-white); -} - -.btn-github-outline:focus, -.btn-github-outline:active { - background-color: var(--clr-navy); - color: var(--clr-white); - border-color: var(--clr-navy); -} - -.btn-github-outline:hover .btn-icon { - filter: brightness(0) invert(0); -} - -.btn-github-outline:focus .btn-icon, -.btn-github-outline:active .btn-icon { - filter: brightness(0) invert(1); -} - -/* =================================== - 4. MEDIA QUERIES (RESPONSIVE) - =================================== */ - -/* Desktop and up (992px and above) */ -@media (min-width: 992px) { - .btn-linkedin, - .btn-github-outline { - width: auto; - min-width: 140px; - } - - .btn-icon { - width: 20px; - height: 20px; - margin-right: 8px; - } - .language-selector-wrapper { - top: 20px; - right: 20px; - } - - .custom-select { - width: 150px; - } - - .custom-select-trigger { - padding: 10px 40px 10px 16px; - font-size: 15px; - background-position: right 12px center; - background-size: 12px; - } - - .custom-option { - padding: 10px 16px; - font-size: 15px; - } -} diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 0000000..9ad2fc0 --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,291 @@ +/* ============================================================ + VARIABLES - CSS custom properties for responsive design + ============================================================ */ + +:root { + --clr-navy: #070f2b; + --clr-gradient-mid: #3572ef; + --clr-gradient-end: #3abef9; + --clr-linkedin: #2856c7; + --clr-white: #ffffff; + + /* Mobile-first responsive values */ + --lang-selector-top: 15px; + --lang-selector-right: 15px; + --lang-selector-width: 100px; + --lang-selector-padding: 6px 28px 6px 10px; + --lang-selector-font-size: 12px; + --lang-option-padding: 6px 10px; + --lang-arrow-size: 8px; + --lang-arrow-position: right 8px center; + --btn-icon-size: 18px; + --btn-icon-margin: 6px; + --container-padding: 60px 15px 1.5rem 15px; +} + +/* Desktop overrides */ +@media (min-width: 992px) { + :root { + --lang-selector-top: 20px; + --lang-selector-right: 20px; + --lang-selector-width: 150px; + --lang-selector-padding: 10px 40px 10px 16px; + --lang-selector-font-size: 15px; + --lang-option-padding: 10px 16px; + --lang-arrow-size: 12px; + --lang-arrow-position: right 12px center; + --btn-icon-size: 20px; + --btn-icon-margin: 8px; + --container-padding: 3rem 1.5rem; + } +} + +/* ============================================================ + BASE + ============================================================ */ + +a { + text-decoration: none; +} + +body { + overflow-x: hidden; + max-width: 100vw; +} + +/* ============================================================ + HERO SECTION + ============================================================ */ + +.hero { + background: linear-gradient( + 300deg, + var(--clr-navy), + var(--clr-gradient-mid), + var(--clr-gradient-end) + ); + background-size: 180% 180%; + animation: gradient-animation 10s ease infinite; + min-height: 100vh; + display: flex; + align-items: flex-start; + overflow-x: hidden; +} + +@keyframes gradient-animation { + 0%, + 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } +} + +@media (min-width: 992px) { + .hero { + align-items: center; + } +} + +.hero__container { + padding: var(--container-padding); +} + +.hero__profile-image { + display: block; + margin: 0 auto 1.5rem auto; + width: 100%; + max-width: 350px; + border-radius: 2%; +} + +@media (max-width: 576px) { + .hero__profile-image { + width: calc(100vw - 30px); + max-width: calc(100vw - 30px); + } +} + +.hero__title { + color: var(--clr-navy); +} + +.hero__text { + color: var(--clr-white); + white-space: nowrap; /* Keep text on single line */ +} + +@media (max-width: 576px) { + .hero__text { + font-size: 0.95rem; + } +} + +@media (max-width: 400px) { + .hero__text { + font-size: 0.85rem; + } +} + +/* ============================================================ + LANGUAGE SELECTOR (BEM naming: lang-selector) + ============================================================ */ + +.lang-selector { + position: absolute; + top: var(--lang-selector-top); + right: var(--lang-selector-right); + z-index: 1000; + width: var(--lang-selector-width); +} + +.lang-selector__trigger { + width: 100%; + padding: var(--lang-selector-padding); + font-size: var(--lang-selector-font-size); + font-weight: 600; + color: white; + background-color: rgba(255, 255, 255, 0.15); + background-image: url("../assets/images/arrow-down.svg"); + background-repeat: no-repeat; + background-position: var(--lang-arrow-position); + background-size: var(--lang-arrow-size); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + cursor: pointer; + user-select: none; + transition: all 0.3s ease; +} + +.lang-selector__trigger:hover { + background-color: rgba(255, 255, 255, 0.25); + border-color: rgba(255, 255, 255, 0.5); + transform: translateY(-2px); +} + +.lang-selector--open .lang-selector__trigger { + background-color: rgba(255, 255, 255, 0.3); + border-color: white; + box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); +} + +.lang-selector__dropdown { + position: absolute; + top: calc(100% + 5px); + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(10px); + border: 2px solid rgba(255, 255, 255, 0.3); + border-radius: 12px; + overflow: hidden; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.3s ease; +} + +.lang-selector--open .lang-selector__dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.lang-selector__option { + padding: var(--lang-option-padding); + font-size: var(--lang-selector-font-size); + font-weight: 600; + color: white; + cursor: pointer; + user-select: none; + transition: all 0.2s ease; +} + +.lang-selector__option:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +.lang-selector__option--selected { + background-color: rgba(255, 255, 255, 0.25); +} + +/* ============================================================ + BUTTONS (BEM naming: btn--linkedin, btn--github) + ============================================================ */ + +.btn__icon { + width: var(--btn-icon-size); + height: var(--btn-icon-size); + margin-right: var(--btn-icon-margin); + filter: brightness(0) invert(1); +} + +.btn--linkedin { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + background-color: var(--clr-linkedin); + color: var(--clr-white); + border: 2px solid var(--clr-linkedin); +} + +.btn--linkedin:hover { + background-color: var(--clr-navy); + color: var(--clr-white); +} + +.btn--linkedin:focus, +.btn--linkedin:active { + background-color: var(--clr-white); + color: var(--clr-navy); + box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.25); +} + +.btn--linkedin:focus .btn__icon, +.btn--linkedin:active .btn__icon { + filter: brightness(0) invert(0); +} + +.btn--github { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + background-color: transparent; + color: var(--clr-white); + border: 2px solid var(--clr-white); +} + +.btn--github:hover { + background-color: var(--clr-white); + color: var(--clr-navy); + border-color: var(--clr-white); +} + +.btn--github:focus, +.btn--github:active { + background-color: var(--clr-navy); + color: var(--clr-white); + border-color: var(--clr-navy); +} + +.btn--github:hover .btn__icon { + filter: brightness(0) invert(0); +} + +.btn--github:focus .btn__icon, +.btn--github:active .btn__icon { + filter: brightness(0) invert(1); +} + +/* Desktop button sizing */ +@media (min-width: 992px) { + .btn--linkedin, + .btn--github { + width: auto; + min-width: 140px; + } +} diff --git a/src/index.html b/src/index.html index e0dc549..a0903c4 100644 --- a/src/index.html +++ b/src/index.html @@ -34,45 +34,40 @@ integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous" /> - + -
-
-
-
-
- English -
-
-
English
-
Español
-
Français
-
Português
-
+
+
+
+
+ English +
+
+
English
+
Español
+
Français
+
Português
-
+
Fernando Tona picture
-

- Fernando Tona -

-

+

Fernando Tona

+

Software Developer | .NET/C# | Azure

-

+

Problem-Solver with a Musician's Discipline

@@ -81,11 +76,11 @@

target="_blank" rel="noopener noreferrer" > - @@ -95,11 +90,11 @@

target="_blank" rel="noopener noreferrer" > - diff --git a/src/js/custom-select.js b/src/js/custom-select.js index 4efab1f..ac90d86 100644 --- a/src/js/custom-select.js +++ b/src/js/custom-select.js @@ -1,5 +1,5 @@ document.addEventListener("DOMContentLoaded", () => { - const customSelect = document.querySelector(".custom-select"); + const langSelector = document.querySelector(".lang-selector"); const trigger = document.getElementById("languageTrigger"); const options = document.getElementById("languageOptions"); const selectedLanguageSpan = document.getElementById("selectedLanguage"); @@ -13,25 +13,25 @@ document.addEventListener("DOMContentLoaded", () => { trigger.addEventListener("click", (e) => { e.stopPropagation(); - customSelect.classList.toggle("open"); + langSelector.classList.toggle("lang-selector--open"); }); document.addEventListener("click", () => { - customSelect.classList.remove("open"); + langSelector.classList.remove("lang-selector--open"); }); options.addEventListener("click", async (e) => { - if (e.target.classList.contains("custom-option")) { + if (e.target.classList.contains("lang-selector__option")) { const selectedValue = e.target.getAttribute("data-value"); - document.querySelectorAll(".custom-option").forEach((opt) => { - opt.classList.remove("selected"); + document.querySelectorAll(".lang-selector__option").forEach((opt) => { + opt.classList.remove("lang-selector__option--selected"); }); - e.target.classList.add("selected"); + e.target.classList.add("lang-selector__option--selected"); selectedLanguageSpan.textContent = languageNames[selectedValue]; - customSelect.classList.remove("open"); + langSelector.classList.remove("lang-selector--open"); await setLanguage(selectedValue); } @@ -40,6 +40,6 @@ document.addEventListener("DOMContentLoaded", () => { const currentLang = getCurrentLanguage(); selectedLanguageSpan.textContent = languageNames[currentLang]; document - .querySelector(`.custom-option[data-value="${currentLang}"]`) - ?.classList.add("selected"); + .querySelector(`.lang-selector__option[data-value="${currentLang}"]`) + ?.classList.add("lang-selector__option--selected"); }); diff --git a/src/js/custom-select.test.js b/src/js/custom-select.test.js index 6e63be3..4735de5 100644 --- a/src/js/custom-select.test.js +++ b/src/js/custom-select.test.js @@ -6,24 +6,24 @@ global.setLanguage = jest.fn().mockResolvedValue(undefined); global.getCurrentLanguage = jest.fn().mockReturnValue("en"); describe("Custom Select Component", () => { - let customSelect, trigger, selectedLanguageSpan; + let langSelector, trigger, selectedLanguageSpan; beforeEach(() => { document.body.innerHTML = ` -
-
+
+
English
-
-
English
-
Español
-
Français
-
Português
+
+
English
+
Español
+
Français
+
Português
`; - customSelect = document.querySelector(".custom-select"); + langSelector = document.querySelector(".lang-selector"); trigger = document.getElementById("languageTrigger"); selectedLanguageSpan = document.getElementById("selectedLanguage"); @@ -41,31 +41,31 @@ describe("Custom Select Component", () => { expect(getCurrentLanguage).toHaveBeenCalled(); expect(selectedLanguageSpan.textContent).toBe("English"); - const selectedOption = document.querySelector(".custom-option.selected"); + const selectedOption = document.querySelector(".lang-selector__option--selected"); expect(selectedOption.getAttribute("data-value")).toBe("en"); }); test("should toggle dropdown when trigger is clicked", () => { - expect(customSelect.classList.contains("open")).toBe(false); + expect(langSelector.classList.contains("lang-selector--open")).toBe(false); trigger.click(); - expect(customSelect.classList.contains("open")).toBe(true); + expect(langSelector.classList.contains("lang-selector--open")).toBe(true); trigger.click(); - expect(customSelect.classList.contains("open")).toBe(false); + expect(langSelector.classList.contains("lang-selector--open")).toBe(false); }); test("should close dropdown when clicking outside", () => { trigger.click(); - expect(customSelect.classList.contains("open")).toBe(true); + expect(langSelector.classList.contains("lang-selector--open")).toBe(true); document.body.click(); - expect(customSelect.classList.contains("open")).toBe(false); + expect(langSelector.classList.contains("lang-selector--open")).toBe(false); }); test("should change language and update UI when option is selected", async () => { - const spanishOption = document.querySelector('.custom-option[data-value="es"]'); - const englishOption = document.querySelector('.custom-option[data-value="en"]'); + const spanishOption = document.querySelector('.lang-selector__option[data-value="es"]'); + const englishOption = document.querySelector('.lang-selector__option[data-value="en"]'); trigger.click(); await spanishOption.click(); @@ -73,8 +73,8 @@ describe("Custom Select Component", () => { expect(setLanguage).toHaveBeenCalledWith("es"); expect(selectedLanguageSpan.textContent).toBe("Español"); - expect(spanishOption.classList.contains("selected")).toBe(true); - expect(englishOption.classList.contains("selected")).toBe(false); - expect(customSelect.classList.contains("open")).toBe(false); + expect(spanishOption.classList.contains("lang-selector__option--selected")).toBe(true); + expect(englishOption.classList.contains("lang-selector__option--selected")).toBe(false); + expect(langSelector.classList.contains("lang-selector--open")).toBe(false); }); });