diff --git a/public/assets/brands/language/ejs.svg b/public/assets/brands/language/ejs.svg index a764a7a..b87382d 100644 --- a/public/assets/brands/language/ejs.svg +++ b/public/assets/brands/language/ejs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/brands/language/express.svg b/public/assets/brands/language/express.svg index f18858c..610b056 100644 --- a/public/assets/brands/language/express.svg +++ b/public/assets/brands/language/express.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/brands/language/github.svg b/public/assets/brands/language/github.svg index 62346ba..f677203 100644 --- a/public/assets/brands/language/github.svg +++ b/public/assets/brands/language/github.svg @@ -1 +1,19 @@ - \ No newline at end of file + + + + diff --git a/public/assets/brands/language/nextjs.svg b/public/assets/brands/language/nextjs.svg index be2bc99..28a273d 100644 --- a/public/assets/brands/language/nextjs.svg +++ b/public/assets/brands/language/nextjs.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/brands/language/vercel.svg b/public/assets/brands/language/vercel.svg index 491cafe..4af7b68 100644 --- a/public/assets/brands/language/vercel.svg +++ b/public/assets/brands/language/vercel.svg @@ -1 +1,19 @@ - \ No newline at end of file + + + + diff --git a/src/app/(web)/(home)/sections/timeline.tsx b/src/app/(web)/(home)/sections/timeline.tsx index 199511e..03f6895 100644 --- a/src/app/(web)/(home)/sections/timeline.tsx +++ b/src/app/(web)/(home)/sections/timeline.tsx @@ -5,98 +5,100 @@ import Image from "next/image"; import React from "react"; import { motion } from 'framer-motion'; import { cn } from "@/lib/utils"; +import { NextJSIcon } from "@/components/icons/nextjs"; +import { CompaniesProps } from "@/lib/interfaces/skills"; export const AboutTimeline = () => { - const experiences = [ + const experiences: CompaniesProps[] = [ { title: "TURBOTECH CO., LTD", - companyLogo: "assets/brands/org/turbotech.png", + logo: "assets/brands/org/turbotech.png", works: [ { date: "Oct 2022 - Present", title: "Senior Frontend Developer", skills: [ - { title: "Figma", icon: "assets/brands/language/figma.svg" }, - { title: "Laravel", icon: "assets/brands/language/laravel.svg" }, - { title: "React", icon: "assets/brands/language/react.svg" }, - { title: "Next.js", icon: "assets/brands/language/nextjs.svg" }, - { title: "Tailwind CSS", icon: "assets/brands/language/tailwind.svg" }, - { title: "Typescript", icon: "assets/brands/language/typescript.svg" }, - { title: "Node.js", icon: "assets/brands/language/nodejs.svg" }, - { title: "Express.js", icon: "assets/brands/language/express.svg" }, - { title: "PostgreSQL", icon: "assets/brands/language/pgsql.svg" }, - { title: "MySQL", icon: "assets/brands/language/mysql.svg" }, + { title: "Figma", image: "assets/brands/language/figma.svg" }, + { title: "Laravel", image: "assets/brands/language/laravel.svg" }, + { title: "React", image: "assets/brands/language/react.svg" }, + { title: "Next.js", image: "assets/brands/language/nextjs.svg" }, + { title: "Tailwind CSS", image: "assets/brands/language/tailwind.svg" }, + { title: "Typescript", image: "assets/brands/language/typescript.svg" }, + { title: "Node.js", image: "assets/brands/language/nodejs.svg" }, + { title: "Express.js", image: "assets/brands/language/express.svg" }, + { title: "PostgreSQL", image: "assets/brands/language/pgsql.svg" }, + { title: "MySQL", image: "assets/brands/language/mysql.svg" }, ] }, { date: "Oct 2020 - Oct 2022", title: "Junior Frontend Developer", skills: [ - { title: "JavaScript", icon: "assets/brands/language/javascript.svg" }, - { title: "JQuery", icon: "assets/brands/language/jquery.svg" }, - { title: "HTML", icon: "assets/brands/language/html.svg" }, - { title: "CSS", icon: "assets/brands/language/css.svg" }, - { title: "Sass", icon: "assets/brands/language/sass.svg" }, - { title: "Tailwind CSS", icon: "assets/brands/language/tailwind.svg" }, - { title: "Bootstrap", icon: "assets/brands/language/bootstrap.svg" }, - { title: "PHP", icon: "assets/brands/language/php.svg" }, - { title: "MySQL", icon: "assets/brands/language/mysql.svg" }, - { title: "Laravel", icon: "assets/brands/language/laravel.svg" }, + { title: "JavaScript", image: "assets/brands/language/javascript.svg" }, + { title: "JQuery", image: "assets/brands/language/jquery.svg" }, + { title: "HTML", image: "assets/brands/language/html.svg" }, + { title: "CSS", image: "assets/brands/language/css.svg" }, + { title: "Sass", image: "assets/brands/language/sass.svg" }, + { title: "Tailwind CSS", image: "assets/brands/language/tailwind.svg" }, + { title: "Bootstrap", image: "assets/brands/language/bootstrap.svg" }, + { title: "PHP", image: "assets/brands/language/php.svg" }, + { title: "MySQL", image: "assets/brands/language/mysql.svg" }, + { title: "Laravel", image: "assets/brands/language/laravel.svg" }, ] }, { date: "Nov 2019 - Oct 2020", title: "Content Writing Officer & UI/UX Designer", skills: [ - { title: "Ms.Word", icon: "assets/brands/office/word.svg" }, - { title: "Ms.Excel", icon: "assets/brands/office/excel.svg" }, - { title: "Ms.Powerpoint", icon: "assets/brands/office/powerpoint.svg" }, - { title: "Figma", icon: "assets/brands/language/figma.svg" }, - { title: "Adobe XD", icon: "assets/brands/language/xd.svg" }, + { title: "Ms.Word", image: "assets/brands/office/word.svg" }, + { title: "Ms.Excel", image: "assets/brands/office/excel.svg" }, + { title: "Ms.Powerpoint", image: "assets/brands/office/powerpoint.svg" }, + { title: "Figma", image: "assets/brands/language/figma.svg" }, + { title: "Adobe XD", image: "assets/brands/language/xd.svg" }, ] } ] }, { title: "Nintrea Labs", - companyLogo: "assets/brands/org/nintrea.png", + logo: "assets/brands/org/nintrea.png", works: [ { date: "2021 - Present", title: "Creator & Developer of Nintrea", skills: [ - { title: "Figma", icon: "assets/brands/language/figma.svg" }, - { title: "HTML", icon: "assets/brands/language/html.svg" }, - { title: "CSS", icon: "assets/brands/language/css.svg" }, - { title: "JavaScript", icon: "assets/brands/language/javascript.svg" }, - { title: "Typescript", icon: "assets/brands/language/typescript.svg" }, - { title: "JQuery", icon: "assets/brands/language/jquery.svg" }, - { title: "Tailwind CSS", icon: "assets/brands/language/tailwind.svg" }, - { title: "Sass", icon: "assets/brands/language/sass.svg" }, - { title: "Bootstrap", icon: "assets/brands/language/bootstrap.svg" }, - { title: "React", icon: "assets/brands/language/react.svg" }, - { title: "Next.js", icon: "assets/brands/language/nextjs.svg" }, - { title: "Nuxt.js", icon: "assets/brands/language/nuxtjs.svg" }, - { title: "EJS", icon: "assets/brands/language/ejs.svg" }, - { title: "PHP", icon: "assets/brands/language/php.svg" }, - { title: "Laravel", icon: "assets/brands/language/laravel.svg" }, - { title: "Node.js", icon: "assets/brands/language/nodejs.svg" }, - { title: "Express.js", icon: "assets/brands/language/express.svg" }, - { title: "Hono", icon: "assets/brands/language/hono.svg" }, - { title: "PostgreSQL", icon: "assets/brands/language/pgsql.svg" }, - { title: "MySQL", icon: "assets/brands/language/mysql.svg" }, - { title: "Vercel", icon: "assets/brands/language/vercel.svg" }, - { title: "Netlify", icon: "assets/brands/language/netlify.svg" }, - { title: "Worker", icon: "assets/brands/language/cloudflare-workers.svg" }, - { title: "Github", icon: "assets/brands/language/github.svg" }, - { title: "Ubuntu", icon: "assets/brands/language/ubuntu.svg" }, - { title: "Nginx", icon: "assets/brands/language/nginx.svg" }, - { title: "C#", icon: "assets/brands/language/csharp.svg" }, - { title: "C++", icon: "assets/brands/language/cpp.svg" }, - { title: "Python", icon: "assets/brands/language/python.svg" }, - { title: "Git", icon: "assets/brands/language/git.svg" }, - { title: "GitLab", icon: "assets/brands/language/gitlab.svg" } + { title: "Figma", image: "assets/brands/language/figma.svg" }, + { title: "HTML", image: "assets/brands/language/html.svg" }, + { title: "CSS", image: "assets/brands/language/css.svg" }, + { title: "JavaScript", image: "assets/brands/language/javascript.svg" }, + { title: "Typescript", image: "assets/brands/language/typescript.svg" }, + { title: "JQuery", image: "assets/brands/language/jquery.svg" }, + { title: "Tailwind CSS", image: "assets/brands/language/tailwind.svg" }, + { title: "Sass", image: "assets/brands/language/sass.svg" }, + { title: "Bootstrap", image: "assets/brands/language/bootstrap.svg" }, + { title: "React", image: "assets/brands/language/react.svg" }, + { title: "Next.js", icon: }, + { title: "Nuxt.js", image: "assets/brands/language/nuxtjs.svg" }, + { title: "EJS", image: "assets/brands/language/ejs.svg" }, + { title: "PHP", image: "assets/brands/language/php.svg" }, + { title: "Laravel", image: "assets/brands/language/laravel.svg" }, + { title: "Node.js", image: "assets/brands/language/nodejs.svg" }, + { title: "Express.js", image: "assets/brands/language/express.svg" }, + { title: "Hono", image: "assets/brands/language/hono.svg" }, + { title: "PostgreSQL", image: "assets/brands/language/pgsql.svg" }, + { title: "MySQL", image: "assets/brands/language/mysql.svg" }, + { title: "Vercel", image: "assets/brands/language/vercel.svg" }, + { title: "Netlify", image: "assets/brands/language/netlify.svg" }, + { title: "Worker", image: "assets/brands/language/cloudflare-workers.svg" }, + { title: "Github", image: "assets/brands/language/github.svg" }, + { title: "Ubuntu", image: "assets/brands/language/ubuntu.svg" }, + { title: "Nginx", image: "assets/brands/language/nginx.svg" }, + { title: "C#", image: "assets/brands/language/csharp.svg" }, + { title: "C++", image: "assets/brands/language/cpp.svg" }, + { title: "Python", image: "assets/brands/language/python.svg" }, + { title: "Git", image: "assets/brands/language/git.svg" }, + { title: "GitLab", image: "assets/brands/language/gitlab.svg" } ] } ] @@ -126,10 +128,10 @@ export const AboutTimeline = () => {
- {experiences.map(({ works, title, companyLogo }, index) => ( + {experiences.map(({ works, title, logo }, index) => (
- {companyLogo && Avatar} + {logo && Avatar}

{title}

diff --git a/src/components/ui/experience-card.tsx b/src/components/ui/experience-card.tsx index 55468b1..8358b63 100644 --- a/src/components/ui/experience-card.tsx +++ b/src/components/ui/experience-card.tsx @@ -1,18 +1,9 @@ +import { WorkExperience } from "@/lib/interfaces/skills"; import Image from "next/image"; - -interface SkillsType { - title: string; - icon: string; -} - -interface ExperienceCardProps { - title: string; - date: string; - skills: SkillsType[]; -} +import React, { ReactElement, SVGProps } from "react"; export const ExperienceCard = ( - { title, date, skills }: ExperienceCardProps + { title, date, skills }: WorkExperience ) => { return ( @@ -37,12 +28,23 @@ export const ExperienceCard = (

+ Basic Skills

- {skills.map(({ icon, title }, key) => -
- {icon && ({title})} - {title} -
- )} + {skills.map(({ image, icon, title }, key) => { + return ( +
+ {icon && React.isValidElement(icon) ? React.cloneElement(icon as ReactElement>,) : null} + {!icon && image && ( + {title} + )} + {title} +
+ ) + })}
diff --git a/src/lib/interfaces/skills.ts b/src/lib/interfaces/skills.ts new file mode 100644 index 0000000..bddef83 --- /dev/null +++ b/src/lib/interfaces/skills.ts @@ -0,0 +1,18 @@ +export interface SkillsType { + title: string; + icon?: React.SVGProps; + image?: string; +} + +export interface WorkExperience { + date: string; + title: string; + skills: SkillsType[]; +} + +export interface CompaniesProps { + title: string; + date?: string; + logo: string; + works: WorkExperience[]; +} \ No newline at end of file