Project : Portfolio Site

My portfolio site that I made using Next.js, TypeScript and TailwindCSS.

Table of contents

• Project : Portfolio Site
  • Table of contents
  • The challenge
  • Project Skeleton
  • Screenshot
  • Links
    • Built with
    • Useful resources
  • Installation
  • Author
  • Contact
  • How to use

The challenge

To create an portfolio site with ReactJS, NextJS, TypeScript and TailwindCSS

Project Skeleton

|----README.md
├── components
│       ├── About.tsx
│       ├── BackgroundCircles.tsx
│       ├── Contact.tsx
│       ├── Experience.tsx
│       ├── ExperienceCard.tsx
│       ├── Header.tsx
│       ├── Hero.tsx
│       ├── Projects.tsx
│       ├── Skill.tsx
│       └── Skills.tsx
├── data
│       ├── projectsData.ts
│       └── skillsData.ts
├── pages
│       ├── api
|       |     └── hello.js
│       ├── _app.jsx
│       ├── document.jsx
│       └── index.jsx
├── public
│       ├── favicon.ico
│       └── vercel.svg
├── styles
│       └── global.css
├── types
│       └── index.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json

Screenshot

Links

---

Check The Live Website ➡️ Live Website

---

Built with

• React Components, Props, States and Hooks
• TypeScript
• NextJS
• React Hook Form
• JSX Elements
• TailwindCSS
• Material UI
• Framer Motion
• React Simple TypeWriter

Useful resources

• W3 Schools
• MDN
• TailwindCSS

Installation

Use the Npm package manager install command.

npm install

---

Author

• Author - [Murat Hüdavendigâr]

Contact

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app

yarn create next-app --example with-tailwindcss with-tailwindcss-app

pnpm create next-app --example with-tailwindcss with-tailwindcss-app