diff --git a/package-lock.json b/package-lock.json index 6c1284f..0d7a0a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,11 @@ "name": "portfolio", "version": "0.1.0", "dependencies": { + "clsx": "^2.1.1", "next": "14.2.9", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "tailwind-merge": "^2.5.2" }, "devDependencies": { "@types/node": "^20", @@ -1271,6 +1273,15 @@ "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==", "license": "MIT" }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -4860,6 +4871,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tailwind-merge": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz", + "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.10", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz", diff --git a/package.json b/package.json index 4bbecfa..46168fd 100644 --- a/package.json +++ b/package.json @@ -3,24 +3,26 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev --hostname 0.0.0.0", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { + "clsx": "^2.1.1", + "next": "14.2.9", "react": "^18", "react-dom": "^18", - "next": "14.2.9" + "tailwind-merge": "^2.5.2" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.9", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.9" + "typescript": "^5" } } diff --git a/src/app/fonts/ralewayBold.woff b/src/app/fonts/ralewayBold.woff new file mode 100644 index 0000000..647c00a Binary files /dev/null and b/src/app/fonts/ralewayBold.woff differ diff --git a/src/app/globals.css b/src/app/globals.css index 13d40b8..0ce68f1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -2,7 +2,7 @@ @tailwind components; @tailwind utilities; -:root { +/* :root { --background: #ffffff; --foreground: #171717; } @@ -16,7 +16,7 @@ body { color: var(--foreground); - background: var(--background); + background: var(--foreground); font-family: Arial, Helvetica, sans-serif; } @@ -24,4 +24,4 @@ body { .text-balance { text-wrap: balance; } -} +} */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a36cde0..10b1fd5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,21 +1,26 @@ -import type { Metadata } from "next"; -import localFont from "next/font/local"; -import "./globals.css"; +import type { Metadata } from 'next'; +import localFont from 'next/font/local'; +import './globals.css'; const geistSans = localFont({ - src: "./fonts/GeistVF.woff", - variable: "--font-geist-sans", - weight: "100 900", + src: './fonts/GeistVF.woff', + variable: '--font-geist-sans', + weight: '100 900', }); const geistMono = localFont({ - src: "./fonts/GeistMonoVF.woff", - variable: "--font-geist-mono", - weight: "100 900", + src: './fonts/GeistMonoVF.woff', + variable: '--font-geist-mono', + weight: '100 900', +}); +const railwayBold = localFont({ + src: './fonts/ralewayBold.woff', + variable: '--font-raleway-bold', + weight: '100 900', }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: 'Create Next App', + description: 'Generated by create next app', }; export default function RootLayout({ @@ -26,7 +31,7 @@ export default function RootLayout({ return ( {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 6fe62d1..9b5b978 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,9 @@ -import Image from "next/image"; +import Header from '@/components/header'; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
); } diff --git a/src/components/card.tsx b/src/components/card.tsx new file mode 100644 index 0000000..20f87c1 --- /dev/null +++ b/src/components/card.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +function Card() { + return
This is a Card
; +} + +export default Card; diff --git a/src/components/header.tsx b/src/components/header.tsx new file mode 100644 index 0000000..3774dd3 --- /dev/null +++ b/src/components/header.tsx @@ -0,0 +1,85 @@ +'use client'; +import { cn } from '@/lib/cn'; +import { navbarData } from '@/lib/constants'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import React, { useState } from 'react'; + +function Header() { + const [showMobileMenu, setShowMobileMenu] = useState(false); + const pathname = usePathname(); + console.log('This is parhname', pathname); + + return ( + + ); +} + +export default Header; diff --git a/src/lib/cn.ts b/src/lib/cn.ts new file mode 100644 index 0000000..e57f980 --- /dev/null +++ b/src/lib/cn.ts @@ -0,0 +1,6 @@ +import { ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/src/lib/constants.ts b/src/lib/constants.ts new file mode 100644 index 0000000..9b4aeae --- /dev/null +++ b/src/lib/constants.ts @@ -0,0 +1,18 @@ +export const navbarData = [ + { + name: 'Home', + path: '/', + }, + { + name: 'Skills', + path: '/skills', + }, + { + name: 'Experience', + path: '/experience', + }, + { + name: 'Contact', + path: '/contact', + }, +]; diff --git a/tailwind.config.ts b/tailwind.config.ts index 021c393..77e9f27 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,16 +1,17 @@ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss'; const config: Config = { content: [ - "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", - "./src/components/**/*.{js,ts,jsx,tsx,mdx}", - "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + './src/pages/**/*.{js,ts,jsx,tsx,mdx}', + './src/components/**/*.{js,ts,jsx,tsx,mdx}', + './src/app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { - background: "var(--background)", - foreground: "var(--foreground)", + background: 'var(--background)', + foreground: 'var(--foreground)', + primary: '#7B4AE2', }, }, },