[02] portfolio(찐) - library사용?

헤더를 만들면서 생각이 많아졌다. 라이브러리들을 사용해서 애니메이션 효과를 줄 것인가 내가 직접 할 것인가...

결론은 그냥 깔끔한 포트폴리오를 만들자로 결정... framer motion이나 lottie files같은 것들도 사용해볼까 했지만,

daisyui도 안쓰겠다고 해놓고 저것들을 쓰는 건 조금^^ 무튼 생각이 많아져서 만드는게 조금 늦어졌지만!

헤더만들면 이미 포트폴리오는 다 만든거라고 볼 수 있다. 

특별한 애니메이션을 안 넣을것이기 때문에 ? 이제 포트폴리오에 넣을 것들을 촤라락 넣고 포트폴리오 내용을 채워가야하는데... 뭐 어떻게든 되겠지하면서 header 투척

// data.ts
export const links = [
  {
    title: "Home",
    url: "#home",
  },
  {
    title: "About",
    url: "#about",
  },
  {
    title: "Skills",
    url: "#skills",
  },
  {
    title: "Projects",
    url: "#projects",
  },
  {
    title: "Contact",
    url: "#contact",
  },
] as const;

 

// app/components/Header.tsx
"use client";
import Link from "next/link";
import tw from "tailwind-styled-components";
import { links } from "../datas/data";

const Header = () => {
  return (
    <header className="z-[999] relative">
      <div className="fixed top-0 h-[4.5rem] w-full flex justify-between items-center border-b-2 border-b-inherit  bg-white bg-opacity-50">
        <a href="/" className="ml-[3rem] text-xl font-black">
          LEE DANBI Portfolio
       	</a>
        <nav className="hidden md:block">
          <ul className="flex  mr-[1rem] flex-wrap items-center justify-center gap-y-1 text-[1rem] font-medium text-gray-500 sm:flex-nowrap ">
            {links.map((nav, key) => (
              <li key={key}>
                <Link
                  href={nav.url}
                  className=" focus:bg-gray-100 focus:rounded-2xl focus:text-[1.1rem] hover:bg-gray-100 hover:rounded-2xl  hover:text-[1.1rem] cursor-pointer active:bg-gray-300 active:text-[1rem] p-2 transition"
                >
                  {nav.title}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
        <div className="btn btn-error md:hidden ">dd</div>
      </div>
    </header>
  );
};

export default Header;

 

 

스크롤이 부드럽게 움직이게 하기 위해서는 scroll-behavior :smooth를 해주면 되는데 나는 globals.css에 넣었다.

 

 

font는 영문으로만 쓸거면 next/font/google에서 import 해오면 되는데 한글폰트 지원이 안되서 한글폰트를 @import url("")했다.

참고로 이 파일에서 폰트 import할때는 맨위에다가 작성해야한다는 거...

아 그리고 헤더를 클릭하면 위치로 가는 거는 위에 data.ts에서 link url에 # = id 라생각하고

id에 #뒤에적힌걸 넣으면 됨 # 과 . 알쟈냐용