From a60f881d552cb72bdd3155c9adc9e86ef815fe08 Mon Sep 17 00:00:00 2001 From: Laercio Rios Date: Tue, 27 Aug 2024 12:33:35 -0300 Subject: [PATCH] feat: add intro section in home --- .../icons/{mail-logo.svg => email-logo.svg} | 0 src/app/assets/logo.svg | 14 + .../components/ButtonCustom/styles.module.css | 1 + .../components/BuyMeACoffee/styles.module.css | 5 +- src/app/components/Header/styles.module.css | 2 +- .../components/Typography/styles.module.css | 54 +++- src/app/i18n/locales/en.json | 3 + src/app/i18n/locales/pt.json | 3 + src/app/page.module.css | 245 +++--------------- src/app/page.tsx | 35 +++ src/app/utils/contrants.ts | 2 + 11 files changed, 146 insertions(+), 218 deletions(-) rename src/app/assets/icons/{mail-logo.svg => email-logo.svg} (100%) create mode 100644 src/app/assets/logo.svg diff --git a/src/app/assets/icons/mail-logo.svg b/src/app/assets/icons/email-logo.svg similarity index 100% rename from src/app/assets/icons/mail-logo.svg rename to src/app/assets/icons/email-logo.svg diff --git a/src/app/assets/logo.svg b/src/app/assets/logo.svg new file mode 100644 index 0000000..7594dec --- /dev/null +++ b/src/app/assets/logo.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/src/app/components/ButtonCustom/styles.module.css b/src/app/components/ButtonCustom/styles.module.css index b299258..1f745c1 100644 --- a/src/app/components/ButtonCustom/styles.module.css +++ b/src/app/components/ButtonCustom/styles.module.css @@ -27,6 +27,7 @@ .global-button svg > path { fill: var(--primary); + transition: all 0.3s ease-in-out; } .global-button:hover svg > path { diff --git a/src/app/components/BuyMeACoffee/styles.module.css b/src/app/components/BuyMeACoffee/styles.module.css index c6fc716..ab0f67e 100644 --- a/src/app/components/BuyMeACoffee/styles.module.css +++ b/src/app/components/BuyMeACoffee/styles.module.css @@ -3,7 +3,8 @@ justify-content: center; align-items: center; gap: 0.25rem; - transition: color 0.2s ease-in-out; + transition: all 0.3s ease-in-out; + width: 100%; } .buy_me_a_coffee-wrapper:hover { @@ -26,5 +27,5 @@ .buy_me_a_coffee-wrapper svg path { fill: var(--primary); - transition: fill 0.2s ease-in-out; + transition: all 0.3s ease-in-out; } diff --git a/src/app/components/Header/styles.module.css b/src/app/components/Header/styles.module.css index b68a09a..3e31d89 100644 --- a/src/app/components/Header/styles.module.css +++ b/src/app/components/Header/styles.module.css @@ -3,6 +3,7 @@ justify-content: center; align-items: center; width: 100%; + background-color: var(--home); } .nav-wrapper { @@ -23,7 +24,6 @@ display: flex; justify-content: flex-start; align-items: center; - width: 100%; gap: 1rem; } diff --git a/src/app/components/Typography/styles.module.css b/src/app/components/Typography/styles.module.css index a52b557..98f77cf 100644 --- a/src/app/components/Typography/styles.module.css +++ b/src/app/components/Typography/styles.module.css @@ -1,53 +1,89 @@ .headline1 { - font-size: 3rem; + font-size: 2.5rem; font-weight: 700; line-height: 120%; + + @media (min-width: 768px) { + font-size: 3rem; + } } .headline2 { - font-size: 2.5rem; + font-size: 2rem; font-weight: 700; line-height: 120%; + + @media (min-width: 768px) { + font-size: 2.5rem; + } } .headline3 { - font-size: 2rem; + font-size: 1.75rem; font-weight: 700; line-height: 120%; + + @media (min-width: 768px) { + font-size: 2rem; + } } .headline4 { - font-size: 1.5rem; + font-size: 1.25rem; font-weight: 700; line-height: 120%; + + @media (min-width: 768px) { + font-size: 1.5rem; + } } .body1 { - font-size: 1rem; + font-size: 0.875rem; font-weight: 700; line-height: 120%; + + @media (min-width: 768px) { + font-size: 1rem; + } } .body2 { - font-size: 1rem; + font-size: 0.875rem; font-weight: 400; line-height: 120%; + + @media (min-width: 768px) { + font-size: 1rem; + } } .body3 { - font-size: 0.875rem; + font-size: 0.75rem; font-weight: 400; line-height: 120%; + + @media (min-width: 768px) { + font-size: 0.875rem; + } } .caption1 { - font-size: 0.75rem; + font-size: 0.5rem; font-weight: 700; line-height: 120%; + + @media (min-width: 768px) { + font-size: 0.75rem; + } } .caption2 { - font-size: 0.75rem; + font-size: 0.5rem; font-weight: 400; line-height: 120%; + + @media (min-width: 768px) { + font-size: 0.75rem; + } } diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json index d63f5c5..95e55a1 100644 --- a/src/app/i18n/locales/en.json +++ b/src/app/i18n/locales/en.json @@ -7,6 +7,9 @@ "label": "Portuguese" } }, + "profile": { + "role": "Software Engineer" + }, "components": { "buyMeACoffee": { "label": "Buy me a coffee" diff --git a/src/app/i18n/locales/pt.json b/src/app/i18n/locales/pt.json index 32680b8..9111373 100644 --- a/src/app/i18n/locales/pt.json +++ b/src/app/i18n/locales/pt.json @@ -7,6 +7,9 @@ "label": "Português" } }, + "profile": { + "role": "Desenvolvedor de Software" + }, "components": { "buyMeACoffee": { "label": "Buy me a coffee" diff --git a/src/app/page.module.css b/src/app/page.module.css index 5c4b1e6..70c78ef 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -1,230 +1,63 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} +.home-intro_section { + height: calc(100vh - 8rem); + background-color: var(--home); + padding: 1rem 2rem; -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); + @media (min-width: 768px) { + padding: 1.5rem 10rem; + } } -.description a { +.home-intro_section-wrapper { + height: 100%; + width: 100%; + max-width: 90rem; display: flex; justify-content: center; align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; + flex-direction: column; } -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; - text-wrap: balance; +.home-intro_section-logo { + filter: drop-shadow(var(--shadow)); } -.center { +.home-intro_section-title { + margin-top: 2rem; display: flex; justify-content: center; align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } + gap: 0; + flex-direction: column; + border-bottom: 0.125rem solid var(--primary); + width: 100%; + max-width: 37.5rem; } -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } +.home-intro_section-networks { + list-style-type: none; + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin-top: 1rem; } -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} +.home-intro_section-networks li svg { + width: 2rem; + height: 2rem; -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); + @media (min-width: 768px) { + width: 3rem; + height: 3rem; } } -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } +.home-intro_section-networks li svg path { + fill: var(--primary); + transition: all 0.3s ease-in-out; } -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } +.home-intro_section-networks li:hover svg path { + fill: var(--secondary); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 76970f8..e31d975 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,11 +2,46 @@ import styles from "./page.module.css"; import Header from "./components/Header"; import "./i18n"; +import Logo from "./assets/logo.svg"; +import Typography from "./components/Typography"; +import { useTranslation } from "react-i18next"; +import { GITHUB_LINK, EMAIL_LINK, LINKEDIN_LINK } from "./utils/contrants"; +import GithubIcon from "./assets/icons/github-logo.svg"; +import EmailIcon from "./assets/icons/email-logo.svg"; +import LinkedinIcon from "./assets/icons/linkedin-logo.svg"; export default function Home() { + const { t } = useTranslation(); + return (
+
+
+ +
+ Laercio Rios + {t("profile.role")} +
+ +
+
); } diff --git a/src/app/utils/contrants.ts b/src/app/utils/contrants.ts index 988a68f..fca37c3 100644 --- a/src/app/utils/contrants.ts +++ b/src/app/utils/contrants.ts @@ -4,3 +4,5 @@ export const BUY_ME_A_COFFEE_LINK = export const GITHUB_LINK = "https://github.com/LaercioSR/"; export const LINKEDIN_LINK = "https://www.linkedin.com/in/laerciorios/"; + +export const EMAIL_LINK = "mailto:contact@laerciorios.com";