Skip to content

Commit e26851c

Browse files
Porx312Porx312
committed
'xd'
1 parent 2561389 commit e26851c

File tree

6 files changed

+140
-89
lines changed

6 files changed

+140
-89
lines changed

‎app/projects/page.tsx‎

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,71 @@
1+
'use client'
2+
3+
import { useState } from 'react'
4+
import { motion } from 'framer-motion'
15
import projectsData from '@/data/projectsData'
26
import Card from '@/components/Card'
3-
import { genPageMetadata } from 'app/seo'
4-
5-
export const metadata = genPageMetadata({ title: 'Projects' })
67

78
export default function Projects() {
9+
const [selectedCategory, setSelectedCategory] = useState('Todos')
10+
11+
const categories = ['Todos', ...new Set(projectsData.map((project) => project.category))]
12+
13+
const filteredProjects =
14+
selectedCategory === 'Todos'
15+
? projectsData
16+
: projectsData.filter((project) => project.category === selectedCategory)
17+
818
return (
9-
<>
10-
<div className="divide-y divide-gray-200 dark:divide-gray-700">
11-
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
12-
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
13-
Projects
14-
</h1>
15-
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
16-
Showcase your projects with a hero image (16 x 9)
17-
</p>
18-
</div>
19-
<div className="container py-12">
20-
<div className="-m-4 flex flex-wrap">
21-
{projectsData.map((d) => (
22-
<Card
23-
key={d.title}
24-
title={d.title}
25-
description={d.description}
26-
imgSrc={d.imgSrc}
27-
href={d.href}
28-
/>
29-
))}
30-
</div>
19+
<div className="min-h-screen ">
20+
<div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
21+
<motion.h1
22+
className="mb-8 text-center text-4xl font-extrabold text-gray-900 dark:text-white md:text-5xl"
23+
initial={{ opacity: 0, y: -20 }}
24+
animate={{ opacity: 1, y: 0 }}
25+
transition={{ duration: 0.5 }}
26+
>
27+
Mis Proyectos
28+
</motion.h1>
29+
<motion.p
30+
className="mb-12 text-center text-xl text-gray-600 dark:text-gray-300"
31+
initial={{ opacity: 0 }}
32+
animate={{ opacity: 1 }}
33+
transition={{ duration: 0.5, delay: 0.2 }}
34+
>
35+
Explora mis últimos trabajos y proyectos creativos
36+
</motion.p>
37+
<div className="mb-8 flex justify-center space-x-4">
38+
{categories.map((category) => (
39+
<button
40+
key={category}
41+
onClick={() => setSelectedCategory(category)}
42+
className={`rounded-full px-4 py-2 text-sm font-medium transition-colors duration-300 ${
43+
selectedCategory === category
44+
? 'bg-blue-500 text-white'
45+
: 'bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600'
46+
}`}
47+
>
48+
{category}
49+
</button>
50+
))}
3151
</div>
52+
<motion.div
53+
className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
54+
initial={{ opacity: 0 }}
55+
animate={{ opacity: 1 }}
56+
transition={{ duration: 0.5, delay: 0.4 }}
57+
>
58+
{filteredProjects.map((project) => (
59+
<Card
60+
key={project.title}
61+
title={project.title}
62+
description={project.description}
63+
imgSrc={project.imgSrc || ''}
64+
href={project.href || ''}
65+
/>
66+
))}
67+
</motion.div>
3268
</div>
33-
</>
69+
</div>
3470
)
3571
}

‎components/Card.tsx‎

Lines changed: 45 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,50 @@
1-
import Image from './Image'
2-
import Link from './Link'
1+
'use client'
32

4-
const Card = ({ title, description, imgSrc, href }) => (
5-
<div className="md max-w-[544px] p-4 md:w-1/2">
6-
<div
7-
className={`${
8-
imgSrc && 'h-full'
9-
} overflow-hidden rounded-md border-2 border-gray-200 border-opacity-60 dark:border-gray-700`}
3+
import { useState } from 'react'
4+
import Image from 'next/image'
5+
import Link from 'next/link'
6+
import { motion } from 'framer-motion'
7+
8+
interface CardProps {
9+
title: string
10+
description: string
11+
imgSrc: string
12+
href: string
13+
}
14+
15+
const Card = ({ title, description, imgSrc, href }: CardProps) => {
16+
const [isHovered, setIsHovered] = useState(false)
17+
18+
return (
19+
<motion.div
20+
className="relative overflow-hidden rounded-lg shadow-lg"
21+
initial={{ opacity: 0, y: 20 }}
22+
animate={{ opacity: 1, y: 0 }}
23+
transition={{ duration: 0.5 }}
24+
onHoverStart={() => setIsHovered(true)}
25+
onHoverEnd={() => setIsHovered(false)}
1026
>
11-
{imgSrc &&
12-
(href ? (
13-
<Link href={href} aria-label={`Link to ${title}`}>
14-
<Image
15-
alt={title}
16-
src={imgSrc}
17-
className="object-cover object-center md:h-36 lg:h-48"
18-
width={544}
19-
height={306}
20-
/>
21-
</Link>
22-
) : (
23-
<Image
24-
alt={title}
25-
src={imgSrc}
26-
className="object-cover object-center md:h-36 lg:h-48"
27-
width={544}
28-
height={306}
29-
/>
30-
))}
31-
<div className="p-6">
32-
<h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
33-
{href ? (
34-
<Link href={href} aria-label={`Link to ${title}`}>
35-
{title}
36-
</Link>
37-
) : (
38-
title
39-
)}
40-
</h2>
41-
<p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">{description}</p>
42-
{href && (
43-
<Link
44-
href={href}
45-
className="text-base font-medium leading-6 text-red-500 hover:text-red-600 dark:hover:text-red-400"
46-
aria-label={`Link to ${title}`}
47-
>
48-
Learn more &rarr;
49-
</Link>
50-
)}
27+
<Image
28+
alt={title}
29+
src={imgSrc || '/placeholder.svg'}
30+
width={1000}
31+
height={563}
32+
className="h-64 w-full object-cover transition-transform duration-300 ease-in-out"
33+
style={{ transform: isHovered ? 'scale(1.05)' : 'scale(1)' }}
34+
/>
35+
<div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70" />
36+
<div className="absolute bottom-0 left-0 right-0 p-6 text-white">
37+
<h2 className="mb-2 text-2xl font-bold">{title}</h2>
38+
<p className="mb-4 text-sm opacity-90">{description}</p>
39+
<Link
40+
href={href}
41+
className="inline-block rounded-full bg-white px-4 py-2 text-sm font-semibold text-black transition-colors duration-300 hover:bg-gray-200"
42+
>
43+
Ver Mas
44+
</Link>
5145
</div>
52-
</div>
53-
</div>
54-
)
46+
</motion.div>
47+
)
48+
}
5549

5650
export default Card

‎data/projectsData.ts‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,46 @@ interface Project {
33
description: string
44
href?: string
55
imgSrc?: string
6+
category: string
67
}
78

89
const projectsData: Project[] = [
910
{
10-
title: 'A Search Engine',
11-
description: `What if you could look up any information in the world? Webpages, images, videos
12-
and more. Google has many features to help you find exactly what you're looking
13-
for.`,
14-
imgSrc: '/static/images/google.png',
15-
href: 'https://www.google.com',
11+
title: 'ObrasYaBcn',
12+
description: `Pagina para conversion de ventas y captacion de clientes optimizada para seo / sem`,
13+
imgSrc: '/static/images/projects/project1.png',
14+
href: 'https://www.obrasyabcn.com/',
15+
category: 'Paginas Web',
1616
},
1717
{
18-
title: 'The Time Machine',
19-
description: `Imagine being able to travel back in time or to the future. Simple turn the knob
20-
to the desired date and press "Go". No more worrying about lost keys or
21-
forgotten headphones with this simple yet affordable solution.`,
22-
imgSrc: '/static/images/time-machine.jpg',
23-
href: '/blog/the-time-machine',
18+
title: 'CrmObrasYaBcn',
19+
description: `Crm para gestion de clientes y presupuestos`,
20+
imgSrc: '/static/images/projects/project3.png',
21+
href: 'https://adminbrasya.vercel.app/login',
22+
category: 'Crm',
2423
},
24+
{
25+
title: 'TransformaMax',
26+
description: `Blog de articulos Seo para ventas de productos afiliados`,
27+
imgSrc: '/static/images/projects/project4.png',
28+
href: 'https://www.transformamax.com/',
29+
category: 'Blog',
30+
},
31+
{
32+
title: 'CleanAura',
33+
description: `Proyecto de limpieza de casas y oficinas "Aun en desarrollo"`,
34+
imgSrc: '/static/images/projects/project5.png',
35+
href: 'https://www.cleanaura.org/',
36+
category: 'Blog',
37+
},
38+
{
39+
title: 'Portafolio Personal',
40+
description: `Portafolio personal de Jose`,
41+
imgSrc: '/static/images/projects/project6.png',
42+
href: 'https://porx312.github.io/Portafolio-Jose/',
43+
category: 'Portfolio',
44+
},
45+
// Add more projects with categories...
2546
]
2647

2748
export default projectsData

‎public/static/images/projects/project4.png‎

126 KB
Loading

‎public/static/images/projects/project5.png‎

172 KB
Loading

‎public/static/images/projects/project6.png‎

587 KB
Loading

0 commit comments

Comments
 (0)