Skip to content

Commit

Permalink
Updating portfolio.
Browse files Browse the repository at this point in the history
  • Loading branch information
@willydavid-habi
willydavid-habi committed Feb 4, 2024
1 parent 2d83397 commit 062dce1
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 107 deletions.
53 changes: 21 additions & 32 deletions src/components/biography/biography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Biography = () => {
>
burbuja puntocom <HiOutlineExternalLink className="ml-1" />
</a>{" "}
Hoy vive entre Bogotá y cualquier parte del mundo como nómada digital.
Hoy vive en Bogotá, Colombia, como nómada digital.{" "}
</p>

<div className="grid gap-4 mx-4 sm:grid-cols-12">
Expand Down Expand Up @@ -99,20 +99,23 @@ const Biography = () => {
</div>

<div className="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-blue-400">
<p className="">
Le interesaba mucho el tema de desarrollo móvil (apps) y
modelos 3D tanto que en 2 meses aprendio utilizar blender
completo un curso de
<a
href="https://platzi.com/p/willydaconceicao/curso/2789-blender/diploma/detalle/"
rel="noopener noreferrer"
target="_blank"
className="pl-1 text-blue-300 underline items-center justify-center inline-flex"
>
Modelado 3D usando Blender{" "}
<HiOutlineExternalLink className="ml-1" />
</a>{" "}
Con ese mismo conocimiento, fundó 3 proyectos:
<div>
<p>
Le interesaba mucho el tema de desarrollo móvil (apps) y
modelos 3D tanto que en 2 meses aprendio utilizar blender
completo un curso de
<a
href="https://platzi.com/p/willydaconceicao/curso/2789-blender/diploma/detalle/"
rel="noopener noreferrer"
target="_blank"
className="pl-1 text-blue-300 underline items-center justify-center inline-flex"
>
Modelado 3D usando Blender{" "}
<HiOutlineExternalLink className="ml-1" />
</a>{" "}
Con ese mismo conocimiento, fundó 3 proyectos:
</p>

<ul className="list-disc pl-12 pt-1">
<li>
<b>Giraffes 3D:</b> Fue un proyecto NFT creado con Blender
Expand Down Expand Up @@ -149,22 +152,8 @@ const Biography = () => {
realidad aumentada y realidad virtual. Innovamos y
mejoramos la experiencia del usuario con una entrega en
minutos, cambiando la forma de hacer pedidos. (Foodko
fracasó a los 4 meses) Vendimos muchas hamburguesas;
alcanzo a recordar que fueron más de 150 hamburguesas en
esos 4 meses. Teníamos buena retención de usuarios (40%
nos volvían a comprar) <br />
Aunque decidimos cerrar operaciones dado que competir
contra los grandes fue muy difícil para nosotros. Tenían
buena parte del mercado acaparado + la competencia que era
brutal. Créeme, no sabes lo jodido que es operar una
cocina oculta, sin duda felicito a todas las cadenas de
restaurantes (en especial cuando reciben 10 órdenes
simultáneamente) <br />
Aprendí que armar un cohete espacial sin antes validar la
idea me costó dinero y tiempo, aunque no me arrepiento
dado que este error me motivó a leerme el libro &quot;El
método LEAN STARTUP&quot; de Eric Ries. Quién sabe, tal
vez en el futuro ejecute un pivote y vuelva
fracasó a los 4 meses) Aprendí que armar un cohete
espacial sin antes validar la idea
<a
href="https://neat-maple-aedd3.netlify.app/"
rel="noopener noreferrer"
Expand All @@ -176,7 +165,7 @@ const Biography = () => {
</a>
</li>
</ul>
</p>
</div>
</div>

<div className="flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4 sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px] sm:before:z-[1] before:bg-blue-400">
Expand Down
4 changes: 2 additions & 2 deletions src/components/experience/experience.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ const Experience = () => {
<div className="grid gap-4 sm:grid-cols-12">
<div className="col-span-12 sm:col-span-4">
<div className="text-center sm:text-left mb-14">
<h2 className="text-3xl mb-2 font-semibold">Experience</h2>
<h2 className="text-3xl mb-2 font-semibold">Experiencia</h2>
<span className="text-sm font-bold uppercase tracking-wider text-gray-400">
{"<Professional Experience />"}
{"<Experiencia Profesional />"}
</span>
</div>
</div>
Expand Down
23 changes: 21 additions & 2 deletions src/components/hero/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,28 @@ const Hero = () => {
<a
href="#biography"
type="button"
className="text-white mt-4 flex items-center justify-center w-full bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2"
className="text-white mt-4 flex items-center justify-center w-full bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 font-medium rounded-xl text-sm px-5 py-2.5 text-center mr-2 mb-2"
>
Learn more about Willy
Ver más sobre Willy
<HiOutlineArrowNarrowRight className="ml-3 text-lg" />
</a>
</Animation>
<Animation
in
delay={800}
from={{
transform: "translateY(50px)",
}}
to={{
transform: "translateY(0px)",
}}
>
<a
href="#projects"
type="button"
className="text-white mt-4 flex items-center justify-center w-full border focus:ring-4 focus:outline-none focus:ring-white font-medium rounded-xl text-sm px-5 py-2.5 text-center mr-2 mb-2"
>
Ver proyectos
<HiOutlineArrowNarrowRight className="ml-3 text-lg" />
</a>
</Animation>
Expand Down
171 changes: 103 additions & 68 deletions src/components/projects/projects.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import React, { useEffect, useState } from "react";
import React, { RefObject, useRef } from "react";
import Image from "next/image";
import { useSpring, animated } from "@react-spring/web";
import { HiOutlineArrowNarrowRight } from "react-icons/hi";
import {
HiOutlineArrowNarrowLeft,
HiOutlineArrowNarrowRight,
HiOutlineExternalLink,
} from "react-icons/hi";
import { useScroll } from "react-use-gesture";
import clsx from "clsx";
import { Animation } from "../animations/animation";
import { useInView } from "react-intersection-observer";

const Projects = () => {
const { ref, inView } = useInView({
triggerOnce: true,
});
const [itemSelected, setItemSelected] = useState({
item: null,
index: -1,
});
const refLastItem = useRef();
const refFirstItem = useRef();

const [style, set] = useSpring(() => ({
transform: "perspective(500px) rotateY(0deg)",
}));
Expand All @@ -35,78 +34,107 @@ const Projects = () => {
});
});

const handleSelectItem = (data: any) => {
setItemSelected(data);
};

useEffect(() => {
if (inView) {
setTimeout(() => {
handleSelectItem({ item: items[0], index: 0 });
}, 3000);
const getRefItem = (
index: number,
length: number
): RefObject<any> | undefined => {
if (index === 0) {
return refFirstItem;
}
}, [inView]);
if (index === length - 1) {
return refLastItem;
}
return undefined;
};

return (
<section className="mt-12 mb-8" id="projects">
<section className="mt-12 mb-8 scroll-m-12" id="projects">
<h2 className="text-3xl mb-3 font-semibold text-center px-4 md:text-left">
Proyectos
</h2>

<div
className="section relative flex flex-nowrap overflow-x-scroll space-x-6 py-6 px-4"
ref={ref}
{...bind()}
>
{items.map((item, i) => {
const isActive = itemSelected.index === i;
return (
<animated.div
key={i}
style={style}
className={clsx(
"flex-shrink-0 rounded-3xl overflow-hidden relative cursor-pointer md:flex",
{}
)}
onClick={() => handleSelectItem({ item, index: i })}
>
<div className="relative">
<Image
width={208}
height={208}
src={item.imageSrc}
alt={`icon ${item.title}`}
/>
<div className="relative">
<div
className="section relative flex flex-nowrap overflow-x-scroll space-x-6 py-6 px-12 md:px-0"
{...bind()}
>
{items.map((item, i) => {
return (
<animated.div
key={i}
style={style}
className={clsx(
"flex-shrink-0 h-fit rounded-3xl overflow-hidden relative md:flex",
{}
)}
ref={getRefItem(i, items.length)}
>
<div className="relative">
<Image
width={208}
height={208}
src={item.imageSrc}
alt={`icon ${item.title}`}
/>

<p className="absolute bottom-2.5 right-2 flex items-center justify-center rounded-xl bg-white px-2 py-1 text-xs font-bold text-main">
{item.title}
{!isActive && (
<HiOutlineArrowNarrowRight className="ml-1 text-xl" />
)}
</p>
</div>
{isActive && (
<p className="absolute bottom-2.5 right-2 flex items-center justify-center rounded-xl bg-white px-2 py-1 text-xs font-bold text-main">
{item.title}
</p>
</div>
<Animation
in
className="bg-white p-3 w-52 text-main relative md:w-72"
>
<p className="text-xs mb-2 md:text-xs">{item.description}</p>
<div className="md:flex md:items-end md:justify-end">
<p className="bg-yellow-500 text-black text-xs p-1 px-5 rounded-full inline uppercase font-semibold">
{item.label}
</p>
<a
rel="noopener noreferrer"
target="_blank"
href={item.href}
className="flex items-center justify-center bg-blue-100 text-blue-600 underline text-xs p-1 px-5 rounded-full uppercase font-semibold"
>
Ver Sitio <HiOutlineExternalLink className="ml-1" />
</a>
</div>
</Animation>
)}
</animated.div>
);
})}
</animated.div>
);
})}
</div>
<button
className="border border-main shadow-sm absolute bg-white rounded-full h-8 w-8 flex items-center justify-center top-1/2 transform -translate-y-1/2 left-1 lg:-left-7"
onClick={() => {
(refFirstItem.current as any).scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
}}
>
<HiOutlineArrowNarrowLeft className="text-xl text-main" />
</button>
<button
className="border border-main shadow-sm absolute bg-white rounded-full h-8 w-8 flex items-center justify-center top-1/2 transform -translate-y-1/2 right-1 lg:-right-7"
onClick={() => {
(refLastItem.current as any).scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "center",
});
}}
>
<HiOutlineArrowNarrowRight className="text-xl text-main" />
</button>
</div>

<style jsx>
{`
.section::-webkit-scrollbar {
height: 11px;
height: 25px;
}
.section {
overflow-y: hidden;
}
.section::-webkit-scrollbar-track {
Expand All @@ -129,50 +157,57 @@ const items = [
imageSrc: "/images/projects/foodko.jpg",
title: "Foodko",
description:
"Foodko.co is an application that allows you to order and customize your food in 3D for home delivery within minutes. You can also be part of the metaverse and NFTs with Foodko by creating and collecting digital burgers. Foodko offers a new and amazing consumer experience by giving you the power to customize your burgers in a real-time 3D model.",
"Foodko.co es una app que te permite pedir y personalizar tu comida en 3D para entrega a domicilio en cuestión de minutos. Foodko ofrece una experiencia de consumo nueva y sorprendente al brindarle el poder de personalizar sus hamburguesas en un modelo 3D en tiempo real.",
label: "App - Web",
href: "https://neat-maple-aedd3.netlify.app/",
},
{
imageSrc: "/images/projects/picassoIA.jpg",
title: "Picasso IA",
description:
"Picassoia.com is the Netflix of AI, all AIs in one app, it's an app that offers an AI-powered image generator. You can create works of art or converse with famous people using the power of AI. You just have to write a text and see what the AI draws for you.",
"Picassoia.com es el Netflix de la IA, todas las IA en una sola aplicación, es una aplicación que ofrece un generador de imágenes impulsado por IA. Puedes crear obras de arte o conversar con personajes famosos utilizando el poder de la IA. Sólo tienes que escribir un texto y ver qué dibuja la IA por ti.",
label: "App - Web",
href: "https://picassoia.com/",
},
{
imageSrc: "/images/projects/saxior.jpg",
title: "Saxior",
description:
"Saxior.com is an app that is revolutionizing the way we buy clothes with artificial intelligence. With Saxior, you can buy a t-shirt with your favorite and unique design created with artificial intelligence.",
"Saxior.com es una app que está revolucionando la forma de comprar ropa con inteligencia artificial. Con Saxior podrás comprar una camiseta con tu diseño favorito y único creado con inteligencia artificial.",
label: "App - Web",
href: "http://saxior.com/",
},
{
imageSrc: "/images/projects/peaceAI.jpg",
title: "Peace AI",
description:
"Peace IA is an app that offers a wide selection of natural and AI-generated relaxing sounds to reduce stress and anxiety. It also provides personalized advice and exercises from AI mental health professionals and athletes to improve emotional and physical well-being, as well as motivational phrases and meditation tools.",
"Peace IA es una aplicación que ofrece una amplia selección de sonidos relajantes naturales y generados por IA para reducir el estrés y la ansiedad. También proporciona consejos personalizados y ejercicios de profesionales de la salud mental y deportistas de IA para mejorar el bienestar emocional y físico, así como frases motivadoras y herramientas de meditación.",
label: "App",
href: "https://play.google.com/store/apps/details?id=com.peaceai.app",
},
{
imageSrc: "/images/projects/rostroIA.jpg",
title: "Rostro IA",
description:
"Rostro IA is an app that uses advanced AI algorithms to generate unique and highly detailed artwork from any image, allowing you to become a digital artist, create anime avatars, fantasy scenes, NFT art, and more in seconds. You can also share your creations with a community of artists.",
"Rostro IA es una aplicación que utiliza algoritmos avanzados de IA para generar obras de arte únicas y muy detalladas a partir de cualquier imagen, lo que te permite convertirte en un artista digital, crear avatares de anime, escenas de fantasía, arte NFT y más en segundos. También puedes compartir tus creaciones con una comunidad de artistas.",
label: "App",
href: "https://play.google.com/store/apps/details?id=com.lunaai.app",
},
{
imageSrc: "/images/projects/giraffes-nfts.jpg",
title: "Giraffes 3d",
description:
"Giraffes 3d is an NFT collection created from scratch using Blender to model each of the 3D objects and textures for the giraffes. Then each 3D element and texture was rendered to generate as a final result each giraffe with a unique design.",
"Giraffes 3d es una colección NFT creada desde cero usando Blender para modelar cada uno de los objetos y texturas 3D de las jirafas. Luego se renderizó cada elemento 3D y textura para generar como resultado final cada jirafa con un diseño único.",
label: "NFT collection",
href: "https://opensea.io/collection/giraffes3d",
},
{
imageSrc: "/images/projects/koalastv.gif",
title: "Koalas tv",
description:
"Koalas tv is an NFT collection created from scratch using Blender to model each of the 3D objects and textures for the giraffes. Then each 3D element and texture was rendered to generate as a final result each koala with a unique design.",
"Koalas tv es una colección NFT creada desde cero usando Blender para modelar cada uno de los objetos 3D y texturas de las jirafas. Luego se renderizó cada elemento 3D y textura para generar como resultado final cada koala con un diseño único.",
label: "NFT collection",
href: "https://opensea.io/collection/koalastv",
},
];

Expand Down
2 changes: 1 addition & 1 deletion src/components/skills/skills.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const Skills = () => {
return (
<section className="mt-8 mb-8" id="projects">
<h2 className="text-3xl mb-6 font-semibold text-center px-4 md:text-left">
Skills
Habilidades
</h2>

<div className="space-y-8 px-4">
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export default function Home() {
className={`min-h-screen container max-w-4xl mx-auto ${openSansFont.className} font-opensans`}
>
<Head>
<title>Willy David Da Conceicao - Portfolio 🚀</title>
<title>Willy David Da Conceicao - Portafolio 🚀</title>
<meta
name="description"
content="Willy David Da Conceicao Lozada's portfolio showcases my projects, experience, and skills. Get to know who I am and my projects."
content="Portafolio de Willy David Da Conceicao Lozada destaca proyectos, experiencia y habilidades. Conoce quién soy y mis proyectos."
/>
<link rel="icon" type="image/png" href="/images/logoWilly.png" />
</Head>
Expand Down

0 comments on commit 062dce1

Please sign in to comment.