Skip to content

Commit

Permalink
Merge pull request #9 from niFrizP/proyectos
Browse files Browse the repository at this point in the history 
mejoras en proyectos
  • Loading branch information
@niFrizP
niFrizP authored Jun 2, 2023
2 parents b4d6615 + b30520b commit 7ece7ed
Show file tree
Hide file tree
Showing 5 changed files with 286 additions and 19 deletions.
48 changes: 48 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
"autoprefixer": "10.4.14",
"eslint": "8.41.0",
"eslint-config-next": "13.4.4",
"framer-motion": "^10.12.16",
"lucide-react": "^0.233.0",
"next": "13.4.4",
"postcss": "8.4.24",
"react": "18.2.0",
Expand Down
43 changes: 43 additions & 0 deletions src/app/components/card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
"use client";
import {
motion,
useMotionTemplate,
useMotionValue,
useSpring,
} from "framer-motion";

import { MouseEventHandler, PropsWithChildren } from "react";

export const Card: React.FC<PropsWithChildren> = ({ children }) => {
const mouseX = useSpring(0, { stiffness: 500, damping: 100 });
const mouseY = useSpring(0, { stiffness: 500, damping: 100 });

function onMouseMove({ currentTarget, clientX, clientY }: any) {
const { left, top } = currentTarget.getBoundingClientRect();
mouseX.set(clientX - left);
mouseY.set(clientY - top);
}
let maskImage = useMotionTemplate`radial-gradient(400px at ${mouseX}px ${mouseY}px, white, transparent)`;
let style = { maskImage, WebkitMaskImage: maskImage };

return (
<div
onMouseMove={onMouseMove}
className="overflow-hidden relative duration-700 border rounded-xl hover:bg-zinc-800/10 group md:gap-8 hover:border-zinc-400/50 border-zinc-600 "
>
<div className="pointer-events-none">
<div className="absolute inset-0 z-0 transition duration-1000 [mask-image:linear-gradient(black,transparent)]" />
<motion.div
className="absolute inset-0 z-10 bg-gradient-to-br opacity-100 via-zinc-100/10 transition duration-1000 group-hover:opacity-50 "
style={style}
/>
<motion.div
className="absolute inset-0 z-10 opacity-0 mix-blend-overlay transition duration-1000 group-hover:opacity-100"
style={style}
/>
</div>

{children}
</div>
);
};
55 changes: 55 additions & 0 deletions src/app/components/nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
"use client";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import React, { useEffect, useRef, useState } from "react";

export const Navigation: React.FC = () => {
const ref = useRef<HTMLElement>(null);
const [isIntersecting, setIntersecting] = useState(true);

useEffect(() => {
if (!ref.current) return;
const observer = new IntersectionObserver(([entry]) =>
setIntersecting(entry.isIntersecting),
);

observer.observe(ref.current);
return () => observer.disconnect();
}, []);

return (
<header ref={ref}>
<div
className={`fixed inset-x-0 top-0 z-50 backdrop-blur duration-200 border-b ${
isIntersecting
? "bg-zinc-900/0 border-transparent"
: "bg-zinc-900/500 border-zinc-800 "
}`}
>
<div className="container flex flex-row-reverse items-center justify-between p-6 mx-auto">
<div className="flex justify-between gap-8">
<Link
href="pages/proyectos"
className="duration-200 text-zinc-400 hover:text-zinc-100"
>
Projects
</Link>
<Link
href="pages/contacto"
className="duration-200 text-zinc-400 hover:text-zinc-100"
>
Contact
</Link>
</div>

<Link
href="/"
className="duration-200 text-zinc-300 hover:text-zinc-100"
>
<ArrowLeft className="w-6 h-6 " />
</Link>
</div>
</div>
</header>
);
};
157 changes: 138 additions & 19 deletions src/app/pages/proyectos/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,145 @@
import Image from 'next/image'
import { Card } from '../../components/card';
import React from 'react'
import Particles from '../../components/particles'
import Link from 'next/link';
import { Eye } from 'lucide-react';




export default function Page() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
<div className="grid place-items-center">
<nav aria-label="Main" data-aria-orientation="horizontal" dir="ltr" className='relative z-10 flex flex-1 items-center justify-center rounded-full bg-[#FFFFF] py-2 px-2 shadow-3xl'>
</nav>
</div>
</div>
<div className="my-16 text-center animate-fade-in">

<h2>Proyectos
</h2>
</div>


<div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
<Particles className="absolute inset-0 -z-10 animate-fade-in" quantity={100}/>
</div>
</main>
<div className="px-6 pt-16 mx-auto space-y-8 max-w-7xl lg:px-8 md:space-y-16 md:pt-24 lg:pt-32">
<div className="max-w-2xl xl-auto lg:mx-0">
<h2 className="text-3xl font-bold tracking-tight text-zinc-100 sm:text-4xl">
Proyectos
</h2>
<p className="mt-4 text-zinc-400">
Algunos proyectos realizados anteriormente
</p>
</div>
<div className="w-full l-px bg-zinc-800" />

<div className="grid grid-col-auto gap-8 mx-auto lg:grid-cols-2 ">
<Card>
<Link href={`https://github.com/niFrizP/nextjs-portfolio-pageview-counter/blob/main/app/projects/page.tsx`}>
<article className="relative w-full h-full p-4 md:p-8">
<div className="flex items-center justify-between gap-2">
<div className="text-xs text-zinc-100">
</div>
<span className="flex items-center gap-1 text-xs text-zinc-500">
<Eye className="w-4 h-4" />{" "}
</span>
</div>

<h2 id="featured-post"className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"></h2>
<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
</p>
<div className="absolute bottom-4 md:bottom-8">
<h2>Proyecto 1</h2>
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#DCE1EA] dark:invert "
src="/linkedin.svg"
alt="Next.js Logo"
width={120}
height={70}
priority
/>
<p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
Read more <span aria-hidden="true">&rarr;</span>
</p>
</div>
</article>
</Link>
</Card>

<div className="flex flex-col w-full gap-8 mx-auto border-t border-gray-900/10 lg:mx-0 lg:border-t-0 ">
<Card>
<Link href={`#`}>
<article className="relative w-full h-full p-4 md:p-8">
<div className="flex items-center justify-between gap-2">
<div className="text-xs text-zinc-100">
</div>
<span className="flex items-center gap-1 text-xs text-zinc-500">
<Eye className="w-4 h-4" />{" "}
</span>
</div>

<h2
id="featured-post"
className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
>
</h2>
<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
</p>
<div className="absolute bottom-4 md:bottom-8">
<p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
Read more <span aria-hidden="true">&rarr;</span>
</p>
</div>
</article>
</Link>
</Card>
</div>
</div>
<div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 ">
<div className="grid grid-cols-1 gap-4">
<Card>
<Link href={`#`}>
<article className="relative w-full h-full p-4 md:p-8">
<div className="flex items-center justify-between gap-2">
<div className="text-xs text-zinc-100">
</div>
<span className="flex items-center gap-1 text-xs text-zinc-500">
<Eye className="w-4 h-4" />{" "}
</span>
</div>

<h2
id="featured-post"
className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
>
</h2>
<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
</p>
<div className="absolute bottom-4 md:bottom-8">
<p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
Read more <span aria-hidden="true">&rarr;</span>
</p>
</div>
</article>
</Link>
</Card>
</div>
<div className="grid grid-cols-1 gap-4">
<Card>
<Link href={`#`}>
<article className="relative w-full h-full p-4 md:p-8">
<div className="flex items-center justify-between gap-2">
<div className="text-xs text-zinc-100">
</div>
<span className="flex items-center gap-1 text-xs text-zinc-500">
<Eye className="w-4 h-4" />{" "}
</span>
</div>

<h2
id="featured-post"
className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
>
</h2>
<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
</p>
<div className="absolute bottom-4 md:bottom-8">
<p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
Read more <span aria-hidden="true">&rarr;</span>
</p>
</div>
</article>
</Link>
</Card>
</div>
</div>
</div>
)
}

0 comments on commit 7ece7ed

Please sign in to comment.