├── .eslintrc.json
├── postcss.config.js
├── pages
    ├── _app.js
    ├── api
    │   └── hello.js
    └── index.js
├── next.config.js
├── tailwind.config.js
├── styles
    └── globals.css
├── .gitignore
├── package.json
├── public
    ├── hamburger-menu.svg
    └── close.svg
├── README.md
└── components
    └── NavBar.jsx


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css'
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 | };
 5 | 
 6 | module.exports = {
 7 |   images: {
 8 |     domains: ['images.pexels.com'],
 9 |   },
10 | };
11 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './pages/**/*.{js,ts,jsx,tsx}',
 5 |     './components/**/*.{js,ts,jsx,tsx}',
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         waterfall: ['Waterfall', 'cursive'],
11 |       },
12 |     },
13 |   },
14 |   plugins: [],
15 | };
16 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @font-face {
 6 |   font-family: 'Waterfall';
 7 |   font-style: normal;
 8 |   font-weight: 400;
 9 |   font-display: swap;
10 |   src: url(https://fonts.gstatic.com/s/waterfall/v3/MCoRzAfo293fACdFKcwo3bv9.woff2)
11 |     format('woff2');
12 |   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
13 |     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
14 |     U+FEFF, U+FFFD;
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "navbar-nextjs-tailwindcss",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "eslint": "8.28.0",
13 |     "eslint-config-next": "13.0.5",
14 |     "next": "13.0.5",
15 |     "react": "18.2.0",
16 |     "react-dom": "18.2.0"
17 |   },
18 |   "devDependencies": {
19 |     "autoprefixer": "^10.4.13",
20 |     "postcss": "^8.4.19",
21 |     "tailwindcss": "^3.2.4"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/public/hamburger-menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="64px" height="64px"><path fill="#9c34c2" d="M54,16.5c0,1.24-0.5,2.37-1.32,3.18C51.87,20.5,50.74,21,49.5,21h-35c-2.49,0-4.5-2.01-4.5-4.5	c0-1.18,0.45-2.26,1.21-3.06c0.03-0.04,0.07-0.08,0.11-0.12C12.13,12.5,13.26,12,14.5,12h35C51.99,12,54,14.01,54,16.5z"/><path fill="#fff" d="M36,12c0,2.76-2.24,5-5,5H16c-1.38,0-2.63-0.56-3.54-1.46c-0.57-0.58-1.01-1.3-1.25-2.1	c0.03-0.04,0.07-0.08,0.11-0.12C12.13,12.5,13.26,12,14.5,12H36z" opacity=".3"/><ellipse cx="32" cy="61" opacity=".3" rx="20" ry="3"/><path fill="#9c34c2" d="M49.5,51h-35c-2.485,0-4.5-2.015-4.5-4.5v0c0-2.485,2.015-4.5,4.5-4.5h35c2.485,0,4.5,2.015,4.5,4.5	v0C54,48.985,51.985,51,49.5,51z"/><path fill="#9c34c2" d="M49.5,36h-35c-2.485,0-4.5-2.015-4.5-4.5v0c0-2.485,2.015-4.5,4.5-4.5h35c2.485,0,4.5,2.015,4.5,4.5	v0C54,33.985,51.985,36,49.5,36z"/><path d="M49.5,42h-2.98c-0.08,0.89,0.08,1.79,0.45,2.59c0.31,0.66-0.18,1.41-0.9,1.41H37	c-2.76,0-4.99,2.23-5,5h17.5c1.24,0,2.37-0.5,3.18-1.32C53.5,48.87,54,47.74,54,46.5C54,44.01,51.99,42,49.5,42z" opacity=".15"/><path fill="#fff" d="M20.5,17h-4c-0.829,0-1.5-0.671-1.5-1.5s0.671-1.5,1.5-1.5h4c0.829,0,1.5,0.671,1.5,1.5	S21.329,17,20.5,17z"/></svg>


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import NavBar from '../components/NavBar';
 2 | 
 3 | export default function Home() {
 4 |   return (
 5 |     <div>
 6 |       <NavBar />
 7 |       <section
 8 |         id="about"
 9 |         className="text-white h-screen bg-black  text-center flex"
10 |       >
11 |         <h1 className="m-auto font-waterfall text-7xl text-purple-600 font-bold  ">
12 |           About
13 |         </h1>
14 |       </section>
15 |       <section id="blog" className=" text-white h-screen bg-purple-900 flex">
16 |         <h1 className="m-auto font-waterfall text-7xl text-white font-bold">
17 |           Blog
18 |         </h1>
19 |       </section>
20 |       <section
21 |         id="contact"
22 |         className="text-white h-screen bg-black  text-center flex"
23 |       >
24 |         <h1 className="m-auto font-waterfall text-7xl text-purple-600 font-bold">
25 |           Contact{' '}
26 |         </h1>
27 |       </section>
28 |       <section
29 |         id="projects"
30 |         className=" text-white h-screen bg-purple-900 flex"
31 |       >
32 |         <h1 className="m-auto font-waterfall text-7xl text-white font-bold">
33 |           Projects
34 |         </h1>
35 |       </section>
36 |     </div>
37 |   );
38 | }
39 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/components/NavBar.jsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import Link from 'next/link';
 3 | import { useState } from 'react';
 4 | 
 5 | function NavBar() {
 6 |   const [navbar, setNavbar] = useState(false);
 7 |   return (
 8 |     <div>
 9 |       <nav className="w-full bg-black fixed top-0 left-0 right-0 z-10">
10 |         <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
11 |           <div>
12 |             <div className="flex items-center justify-between py-3 md:py-5 md:block">
13 |               {/* LOGO */}
14 |               <Link href="/">
15 |                 <h2 className="text-2xl text-cyan-600 font-bold ">LOGO</h2>
16 |               </Link>
17 |               {/* HAMBURGER BUTTON FOR MOBILE */}
18 |               <div className="md:hidden">
19 |                 <button
20 |                   className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
21 |                   onClick={() => setNavbar(!navbar)}
22 |                 >
23 |                   {navbar ? (
24 |                     <Image src="/close.svg" width={30} height={30} alt="logo" />
25 |                   ) : (
26 |                     <Image
27 |                       src="/hamburger-menu.svg"
28 |                       width={30}
29 |                       height={30}
30 |                       alt="logo"
31 |                       className="focus:border-none active:border-none"
32 |                     />
33 |                   )}
34 |                 </button>
35 |               </div>
36 |             </div>
37 |           </div>
38 |           <div>
39 |             <div
40 |               className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
41 |                 navbar ? 'p-12 md:p-0 block' : 'hidden'
42 |               }`}
43 |             >
44 |               <ul className="h-screen md:h-auto items-center justify-center md:flex ">
45 |                 <li className="pb-6 text-xl text-white py-2 md:px-6 text-center border-b-2 md:border-b-0  hover:bg-purple-900  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
46 |                   <Link href="#about" onClick={() => setNavbar(!navbar)}>
47 |                     About
48 |                   </Link>
49 |                 </li>
50 |                 <li className="pb-6 text-xl text-white py-2 px-6 text-center  border-b-2 md:border-b-0  hover:bg-purple-600  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
51 |                   <Link href="#blog" onClick={() => setNavbar(!navbar)}>
52 |                     Blogs
53 |                   </Link>
54 |                 </li>
55 |                 <li className="pb-6 text-xl text-white py-2 px-6 text-center  border-b-2 md:border-b-0  hover:bg-purple-600  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
56 |                   <Link href="#contact" onClick={() => setNavbar(!navbar)}>
57 |                     Contact
58 |                   </Link>
59 |                 </li>
60 |                 <li className="pb-6 text-xl text-white py-2 px-6 text-center  border-b-2 md:border-b-0  hover:bg-purple-600  border-purple-900  md:hover:text-purple-600 md:hover:bg-transparent">
61 |                   <Link href="#projects" onClick={() => setNavbar(!navbar)}>
62 |                     Projects
63 |                   </Link>
64 |                 </li>
65 |               </ul>
66 |             </div>
67 |           </div>
68 |         </div>
69 |       </nav>
70 |     </div>
71 |   );
72 | }
73 | 
74 | export default NavBar;
75 | 


--------------------------------------------------------------------------------
/public/close.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" width="64px" height="64px">
 3 | <defs>
 4 | <filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
 5 |   <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
 6 | </filter>
 7 | <mask id="mask0">
 8 |   <g filter="url(#alpha)">
 9 | <rect x="0" y="0" width="64" height="64" style="fill:rgb(0%,0%,0%);fill-opacity:0.3;stroke:none;"/>
10 |   </g>
11 | </mask>
12 | <image id="image197118953" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAABNklEQVR4nO3UPUpDURDF8f/cRE1QSCUJGDCuQEELQSxErXQTYkC3FFDcRDpRsbNQ4g5MIIGIVUBI1Pfe2FgLNx8Wcn79OXcYuAMiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIi8j/YNEoam9el4AurBK8aoYJ5FajgrABljDwZRYwCMI+xiBOA0k/FACPDeQe+cEYEhjgJ8IrRA/q4dZ2sT2bdzD46Z0+Hg0lnH2sBV9t3tTTJHQMHOOsYtUkHGYvTxngGbnL5tHnysNeOrYhewOXWfcOxUyAXm52xFOyi/rh7HhMKsa84wWMzf8Xx6NnG/gJJEo5w9s1sA1gbp2cKXsBaTnZrab5Zb+10YgtmdwQzL2NWBZYx5nEKQBGYw1j69QjCEGOE8wm84d51rG9mvWkfwW+DVGsF7uhM2AAAAABJRU5ErkJggg=="/>
13 | <mask id="mask1">
14 |   <g filter="url(#alpha)">
15 | <rect x="0" y="0" width="64" height="64" style="fill:rgb(0%,0%,0%);fill-opacity:0.15;stroke:none;"/>
16 |   </g>
17 | </mask>
18 | <image id="image197118956" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAACpklEQVR4nO2Xv2/TQBTHvy8/tkqoc1F3GBiwKyHROPkfCuleJy0CCoWBIIUhSAUpjYDyQ4jgmg0WmJFgCThIEOJ073/QTkggEEPxY2gQkNhpnBj3JN5HipTc892993F8dwYEQRAEQRAEQRAEQRAEQRAEQRD+E+igE9gPS3dOEdEFMGsAPAAtz0NtcdN4FcX4SguwdOcOASs+IaaEd9L8mHs/7hyJcQf4V9i6MxdQPABcjaJ4QGEBDDrn105AueAaa1HNo6wAgI/1thBQNl3jZpSzqCxgt7fFA0W+ZikrgJjafW3gVUtvlqOcR1kBAN/3ayXw6obuXIlqFmUFmJ3sazDdDQhXo5KgrAAAMDuzl8D8MCBcjeJxUPogBAAMJltzHoDorH+crhXdzI1Rxz8QAdbM23liWgYwA+A7QC2Gt150sy/9rt+T0KyDUAwYsjTq2SB2ARtacx3EF32TIb630DZWCMS9MQbTE915xKDFgKFHkhCrAFt35hh4MfAihmV2MkujSCBwwXSzdpicYl0Emcj3zv8FoWhrzTqD+24OgXjBNc4Q+HHA+LW65qbD5BTvLrD3Srs/o0pgTCb425EwKcW9DXo9v0vdTz8DJFzPvUky0aRft2QafUfoQcQtoPXH91LBNda6C9fQEiq5Rurw1+QzME73d+CdientrTAJxSrA81ADwOhZsYeVUMk1UlNfUk/9iweDE8v55/kfYXKKfRu0jr87Udyc/eAX6x5vq74dGRaDDhFx3i9KhCWzbVhh81HuJGhrzctMfCtEFwbR+UI7E3RkHohyAoBQEsYqHlBUADCUhLGLBxQWAAyUEEnxgPKvw5nbBC6A8Ol3K++AaT6K4gHF/wG/qOQaqanPyaPJNHYnpre3wm51giAIgiAIgiAIQg8/AaE/Af9hDvgHAAAAAElFTkSuQmCC"/>
19 | <mask id="mask2">
20 |   <g filter="url(#alpha)">
21 | <rect x="0" y="0" width="64" height="64" style="fill:rgb(0%,0%,0%);fill-opacity:0.3;stroke:none;"/>
22 |   </g>
23 | </mask>
24 | <image id="image197118959" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAABfklEQVR4nO3YMUoDQRjF8W9N7iJYWOsBVLAQC/EABi+gkMYriGJpwANoZakBQTyEN7DQIhqxVP8WWTHEzOxs3J0J8f3q3c17D2ZZYiYiIiLyT2VVPgxomNm8mTXN7D7Lsvcqnz/VgG3giR89oJU6VxRAC/hgvIPU+WpVUH62RwgsP5sjlCw/WyMAu8Cno+Q50PGM0PY8dylmj4kweNv7yjeBrOwIQDt/7mqKXkGABvDoKHUBNIeuDR4hL/+tm6ZdAGAhpPzQ9YUjjJQHeE7RLQiw6ChyCoz9qgwYYVQ/dq9gDM53r+YRbmL3KgXY8YSvYoSN2J1K4/e5LTPCiefeo9hdJlYwQsc1Qn7vOnAFvAB94A7Yipm/EsCeZ4QzYC51xtppBCs8Dsep80VRMMJK6nxRAPuOAS5TZ4vGMcJD6lwusV5QjUi/k5bnCFynzla7gpfg9H/e/gWwjPtPksPU+aIA1oAu8Aq8AbfAZupcIiIiIiIiIiIiIiIiIiJiZl+4WISZyWDu7AAAAABJRU5ErkJggg=="/>
25 | </defs>
26 | <g id="surface197118949">
27 | <use xlink:href="#image197118953" mask="url(#mask0)"/>
28 | <path style=" stroke:none;fill-rule:nonzero;fill:rgb(61.176473%,20.392157%,76.078433%);fill-opacity:1;" d="M 42.964844 30 L 51.097656 21.863281 C 52.660156 20.304688 52.660156 17.769531 51.097656 16.207031 L 45.792969 10.902344 C 44.230469 9.339844 41.699219 9.339844 40.136719 10.902344 L 32 19.039062 L 23.863281 10.902344 C 22.300781 9.339844 19.769531 9.339844 18.207031 10.902344 L 12.902344 16.207031 C 11.339844 17.769531 11.339844 20.304688 12.902344 21.863281 L 21.035156 30 L 12.902344 38.136719 C 11.339844 39.695312 11.339844 42.230469 12.902344 43.792969 L 18.207031 49.097656 C 19.769531 50.660156 22.300781 50.660156 23.863281 49.097656 L 32 40.964844 L 40.136719 49.097656 C 41.699219 50.660156 44.230469 50.660156 45.792969 49.097656 L 51.097656 43.792969 C 52.660156 42.230469 52.660156 39.695312 51.097656 38.136719 Z M 42.964844 30 "/>
29 | <use xlink:href="#image197118956" mask="url(#mask1)"/>
30 | <use xlink:href="#image197118959" mask="url(#mask2)"/>
31 | <path style="fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 18.5 15.5 L 21 13 L 23.5 15.5 "/>
32 | </g>
33 | </svg>
34 | 


--------------------------------------------------------------------------------