Skip to content

Commit

Permalink
✨
Browse files Browse the repository at this point in the history
  • Loading branch information
@miicolas
miicolas committed Jul 16, 2024
1 parent 9296745 commit 853edee
Show file tree
Hide file tree
Showing 8 changed files with 522 additions and 51 deletions.
Binary file added public/images/projects/learn404.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
217 changes: 190 additions & 27 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
'use client'
"use client";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import WordPullUp from "@/components/magicui/word-pull-up";
import ExperienceCard from "@/components/cards/experienceCard";
import { workExperiences, educationExperiences } from "@/lib/utils";
import {
workExperiences,
educationExperiences,
skills,
projects,
sideProjects,
} from "@/lib/utils";
import { delay, motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";
import ProjectCard from "@/components/cards/projectCard";
import SideProjectCard from "@/components/cards/sideProjectCard";

export default function Home() {

return (
<motion.main className="flex flex-col min-h-[100dvh] space-y-10"
initial={{ opacity: 0, y: -100, filter: "blur(30px)", }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)", duration: 1, ease: "easeInOut" }}
exit={{ opacity: 0, y: 200, filter: "blur(30px)" }}
transition={{ duration: 1, type: "spring", stiffness: 110, damping: 15 }}


<motion.main
className="flex flex-col min-h-[100dvh] space-y-10"
initial={{ opacity: 0, y: -100, filter: "blur(30px)" }}
animate={{
opacity: 1,
y: 0,
filter: "blur(0px)",
duration: 1,
ease: "easeInOut",
}}
exit={{ opacity: 0, y: 200, filter: "blur(30px)" }}
transition={{ duration: 1, type: "spring", stiffness: 110, damping: 15 }}
>
<section className="flex flex-col items-center justify-center space-y-4">
<section className="flex flex-col items-center justify-center space-y-4 ">
<div className="block lg:flex items-center gap-4">
<Avatar className="w-48 h-48 block lg:hidden mb-4 lg:mb-0">
<AvatarImage src="/images/profil.webp" alt="Nicolas Becharat" />
Expand All @@ -33,6 +46,13 @@ export default function Home() {
applications that are both visually appealing and functionally
sound.
</p>
<div className="flex items-center gap-2 text-green-500">
<span className="relative flex h-3 w-3">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
</span>
Available for work
</div>
</div>
<Avatar className="w-48 h-48 hidden lg:block">
<AvatarImage src="/images/profil.webp" alt="Nicolas Becharat" />
Expand All @@ -42,48 +62,191 @@ export default function Home() {
<section>
<h2 className="text-2xl font-bold mb-4">About</h2>
<p className="font-light text-neutral-500 text-sm">
When i was 15, i started to code in Python and i was amazed by the possibilities of the language.
I started to learn more about <span className="text-black underline underline-offset-2">the language</span> and the possibilities of the language. And i decided to make the code my life and my futur job. I integrate the passion of coding in <span className="text-black underline underline-offset-2">all my projects</span> and i love to learn new things about the world of web development in my school at <span className="text-black underline underline-offset-2">IIM Paris</span>.
When i was 15, i started to code in Python and i was amazed by the
possibilities of the language. I started to learn more about{" "}
<span className="text-black underline underline-offset-2">
the language
</span>{" "}
and the possibilities of the language. And i decided to make the code
my life and my futur job. I integrate the passion of coding in{" "}
<span className="text-black underline underline-offset-2">
all my projects
</span>{" "}
and i love to learn new things about the world of web development in
my school at{" "}
<span className="text-black underline underline-offset-2">
IIM Paris
</span>
.
</p>
</section>
<section>
<h2 className="text-2xl font-bold mb-4">My Work Experience</h2>
{workExperiences
.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
.sort(
(a, b) =>
new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
)
.map((workExperience) => {
const startDate = new Date(workExperience.startDate);
const endDate = workExperience.endDate ? new Date(workExperience.endDate) : "present";
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'numeric' };
const endDate = workExperience.endDate
? new Date(workExperience.endDate)
: "present";
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "numeric",
};

return (
<ExperienceCard
key={workExperience.name_experience}
{...workExperience}
startDateFormatted={startDate.toLocaleDateString('fr-FR', options)}
endDateFormatted={endDate === "present" ? "present" : endDate.toLocaleDateString('fr-FR', options)}
startDateFormatted={startDate.toLocaleDateString(
"fr-FR",
options
)}
endDateFormatted={
endDate === "present"
? "present"
: endDate.toLocaleDateString("fr-FR", options)
}
/>
);
}).reverse()}
})
.reverse()}
</section>
<section>
<h2 className="text-2xl font-bold mb-4">Education</h2>
{educationExperiences
.sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
.sort(
(a, b) =>
new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
)
.map((educationExperience) => {
const startDate = new Date(educationExperience.startDate);
const endDate = educationExperience.endDate ? new Date(educationExperience.endDate) : "present";
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'numeric' };
const endDate = educationExperience.endDate
? new Date(educationExperience.endDate)
: "present";
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "numeric",
};

return (
<ExperienceCard
key={educationExperience.name_experience}
{...educationExperience}
startDateFormatted={startDate.toLocaleDateString('fr-FR', options)}
endDateFormatted={endDate === "present" ? "present" : endDate.toLocaleDateString('fr-FR', options)}
{...(educationExperience as any)}
startDateFormatted={startDate.toLocaleDateString(
"fr-FR",
options
)}
endDateFormatted={
endDate === "present"
? "present"
: endDate.toLocaleDateString("fr-FR", options)
}
/>
);
}).reverse()}
})
.reverse()}
</section>
<section>
<h2 className="text-2xl font-bold mb-4">Skills</h2>
<motion.ul className="flex flex-wrap gap-2">
{skills.map((skill, index) => (
<motion.li
key={skill.name}
initial={{ opacity: 0, y: -100, filter: "blur(30px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
exit={{ opacity: 0, y: 200, filter: "blur(30px)" }}
transition={{
delay: index * 0.1,
duration: 1,
ease: "easeInOut",
type: "spring",
stiffness: 110,
damping: 15,
}}
>
<Badge>
<p className="font-light">{skill.name}</p>
</Badge>
</motion.li>
))}
</motion.ul>
</section>
<section>
<div className="flex flex-col items-center justify-center">
<Badge>
<h2 className="text-lg font-light">My Projects</h2>
</Badge>
<h1 className="text-4xl font-bold mt-4">Check out my latest work</h1>
<p className="text-lg font-light">
Here are some of my latest projects that I have worked on.
</p>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 mx-auto mt-4">
{projects.map((project) => (
<ProjectCard key={project.name} {...(project as any)} />
))}
</div>
</div>
</section>
<section>
<div className="flex flex-col items-center justify-center">
<Badge>
<h2 className="text-lg font-light">Side Projects</h2>
</Badge>
<h1 className="text-4xl font-bold mt-4">
Here are some of my side projects that I have worked on.
</h1>
<p className="text-lg font-light">
During my free time or university, I have worked on some side
projects for fun, clients or just to learn new things.
</p>
<div className="flex flex-col gap-4 mt-4">
{sideProjects
.sort((a, b) => {
if (new Date(b.startDate).getTime() === new Date(a.startDate).getTime()) {
return new Date(b.endDate).getTime() - new Date(a.endDate).getTime();
}
return new Date(b.startDate).getTime() - new Date(a.startDate).getTime();
})
.map((sideProject) => {
const startDate = new Date(sideProject.startDate);
const endDate = sideProject.endDate
? new Date(sideProject.endDate)
: "present";
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "numeric",
};

return (
<SideProjectCard
key={sideProject.name}
{...(sideProject as any)}
startDateFormatted={startDate.toLocaleDateString(
"fr-FR",
options
)}
endDateFormatted={
endDate === "present"
? "present"
: endDate.toLocaleDateString("fr-FR", options)
}
/>
);
})}
</div>
</div>
</section>
<section>
<h2 className="text-2xl font-bold mb-4">Contact</h2>
<p className="font-light text-neutral-500 text-sm">
You can contact me at{" "}
<a href="mailto:nicolas.becharat@gmail.com">nicolas.becharat@gmail.com</a>
</p>
</section>
</motion.main>
);
}
}
4 changes: 2 additions & 2 deletions src/components/cards/experienceCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ export default function WorkExperienceCard({
title,
startDateFormatted,
endDateFormatted,
description,
image,
description,
}: ExperienceCardProps) {
return (
<>
Expand Down Expand Up @@ -44,7 +44,7 @@ export default function WorkExperienceCard({
<p>{endDateFormatted}</p>
</div>
</div>
<p className="text-sm font-light text-neutral-500">{description}</p>
{description && <p className="text-sm font-light">{description}</p>}
</div>

</div>
Expand Down
92 changes: 92 additions & 0 deletions src/components/cards/projectCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import Image from "next/image";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Earth, GitBranch } from "lucide-react";
import Link from "next/link";

export default function ProjectCard({
name,
image,
description,
date,
skills,
video,
website,
websiteurl,
github,
githuburl,
}: {
name: string;
image: string;
video: string;
description: string;
date: string;
skills: string[];
website: boolean
websiteurl: string
github: boolean
githuburl: string
}) {
return (
<div
className="flex flex-col overflow-hidden border hover:shadow-lg transition-all duration-300 ease-out h-full rounded-lg"
lang="en"
>
<div className="w-full rounded-lg object-cover">
{image ? (
<Image
src={image}
alt={name}
width={400}
height={400}
className="rounded-t-lg object-cover"
/>
) : (
<div className="h-40 w-full bg-gray-200"></div>
)}
{video ? (
<video src={video} className="rounded-t-lg object-cover" />
) : null}
</div>
<div className="h-full w-full">
<div className="p-4 flex flex-col justify-between h-full">
<div>
<h2 className="text-lg font-bold">{name}</h2>
<p className="font-light text-xs">{date}</p>
<p className="font-light text-xs text-gray-500 my-1">
{description}
</p>
</div>

<div className="mt-2">
<div className="flex flex-wrap gap-0.5">
{skills.map((skill) => (
<Badge variant={"outline"} className="text-xs">
{skill}
</Badge>
))}
</div>
<div className="flex items-center gap-2 mt-2">
{website && (
<Link href={websiteurl || '#'}>
<Button variant={"default"} size={"sm"}>
<Earth className="w-4 h-4 mr-2" />
<span className="text-xs">Website</span>
</Button>
</Link>
)}
{github && (
<Link href={githuburl || '#'}>
<Button variant={"default"} size={"sm"}>
<GitBranch className="w-4 h-4 mr-2" />
<span className="text-xs">Github</span>
</Button>
</Link>
)}
</div>
</div>
</div>
</div>
</div>
);
}
Loading

0 comments on commit 853edee

Please sign in to comment.