Skip to content

Commit

Permalink
feat: add new sections in home
Browse files Browse the repository at this point in the history
LaercioSR committed Sep 3, 2024
1 parent 20c9577 commit 6f67ade
Showing 11 changed files with 198 additions and 5 deletions.
8 changes: 8 additions & 0 deletions src/app/components/BuyMeACoffee/styles.module.css
Original file line number Diff line number Diff line change
@@ -11,6 +11,14 @@
}
}

.buy_me_a_coffee-wrapper h4 {
display: none;

@media (min-width: 480px) {
display: block;
}
}

.buy_me_a_coffee-wrapper:hover {
color: var(--secondary);
}
25 changes: 25 additions & 0 deletions src/app/components/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,35 @@
import BuyMeACoffee from "../BuyMeACoffee";
import Typography from "../Typography";
import styles from "./styles.module.css";
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 Footer() {
return (
<footer className={styles.footer}>
<div className={styles["footer-wrapper"]}>
<ul>
<li>
<BuyMeACoffee />
</li>
<li>
<a href={EMAIL_LINK} target="_blank" rel="noreferrer">
<EmailIcon />
</a>
</li>
<li>
<a href={LINKEDIN_LINK} target="_blank" rel="noreferrer">
<LinkedinIcon />
</a>
</li>
<li>
<a href={GITHUB_LINK} target="_blank" rel="noreferrer">
<GithubIcon />
</a>
</li>
</ul>
<Typography variant="h3">Laercio Rios - 2024</Typography>
</div>
</footer>
26 changes: 26 additions & 0 deletions src/app/components/Footer/styles.module.css
Original file line number Diff line number Diff line change
@@ -16,3 +16,29 @@
max-width: 90rem;
padding: 1rem 2rem;
}
.footer-wrapper ul {
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}

.footer-wrapper li svg {
width: 2rem;
height: 2rem;

@media (min-width: 768px) {
width: 3rem;
height: 3rem;
}
}

.footer-wrapper li svg path {
fill: var(--primary);
transition: var(--transition);
}

.footer-wrapper li:hover svg path {
fill: var(--secondary);
}
21 changes: 21 additions & 0 deletions src/app/components/PresentationCard/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import styles from "./styles.module.css";

interface PresentationCardProps {
title: string;
link: string;
date: Date;
}

export default function PresentationCard({ link }: PresentationCardProps) {
return (
<div className={styles["presentation"]}>
<iframe
src={link}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
></iframe>
</div>
);
}
6 changes: 6 additions & 0 deletions src/app/components/PresentationCard/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.presentation iframe {
border: none;
width: 100%;
max-width: 30rem;
height: 16.875rem;
}
11 changes: 9 additions & 2 deletions src/app/components/ProjectCard/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
.project {
width: 100%;
width: 90%;
display: flex;
flex-direction: column;
gap: 0;
box-shadow: var(--shadow);
border-radius: 0.5rem;
}

.project:hover {
transform: scale(1.0125);
transition: var(--transition);
}

.project img {
width: 100%;
height: 100%;
height: auto;
object-fit: cover;
border-radius: 0.5rem 0.5rem 0 0;
}
13 changes: 13 additions & 0 deletions src/app/data/presentations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
interface Presentation {
title: string;
link: string;
date: Date;
}

export const presentations: Presentation[] = [
{
title: "masterChefEcomp",
link: "https://www.youtube.com/embed/cK7dz0PXVq8?si=g3fMHDqd73KFvOl7",
date: new Date("2024-03-20"),
},
];
20 changes: 19 additions & 1 deletion src/app/i18n/locales/en.json
Original file line number Diff line number Diff line change
@@ -35,8 +35,26 @@
"seeMore": {
"label": "See all projects"
}
},
"experience": {
"title": {
"label": "Experience"
},
"seeMore": {
"label": "See my full resume"
}
},
"formation": {
"title": {
"label": "Formation"
}
},
"presentations": {
"title": {
"label": "Presentations"
}
}
},
"projects": {}
}
}
}
20 changes: 19 additions & 1 deletion src/app/i18n/locales/pt.json
Original file line number Diff line number Diff line change
@@ -35,8 +35,26 @@
"seeMore": {
"label": "Veja todos os projetos"
}
},
"experience": {
"title": {
"label": "Experiência"
},
"seeMore": {
"label": "Veja meu currículo completo"
}
},
"formation": {
"title": {
"label": "Formação"
}
},
"presentations": {
"title": {
"label": "Apresentações"
}
}
},
"projects": {}
}
}
}
7 changes: 6 additions & 1 deletion src/app/page.module.css
Original file line number Diff line number Diff line change
@@ -49,7 +49,7 @@
}

.home-intro_section-logo {
filter: drop-shadow(var(--shadow));
filter: drop-shadow(4px 8px 32px rgba(0, 0, 0, 0.25));
}

.home-intro_section-title {
@@ -143,6 +143,7 @@
border: 0.25rem solid var(--primary);
grid-area: a;
justify-self: center;
box-shadow: var(--shadow);

@media (min-width: 768px) {
justify-self: start;
@@ -222,3 +223,7 @@
gap: 2rem;
}
}

.home-presentations-list {
list-style-type: none;
}
46 changes: 46 additions & 0 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -17,6 +17,8 @@ import { projects } from "./data/projects";
import ProjectCard from "./components/ProjectCard";
import Link from "next/link";
import ArrowRight from "./assets/icons/arrow-right-alt.svg";
import { presentations } from "./data/presentations";
import PresentationCard from "./components/PresentationCard";

export default function Home() {
const { t } = useTranslation();
@@ -95,6 +97,50 @@ export default function Home() {
</ul>
</div>
</section>
<section className={styles["home-section"]}>
<div className={styles["home-section-wrapper"]}>
<div className={styles["home-section-title"]}>
<Typography variant="h3">
{t("pages.home.experience.title.label")}
</Typography>
<Link href="/">
<Typography variant="body1">
{t("pages.home.experience.seeMore.label")}
</Typography>
<ArrowRight />
</Link>
</div>
</div>
</section>
<section className={styles["home-section"]}>
<div className={styles["home-section-wrapper"]}>
<div className={styles["home-section-title"]}>
<Typography variant="h3">
{t("pages.home.formation.title.label")}
</Typography>
</div>
</div>
</section>
<section className={styles["home-section"]}>
<div className={styles["home-section-wrapper"]}>
<div className={styles["home-section-title"]}>
<Typography variant="h3">
{t("pages.home.presentations.title.label")}
</Typography>
</div>
<ul className={styles["home-presentations-list"]}>
{presentations.map((presentation) => (
<li key={presentation.title}>
<PresentationCard
title={presentation.title}
link={presentation.link}
date={presentation.date}
/>
</li>
))}
</ul>
</div>
</section>
<Footer />
</main>
);

0 comments on commit 6f67ade

Please sign in to comment.