diff --git a/public/images/projects/learn404.png b/public/images/projects/learn404.png new file mode 100644 index 0000000..6e0fa87 Binary files /dev/null and b/public/images/projects/learn404.png differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 05354da..7b8fa49 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 ( - -
+
@@ -33,6 +46,13 @@ export default function Home() { applications that are both visually appealing and functionally sound.

+
+ + + + + Available for work +
@@ -42,48 +62,191 @@ export default function Home() {

About

- 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 the language 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 all my projects and i love to learn new things about the world of web development in my school at IIM Paris. + 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{" "} + + the language + {" "} + 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{" "} + + all my projects + {" "} + and i love to learn new things about the world of web development in + my school at{" "} + + IIM Paris + + .

My Work Experience

{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 ( ); - }).reverse()} + }) + .reverse()}

Education

{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 ( ); - }).reverse()} + }) + .reverse()} +
+
+

Skills

+ + {skills.map((skill, index) => ( + + +

{skill.name}

+ + + ))} + +
+
+
+ +

My Projects

+ +

Check out my latest work

+

+ Here are some of my latest projects that I have worked on. +

+
+ {projects.map((project) => ( + + ))} +
+
+
+
+
+ +

Side Projects

+ +

+ Here are some of my side projects that I have worked on. +

+

+ During my free time or university, I have worked on some side + projects for fun, clients or just to learn new things. +

+
+ {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 ( + + ); + })} +
+
+
+
+

Contact

+

+ You can contact me at{" "} + nicolas.becharat@gmail.com +

); -} \ No newline at end of file +} diff --git a/src/components/cards/experienceCard.tsx b/src/components/cards/experienceCard.tsx index 625b68c..ca608aa 100644 --- a/src/components/cards/experienceCard.tsx +++ b/src/components/cards/experienceCard.tsx @@ -15,8 +15,8 @@ export default function WorkExperienceCard({ title, startDateFormatted, endDateFormatted, - description, image, + description, }: ExperienceCardProps) { return ( <> @@ -44,7 +44,7 @@ export default function WorkExperienceCard({

{endDateFormatted}

-

{description}

+ {description &&

{description}

} diff --git a/src/components/cards/projectCard.tsx b/src/components/cards/projectCard.tsx new file mode 100644 index 0000000..19f5f85 --- /dev/null +++ b/src/components/cards/projectCard.tsx @@ -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 ( +
+
+ {image ? ( + {name} + ) : ( +
+ )} + {video ? ( +
+
+
+
+

{name}

+

{date}

+

+ {description} +

+
+ +
+
+ {skills.map((skill) => ( + + {skill} + + ))} +
+
+ {website && ( + + + + )} + {github && ( + + + + )} +
+
+
+
+
+ ); +} diff --git a/src/components/cards/sideProjectCard.tsx b/src/components/cards/sideProjectCard.tsx new file mode 100644 index 0000000..5f6cc1f --- /dev/null +++ b/src/components/cards/sideProjectCard.tsx @@ -0,0 +1,73 @@ +import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar"; +import Link from "next/link"; +import { Button } from "../ui/button"; +import { ArrowRightIcon, GitBranch, Webhook, LinkIcon } from "lucide-react"; + +type SideProjectCardProps = { + name: string; + startDateFormatted: string; + endDateFormatted: string; + description: string; + gitHubLink: string; + liveLink: string; + type: string; + apiLink: string; +}; + +export default function SideProjectCard({ + name, + type, + startDateFormatted, + endDateFormatted, + description, + gitHubLink, + liveLink, + apiLink, +}: SideProjectCardProps) { + return ( + <> +
+
+
+
+

{name}

+

{type}

+
+
+

{startDateFormatted}

+ +

{endDateFormatted}

+
+
+

{description}

+
+ {gitHubLink && ( + + + + )} + {apiLink && ( + + + + )} + {liveLink && ( + + + + )} +
+
+
+ + ); +} diff --git a/src/components/dock/dock.tsx b/src/components/dock/dock.tsx index 8c2cd29..aec25e8 100644 --- a/src/components/dock/dock.tsx +++ b/src/components/dock/dock.tsx @@ -64,29 +64,29 @@ const Icons = { const DATA = { navbar: [ - { href: "#", icon: HomeIcon, label: "Home" }, - { href: "#", icon: PencilIcon, label: "Blog" }, + { href: "/", icon: HomeIcon, label: "Home" }, + { href: "/blog", icon: PencilIcon, label: "Blog" }, ], contact: { social: { GitHub: { name: "GitHub", - url: "#", + url: "https://github.com/miicolas", icon: Icons.github, }, LinkedIn: { name: "LinkedIn", - url: "#", + url: "https://www.linkedin.com/in/nicolas-becharat/", icon: Icons.linkedin, }, X: { name: "X", - url: "#", + url: "https://x.com/miicolaas", icon: Icons.x, }, email: { name: "Send Email", - url: "#", + url: "mailto:nicolas.becharat@gmail.com", icon: Icons.email, }, }, diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 0000000..9867058 --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 15a0b4a..44335f3 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,21 +1,20 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } - export const { workExperiences } = { workExperiences: [ - { image: "/images/celest.webp", name_experience: "ABR CELEST", title: "Creative Designer", startDate: new Date("2024-02"), endDate: null, - description: "I was responsible for the design of social media posts and for the creation in the association ABR CELEST. I had the chance to work with clients and to understand their needs and to create a design that would meet the needs of the clients.", + description: + "I'm responsible for the design of social media posts and for the creation in the association ABR CELEST. I had the chance to work with clients and to understand their needs and to create a design that would meet the needs of the clients.", }, { image: "/images/404_devinci.webp", @@ -23,13 +22,11 @@ export const { workExperiences } = { title: "President", startDate: new Date("2024-06"), endDate: null, - description: "President of the association 404 Devinci which is an association that aims to help to learn web development and to learn web design by creating websites and web applications. We also work for the Pole Leonard de Vinci and the administration of the association.", + description: + "President of the association 404 Devinci which is an association that aims to help to learn web development and to learn web design by creating websites and web applications. We also work for the Pole Leonard de Vinci and the administration of the association.", }, - - ], -} - +}; export const { educationExperiences } = { educationExperiences: [ @@ -39,7 +36,6 @@ export const { educationExperiences } = { title: "Bachelor Project Management", startDate: new Date("2023-09"), endDate: null, - description: "Bachelor Project Management with the IIM Digital School in Paris suburbs. During my studies, I was able to learn about the basics of project management, development basics, and some frameworks in web development. I als o had the chance to work with some enterprises to understand the needs of the clients and to develop a solution that would meet the needs of the clients.", }, { image: "/images/lbs.webp", @@ -47,8 +43,119 @@ export const { educationExperiences } = { title: "Baccalaureat in Computer Science x Mathematics", startDate: new Date("2008-09"), endDate: new Date("2023-07"), - description: "Baccalauréat in Computer Science and Mathematics with the Lycée Le Bon Sauveur in Paris suburbs. During my studies, I was able to learn about the basics of programming, data structures, algorithms, and basics of mathematics.", }, - - ] -} \ No newline at end of file + ], +}; + +export const skills = [ + { + name: "React", + }, + { + name: "Next.js", + }, + { + name: "TypeScript", + }, + { + name: "Tailwind CSS", + }, + { + name: "Node.js", + }, + { + name: "Express", + }, + { + name: "Python", + }, + { + name: "Supabase", + }, + { + name: "Figma", + }, +]; + +export const projects = [ + { + name: "Learn404", + description: "Learn404 is a website that helps to learn web development. ", + image: "/images/projects/learn404.png", + date: "Jan 2024 - Present", + skills: [ + "React", + "Next.js", + "TypeScript", + "Tailwind CSS", + "Prisma", + "Figma", + ], + website: true, + github: false, + websiteurl: "https://learn404.com", + githuburl: null, + }, + { + name: "Harry Potter", + description: + "Harry Potter trading card game is a game that allows you to trade cards with other players.", + image: "/images/projects/learn404.png", + date: "Jan 2023 - May 2023", + skills: ["HTML", "CSS", "JavaScript", "Node.js", "Express", "Prisma"], + website: false, + github: true, + websiteurl: null, + githuburl: "https://github.com/miicolas/CDI-HarryPotter", + }, +]; + +export const sideProjects = [ + { + name: "npmBytes", + type: "Web Development", + description: + "npmBytes is a plateform where you can find articles about web developement, design, and more. It's a project that I made to help me to learn more about web developement and to understand the basics of web developement with Astro", + startDate: new Date("2023-03"), + endDate: new Date("2023-06"), + gitHubLink: "https://github.com/miicolas/npmBytes", + }, + { + name: "IOT Project", + type: "Web Development", + description: + "This project is a discovery of the IOT world and to understand how to use the IoT devices and the sensors to create a project that can connect with a api and interact with the website", + startDate: new Date("2024-04"), + endDate: new Date("2024-04"), + gitHubLink: "https://github.com/miicolas/Data-IOTB1", + }, + { + name: "Twitter clone", + type: "Web Development", + description: + "The goal of the project is to create a clone of X, a social media platform with the help of the PHP and the SQL", + startDate: new Date("2024-03"), + endDate: new Date("2024-03"), + gitHubLink: "https://github.com/miicolas/php-sql-B1", + }, + { + name: "Algorithmic Javascript", + type: "Web Development", + description: + "This project is a discovery of the algorithmic world and to understand how to use the algorithm with the help of the Javascript language", + startDate: new Date("2023-10"), + endDate: new Date("2023-10"), + gitHubLink: "https://github.com/miicolas/AlgorithmieJS-IIM-B1", + }, + + { + name: "Ecoswing", + type: "Hackathon - Web Development", + description: + "Ecoswing is a solution for the problem of the environment which offers eco-responsible turf for golf to reduce water consumption and to improve the quality of the water.", + startDate: new Date("2024-03"), + endDate: new Date("2024-06"), + gitHubLink: "https://github.com/miicolas/ecoswing", + apiLink: "https://github.com/miicolas/ecoswing-api", + }, +];