반응형 Project Project/portfolio 2023. 11. 1. 포트폴리오 Vercel 배포하기 | No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies" HTML 삽입 미리보기할 수 없는 소스 No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies" 이 오류는 처음 배포 설정 시 root directory를 최상단 폴더명으로 설정해야 오류가 해결된다 ! 예를 들어 Portfolio가 폴더명이라면 ./Portfolio 이렇게 그러면 Vercel로 배포가 완료된다 ~! Project/portfolio 2023. 10. 31. 포트폴리오 Footer 만들기 HTML 삽입 미리보기할 수 없는 소스 Footer 컴포넌트 import React from "react"; export default function Footer() { return ( © 2023 Choi Hanseul. All rights reserved. About this website: built with React & Next.js (App Router & Server Actions), TypeScript, Tailwind CSS, Framer Motion, React Email & Resend, Vercel hosting. ); } 푸터의 상단에는 작성자와 저작권 정보를 표시한다. 푸터의 하단에는 웹사이트에 대한 간략한 설명을 포함한다. 사용된 기술 스택 및 도구들을 나열했다. Project/portfolio 2023. 10. 30. 포트폴리오 Contact 만들기 | Resend, toast HTML 삽입 미리보기할 수 없는 소스 Contact 컴포넌트 Contact me 직접 메일을 보내고 싶으시다면 {""} @naver.com {" "} 혹은 아래의 폼을 이용해주세요! { const { data, error } = await sendEmail(formData); if (error) { toast.error(error); return; } toast.success("Email sent successfully!"); }} > 섹션 안에 직접 메일보내는 링크와 안내문구를 추가한다. ); input과 textarea를 포함한 폼을 구성한다. 메일 전송 버튼(SubmitBtn)을 추가하여 사용자가 메일을 보낼 수 있도록 구현한다. sendEmail 함수를 사용하여 폼 데이터를 서버로 전송하고, 그.. Project/portfolio 2023. 10. 28. 포트폴리오 Experience 만들기 | react-vertical-timeline-component HTML 삽입 미리보기할 수 없는 소스 Experience 컴포넌트 export default function Experience() { const { ref } = useSectionInView("Experience"); const { theme } = useTheme(); Experience 컴포넌트는 useSectionInView 훅을 사용하여 해당 섹션이 화면에 나타날 때의 상태를 추적한다. useTheme 훅을 사용하여 테마 정보를 가져와서 어떤 테마인지에 따라 스타일을 조정한다. return ( My experience 섹션을 나타내는 section 태그로 감싸고, 반응형 css를 설정한다. {experiencesData.map((item, index) => ( {item.title} {ite.. Project/portfolio 2023. 10. 27. 포트폴리오 Skills 만들기 | Framer Motion 애니메이션 HTML 삽입 미리보기할 수 없는 소스 Framer Motion 애니메이션 설정 const fadeInAnimationVariants = { initial: { opacity: 0, y: 100, }, animate: (index: number) => ({ opacity: 1, y: 0, transition: { delay: 0.05 * index, }, }), }; initial 애니메이션이 시작할 때의 상태. opacity는 0으로 설정되어 투명한 상태로 시작하고, y는 100으로 설정되어 아래로 이동한 상태로 시작. animate 애니메이션 동작 중의 상태. 여기에서는 opacity를 1로 설정하여 페이드 인되고, y를 0으로 설정하여 이동하지 않은 상태로 표현. transition 애니메이션의 부.. Project/portfolio 2023. 10. 26. 포트폴리오 header 완성하기 | clsx, useActiveSectionContext HTML 삽입 미리보기할 수 없는 소스 export default function Header() { const { activeSection, setActiveSection, setTimeOfLastClick } = useActiveSectionContext(); useActiveSectionContext 훅을 사용해서 변수들을 가져온다. {links.map((link) => ( map함수로 links 배열을 순회하면서 네비게이션바 페이지 링크를 생성한다. { setActiveSection(link.name); setTimeOfLastClick(Date.now()); }} > {link.name} {link.name === activeSection && ( )} ))} ); } Link 컴포넌트로 감싸져.. Project/portfolio 2023. 10. 25. 포트폴리오 Projects 만들기 | framer-motion(motion, useScroll, useTransform) HTML 삽입 미리보기할 수 없는 소스 export default function Project({ title, description, moreDescription, tags, imageUrl, GithubUrl, }: ProjectProps) { 이렇게 다양한 프로퍼티들을 데려와서~~ (정보들은 data.ts에 저장되어 있음) const ref = useRef(null); useRef 훅을 사용해서 HTML 요소에 접근한다. 초기값은 null const { scrollYProgress } = useScroll({ target: ref, offset: ["0 1", "1.33 1"], }); useScroll 훅을 사용해서 스크롤을 추척한다. 처음부터 끝까지 const scaleProgess = useT.. Project/portfolio 2023. 10. 24. 포트폴리오 About Me 만들기 | FontAwesomeIcon 활용 HTML 삽입미리보기할 수 없는 소스 About me 컴포넌트를 사용할 때, 태그 사이에 위치한 내용이 children 속성으로 전달된다. import React from "react"; type SectionHeadingProps = { children: React.ReactNode; }; export default function SectionHeading({ children }: SectionHeadingProps) { return ( {children} ); } 이렇게 제목을 일관된 스타일을 적용할 수 있다. 이름 최한슬 연락처 이메일 부트캠프 멀티캠퍼스 프론트엔드 과정 ); } 폰트어썸 아이콘을 활요해서 보다 직관적으로 보이게했다. 그리고 백그라운드 컬러를 넣어서 정돈된 느낌을 주려고 했다. h.. Project/portfolio 2023. 10. 23. 포트폴리오 intro 만들기 | 이력서 pdf 다운로드 버튼, 깃허브/티스토리 이동 버튼 추가 HTML 삽입미리보기할 수 없는 소스 motion.h1 안녕하세요, 최한슬입니다. 간호사에서 프론트엔드 개발자 로의 여정을 시작합니다. motion.div Contact me here Download CV className="flex flex-col sm:flex-row items-center justify-center gap-2.5 px-4 text-lg font-medium" flex flex-col sm:flex-row: 요소는 세로(모바일 화면에서) 및 가로(더 큰 화면에서) 방향으로 레이아웃을 변경. items-center: 수직 중앙 정렬. justify-center: 수평 중앙 정렬. gap-2.5: 요소 내부의 요소 사이의 간격을 2.5단위. px-4: 요소의 좌우 여백을 4단위. text.. Project/portfolio 2023. 10. 21. 포트폴리오 header 만들기 | motion 리액트 라이브러리 hash 속성 HTML 삽입 미리보기할 수 없는 소스 initial: 초기 상태를 정의. { y: -100, x:"-50%", opacity : 0 }y 값으로 -100, x 값으로 -50%, 그리고 투명도(opacity) 값으로 0으로 설정. 이렇게 설정하면 요소가 화면 위로 위치하고 왼쪽에서 시작하여 완전히 투명한 상태로 시작. animate: 애니메이션 실행 시 최종 상태를 정의. { y: 0, x:"-50%", opacity : 1 } 애니메이션이 실행되면 요소는 아래로 이동하며(y 값으로 0) 가운데 정렬된 위치에 유지(x 값으로 -50%)). 동시에 투명도(opacity)가 변화하여 완전히 불투명한 상태(opacity 값으로 1)로 나타남. {links.map((link) => ( {link.name} )).. Project/portfolio 2023. 10. 21. 오류 메시지 해결 | You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client" ./components/header.tsx ReactServerComponentsError: You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default. Learn more: https://nextjs.org/docs/getting-started/react-essentials ╭─[/Users/hanseul/Desktop/portfolio/portfolio/node_modules/framer-motion/dist/es/animation/hook.. Project/portfolio 2023. 10. 15. 포트폴리오 웹사이트 만들기 시작 | tailwind CSS(테일윈드)로 백그라운드 배경색 설정하기 {children} 오른쪽 붉은 배경 bg-[#fbe2e3] bg- 는 배경 색상을 설정하는 클래스. #fbe2e3는 배경 색상. absolute 위치를 absolute로 설정. top-[-6rem] 위로 -6rem 이동. -z-10 z-index 값을 -10으로 설정. 요소의 쌓임 순서를 정의. right-[11rem] 오른쪽으로 11rem 이동. h-[31.25rem] 높이를 31.25rem으로 설정. w-[31.25rem] 너비를 31.25rem으로 설정. rounded-full 완전히 둥글게 만든다. 원 모양을 만드는 데 사용. blur-[10rem] 10rem의 블러 효과를 적용. sm:w-[68.75rem] 스몰 스크린 크기에서 너비를 68.75rem으로 변경. 왼쪽 보라 배경 bg-[#dbd.. 이전 1 2 3 다음 반응형
