Skip to content

Commit 36e1943

Browse files
FedeCodeLabFedeCodeLab
authored
Merge pull request #29 from FedeCodeLab/development
feat: Merge development → main: Actualizaciones y mejoras generales
2 parents edfe8bb + e2e4b1c commit 36e1943

21 files changed

Lines changed: 376 additions & 285 deletions

File tree

‎app/globals.css‎

Lines changed: 83 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
1-
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
2-
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
31
@import "tailwindcss";
2+
@custom-variant dark (&:where(.dark, .dark *));
43
@plugin "daisyui";
54

65
:root {
76
--background: #ffffff;
87
--foreground: #171717;
98
}
109

11-
li,
12-
button {
13-
transition: all 0.5s ease;
14-
}
15-
16-
body {
17-
color: var(--foreground);
18-
font-family: var(--font-inter);
19-
}
20-
2110
@theme {
2211
/* Colores */
2312
--color-destacado: #ff0000;
@@ -45,84 +34,97 @@ button {
4534
--color-foreground: var(--foreground);
4635
--font-sans: var(--font-geist-sans);
4736
--font-mono: var(--font-geist-mono);
37+
38+
/* sizing */
39+
40+
--x-half: 2.5px;
41+
--x: 5px;
42+
--x2: 10px;
43+
--x3: 15px;
44+
--x4: 20px;
45+
--x5: 25px;
46+
--x6: 30px;
47+
--x7: 35px;
48+
--x8: 40px;
49+
--x9: 45px;
50+
--x10: 50px;
51+
--x11: 55px;
52+
--x12: 60px;
53+
--x13: 65px;
54+
--x14: 70px;
55+
--x15: 75px;
56+
--x16: 80px;
57+
--x17: 85px;
58+
--x18: 90px;
59+
--x19: 95px;
60+
--x20: 100px;
61+
--x25: 125px;
62+
--x30: 150px;
63+
--x40: 200px;
64+
65+
/* scale */
66+
67+
--scale--2: 14px;
68+
--scale--1: 16px;
69+
--scale-0: 18px;
70+
--scale-1: 20px;
71+
--scale-2: 23px;
72+
--scale-3: 26px;
73+
--scale-4: 29px;
74+
--scale-5: 32px;
75+
--scale-6: 36px;
76+
--scale-7: 41px;
77+
--scale-8: 46px;
78+
--scale-9: 52px;
79+
--scale-10: 58px;
80+
--scale-11: 66px;
81+
--scale-12: 74px;
82+
--scale-13: 83px;
83+
--scale-14: 94px;
84+
--scale-15: 105px;
85+
86+
/* Tokens/Sizing */
87+
88+
--space-2xs: var(--x-half);
89+
--space-xs: var(--x);
90+
--space-s: var(--x3);
91+
--space-m: var(--x6);
92+
--space-b: var(--x10);
93+
--space-xb: var(--x15);
94+
--space-2xb: var(--x30);
95+
96+
--size-s: var(--x7);
97+
--size-m: var(--x10);
98+
--size-b: var(--x12);
99+
--size-xb: var(--x20);
100+
--size-2xb: var(--x30);
101+
102+
/* Peso */
103+
--weight-light: 300;
104+
--weight-regular: 400;
105+
--weight-medium: 500;
48106
}
49107

50108
@media (prefers-color-scheme: dark) {
51109
:root {
52110
--background: #0a0a0a;
53111
--foreground: #ededed;
54-
55-
/* sizing */
56-
57-
--x-half: 2.5px;
58-
--x: 5px;
59-
--x2: 10px;
60-
--x3: 15px;
61-
--x4: 20px;
62-
--x5: 25px;
63-
--x6: 30px;
64-
--x7: 35px;
65-
--x8: 40px;
66-
--x9: 45px;
67-
--x10: 50px;
68-
--x11: 55px;
69-
--x12: 60px;
70-
--x13: 65px;
71-
--x14: 70px;
72-
--x15: 75px;
73-
--x16: 80px;
74-
--x17: 85px;
75-
--x18: 90px;
76-
--x19: 95px;
77-
--x20: 100px;
78-
--x25: 125px;
79-
--x30: 150px;
80-
--x40: 200px;
81-
82-
/* scale */
83-
84-
--scale--2: 14px;
85-
--scale--1: 16px;
86-
--scale-0: 18px;
87-
--scale-1: 20px;
88-
--scale-2: 23px;
89-
--scale-3: 26px;
90-
--scale-4: 29px;
91-
--scale-5: 32px;
92-
--scale-6: 36px;
93-
--scale-7: 41px;
94-
--scale-8: 46px;
95-
--scale-9: 52px;
96-
--scale-10: 58px;
97-
--scale-11: 66px;
98-
--scale-12: 74px;
99-
--scale-13: 83px;
100-
--scale-14: 94px;
101-
--scale-15: 105px;
102-
103-
/* Tokens/Sizing */
104-
105-
--space-2xs: var(--x-half);
106-
--space-xs: var(--x);
107-
--space-s: var(--x3);
108-
--space-m: var(--x6);
109-
--space-b: var(--x10);
110-
--space-xb: var(--x15);
111-
--space-2xb: var(--x30);
112-
113-
--size-s: var(--x7);
114-
--size-m: var(--x10);
115-
--size-b: var(--x12);
116-
--size-xb: var(--x20);
117-
--size-2xb: var(--x30);
118-
119-
/* Peso */
120-
--weight-light: 300;
121-
--weight-regular: 400;
122-
--weight-medium: 500;
123112
}
124113
}
125114

115+
li,
116+
button {
117+
transition: all 0.3s ease;
118+
-webkit-transition: all 0.3s ease;
119+
-moz-transition: all 0.3s ease;
120+
-ms-transition: all 0.3s ease;
121+
-o-transition: all 0.3s ease;
122+
}
123+
124+
body {
125+
font-family: var(--font-inter);
126+
}
127+
126128
.heading-1 {
127129
font-weight: var(--weight-medium);
128130
font-size: var(--scale-14);

‎app/layout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { metadata as siteMetadata } from "@/lib/metadata";
2-
import { NavbarContainer } from "@/components/Navbar";
2+
import { Navbar } from "@/components/Navbar";
33
import { pixelify, inter } from "@/lib/fonts";
44
import { Footer } from "@/components/Footer";
55
import "./globals.css";
@@ -12,11 +12,11 @@ export default function RootLayout({
1212
children: React.ReactNode;
1313
}>) {
1414
return (
15-
<html lang="es">
15+
<html lang="es" className="dark">
1616
<body
17-
className={`${pixelify.variable} ${inter.variable} antialiased relative bg-[#061932]`}
17+
className={`${pixelify.variable} ${inter.variable} antialiased relative bg-white dark:bg-[#061932]`}
1818
>
19-
<NavbarContainer />
19+
<Navbar />
2020
{children}
2121
<Footer />
2222
</body>

‎components/Footer/_components/CTA.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ export const CTA = () => {
66
<div className="flex gap-4">
77
<Link href="https://github.com/FedeCodeLab" target="_blank">
88
<div className="bg-transparent bg-gradient-to-tr from-gray-800 to-purple-800 p-2 rounded-full hover:from-purple-800 hover:to-gray-800 transition-colors duration-600">
9-
<Github width={25} height={25} color="#ffffff" />
9+
<Github size={25} color="#ffffff" />
1010
</div>
1111
</Link>
1212

1313
<Link href="https://www.linkedin.com/in/federico-guzman/" target="_blank">
1414
<div className="bg-transparent bg-gradient-to-tr from-blue-900 to-blue-500 p-2 rounded-full hover:from-blue-500 hover:to-blue-900 transition-colors duration-600">
15-
<Linkedin width={25} height={25} color="#ffffff" />
15+
<Linkedin size={25} color="#ffffff" />
1616
</div>
1717
</Link>
1818

1919
<Link href="https://www.instagram.com/fede.fpg" target="_blank">
2020
<div className="bg-transparent bg-gradient-to-tr from-yellow-300 via-pink-600 to-purple-600 p-2 rounded-full hover:from-purple-600 hover:to-yellow-300 transition-colors duration-600">
21-
<Instagram width={25} height={25} color="#ffffff" />
21+
<Instagram size={25} color="#ffffff" />
2222
</div>
2323
</Link>
2424
</div>

‎components/Hero/_components/CTA.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { Linkedin, Shortcut, Github } from "../../ui/icons";
2-
import { LinkButton } from "../../ui/LinkButton";
1+
import { Linkedin, Shortcut, Github } from "@/components/ui/icons";
2+
import { LinkButton } from "@/components/ui/LinkButton";
33

44
export const CTA = () => {
55
return (
6-
<div className="flex flex-col md:flex-row gap-3">
6+
<div className="flex flex-col md:flex-row gap-3 text-slate-300">
77
<LinkButton href="https://github.com/FedeCodeLab">
8-
<Github width={20} height={20} color="#ffffff" />
8+
<Github size={20} color="#ffffff" />
99
<span className="transition-transform duration-300 group-hover:translate-x-1">
1010
Github
1111
</span>
1212
</LinkButton>
1313

1414
<LinkButton href="https://www.linkedin.com/in/federico-guzman/">
15-
<Linkedin width={20} height={20} color="#ffffff" />
15+
<Linkedin size={20} color="#ffffff" />
1616
<span className="transition-transform duration-300 group-hover:translate-x-1">
1717
Linkedin
1818
</span>
@@ -22,7 +22,7 @@ export const CTA = () => {
2222
href="mailto:federicoguzman.css@gmail.com"
2323
variant={"ghostGray"}
2424
>
25-
<Shortcut width={20} height={20} color="#ffffff" />
25+
<Shortcut size={20} color="#ffffff" />
2626
<span className="transition-transform duration-300 group-hover:translate-x-1">
2727
¡Hablemos!
2828
</span>

‎components/Navbar/ButtonCV.tsx‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎components/Navbar/CTA.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ToggleTheme } from "./ToggleTheme";
2+
import Link from "next/link";
3+
4+
export const CTA = () => {
5+
return (
6+
<div className="flex gap-4 items-center">
7+
<ToggleTheme />
8+
<Link
9+
href="/CV_GuzmanFederico_Frontend.pdf"
10+
className="font-pixelifySans flex justify-center items-center gap-2 whitespace-nowrap rounded-[50px] cursor-pointer font-[500] px-6 py-2 text-[14px] border-2 border-gray-400 hover:bg-[#1E293B] hover:border-[#1E293B] max-w-[130px] text-slate-300 hover:text-white transition duration-300 "
11+
target="_blank"
12+
download={true}
13+
>
14+
Descargar CV
15+
</Link>
16+
</div>
17+
);
18+
};

‎components/Navbar/CenterNav.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
"use client";
2+
3+
import { useRefsStore } from "@/store/useRefsStore";
4+
import { RefObject } from "react";
5+
6+
export const CenterNav = () => {
7+
const { experienceRef, portfolioRef, skillsRef, timelineRef } =
8+
useRefsStore();
9+
10+
const scrollToSection = (ref: RefObject<HTMLElement | null> | null) => {
11+
const element = ref?.current;
12+
if (element) {
13+
const offsetTop = element.offsetTop;
14+
const offset = 40;
15+
window.scrollTo({
16+
top: offsetTop - offset,
17+
behavior: "smooth",
18+
});
19+
}
20+
};
21+
22+
return (
23+
<nav>
24+
<ul className="flex gap-5 items-center text-[17px] font-[400]">
25+
<li>
26+
<button
27+
onClick={() => scrollToSection(skillsRef)}
28+
className="group cursor-pointer text-slate-300"
29+
>
30+
<span className="text-blue-400 group-hover:text-blue-200 transition-color duration-500">
31+
01.{" "}
32+
</span>
33+
<span className="group-hover:text-white">Habilidades</span>
34+
</button>
35+
</li>
36+
37+
<li>
38+
<button
39+
onClick={() => scrollToSection(experienceRef)}
40+
className="group cursor-pointer text-slate-300"
41+
>
42+
<span className="text-blue-400 group-hover:text-blue-200 transition-color duration-500">
43+
02.{" "}
44+
</span>
45+
<span className="group-hover:text-white">Experiencia</span>
46+
</button>
47+
</li>
48+
49+
<li>
50+
<button
51+
onClick={() => scrollToSection(portfolioRef)}
52+
className="group cursor-pointer text-slate-300"
53+
>
54+
<span className="text-blue-400 group-hover:text-blue-200 transition-color duration-500">
55+
03.{" "}
56+
</span>
57+
<span className="group-hover:text-white">Portfolio</span>
58+
</button>
59+
</li>
60+
61+
<li>
62+
<button
63+
onClick={() => scrollToSection(timelineRef)}
64+
className="group cursor-pointer text-slate-300"
65+
>
66+
<span className="text-blue-400 group-hover:text-blue-200 transition-color duration-500">
67+
04.{" "}
68+
</span>
69+
<span className="group-hover:text-white">Certificados</span>
70+
</button>
71+
</li>
72+
</ul>
73+
</nav>
74+
);
75+
};

0 commit comments

Comments
 (0)