Built Portfolio Page -1（搭建框架）

2024-07-20

Word count: 479 | Reading time≈ 2 min

Create nextjs project
Add page.tsx
Add header component
Install framer motion package
Add Motion div

Create nextjs project

1	npx create-next-app@13.4.8

for this project, we use 13.4.8 version

Add page.tsx and layout.tsx

layout.tsx

import Header from '@/components/header'
import './globals.css'

export const metadata = {
  title: 'Richard | Personal Portfolio',
  description: "Richard's Websit",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={` bg-gray-50 text-gray-950 relative `}>
        <div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 
          right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem]"></div>
        <div className="bg-[#dbd7fb] absolute top-[-1rem] -z-10 
          left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] 
          md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem]"></div>
        <Header />
        {children}
      </body>
    </html>
  )
}

page.tsx

import Image from 'next/image'

export default function Home() {
  return (
    <main className="">
      
    </main>
  )
}

Add header component

add src/components/header.tsx

import React from 'react'

export default function Header() {
  return <header className='z-[999] relative'>
    <div className='fixed top-0 left-1/2 h-[4.5rem] w-full rounded-none 
    border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg
     shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:rounded-full'>
    </div>
  </header>
}

但是这个bar 不居中，可以用 -translate-x-1/2 让它居中。

Install framer-motion Package

run:

1	npm install framer-motion

Add motion div

modify header.tsx

"use client"

import React from 'react';
import { motion } from "framer-motion";

export default function Header() {
  return <header className='z-[999] relative'>
    <motion.div className='fixed top-0 left-1/2  h-[4.5rem] w-full rounded-none 
      border border-white border-opacity-40 bg-white bg-opacity-80 shadow-lg
    shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] 
      sm:rounded-full'
      initial={{ y:-100, x:"-50%", opacity:0}}
      animate={{ y:0, x:"-50%",opacity:1}}>
    </motion.div>
  </header>
}

可以实现一个向下出现的动画。