Skip to content

Commit 2e0fc46

Browse files
TorresjDevTorresjDev
authored
Merge pull request #14 from TorresjDev/fullstack-dev
Fullstack dev
2 parents 245dec7 + 323e884 commit 2e0fc46

File tree

6 files changed

+111
-138
lines changed

6 files changed

+111
-138
lines changed

‎components/Footer.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { useState } from "react";
44
import MagicButton from "./ui/MagicButton";
55
import animationData from "@/data/confetti.json";
66
import { assetUrl, socialMedia } from "@/data";
7-
import { IoDownload } from "react-icons/io5";
7+
import { MdDownload, MdDownloadDone } from "react-icons/md";
88
import Lottie from "react-lottie";
99

1010
const Footer = () => {
@@ -17,7 +17,7 @@ const Footer = () => {
1717
return (
1818
<footer className="w-full text-white py-16 px-8 relative">
1919
<div className="container mx-auto flex flex-col gap-12">
20-
<div className="absolute inset-0 z-0">
20+
<div className="absolute inset-0 z-0 ">
2121
<img
2222
src={`${assetUrl}/backgrounds/ui/footer-grid.svg`}
2323
alt="grid"
@@ -37,31 +37,33 @@ const Footer = () => {
3737
</p>
3838
</div>
3939
<div className="flex flex-col items-center md:w-1/2">
40+
<span
41+
className={`absolute bottom-[16rem] right-[27rem] z-40 w-44 h-44`}
42+
>
43+
<Lottie
44+
options={{
45+
loop: downloaded,
46+
autoplay: downloaded,
47+
animationData: animationData,
48+
rendererSettings: {
49+
preserveAspectRatio: "xMidYMid slice",
50+
},
51+
}}
52+
/>
53+
</span>
4054
<a
4155
href="/Jesus_Torres_Resume.pdf"
4256
download="Jesus_Torres_Resume.pdf"
4357
className=" pt-3"
4458
>
4559
<MagicButton
4660
title={downloaded ? "Downloaded!" : "Download Resume"}
47-
icon={<IoDownload />}
61+
icon={downloaded ? <MdDownloadDone /> : <MdDownload />}
4862
position="left"
4963
handleClick={handleDownload}
5064
otherClasses=" hover:text-cyan-400 "
5165
/>
5266
</a>
53-
<div className="w-24 h-24">
54-
<Lottie
55-
options={{
56-
loop: downloaded,
57-
autoplay: downloaded,
58-
animationData: animationData,
59-
rendererSettings: {
60-
preserveAspectRatio: "xMidYMid slice",
61-
},
62-
}}
63-
/>
64-
</div>
6567
</div>
6668
</div>
6769

‎components/Hero.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,23 @@ const Hero = () => {
2525

2626
<div className="flex justify-center relative my-20 z-10">
2727
<div className="max-w-[89vw] md:max-w-2xl lg:max-w-[60vw] flex flex-col items-center justify-center">
28-
<h2 className="uppercase tracking-widest text-xs text-center text-blue-100 max-w-90">
28+
<h1 className="uppercase tracking-widest text-lg text-center text-yellow-500 max-w-90 pb-1">
2929
Software Developer
30+
</h1>
31+
<h2 className="uppercase tracking-widest text-sm text-center text-blue-100 max-w-90 pt-1">
32+
Jesus Torres
3033
</h2>
3134
<TextGenerateEffect
3235
className="text-center text-[40px] md:text-5xl ld:text-6xl"
33-
words="Transforming creative visions into functional solutions through code"
34-
highlightWords={["visions", "functional", "code"]}
36+
words="Creating innovative solutions using computer information technologies"
37+
highlightWords={[
38+
"solutions",
39+
"computer",
40+
"information",
41+
"technology",
42+
]}
3543
/>
3644

37-
<p className="text-center mb-4 text-sm md:tracking-wider md:text-lg lg:text-2xl ">
38-
Hi, I&apos;m Jesus Torres, a passionate full-stack developer in
39-
Texas, USA.
40-
<br /> My expertise spans modern technologies and frameworks to
41-
build fast, responsive, and accessible digital experiences that
42-
blend functionality with stunning user interfaces.
43-
</p>
4445
<a href="#projects">
4546
<MagicButton
4647
title="Show my work"

‎components/RecentProjects.tsx‎

Lines changed: 40 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,27 @@
22
import { assetUrl, projects } from "@/data";
33
import React from "react";
44
import { PinContainer } from "./ui/3d-pin";
5-
// import { FaLocationArrow } from "react-icons/fa6";
65

76
const RecentProjects = () => {
87
return (
98
<div className="py-20 w-full" id="projects">
109
<h1 className="heading text-center">
1110
Highlighting Recent <span className="text-cyan-400">Innovations</span>
1211
</h1>
13-
<div
14-
className="flex flex-wrap items-center justify-evenly p-4 mt-10 gap-x-10 gap-y-20 xl:gap-y-10 2xl:gap-y-6
15-
"
16-
>
12+
<div className="flex flex-wrap items-center justify-center p-4 mt-10 gap-x-10 lg:gap-x-16 gap-y-20 xl:gap-y-10 2xl:gap-y-6">
1713
{projects.map(
1814
({ id, title, des, img, lngIconLts, toolsIconLts, link }) => (
1915
<div
2016
key={id}
21-
className="h-[28rem] sm:h-[25rem] lg:h-[27rem] xl:h-[36rem] flex items-center justify-center w-full max-w-[40vw] xl:max-w-[30vw]: my-4 sm:my-14 "
17+
className="h-[39rem] sm:h-[36rem] lg:h-[38rem] xl:h-[39rem] flex items-center justify-center w-full max-w-[40vw] xl:max-w-[38vw] my-4 sm:my-14"
2218
>
2319
<PinContainer
2420
title={link}
2521
href={link}
2622
className="mx-auto w-full items-center justify-center"
2723
>
28-
<div className="relative flex items-center justify-center sm:w-[27rem] xl:w-[28vw] w-[80vw] overflow-hidden h-[30vh] sm:h-[33vh] my-12">
29-
<div className="relative w-auto h-full overflow-hidden lg:rounded-3xl items-center justify-between bg-[#13162d]">
24+
<div className="relative flex items-center justify-center sm:w-[30rem] xl:w-[33vw] w-[80vw] overflow-hidden h-[30vh] sm:h-[33vh] my-12">
25+
<div className="relative w-auto h-full overflow-hidden lg:rounded-3xl items-center justify-between bg-[#13162d]">
3026
<img
3127
src={`${assetUrl}/backgrounds/abstract/bg.png`}
3228
alt="bg-img"
@@ -38,48 +34,42 @@ const RecentProjects = () => {
3834
className="z-10 absolute bottom-0 object-contain max-w-full w-auto max-h-full items-center justify-between border border-white/[0.6]"
3935
/>
4036
</div>
41-
<h1 className="font-bold text-cyan-400 lg:text-2xl md:text-xl text-base line-clamp-1 px-1">
42-
{title}
43-
</h1>
44-
45-
<p className="lg:text-xl lg:font-normal font-light text-sm line-clamp-2 px-1">
46-
{des}
47-
</p>
48-
49-
<div className="flex items-center justify-between mt-7 mb-3 px-1">
50-
<div className="flex item-center">
51-
{lngIconLts.map((icon, index) => (
52-
<div
53-
key={icon}
54-
className="border border-white/[2.0] rounded-full bg-black lg:w-10 lg:h-10 w-8 h-8 flex items-center justify-center"
55-
style={{
56-
zIndex: 10 - index,
57-
transform: `translateX(-${4.2 * index * 1.8}px)`,
58-
}}
59-
>
60-
<img src={icon} alt={icon} className="p-2" />
61-
</div>
62-
))}
63-
</div>
64-
65-
<div className="flex justify-center items-center">
66-
{/* <FaLocationArrow className="me-2" color="#00a1a1" />
67-
<p className="flex lg:text-xl md:text-xs text-sm text-cyan-300">
68-
{" "}
69-
Visit live site
70-
</p> */}
71-
{toolsIconLts.map((icon, index) => (
72-
<div
73-
key={icon}
74-
className="border border-white/[2.0] rounded-full bg-black lg:w-10 lg:h-10 w-8 h-8 flex items-center justify-center"
75-
style={{
76-
zIndex: 10 - index,
77-
transform: `translateX(-${4.2 * index * 1.8}px)`,
78-
}}
79-
>
80-
<img src={icon} alt={icon} className="p-2" />
81-
</div>
82-
))}
37+
<div className="w-full px-4">
38+
<h1 className="font-bold text-cyan-400 lg:text-2xl md:text-xl text-base line-clamp-1">
39+
{title}
40+
</h1>
41+
<p className="lg:text-xl lg:font-normal font-light text-sm line-clamp-2">
42+
{des}
43+
</p>
44+
<div className="flex items-center justify-between mt-7 mb-3">
45+
<div className="flex items-center ">
46+
{lngIconLts.map((icon, index) => (
47+
<div
48+
key={icon}
49+
className="border border-white/[2.0] rounded-full bg-black lg:w-10 lg:h-10 w-8 h-8 flex items-center justify-center"
50+
style={{
51+
zIndex: 13 - index,
52+
transform: `translateX(-${7.2 * index}px)`,
53+
}}
54+
>
55+
<img src={icon} alt={icon} className="p-2" />
56+
</div>
57+
))}
58+
</div>
59+
<div className="flex justify-center items-center">
60+
{toolsIconLts.map((icon, index) => (
61+
<div
62+
key={icon}
63+
className="border border-white/[2.0] rounded-full bg-black lg:w-10 lg:h-10 w-8 h-8 flex items-center justify-center"
64+
style={{
65+
zIndex: 13 - index,
66+
transform: `translateX(-${7.2 * index}px)`,
67+
}}
68+
>
69+
<img src={icon} alt={icon} className="p-2" />
70+
</div>
71+
))}
72+
</div>
8373
</div>
8474
</div>
8575
</PinContainer>

‎components/ui/BentoGrid.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ import { GlobeDemo } from "./GridGlobe";
88
import { useState } from "react";
99
import Lottie from "react-lottie";
1010
import MagicButton from "./MagicButton";
11-
import { LuCopyCheck } from "react-icons/lu";
12-
import { IoCopyOutline } from "react-icons/io5";
11+
import { MdDownload, MdDownloadDone } from "react-icons/md";
1312

1413
const BackgroundGradientAnimation = dynamic(
1514
() => import("./GradientBg").then((mod) => mod.BackgroundGradientAnimation),
@@ -54,15 +53,15 @@ export const BentoGridItem = ({
5453
spareImg?: string;
5554
id: number;
5655
}) => {
57-
const [copied, setCopied] = useState(false);
56+
const [downloaded, setDownload] = useState(false);
5857

5958
const handleCopy = () => {
6059
if (typeof navigator !== "undefined" && navigator.clipboard) {
6160
navigator.clipboard.writeText("[email protected]");
62-
setCopied(true);
61+
setDownload(true);
6362
} else {
6463
console.log("Clipboard not supported");
65-
setCopied(false);
64+
setDownload(false);
6665
}
6766
};
6867
return (
@@ -128,27 +127,32 @@ export const BentoGridItem = ({
128127
{id === 2 && <GlobeDemo />}
129128

130129
{id === 4 && (
131-
<div className="mt-5 relative">
132-
<div className={`absolute -bottom-5 right-0`}>
130+
<div className="mt-5 relative -b">
131+
<div className={`absolute -bottom-16 right-0 z-40`}>
133132
<Lottie
134133
options={{
135-
loop: copied,
136-
autoplay: copied,
134+
loop: downloaded,
135+
autoplay: downloaded,
137136
animationData: animationData,
138137
rendererSettings: {
139138
preserveAspectRatio: "xMidYMid slice",
140139
},
141140
}}
142141
/>
143142
</div>
144-
145-
<MagicButton
146-
title={copied ? "Email copied" : "Copy my email"}
147-
icon={copied ? <LuCopyCheck /> : <IoCopyOutline />}
148-
position="left"
149-
otherClasses="!bg-[#161a31"
150-
handleClick={handleCopy}
151-
/>
143+
<a
144+
href="/Jesus_Torres_Resume.pdf"
145+
download="Jesus_Torres_Resume.pdf"
146+
className=" pt-3"
147+
>
148+
<MagicButton
149+
title={downloaded ? "Resume Downloaded" : "Download Resume"}
150+
icon={downloaded ? <MdDownloadDone /> : <MdDownload />}
151+
position="left"
152+
otherClasses="!bg-[#161a31"
153+
handleClick={handleCopy}
154+
/>{" "}
155+
</a>
152156
</div>
153157
)}
154158
</div>

‎components/ui/GradientBg.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ export const BackgroundGradientAnimation = ({
4343
useEffect(() => {
4444
setIsClient(true);
4545

46-
47-
if (typeof window !== "undefined" && typeof document !== "undefined") {
46+
if (typeof document !== null) {
4847
document.body.style.setProperty(
4948
"--gradient-background-start",
5049
gradientBackgroundStart

0 commit comments

Comments
 (0)