'use client';
import { motion } from 'motion/react';
import {
Timeline,
TimelineCard,
TimelineCardBody,
TimelineCardIndex,
TimelineContainer,
TimelineProgress,
} from '@/components/systaliko-ui/blocks/timeline';
const AmazonIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
>
<path d="M15.6262 14.6201C14.5191 16.2386 12.8976 17.0042 11.0007 17.0042C8.69659 17.0042 6.7243 15.2315 7.00788 12.8803C7.32248 10.272 9.34731 9.14962 12.716 8.73726C13.3171 8.66367 13.566 8.64299 14.8629 8.54691C14.9116 8.54331 14.9575 8.53988 15.001 8.5366C15.0008 8.46544 15.0007 8.39386 15.0007 8.32185C15.0007 6.52595 13.9328 5.30005 12.5007 5.30005C11.0638 5.30005 10.0603 6.0474 9.44592 7.82645L7.55546 7.17365C8.44288 4.60377 10.1935 3.30005 12.5007 3.30005C15.1034 3.30005 17.0007 5.47803 17.0007 8.32185C17.0007 10.9707 17.164 13.0776 17.484 13.8794C17.84 14.7715 17.9698 14.9959 18.3677 15.4921L16.8075 16.7434C16.2843 16.091 16.0549 15.6945 15.6264 14.6207L15.6262 14.6201ZM21.2572 20.5453C20.9864 20.7452 20.5157 20.6263 20.7288 20.1048C20.9934 19.4569 21.2755 18.6971 20.9911 18.3527C20.7807 18.098 20.5235 17.9711 19.9637 17.9711C19.5041 17.9711 19.2733 18.0305 18.9688 18.0508C18.7646 18.0645 18.6753 17.7537 18.8775 17.6109C19.1393 17.426 19.4216 17.2811 19.7483 17.1833C20.8979 16.8389 22.253 17.0276 22.4172 17.2658C22.7826 17.7959 22.2189 19.835 21.2572 20.5453ZM20.0754 19.4608C19.8136 19.7164 19.5299 19.9496 19.2462 20.156C17.1235 21.7716 14.3748 22.6169 11.9875 22.6169C8.14505 22.6169 4.70765 20.8226 2.10014 17.8212C1.87644 17.5906 2.06133 17.2555 2.32314 17.4369C5.13247 19.5136 8.6108 20.7699 12.2112 20.7699C14.4772 20.7699 16.9195 20.2329 19.2462 19.0775C19.4085 19.0007 19.5906 18.8961 19.7501 18.8228C20.117 18.6128 20.4395 19.1293 20.0754 19.4608ZM15.0107 10.5414C13.7522 10.6347 13.5147 10.6544 12.959 10.7224C10.4062 11.0349 9.16175 11.7247 8.99349 13.1198C8.86763 14.1633 9.80321 15.0042 11.0007 15.0042C13.0397 15.0042 14.5179 13.7764 15.0227 10.5406C15.0187 10.5409 15.0147 10.5411 15.0107 10.5414Z"></path>
</svg>
);
};
const GoogleIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
>
<path d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z"></path>
</svg>
);
};
const AppleIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
>
<path d="M15.778 8.20793C15.3053 8.1711 14.7974 8.28434 14.0197 8.58067C14.085 8.55577 13.2775 8.87173 13.0511 8.95077C12.5494 9.12593 12.1364 9.22198 11.6734 9.22198C11.2151 9.22198 10.7925 9.13042 10.3078 8.96683C10.1524 8.91441 9.99616 8.8564 9.80283 8.7809C9.71993 8.74852 9.41997 8.62947 9.3544 8.60379C8.70626 8.34996 8.34154 8.25434 8.03885 8.26181C6.88626 8.2765 5.79557 8.9421 5.16246 10.0442C3.87037 12.2875 4.58583 16.3428 6.47459 19.075C7.4802 20.5189 8.03062 21.035 8.25199 21.0279C8.4743 21.0183 8.63777 20.9713 9.03567 20.8026C9.11485 20.7689 9.11485 20.7689 9.202 20.7317C10.2077 20.3032 10.9118 20.114 11.9734 20.114C12.9944 20.114 13.6763 20.2997 14.6416 20.7159C14.7302 20.7542 14.7302 20.7542 14.8097 20.7884C15.2074 20.9588 15.3509 20.9962 15.6016 20.9902C15.9591 20.9846 16.4003 20.5726 17.3791 19.1362C17.6471 18.7447 17.884 18.3333 18.0895 17.9168C17.9573 17.8077 17.826 17.6917 17.6975 17.5693C16.4086 16.3408 15.6114 14.6845 15.5895 12.6391C15.5756 11.0186 16.1057 9.61487 16.999 8.45797C16.6293 8.3142 16.2216 8.23805 15.778 8.20793ZM15.9334 6.21398C16.6414 6.26198 18.6694 6.47798 19.9894 8.40998C19.8814 8.46998 17.5654 9.81397 17.5894 12.622C17.6254 15.982 20.5294 17.098 20.5654 17.11C20.5414 17.194 20.0974 18.706 19.0294 20.266C18.1054 21.622 17.1454 22.966 15.6334 22.99C14.1454 23.026 13.6654 22.114 11.9734 22.114C10.2694 22.114 9.74138 22.966 8.33738 23.026C6.87338 23.074 5.76938 21.562 4.83338 20.218C2.92538 17.458 1.47338 12.442 3.42938 9.04597C4.40138 7.35397 6.12938 6.28598 8.01338 6.26198C9.44138 6.22598 10.7974 7.22198 11.6734 7.22198C12.5374 7.22198 14.0854 6.06998 15.9334 6.21398ZM14.7934 4.38998C14.0134 5.32598 12.7414 6.05798 11.5054 5.96198C11.3374 4.68998 11.9614 3.35798 12.6814 2.52998C13.4854 1.59398 14.8294 0.897976 15.9454 0.849976C16.0894 2.14598 15.5734 3.45398 14.7934 4.38998Z"></path>
</svg>
);
};
const work_history = [
{
id: 'work-history-1',
position: 'Senior Software Engineer',
company: 'Amazon',
icon: AmazonIcon,
periode: '2019 - 2022',
description:
"my main role was to lead the development of the Amazon Echo smart speaker, which was a massive project that required a team of over 100 engineers. I was responsible for the design, development, and testing of the Echo's voice assistant, as well as the integration of Amazon's Alexa and Google Assistant services.",
},
{
id: 'work-history-2',
position: 'Staff Software Engineer',
company: 'Google',
icon: GoogleIcon,
periode: '2022 - 2023',
description:
"I was responsible for the development of the Google Assistant voice assistant, which was a massive project that required a team of over 100 engineers. I was responsible for the design, development, and testing of the Assistant's voice assistant, as well as the integration of Google's Assistant and Amazon's Alexa services.",
},
{
id: 'work-history-3',
position: 'Principal Software Engineer',
company: 'Apple',
icon: AppleIcon,
periode: '2023 - Present',
description:
"I was responsible for the development of the Apple's Siri voice assistant, which was a massive project that required a team of over 100 engineers. I was responsible for the design, development, and testing of the Siri's voice assistant, as well as the integration of Apple's Siri and Amazon's Alexa services.",
},
];
export function TimelineDemo() {
return (
<div className="py-12">
<Timeline className="mx-auto md:w-3/5">
<TimelineProgress className=" bg-muted w-1 *:bg-blue-300" />
<TimelineContainer className="flex flex-col gap-6">
{work_history.map((wh) => {
const Icon = wh.icon;
return (
<TimelineCard key={wh.id} className=" ">
<TimelineCardIndex>
<Icon className="size-6 text-muted-foreground" />
</TimelineCardIndex>
<TimelineCardBody>
<motion.div
className="flex flex-col gap-6"
initial={{ opacity: 0.2 }}
viewport={{ amount: 'all' }}
whileInView={{ opacity: 1 }}
>
<div className="flex items-center gap-2">
<h3 className="text-xl font-medium">{wh.position}</h3>
<p className="uppercase">{wh.company}</p>
<p className="text-muted-foreground ml-auto">
{wh.periode}
</p>
</div>
<div className="">
<p className="">{wh.description}</p>
</div>
</motion.div>
</TimelineCardBody>
</TimelineCard>
);
})}
</TimelineContainer>
</Timeline>
</div>
);
}