➜ header 시작
➜ header 완성
➜ intro
➜ About Me
➜ Projects
➜ Skills
➜ Experience
➜ Contact
➜ Footer
➜ Vercel 배포
motion.h1
<motion.h1
className="mb-10 mt-4 px-4 text-2xl font-medium !leading-[1.5] sm:text-4xl"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
>
<span className="font-bold">안녕하세요, 최한슬입니다.</span>
<br></br>간호사에서 <span className="font-bold">프론트엔드 개발자</span>
로의 여정을 시작합니다.
</motion.h1>
motion.div
<motion.div
className="flex flex-col sm:flex-row items-center justify-center gap-2.5 px-4 text-lg font-medium"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
transition={{
delay: 0.1,
}}
>
<Link
href="#contact"
className="group bg-gray-900 text-white px-7 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105 transition"
>
Contact me here
<BsArrowRight className="opacity-70 group-hover:translate-x-1 trasition" />
</Link>
<a
className="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer border border-black/10"
href="/CV.pdf"
download
>
Download CV
<HiDownload className="opacity-60 group-hover:translate-y-1 transition" />
</a>
<a
className="bg-white p-4 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer border border-black/10"
href="https://duseul.tistory.com"
target="_blank"
>
<svg
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="w-4 h-4 fill-gray-700 hover:fill-gray-950"
>
<path d="M0 3a3 3 0 1 0 6 0 3 3 0 0 0-6 0m9 18a3 3 0 1 0 6 0 3 3 0 0 0-6 0m0-9a3 3 0 1 0 6 0 3 3 0 0 0-6 0m0-9a3 3 0 1 0 6 0 3 3 0 0 0-6 0m9 0a3 3 0 1 0 6 0 3 3 0 0 0-6 0" />
</svg>
</a>
<a
className="bg-white p-4 text-gray-700 flex items-center gap-2 text-[1.35rem] rounded-full focus:scale-[1.15] hover:scale-[1.15] hover:text-gray-950 active:scale-105 transition cursor-pointer border border-black/10"
href="https://github.com/Hanseul516"
target="_blank"
>
<FaGithubSquare />
</a>
</motion.div>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-lg: 텍스트의 글꼴 크기를 "lg".
font-medium: 텍스트의 글꼴 두께를 중간.
<a>
outline-none: 클릭 시 아웃라인을 제거.
focus:scale-110: 포커스 상태에서 요소 크기를 1.1배 확대
hover:scale-110: 호버(마우스를 가져갈 때) 상태에서 요소 크기를 1.1배 확대
hover:bg-gray-950: 호버 상태에서 배경색을 어두운 회색으로 변경
active:scale-105: 클릭 시 요소 크기를 1.05배로 축소
divider
export default function SectionDivider() {
return (
<motion.div
className="bg-gray-200 my-24 h-16 w-1 rounded-full hidden sm:block"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.125 }}
></motion.div>
);
}
className="bg-gray-200 my-24 h-16 w-1 rounded-full hidden sm:block"
my-24 : 상단(m) 및 하단(y) 여백을 지정.
hidden : 클래스는 요소를 화면에서 숨김.
initial={{ opacity: 0, y: 100 }}
y: 수직위치, 100px 아래로
animate={{ opacity: 1, y: 0 }}
아래로 갔다가 제자리로 옴
transition={{ delay: 0.125 }}
애니메이션의 전환 효과. delay 속성을 사용하여 0.125초(125밀리초)의 지연 시간을 설정하여 애니메이션이 시작되기 전에 잠시 대기
https://share.coffeechat.kr/두슬
헤론헬스정보시스템, 소프트웨어 개발 '두슬' 님과 1:1 커피챗 시작
커피챗
share.coffeechat.kr
