(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[931],{6541:function(e,s,l){Promise.resolve().then(l.bind(l,9759))},9759:function(e,s,l){"use strict";l.r(s),l.d(s,{default:function(){return b}});var r=l(7437),i=l(5447),n=l(1369),t=l(3812);let d=e=>{let{children:s,y:l}=e;return(0,r.jsxs)(n.E.p,{className:"relative overflow-hidden",style:{y:l},whileHover:"hover",children:[(0,r.jsx)(n.E.span,{className:"inline-block",variants:{hover:{x:"1%"}},transition:{type:"spring",stiffness:100,damping:10},children:s}),(0,r.jsx)(n.E.span,{className:"inline-block absolute left-0 top-full",variants:{hover:{x:"-1%"}},transition:{type:"spring",stiffness:300,damping:10},children:s})]})};var a=()=>{let{scrollYProgress:e}=(0,i.v)(),s=(0,t.H)(e,[0,1],[0,-1500]),l=(0,t.H)(e,[0,1],[0,1500]),n=(0,t.H)(e,[0,1],[0,-1500]),a=(0,t.H)(e,[0,1],[0,1500]);return(0,r.jsx)("section",{className:"w-screen h-[200vh] flex justify-center items-start pt-[50vh]",children:(0,r.jsxs)("div",{className:"lg:text-[150px] text-[50px] md:text-[100px] flex items-center flex-col text-white font-leferi leading-relaxed fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2",children:[(0,r.jsx)(d,{y:s,children:"HELLO! I'M"}),(0,r.jsx)(d,{y:l,children:"GYEONGWON"}),(0,r.jsx)(d,{y:n,children:"FRONTEND"}),(0,r.jsx)(d,{y:a,children:"DEVELOPER"})]})})},c=l(3433),x=l(2265);let o=e=>{let{title:s,children:l,delay:i}=e,t=(0,x.useRef)(null),d=(0,c.Y)(t,{once:!0,amount:.3});return(0,r.jsx)(n.E.div,{ref:t,className:"flex flex-col gap-y-4 text-white mt-20",variants:{hidden:{opacity:0,y:50},visible:{opacity:1,y:0,transition:{duration:.6,ease:"easeOut",delay:i}}},initial:"hidden",animate:d?"visible":"hidden",children:l})};var h=()=>(0,r.jsx)("section",{className:"w-screen min-h-screen flex justify-left items-center  bg-bgblack",children:(0,r.jsxs)("div",{className:"p-9",children:[(0,r.jsxs)("div",{className:"md:text-7xl text-6xl flex items-left flex-col text-white",children:[(0,r.jsx)("p",{children:"안녕하세요!"}),(0,r.jsxs)("p",{children:[(0,r.jsx)("span",{className:"font-extrabold",children:"배움"}),"을 좋아하는 개발자"]}),(0,r.jsx)("p",{children:"변경원입니다"})]}),(0,r.jsxs)("div",{className:"w-64 flex justify-between mt-6 text-xl font-nexon font-light text-customgreen",children:[(0,r.jsx)("a",{href:"https://github.com/deswaq1220",target:"_blank",children:"github"}),(0,r.jsx)("a",{href:"https://deswaq.tistory.com/",target:"_blank",children:"blog"}),(0,r.jsx)("a",{href:"https://www.rallit.com/resumes/32883@qusruddnjs25/%EB%B3%80%EA%B2%BD%EC%9B%90?theme=MINT_SORBET",target:"_blank",children:"resume"})]}),(0,r.jsxs)("div",{className:"text-white font-nexon mt-20 flex flex-col gap-y-4",children:[(0,r.jsxs)("div",{children:["Email. ",(0,r.jsx)("span",{children:"deswaq789@naver.com"})]}),(0,r.jsxs)("div",{children:["Birth. ",(0,r.jsx)("span",{children:"2000.12.20"})]})]}),(0,r.jsxs)("div",{className:"grid lg:grid-cols-4 gap-4 ",children:[(0,r.jsxs)(o,{delay:0,children:[(0,r.jsx)("span",{className:"text-2xl font-leferi",children:"Skill."}),(0,r.jsxs)("div",{className:"flex gap-1",children:[(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-customgreen/10 px-2 py-1 text-xs font-medium text-customgreen ring-1 ring-inset ring-customgreen",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"익숙해요"]}),(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-custompink/10 px-2 py-1 text-xs font-medium text-custompink ring-1 ring-inset ring-custompink",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1"}),"어느정도 사용할 수 있어요"]}),(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-[#ffd628]/10 px-2 py-1 text-xs font-medium text-[#ffd628] ring-1 ring-inset ring-[#ffd628]",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-[#ffd628] rounded-full mr-1"}),"사용해봤어요"]})]}),(0,r.jsxs)("div",{className:"font-nexon flex flex-wrap gap-4",children:[(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1 block"}),"React"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1 block"}),"TypeScript"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1 block"}),"Javascript"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-[#ffd628] rounded-full mr-1 block"}),"Next.js"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1 block"}),"zustand"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1 block"}),"TanStack Query(react-query)"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"React-Hook-Form"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1 block"}),"vanilla-extract"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"Tailwind CSS"]})]})]}),(0,r.jsxs)(o,{delay:.2,children:[(0,r.jsx)("span",{className:"text-2xl font-leferi",children:"Version Control"}),(0,r.jsx)("div",{className:"flex gap-1",children:(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-custompink/10 px-2 py-1 text-xs font-medium text-custompink ring-1 ring-inset ring-custompink",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1"}),"어느정도 사용할 수 있어요"]})}),(0,r.jsxs)("div",{className:"font-nexon flex flex-wrap gap-4",children:[(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1 block"}),"git"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1 block"}),"github"]})]})]}),(0,r.jsxs)(o,{delay:.4,children:[(0,r.jsx)("span",{className:"text-2xl font-leferi",children:"Communication"}),(0,r.jsxs)("div",{className:"flex gap-1",children:[(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-customgreen/10 px-2 py-1 text-xs font-medium text-customgreen ring-1 ring-inset ring-customgreen",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"익숙해요"]}),(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-custompink/10 px-2 py-1 text-xs font-medium text-custompink ring-1 ring-inset ring-custompink",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1"}),"어느정도 사용할 수 있어요"]})]}),(0,r.jsxs)("div",{className:"font-nexon flex flex-wrap gap-4",children:[(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"Notion"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-custompink rounded-full mr-1"}),"Figma"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"Discord"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"Slack"]})]})]}),(0,r.jsxs)(o,{delay:.6,children:[(0,r.jsx)("span",{className:"text-2xl font-leferi",children:"Deployment"}),(0,r.jsxs)("div",{className:"flex gap-1",children:[(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-customgreen/10 px-2 py-1 text-xs font-medium text-customgreen ring-1 ring-inset ring-customgreen",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"익숙해요"]}),(0,r.jsxs)("span",{className:"inline-flex items-center rounded-2xl bg-[#ffd628]/10 px-2 py-1 text-xs font-medium text-[#ffd628] ring-1 ring-inset ring-[#ffd628]",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-[#ffd628] rounded-full mr-1"}),"사용해봤어요"]})]}),(0,r.jsxs)("div",{className:"font-nexon flex flex-wrap gap-4",children:[(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-[#ffd628] rounded-full mr-1"}),"AWS Web Service"]}),(0,r.jsxs)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl flex items-center",children:[(0,r.jsx)("span",{className:"w-2 h-2 bg-customgreen rounded-full mr-1"}),"Vercel"]})]})]})]})]})}),m=()=>{let e=(0,x.useRef)(null),s=(0,c.Y)(e,{once:!0,amount:.5}),l={hidden:{y:-20,opacity:0},visible:{y:0,opacity:1,transition:{duration:.5,ease:"easeOut"}}};return(0,r.jsx)("section",{className:"w-screen h-screen flex justify-center items-center bg-bgblack",children:(0,r.jsx)("div",{className:"p-9",children:(0,r.jsx)(n.E.div,{ref:e,className:"text-9xl flex items-left flex-col text-white",variants:{hidden:{opacity:0},visible:{opacity:1,transition:{staggerChildren:.1}}},initial:"hidden",animate:s?"visible":"hidden",children:(0,r.jsx)("div",{className:"font-leferi font-bold flex lg:text-[150px] text-8xl",children:"Project.".split("").map((e,s)=>(0,r.jsx)(n.E.span,{variants:l,children:e},s))})})})})},p=l(1906),u=l(5318),f=()=>{let e=(0,p.c)(0),s=(0,p.c)(0),l={damping:25,stiffness:400},i=(0,u.q)(e,l),t=(0,u.q)(s,l),d=l=>{e.set(l.clientX),s.set(l.clientY)};return(0,x.useEffect)(()=>(window.addEventListener("mousemove",d),()=>{window.removeEventListener("mousemove",d)}),[d]),(0,r.jsx)(n.E.div,{className:"w-16 h-16 rounded-full fixed z-[9999] bg-white mix-blend-difference pointer-events-none",style:{left:i,top:t,translateX:"-50%",translateY:"-50%"}})},g=()=>{let e=(0,x.useRef)(null),s=(0,x.useRef)(null),l=(0,x.useRef)(null),i=(0,c.Y)(e,{once:!0,margin:"-100px"}),t=(0,c.Y)(s,{once:!0,margin:"-100px"}),d=(0,c.Y)(l,{once:!0,margin:"-100px"}),a={hidden:{rotateY:90,opacity:0},visible:{rotateY:0,opacity:1,transition:{duration:.6,ease:"easeOut"}}};return(0,r.jsxs)("section",{className:"w-screen bg-bgblack p-9 ",children:[(0,r.jsxs)("div",{className:"flex flex-col gap-10",children:[(0,r.jsx)("div",{className:"w-full",children:(0,r.jsxs)(n.E.div,{className:"lg:w-3/6 px-8 py-10 rounded-3xl font-medium ring-2 ring-inset ring-customgreen font-nexon text-sm relative",ref:e,variants:a,initial:"hidden",animate:i?"visible":"hidden",style:{perspective:1e3},children:[(0,r.jsx)("div",{className:"bg-bgblack text-white p-2 absolute top-[-15px]",children:"2024. 09. 02 ~ 2024. 09. 27 ( FE 5명 )"}),(0,r.jsxs)("div",{className:"flex flex-col gap-y-2",children:[(0,r.jsx)("p",{className:"font-dnf text-2xl text-customgreen",children:"펄핏 사이즈 B2C 웹 어플리케이션 개발"}),(0,r.jsx)("p",{className:"text-white",children:"LLM기반의 챗봇과 대화를 통해 원하는 신발을 찾는 서비스"}),(0,r.jsxs)("div",{className:"flex gap-1 flex-wrap",children:[(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"React"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Typescript"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Tanstack-Query"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Zustand"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Yarn"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Vanilla-ExtractCSS"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"FireBase"})]}),(0,r.jsxs)("ul",{className:"text-white flex flex-col gap-2",children:[(0,r.jsx)("li",{children:"AI 챗봇 1:1 채팅 서비스 구현"}),(0,r.jsx)("li",{children:"채팅 서비스 사진 업로드 리사이징 기능구현"}),(0,r.jsx)("li",{children:"채팅방 목록 로딩 UX 개선"}),(0,r.jsx)("li",{children:"내 발 측정 SDK 연동"}),(0,r.jsx)("li",{children:"Github Action, AWS S3를 이용한 프론트엔드 CI/CD 배포"})]})]}),(0,r.jsxs)("div",{className:"flex gap-4 absolute bottom-[-18px] right-10",children:[(0,r.jsx)("a",{href:"https://github.com/Perfitt-11-supreme/11-supreme",target:"_blank",children:(0,r.jsx)("div",{className:"fill-customgreen  bg-bgblack cursor-pointer ",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"40",height:"40",children:(0,r.jsx)("path",{d:"M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"})})})}),(0,r.jsx)("a",{href:"https://11-supreme.vercel.app/",target:"_blank",children:(0,r.jsx)("div",{className:"fill-customgreen bg-bgblack cursor-pointer",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"40",height:"40",children:(0,r.jsx)("path",{d:"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1Zm3.241 10.5v-.001c-.1-2.708-.992-4.904-1.89-6.452a13.919 13.919 0 0 0-1.304-1.88L12 3.11l-.047.059c-.354.425-.828 1.06-1.304 1.88-.898 1.547-1.79 3.743-1.89 6.451Zm-12.728 0h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5Zm18.974 0C21.254 7 17.89 3.329 13.53 2.623c.339.44.729 1.001 1.119 1.673.993 1.714 1.993 4.167 2.093 7.204ZM8.787 13c.182 2.478 1.02 4.5 1.862 5.953.382.661.818 1.29 1.304 1.88l.047.057.047-.059c.354-.425.828-1.06 1.304-1.88.842-1.451 1.679-3.471 1.862-5.951Zm-1.504 0H2.552a9.505 9.505 0 0 0 7.918 8.377 15.773 15.773 0 0 1-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13Zm9.434 0c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.506 9.506 0 0 0 21.447 13Z"})})})})]})]})}),(0,r.jsx)("div",{className:"w-full flex justify-end",children:(0,r.jsxs)(n.E.div,{className:"lg:w-3/6 px-8 py-10 rounded-3xl font-medium ring-2 ring-inset ring-custompurple font-nexon text-sm relative ",ref:s,variants:{hidden:{rotateY:-90,opacity:0},visible:{rotateY:0,opacity:1,transition:{duration:.6,ease:"easeOut"}}},initial:"hidden",animate:t?"visible":"hidden",style:{perspective:1e3},children:[(0,r.jsx)("div",{className:"bg-bgblack text-white p-2 absolute top-[-15px]",children:"2024. 05. 02 ~ 2024. 05. 31 ( FE 2명 BE 2명 )"}),(0,r.jsxs)("div",{className:"flex flex-col gap-y-2",children:[(0,r.jsx)("p",{className:"font-dnf text-2xl text-custompurple",children:"CoatyCloset"}),(0,r.jsx)("p",{className:"text-white",children:"구하기 어렵거나 비싼 아이템들을 대여비를 받고 빌려주는 행위를 통해, 많은 사람들이 다양한 스타일을 즐기 수 있는 옷 대여 서비스"}),(0,r.jsxs)("div",{className:"flex gap-1 flex-wrap",children:[(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"React"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Typescript"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Tanstack-Query"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Zustand"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Yarn"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"MSW"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"TailwindCSS"})]}),(0,r.jsxs)("ul",{className:"text-white flex flex-col gap-2",children:[(0,r.jsx)("li",{children:"oauth2를 이용한 소셜(카카오,구글,네이버)로그인 구현"}),(0,r.jsx)("li",{children:"채팅 서비스 사진 업로드 리사이징 기능구현"}),(0,r.jsx)("li",{children:"실시간 1:N 채팅 서비스 구현"}),(0,r.jsx)("li",{children:"Eslint 규칙 설정 및 통일화"}),(0,r.jsx)("li",{children:"msw기반 모킹 데이터 활용 환경 구축"}),(0,r.jsx)("li",{children:"react-hook-form 기반 폼 최적화"})]})]}),(0,r.jsxs)("div",{className:"flex gap-4 justify-center absolute bottom-[-18px] right-10",children:[(0,r.jsx)("a",{href:"https://github.com/OZ-01-Team3/oz-main_project-fe",target:"_blank",children:(0,r.jsx)("div",{className:"fill-custompurple  bg-bgblack cursor-pointer ",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"40",height:"40",children:(0,r.jsx)("path",{d:"M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"})})})}),(0,r.jsx)("a",{href:"https://www.youtube.com/watch?v=ZY1WFfpNE68",target:"_blank",children:(0,r.jsx)("div",{className:"fill-custompurple bg-bgblack cursor-pointer",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"40",height:"40",children:(0,r.jsx)("path",{d:"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1Zm3.241 10.5v-.001c-.1-2.708-.992-4.904-1.89-6.452a13.919 13.919 0 0 0-1.304-1.88L12 3.11l-.047.059c-.354.425-.828 1.06-1.304 1.88-.898 1.547-1.79 3.743-1.89 6.451Zm-12.728 0h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5Zm18.974 0C21.254 7 17.89 3.329 13.53 2.623c.339.44.729 1.001 1.119 1.673.993 1.714 1.993 4.167 2.093 7.204ZM8.787 13c.182 2.478 1.02 4.5 1.862 5.953.382.661.818 1.29 1.304 1.88l.047.057.047-.059c.354-.425.828-1.06 1.304-1.88.842-1.451 1.679-3.471 1.862-5.951Zm-1.504 0H2.552a9.505 9.505 0 0 0 7.918 8.377 15.773 15.773 0 0 1-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13Zm9.434 0c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.506 9.506 0 0 0 21.447 13Z"})})})})]})]})}),(0,r.jsx)("div",{className:"w-full flex justify-start",children:(0,r.jsxs)(n.E.div,{className:"lg:w-3/6 px-8 py-10 rounded-3xl font-medium ring-2 ring-inset ring-custompink font-nexon text-sm relative ",ref:l,variants:a,initial:"hidden",animate:d?"visible":"hidden",style:{perspective:1e3},children:[(0,r.jsx)("div",{className:"bg-bgblack text-white p-2 absolute top-[-15px]",children:"2024. 03. 26 ~ 2024. 04. 30 ( FE 2명 BE 2명 )"}),(0,r.jsxs)("div",{className:"flex flex-col gap-y-2",children:[(0,r.jsx)("p",{className:"font-dnf text-2xl text-custompink",children:"Red-Ribbon"}),(0,r.jsx)("p",{className:"text-white",children:"자신만의 한달 예산과 고정지출을 정하고 나의 소비습관을 확인할 수 있는 가계부 서비스"}),(0,r.jsxs)("div",{className:"flex gap-1 flex-wrap",children:[(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"React"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Typescript"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Tanstack-Query"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Zustand"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Yarn"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"MSW"}),(0,r.jsx)("div",{className:"px-2.5 py-1.5 border border-white-1 rounded-2xl bg-white",children:"Vanilla-ExtractCSS"})]}),(0,r.jsxs)("ul",{className:"text-white flex flex-col gap-2",children:[(0,r.jsx)("li",{children:"oauth2를 이용한 소셜(카카오)로그인 구현"}),(0,r.jsx)("li",{children:"예산,고정지출,지출 CRUD"}),(0,r.jsx)("li",{children:"실시간 1:N 채팅 서비스 구현"}),(0,r.jsx)("li",{children:"vercel을 이용한 프론트엔드 배포"})]})]}),(0,r.jsxs)("div",{className:"flex gap-4 absolute bottom-[-18px] right-10",children:[(0,r.jsx)("a",{href:"https://github.com/OZ-Coding-School/oz_01_collabo-008",target:"_blank",children:(0,r.jsx)("div",{className:"fill-custompink  bg-bgblack cursor-pointer ",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"40",height:"40",children:(0,r.jsx)("path",{d:"M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"})})})}),(0,r.jsx)("a",{href:"https://youtu.be/LRs0TQw6nOc",target:"_blank",children:(0,r.jsx)("div",{className:"fill-custompink bg-bgblack cursor-pointer",children:(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"40",height:"40",children:(0,r.jsx)("path",{d:"M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1Zm3.241 10.5v-.001c-.1-2.708-.992-4.904-1.89-6.452a13.919 13.919 0 0 0-1.304-1.88L12 3.11l-.047.059c-.354.425-.828 1.06-1.304 1.88-.898 1.547-1.79 3.743-1.89 6.451Zm-12.728 0h4.745c.1-3.037 1.1-5.49 2.093-7.204.39-.672.78-1.233 1.119-1.673C6.11 3.329 2.746 7 2.513 11.5Zm18.974 0C21.254 7 17.89 3.329 13.53 2.623c.339.44.729 1.001 1.119 1.673.993 1.714 1.993 4.167 2.093 7.204ZM8.787 13c.182 2.478 1.02 4.5 1.862 5.953.382.661.818 1.29 1.304 1.88l.047.057.047-.059c.354-.425.828-1.06 1.304-1.88.842-1.451 1.679-3.471 1.862-5.951Zm-1.504 0H2.552a9.505 9.505 0 0 0 7.918 8.377 15.773 15.773 0 0 1-1.119-1.673C8.413 18.085 7.47 15.807 7.283 13Zm9.434 0c-.186 2.807-1.13 5.085-2.068 6.704-.39.672-.78 1.233-1.118 1.673A9.506 9.506 0 0 0 21.447 13Z"})})})})]})]})})]}),(0,r.jsx)("div",{className:"mt-20 border-t border-white/15 text-customgreen py-4 font-dnf flex justify-center",children:(0,r.jsx)("p",{children:"Copyright ⓒ 2024. GyeongWon all rights reserved."})})]})};function b(){let{scrollYProgress:e}=(0,i.v)();return(0,r.jsxs)("div",{className:"w-full font-pre",children:[(0,r.jsx)(n.E.div,{className:"fixed top-0 left-0 right-0 h-[10px] bg-customgreen origin-left bg",style:{scaleX:e}}),(0,r.jsx)(f,{}),(0,r.jsxs)("div",{className:" bg-bgblack",children:[(0,r.jsx)(a,{}),(0,r.jsx)(h,{}),(0,r.jsx)(m,{}),(0,r.jsx)(g,{})]})]})}}},function(e){e.O(0,[529,971,117,744],function(){return e(e.s=6541)}),_N_E=e.O()}]);