Skip to content

Commit

Permalink
init: First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
anujbhati1 committed Sep 10, 2024
1 parent 113d5c0 commit 2ab1c13
Show file tree
Hide file tree
Showing 11 changed files with 175 additions and 122 deletions.
23 changes: 22 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Binary file added src/app/fonts/ralewayBold.woff
Binary file not shown.
6 changes: 3 additions & 3 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

:root {
/* :root {
--background: #ffffff;
--foreground: #171717;
}
Expand All @@ -16,12 +16,12 @@
body {
color: var(--foreground);
background: var(--background);
background: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
} */
29 changes: 17 additions & 12 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -26,7 +31,7 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${railwayBold.variable} ${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
Expand Down
98 changes: 3 additions & 95 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,101 +1,9 @@
import Image from "next/image";
import Header from '@/components/header';

export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="https://nextjs.org/icons/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.tsx
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>

<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="https://nextjs.org/icons/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="https://nextjs.org/icons/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
<div className="bg-gray-800">
<Header />
</div>
);
}
7 changes: 7 additions & 0 deletions src/components/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';

function Card() {
return <div>This is a Card</div>;
}

export default Card;
85 changes: 85 additions & 0 deletions src/components/header.tsx
Original file line number Diff line number Diff line change
@@ -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<boolean>(false);
const pathname = usePathname();
console.log('This is parhname', pathname);

return (
<nav className="bg-primary/5 border-gray-200">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<Link
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
src="https://flowbite.com/docs/images/logo.svg"
className="h-8"
alt="Flowbite Logo"
/>
<span className="self-center text-xl font-semibold whitespace-nowrap text-white">
Anuj Bhati
</span>
</Link>
<button
data-collapse-toggle="navbar-default"
onClick={() => setShowMobileMenu((pre) => !pre)}
type="button"
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-primary/50 focus:outline-none focus:ring-1 focus:ring-gray-200 "
aria-controls="navbar-default"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-5 h-5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 17 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M1 1h15M1 7h15M1 13h15"
/>
</svg>
</button>
<div
className={cn('w-full md:block md:w-auto', {
hidden: !showMobileMenu,
})}
id="navbar-default"
>
<ul className="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 ">
{navbarData.map((item) => (
<li>
<a
key={item.path}
href="#"
className={cn(
'block py-2 px-3 text-white/50 rounded hover:text-primary/50 md:hover:bg-transparent md:border-0 md:hover:text-primary/50 md:p-0',
{
'text-white bg-primary/50 hover:text-white md:text-primary/50 md:bg-transparent':
item.path === pathname,
}
)}
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</nav>
);
}

export default Header;
6 changes: 6 additions & 0 deletions src/lib/cn.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
18 changes: 18 additions & 0 deletions src/lib/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export const navbarData = [
{
name: 'Home',
path: '/',
},
{
name: 'Skills',
path: '/skills',
},
{
name: 'Experience',
path: '/experience',
},
{
name: 'Contact',
path: '/contact',
},
];
13 changes: 7 additions & 6 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -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',
},
},
},
Expand Down

0 comments on commit 2ab1c13

Please sign in to comment.