Skip to content

Commit 75ab7e4

Browse files
TorresjDevTorresjDev
authored
Merge pull request #11 from TorresjDev/fullstack-dev
Fullstack dev
2 parents f63b5c3 + 7308169 commit 75ab7e4

File tree

5 files changed

+83
-59
lines changed

5 files changed

+83
-59
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,11 @@ yarn-error.log*
3333
# vercel
3434
.vercel
3535

36-
# typescript
36+
# typescript - tsx / ts
3737
*.tsbuildinfo
3838
next-env.d.ts
39+
RPv1.tsx
40+
3d-pinv1.tsx
3941

4042
# Sentry Config File
4143
.env.sentry-build-plugin

‎app/globals.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,10 @@
8686
.black-gradient {
8787
background: linear-gradient(90deg, #161a31 0%, #06091f 100%);
8888
}
89-
}
89+
}
90+
91+
body, html {
92+
margin: 0;
93+
padding: 0;
94+
overflow-x: hidden;
95+
}

‎app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import { navItems } from "@/data";
1010

1111
export default function Home() {
1212
return (
13-
<main className="relative bg-black-100 flex justify-center items-center flex-col mx-auto sm:px-10 px-5">
14-
<div className="max-w-[75%] sm:max-w-[80%] w-full">
13+
<main className="relative bg-black-100 flex flex-col justify-center items-center mx-auto sm:px-10 px-5">
14+
<div className="max-w-[80%] sm:max-w-[90%] w-full">
1515
<FloatingNav navItems={navItems} />
1616
<Hero />
1717
<Grid />

‎components/RecentProjects.tsx‎

Lines changed: 70 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,90 @@
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";
5+
// import { FaLocationArrow } from "react-icons/fa6";
66

77
const RecentProjects = () => {
88
return (
99
<div className="py-20 w-full" id="projects">
10-
<h1 className="heading">
11-
A small selection of{" "}
12-
<span className="text-cyan-400">recent projects</span>
10+
<h1 className="heading text-center">
11+
Highlighting <span className="text-cyan-400">Recent Innovations</span>
1312
</h1>
14-
<div className="flex flex-wrap items-center justify-center p-4 gap-x-20 2.5xl:gap-y-8 !gap-y-40 mt-10">
15-
{projects.map(({ id, title, des, img, lngIconLts,toolsIconLts, link }) => (
16-
<div
17-
key={id}
18-
className="h-[24rem] sm:h-[25rem] lg:h-[27rem] xl:h-[36rem] flex items-center justify-center w-50vw sm:w-[45vw] lg:w-[39vw] xl:w-[28vw] w-[28vw] my-3 lg:my-4"
19-
>
20-
<PinContainer title={link} href={link}>
21-
<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">
22-
<div className="relative w-full h-full overflow-hidden lg:rounded-3xl bg-[#13162d]">
23-
<img src={`${assetUrl}/backgrounds/abstract/bg.png`} alt="bg-img" />
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+
>
17+
{projects.map(
18+
({ id, title, des, img, lngIconLts, toolsIconLts, link }) => (
19+
<div
20+
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 "
22+
>
23+
<PinContainer
24+
title={link}
25+
href={link}
26+
className="mx-auto w-full items-center justify-center"
27+
>
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]">
30+
<img
31+
src={`${assetUrl}/backgrounds/abstract/bg.png`}
32+
alt="bg-img"
33+
/>
34+
</div>
35+
<img
36+
src={img}
37+
alt={title}
38+
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]"
39+
/>
2440
</div>
25-
<img src={img} alt={title} className="z-10 absolute bottom-0 object-contain max-w-full max-h-full border border-white/[0.6]" />
26-
</div>
27-
<h1 className="font-bold lg:text-2xl md:text-xl text-base line-clamp-1 px-1">
28-
{title}
29-
</h1>
41+
<h1 className="font-bold lg:text-2xl md:text-xl text-base line-clamp-1 px-1">
42+
{title}
43+
</h1>
3044

31-
<p className="lg:text-xl lg:font-normal font-light text-sm line-clamp-2 px-1">
32-
{des}
33-
</p>
45+
<p className="lg:text-xl lg:font-normal font-light text-sm line-clamp-2 px-1">
46+
{des}
47+
</p>
3448

35-
<div className="flex items-center justify-between mt-7 mb-3 px-1">
36-
<div className="flex item-center">
37-
{lngIconLts.map((icon, index) => (
38-
<div
39-
key={icon}
40-
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"
41-
style={{
42-
zIndex: 10 - index,
43-
transform: `translateX(-${4.2 * index * 1.8}px)`,
44-
}}
45-
>
46-
<img src={icon} alt={icon} className="p-2" />
47-
</div>
48-
))}
49-
</div>
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>
5064

51-
<div className="flex justify-center items-center">
52-
{/* <FaLocationArrow className="me-2" color="#00a1a1" />
65+
<div className="flex justify-center items-center">
66+
{/* <FaLocationArrow className="me-2" color="#00a1a1" />
5367
<p className="flex lg:text-xl md:text-xs text-sm text-cyan-300">
5468
{" "}
5569
Visit live site
5670
</p> */}
57-
{toolsIconLts.map((icon, index) => (
58-
<div
59-
key={icon}
60-
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"
61-
style={{
62-
zIndex: 10 - index,
63-
transform: `translateX(-${4.2 * index * 1.8}px)`,
64-
}}
65-
>
66-
<img src={icon} alt={icon} className="p-2" />
67-
</div>
68-
))}
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+
))}
83+
</div>
6984
</div>
70-
</div>
71-
</PinContainer>
72-
</div>
73-
))}
85+
</PinContainer>
86+
</div>
87+
)
88+
)}
7489
</div>
7590
</div>
7691
);

‎tailwind.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const config = {
2222
center: true,
2323
padding: "2rem",
2424
screens: {
25+
midLg: "938px",
2526
"2xl": "1400px",
2627
"3xl": "1900px",
2728
},

0 commit comments

Comments
 (0)