1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5658],{44165:(e,i,t)=>{"use strict";t.d(i,{default:()=>g});var s=t(95155),r=t(12115),a=t(5772),l=t(91337);let n=function({width:e=16,height:i=16,x:t=0,y:a=0,cx:n=1,cy:o=1,cr:d=1,className:c,...m}){let x=(0,r.useId)();return(0,s.jsxs)("svg",{"aria-hidden":"true",className:(0,l.cn)("pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80",c),...m,children:[(0,s.jsx)("defs",{children:(0,s.jsx)("pattern",{id:x,width:e,height:i,patternUnits:"userSpaceOnUse",patternContentUnits:"userSpaceOnUse",x:t,y:a,children:(0,s.jsx)("circle",{id:"pattern-circle",cx:n,cy:o,r:d})})}),(0,s.jsx)("rect",{width:"100%",height:"100%",strokeWidth:0,fill:`url(#${x})`})]})};var o=t(22303),d=t(44952),c=t(39449),m=t(33210),x=t(56558),p=t(6962);let h=({isOpen:e,onClose:i})=>{let[t,a]=(0,r.useState)(!1),l=(0,d.m)();return(0,r.useEffect)(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="unset",()=>{document.body.style.overflow="unset"}),[e]),(0,s.jsx)(c.N,{children:e&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.P.div,{initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},onClick:i,className:"fixed inset-0 bg-black/60 backdrop-blur-sm z-50"}),(0,s.jsx)(o.P.div,{drag:"y",dragControls:l,dragListener:!1,dragConstraints:{top:0,bottom:0},dragElastic:.2,onDragEnd:(e,s)=>{let r=s.offset.y,l=s.velocity.y;r<-50||l<-500?a(!0):(r>50||l>500)&&(t?a(!1):i())},initial:{y:"100%"},animate:{y:t?"0%":"10%"},exit:{y:"100%"},transition:{type:"spring",damping:25,stiffness:200},className:"fixed inset-x-0 bottom-0 z-50 h-[100dvh] flex justify-center pointer-events-none",children:(0,s.jsxs)("div",{className:"relative w-full max-w-4xl h-full bg-[#8B5E3C] rounded-t-3xl shadow-2xl pointer-events-auto flex flex-col items-center pt-16 px-2 sm:px-6 pb-0 overflow-hidden border-t-8 border-[#6F4E37]",children:[(0,s.jsx)("div",{onPointerDown:e=>l.start(e),className:"absolute top-0 left-1/2 -translate-x-1/2 w-40 h-14 bg-gradient-to-b from-gray-300 to-gray-400 rounded-b-2xl shadow-xl z-20 flex items-center justify-center border-b-4 border-gray-500 cursor-grab active:cursor-grabbing touch-none",children:(0,s.jsx)("div",{className:"w-28 h-4 bg-black/20 rounded-full shadow-inner"})}),(0,s.jsx)("button",{onClick:i,className:"absolute top-6 right-6 p-2 bg-black/20 hover:bg-black/30 text-white rounded-full transition-colors z-30",children:(0,s.jsx)(m.A,{size:24})}),(0,s.jsxs)("div",{className:"w-full h-full bg-white shadow-[0_-5px_15px_rgba(0,0,0,0.1)] rounded-t-lg relative overflow-hidden flex flex-col",children:[(0,s.jsxs)("div",{onPointerDown:e=>l.start(e),className:"flex justify-between items-center p-4 border-b bg-gray-50 cursor-grab active:cursor-grabbing touch-none",children:[(0,s.jsxs)("h2",{className:"text-gray-800 font-bold text-lg flex items-center gap-2",children:[(0,s.jsx)(x.A,{className:"w-5 h-5 text-gray-500"}),"Curriculum Vitae"]}),(0,s.jsxs)("a",{href:"/file/Fikri Ilham Arifin-CV.pdf",download:!0,className:"flex items-center gap-2 text-sm font-medium text-white bg-[#8B5E3C] hover:bg-[#6F4E37] px-4 py-2 rounded-md transition-colors",children:[(0,s.jsx)(p.A,{size:16}),"Download PDF"]})]}),(0,s.jsx)("div",{className:"flex-1 w-full h-full bg-gray-100 overflow-y-auto p-0 sm:p-4",children:(0,s.jsx)("iframe",{src:"/file/Fikri Ilham Arifin-CV.pdf",className:"w-full h-full min-h-[500px] rounded shadow-sm bg-white",title:"CV"})})]})]})})]})})},g=()=>{let[e,i]=(0,r.useState)(!1);return(0,s.jsxs)("section",{id:"home",className:"relative w-full min-h-screen flex flex-col justify-center overflow-hidden pt-20 lg:pt-0",children:[(0,s.jsx)(n,{className:(0,l.cn)("absolute inset-0 h-full w-full opacity-20","[mask-image:radial-gradient(600px_circle_at_center,white,transparent)]")}),(0,s.jsxs)("div",{className:"container mx-auto px-4 sm:px-8 lg:px-20 relative z-10 grid lg:grid-cols-2 gap-12 items-center",children:[(0,s.jsxs)(o.P.div,{initial:{opacity:0,x:-50},animate:{opacity:1,x:0},transition:{duration:.8,ease:"easeOut"},className:"space-y-6 text-center lg:text-left order-2 lg:order-1",children:[(0,s.jsx)("h3",{className:"text-xl md:text-2xl font-medium text-primary tracking-wide",children:"Front-End Developer"}),(0,s.jsxs)("h1",{className:"text-5xl md:text-7xl font-bold tracking-tight leading-tight",children:["Fikri Ilham ",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"text-gradient",children:"Arifin"})]}),(0,s.jsxs)("p",{className:"text-lg md:text-xl text-muted-foreground max-w-lg mx-auto lg:mx-0 leading-relaxed",children:["Computer Science Student passionate about ",(0,s.jsx)("span",{className:"text-foreground font-semibold",children:"Web Development"})," & ",(0,s.jsx)("span",{className:"text-foreground font-semibold",children:"Cybersecurity"}),". Building digital experiences that matter."]}),(0,s.jsxs)("div",{className:"flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pt-4",children:[(0,s.jsx)("a",{href:"#contact",className:"px-8 py-3 rounded-full bg-primary text-primary-foreground font-semibold hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/25",children:"Let's Connect"}),(0,s.jsx)("div",{className:"flex items-center gap-4 justify-center",children:[{name:"github",url:"https://github.com/UnFik"},{name:"linkedin",url:"https://www.linkedin.com/in/fikri-ilham-arifin-27e/"},{name:"instagram",url:"https://instagram.com/fikritings"}].map(e=>(0,s.jsx)("a",{href:e.url,target:"_blank",rel:"noopener noreferrer",className:"p-3 rounded-full bg-secondary/50 hover:bg-secondary transition-colors border border-white/5",children:(0,s.jsx)(a.default,{src:`/assets/${e.name}.svg`,width:20,height:20,alt:e.name,className:"w-5 h-5 invert dark:invert-0"})},e.name))})]})]}),(0,s.jsx)(o.P.div,{initial:{opacity:0,scale:.8}
1,animate:{opacity:1,scale:1},transition:{duration:.8,delay:.2},className:"relative order-1 lg:order-2 flex justify-center items-center",children:(0,s.jsxs)(o.P.button,{whileHover:{scale:1.05},whileTap:{scale:.95},onClick:()=>i(!0),className:"relative group cursor-pointer",children:[(0,s.jsx)("div",{className:"absolute -inset-1 bg-gradient-to-r from-primary to-purple-600 rounded-xl blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"}),(0,s.jsxs)("div",{className:"relative px-8 py-8 bg-[#18243a]/90 backdrop-blur-xl rounded-xl leading-none flex items-center divide-x divide-white/10 border border-white/10",children:[(0,s.jsx)("span",{className:"flex items-center space-x-5",children:(0,s.jsx)("span",{className:"pr-6 text-gray-100 text-2xl font-bold tracking-wider",children:"View My CV"})}),(0,s.jsx)("span",{className:"pl-6 text-primary group-hover:text-white transition duration-200 font-medium",children:"Click to Open â"})]})]})})]}),(0,s.jsx)(o.P.div,{initial:{opacity:0,y:50},animate:{opacity:1,y:0},transition:{duration:.8,delay:.4},className:"w-full mt-16 lg:mt-24 py-8 glass-dark border-y border-white/5",children:(0,s.jsx)("div",{className:"container mx-auto flex flex-wrap justify-center gap-12 opacity-70 grayscale hover:grayscale-0 transition-all duration-500"})}),(0,s.jsx)(h,{isOpen:e,onClose:()=>i(!1)})]})}},52200:(e,i,t)=>{"use strict";t.d(i,{default:()=>n});var s=t(95155),r=t(5772),a=t(22303),l=t(6962);let n=()=>(0,s.jsxs)("footer",{id:"contact",className:"py-20 relative overflow-hidden",children:[(0,s.jsx)("div",{className:"absolute inset-0 bg-gradient-to-t from-black to-transparent z-0"}),(0,s.jsxs)("div",{className:"container mx-auto px-4 sm:px-8 lg:px-20 relative z-10",children:[(0,s.jsxs)(a.P.div,{initial:{opacity:0,y:50},whileInView:{opacity:1,y:0},viewport:{once:!0},className:"glass-dark rounded-3xl p-8 md:p-16 border border-white/5 flex flex-col md:flex-row items-center justify-between gap-12",children:[(0,s.jsxs)("div",{className:"space-y-8 max-w-2xl text-center md:text-left",children:[(0,s.jsxs)("div",{className:"space-y-4",children:[(0,s.jsx)("h2",{className:"text-4xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-white to-white/60",children:"Let's work together"}),(0,s.jsx)("p",{className:"text-lg md:text-xl text-muted-foreground leading-relaxed",children:"Have a project in mind or just want to say hi? I'm always open to new opportunities and interesting conversations."})]}),(0,s.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,s.jsxs)("a",{href:"mailto:[email protected]",className:"flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors group",children:[(0,s.jsx)("div",{className:"p-3 rounded-full bg-primary/20 text-primary group-hover:scale-110 transition-transform",children:(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{width:"20",height:"16",x:"2",y:"4",rx:"2"}),(0,s.jsx)("path",{d:"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"})]})}),(0,s.jsxs)("div",{className:"text-left",children:[(0,s.jsx)("div",{className:"text-sm text-muted-foreground",children:"Email me at"}),(0,s.jsx)("div",{className:"text-lg font-semibold",children:"[email protected]"})]})]}),(0,s.jsxs)("a",{href:"https://www.linkedin.com/in/fikri-ilham-arifin-27e/",target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors group",children:[(0,s.jsx)("div",{className:"p-3 rounded-full bg-[#0077b5]/20 text-[#0077b5] group-hover:scale-110 transition-transform",children:(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:(0,s.jsx)("path",{d:"M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"})})}),(0,s.jsxs)("div",{className:"text-left",children:[(0,s.jsx)("div",{className:"text-sm text-muted-foreground",children:"Connect on"}),(0,s.jsx)("div",{className:"text-lg font-semibold",children:"LinkedIn"})]})]}),(0,s.jsxs)("a",{href:"/file/Fikri Ilham Arifin-CV.pdf",download:!0,className:"flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 transition-colors group",children:[(0,s.jsx)("div",{className:"p-3 rounded-full bg-green-500/20 text-green-500 group-hover:scale-110 transition-transform",children:(0,s.jsx)(l.A,{size:24})}),(0,s.jsxs)("div",{className:"text-left",children:[(0,s.jsx)("div",{className:"text-sm text-muted-foreground",children:"Download"}),(0,s.jsx)("div",{className:"text-lg font-semibold",children:"My CV"})]})]})]})]}),(0,s.jsxs)("div",{className:"relative w-64 h-64 md:w-80 md:h-80 flex-shrink-0",children:[(0,s.jsx)("div",{className:"absolute inset-0 bg-gradient-to-tr from-primary/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"}),(0,s.jsx)(r.default,{src:"/assets/memoji.svg",fill:!0,alt:"Me",className:"object-contain drop-shadow-2xl"})]})]}),(0,s.jsx)("div",{className:"mt-12 text-center text-muted-foreground text-sm",children:(0,s.jsxs)("p",{children:["\xa9 ",new Date().getFullYear()," Fikri Ilham Arifin. All rights reserved."]})})]})]})},60263:(e,i,t)=>{"use strict";t.d(i,{default:()=>d});var s=t(95155),r=t(12115),a=t(39449),l=t(22303),n=t(91337);let o=[{id:"home",label:"Home"},{id:"skill",label:"Skills"},{id:"experience",label:"Experience"},{id:"project",label:"Projects"},{id:"contact",label:"Contact"}],d=()=>{let[e,i]=(0,r.useState)("home");return(0,r.useEffect)(()=>{let e=new IntersectionObserver(e=>
1{e.forEach(e=>{e.isIntersecting&&i(e.target.id)})},{rootMargin:"-50% 0px -50% 0px"});return o.forEach(i=>{let t=document.getElementById(i.id);t&&e.observe(t)}),()=>e.disconnect()},[]),(0,s.jsxs)("div",{className:"fixed right-8 top-1/2 -translate-y-1/2 z-50 hidden lg:flex flex-col gap-6 p-4 rounded-full glass-dark border border-white/10",children:[o.map(i=>(0,s.jsxs)("div",{className:"group flex items-center gap-4 flex-row-reverse relative",children:[(0,s.jsx)(a.N,{children:e===i.id&&(0,s.jsx)(l.P.span,{initial:{opacity:0,x:-10},animate:{opacity:1,x:0},exit:{opacity:0,x:-10},className:"absolute right-12 px-4 py-2 rounded-xl bg-primary text-primary-foreground text-sm font-bold whitespace-nowrap shadow-lg shadow-primary/20",children:i.label})}),(0,s.jsx)("button",{onClick:()=>{var e;let t;return e=i.id,void((t=document.getElementById(e))&&t.scrollIntoView({behavior:"smooth"}))},className:(0,n.cn)("relative w-4 h-4 rounded-full transition-all duration-500",e===i.id?"bg-primary scale-125 shadow-[0_0_20px_rgba(var(--primary),0.6)]":"bg-white/20 hover:bg-white/50 hover:scale-110"),"aria-label":`Scroll to ${i.label}`,children:e===i.id&&(0,s.jsx)(l.P.div,{layoutId:"activeGlow",className:"absolute inset-0 rounded-full bg-primary blur-md",transition:{duration:.5}})})]},i.id)),(0,s.jsx)("div",{className:"absolute top-8 bottom-8 right-[23px] w-[2px] bg-white/5 -z-10 rounded-full overflow-hidden",children:(0,s.jsx)(l.P.div,{className:"w-full bg-gradient-to-b from-transparent via-primary to-transparent opacity-50",animate:{y:["-100%","100%"]},transition:{repeat:1/0,duration:3,ease:"linear"},style:{height:"50%"}})})]})}},63353:(e,i,t)=>{"use strict";t.d(i,{default:()=>o});var s=t(95155);t(12115);var r=t(5772),a=t(22303),l=t(91337);let n=[{company:"Nusapala Berkah Autonomous",role:"Fullstack Developer",period:"Sep 2025 - Present",type:"Contract",location:"Jakarta Timur, Jakarta Raya, Indonesia",description:"Developing desktop and web applications using Wails, React.js, and Golang.",skills:["React.js","Wails","Golang","Docker"]}
1,{company:"UPT TIK UNJ",role:"Fullstack Developer",period:"Dec 2024 - Aug 2025",type:"Internship",location:"Jakarta, Indonesia",description:"Developed SAKU-PTNBH (Financial Administration System), PPG Filing & Transcript System, and SKPI UNJ System.",skills:["React.js","Next.js","DrizzleORM","PostgreSQL","Elysia","Redis","Docker","BullMQ","tRPC"]},{company:"PT Bank Rakyat Indonesia (Persero) Tbk",role:"Fullstack Developer",period:"Sep 2024 - Dec 2024",type:"Internship",location:"Jakarta Pusat, Jakarta Raya, Indonesia",description:"Developed SAP Compare for historical data comparison and TDC Dashboard for tracking and management.",skills:["Laravel","WebSocket","PostgreSQL","Pusher"]},{company:"Smart Sinergy World",role:"Web Developer",period:"Sep 2023 - Sep 2023",type:"Freelance",location:"Bekasi, Indonesia",description:"Built the company profile website to enhance transparency, improve business communication, and facilitate knowledge sharing.",skills:["Next.js","Web Development","React.js"]},{company:"Kidsera Kindegarten",role:"Frontend Developer",period:"Jul 2022 - Dec 2022",type:"Contract",location:"Jakarta Timur, Indonesia",description:"Designed mockups and developed the Kidsera Dashboard using Vue.js and Ionic Framework.",skills:["Vue.js","Figma","Ionic Framework","Bootstrap","TypeScript"]}],o=()=>(0,s.jsx)("section",{id:"experience",className:"py-20 relative",children:(0,s.jsxs)("div",{className:"container mx-auto px-4 sm:px-8 lg:px-20",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center mb-16 space-y-4 text-center",children:[(0,s.jsx)("div",{className:"p-3 rounded-2xl bg-primary/10 w-fit",children:(0,s.jsx)(r.default,{src:"/assets/handshake.svg",width:40,height:40,alt:"Experience Icon",className:"w-10 h-10"})}),(0,s.jsxs)("h2",{className:"text-3xl md:text-5xl font-bold",children:["Work ",(0,s.jsx)("span",{className:"text-primary",children:"Experience"})]}),(0,s.jsx)("p",{className:"text-muted-foreground max-w-2xl",children:"My professional journey and the organizations I've had the privilege to work with."})]}),(0,s.jsx)("div",{className:"relative space-y-8 before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/10 before:to-transparent",children:n.map((e,i)=>(0,s.jsxs)(a.P.div,{initial:{opacity:0,y:50},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-50px"},transition:{duration:.5,delay:.1*i},className:(0,l.cn)("relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"),children:[(0,s.jsx)("div",{className:"flex items-center justify-center w-10 h-10 rounded-full border border-white/10 bg-background shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10",children:(0,s.jsx)("div",{className:"w-3 h-3 bg-primary rounded-full"})}),(0,s.jsxs)("div",{className:"w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] p-6 rounded-3xl glass-dark border border-white/5 hover:border-primary/30 transition-all duration-300",children:[(0,s.jsxs)("div",{className:"flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 gap-2",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("h3",{className:"font-bold text-xl text-foreground",children:e.role}),(0,s.jsx)("p",{className:"text-primary font-medium",children:e.company})]}),(0,s.jsx)("div",{className:"text-xs font-medium px-3 py-1 rounded-full bg-white/5 text-muted-foreground border border-white/5 whitespace-nowrap",children:e.period})]}),(0,s.jsxs)("div",{className:"flex items-center gap-2 text-xs text-muted-foreground mb-4",children:[(0,s.jsx)("span",{className:"px-2 py-0.5 rounded bg-white/5",children:e.type}),(0,s.jsx)("span",{children:"â¢"}),(0,s.jsx)("span",{children:e.location})]}),(0,s.jsx)("p",{className:"text-muted-foreground text-sm leading-relaxed mb-4",children:e.description}),(0,s.jsx)("div",{className:"flex flex-wrap gap-2",children:e.skills.map(e=>(0,s.jsx)("span",{className:"px-2 py-1 text-xs rounded-md bg-primary/10 text-primary border border-primary/20",children:e},e))})]})]},i))})]})})},77053:(e,i,t)=>{Promise.resolve().then(t.bind(t,63353)),Promise.resolve().then(t.bind(t,52200)),Promise.resolve().then(t.bind(t,44165)),Promise.resolve().then(t.bind(t,93972)),Promise.resolve().then(t.bind(t,60263)),Promise.resolve().then(t.bind(t,92292))},91337:(e,i,t)=>{"use strict";t.d(i,{cn:()=>a});var s=t(29722),r=t(622);function a(...e){return(0,r.QP)((0,s.$)(e))}},92292:(e,i,t)=>{"use strict";t.d(i,{default:()=>d});var s=t(95155);t(12115);var r=t(5772),a=t(22303);let l=[{title:"Frontend Development",skills:[{name:"HTML5",icon:"/origin/html5.svg"},{name:"CSS3",icon:"/origin/css.svg"},{name:"Bootstrap",icon:"/origin/bootstrap.svg"},{name:"Tailwind CSS",icon:"/origin/tailwind.svg"},{name:"Ionic",icon:"/origin/ionic.svg"},{name:"React",icon:"/origin/react.svg"},{name:"Next.js",icon:"/origin/nextjs.svg"},{name:"Laravel",icon:"/origin/laravel.svg"},{name:"Vue.js",icon:"/origin/vue.svg"},{name:"TypeScript",icon:"/origin/typescript.png"}]},{title:"Backend Development",skills:[{name:"Flask",icon:"/origin/flask.svg"},{name:"Laravel",icon:"/origin/laravel.svg"},{name:"Golang",icon:"/origin/go.svg"},{name:"Elysia",icon:"/origin/elysia.svg"},{name:"tRPC",icon:"/origin/trpc.svg"},{name:"Prisma",icon:"/origin/prisma.svg"},{name:"Drizzle",icon:"/origin/drizzle.svg"}]},{title:"Database",skills:[{name:"PostgreSQL",icon:"/origin/postgres.svg"},{name:"MySQL",icon:"/origin/mysql.svg"},{name:"SQLite",icon:"/origin/sqlite.svg"},{name:"Redis",icon:"/origin/redis.svg"}]},{title:"DevOps & Tools",skills:[{name:"Git",icon:"/origin/git.svg"},{name:"GitHub",icon:"/origin/github.svg"},{name:"Vercel",icon:"/origin/vercel.svg"},{name:"Docker",icon:"/origin/docker.svg"},{name:"PM2",icon:"/origin/pm2.svg"},{name:"Nginx",icon:"/origin/nginx.svg"},{name:"Traefik",icon:"/origin/traefik.svg"},{name:"Pusher",icon:"/origin/pusher.svg"},{name:"Sentry",icon:"/origin/sentry.svg"},{name:"Ansible",icon:"/origin/ansible.svg"}]}],n={hidden:{opacity:0}
1,show:{opacity:1,transition:{staggerChildren:.1}}},o={hidden:{opacity:0,y:20},show:{opacity:1,y:0}},d=()=>(0,s.jsx)("section",{id:"skill",className:"py-20 sm:py-0 relative",children:(0,s.jsxs)("div",{className:"container mx-auto px-4 sm:px-8 lg:px-20",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center mb-16 space-y-4 text-center",children:[(0,s.jsx)("div",{className:"p-3 rounded-2xl bg-primary/10 w-fit",children:(0,s.jsx)(r.default,{src:"/assets/skill.svg",width:40,height:40,alt:"Skill Icon",className:"w-10 h-10"})}),(0,s.jsxs)("h2",{className:"text-3xl md:text-5xl font-bold",children:["Tech Stack ",(0,s.jsx)("span",{className:"text-primary",children:"& Tools"})]}),(0,s.jsx)("p",{className:"text-muted-foreground max-w-2xl",children:"Technologies I use to build scalable and performant applications."})]}),(0,s.jsx)("div",{className:"space-y-16",children:l.map((e,i)=>(0,s.jsxs)("div",{className:"space-y-8",children:[(0,s.jsx)(a.P.h3,{initial:{opacity:0,x:-20},whileInView:{opacity:1,x:0},viewport:{once:!0},transition:{delay:.2},className:"text-2xl font-semibold text-center md:text-left pl-4 border-l-4 border-primary",children:e.title}),(0,s.jsx)(a.P.div,{variants:n,initial:"hidden",whileInView:"show",viewport:{once:!0},className:"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6",children:e.skills.map(e=>(0,s.jsxs)(a.P.div,{variants:o,className:"group flex flex-col items-center justify-center p-4 rounded-xl glass-dark hover:bg-white/5 transition-all duration-300 border border-white/5 hover:border-primary/50",children:[(0,s.jsx)("div",{className:"relative w-16 h-16 mb-4 transition-transform duration-300 group-hover:scale-110",children:(0,s.jsx)("div",{className:"bg-[#18243a] rounded-lg w-full h-full flex items-center justify-center p-3",children:(0,s.jsx)("div",{className:"relative w-full h-full",children:(0,s.jsx)(r.default,{src:e.icon,fill:!0,alt:e.name,className:"object-contain rounded-lg"})})})}),(0,s.jsx)("span",{className:"text-sm font-medium text-muted-foreground group-hover:text-foreground capitalize",children:e.name})]},e.name))})]},i))})]})})},93972:(e,i,t)=>{"use strict";t.d(i,{default:()=>c});var s=t(95155),r=t(5772);t(12115);var a=t(30677);t(33520),t(55214);var l=t(81895),n=t(22303),o=t(91337);let d=[{title:"SAKU TAGIHAN PTNBH",description:"Information System for managing billing and payment at Universitas State of Jakarta.",images:["saku1.png","saku2.png"],demoLink:"https://saku.ptnbh.ac.id/",technologies:["react","tailwind","elysia","drizzle","postgres"],color:"from-green-500/20 to-emerald-500/5"},{title:"SKPI UNJ",description:"Information System for managing Diploma Supplement Certificates as one of the graduation requirements.",images:["skpi1.png","skpi2.png","skpi3.png"],demoLink:"https://skpi.unj.ac.id/",technologies:["nextjs","tailwind","drizzle","postgres","elysia"],color:"from-blue-500/20 to-cyan-500/5"},{title:"PPG UNJ",description:"Web-based application specifically designed to support the documentation and transcript needs of students.",images:["ppg1.png","ppg2.png"],demoLink:"http://103.8.12.205/login",technologies:["nextjs","tailwind","trpc","drizzle","postgres"],color:"from-purple-500/20 to-violet-500/5"},{title:"SSW Company Profile",description:"Comprehensive online platform designed to provide a clear and detailed insight into the community.",images:["ssw1.svg","ssw2.svg","ssw3.svg"],demoLink:"https://ssw-web.fikriilhamarifin27.workers.dev/",technologies:["nextjs","tailwind","vercel"],color:"from-yellow-500/20 to-orange-500/5"}],c=()=>(0,s.jsx)("section",{id:"project",className:"py-20 relative",children:(0,s.jsxs)("div",{className:"container mx-auto px-4 sm:px-8 lg:px-20",children:[(0,s.jsxs)("div",{className:"flex flex-col items-center mb-16 space-y-4 text-center",children:[(0,s.jsx)("div",{className:"p-3 rounded-2xl bg-primary/10 w-fit",children:(0,s.jsx)(r.default,{src:"/assets/project.svg",width:40,height:40,alt:"Project Icon",className:"w-10 h-10"})}),(0,s.jsxs)("h2",{className:"text-3xl md:text-5xl font-bold",children:["Highlighted ",(0,s.jsx)("span",{className:"text-primary",children:"Projects"})]}),(0,s.jsx)("p",{className:"text-muted-foreground max-w-2xl",children:"A selection of projects I've worked on, ranging from web apps to system integrations."})]}),(0,s.jsx)("div",{className:"space-y-24",children:d.map((e,i)=>(0,s.jsxs)(n.P.div,{initial:{opacity:0,y:50},whileInView:{opacity:1,y:0},viewport:{once:!0,margin:"-100px"},transition:{duration:.6},className:(0,o.cn)("group relative grid lg:grid-cols-2 gap-8 lg:gap-12 items-center p-6 lg:p-10 rounded-3xl border border-white/5","bg-gradient-to-br backdrop-blur-sm",e.color),children:[(0,s.jsxs)("div",{className:"order-2 lg:order-1 space-y-6",children:[(0,s.jsx)("h3",{className:"text-3xl md:text-4xl font-bold",children:e.title}),(0,s.jsx)("p",{className:"text-lg text-muted-foreground leading-relaxed",children:e.description}),(0,s.jsxs)("div",{className:"space-y-4",children:[(0,s.jsx)("h4",{className:"text-sm font-semibold uppercase tracking-wider text-muted-foreground",children:"Technologies"}),(0,s.jsx)("div",{className:"flex flex-wrap gap-3",children:e.technologies.map(e=>(0,s.jsxs)("div",{className:"flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-sm",children:[(0,s.jsx)(r.default,{src:`origin/${e}.svg`,width:16,height:16,alt:e,className:"w-4 h-4"}),(0,s.jsx)("span",{className:"capitalize",children:e})]},e))})]})]}),(0,s.jsx)("div",{className:"order-1 lg:order-2 w-full overflow-hidden rounded-2xl shadow-2xl border border-white/10 bg-black/20",children:(0,s.jsx)(a.RC,{slidesPerView:1,spaceBetween:20,pagination:{clickable:!0},modules:[l.dK],className:"w-full aspect-video",children:e.images.map((i,t)=>(0,s.jsx)(a.qr,{children:(0,s.jsx)("div",{className:"relative w-full h-full",children:(0,s.jsx)(r.default,{src:`/overview/${i}
1`,fill:!0,alt:`${e.title} Screenshot`,className:"object-cover"})})},t))})})]},i))})]})})}},e=>{e.O(0,[7803,1657,1540,8441,3794,7358],()=>e(e.s=77053)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.