figma-portfolio-nextjs

Clone the Figma_Portfolio repository, run npm install, and start the dev server with npm run dev at localhost:3000. Then customize the Hero, Projects, Experience, and Contact components with your own content.

Create a client component with 'use client' and use useState and useEffect to incrementally build and delete strings from a roles array. Adjust typing speed with setTimeout, using around 150ms for typing and 50ms for deleting.

Install the Vercel CLI with npm i -g vercel, then run vercel for a preview or vercel --prod for production. Alternatively, connect your GitHub repository to Vercel for automatic deployments on every push to main.

The component must be marked with 'use client' at the top because useState and useEffect require client-side rendering. Without this directive, Next.js treats it as a server component and the hooks fail.

Check that tailwind.config.ts content paths include all directories containing your components, such as './app/**/*.{js,ts,jsx,tsx,mdx}' and './components/**/*.{js,ts,jsx,tsx,mdx}'. Files outside these globs will not generate utility classes.

Images must be placed in the public directory and referenced with absolute paths like /projects/myproject.png. Relative paths or files outside public will not be served by Next.js.