Skip to content

Commit 7bad180

Browse files
pulkitxmpulkitxm
committed
feat: add header hero section with grid background and typewriter effect
1 parent fdcb6e7 commit 7bad180

12 files changed

Lines changed: 379 additions & 156 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,3 +34,5 @@ yarn-error.log*
3434
# typescript
3535
*.tsbuildinfo
3636
next-env.d.ts
37+
38+
yarn.lock

‎app/globals.css‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,3 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4-
5-
:root {
6-
--foreground-rgb: 0, 0, 0;
7-
--background-start-rgb: 214, 219, 220;
8-
--background-end-rgb: 255, 255, 255;
9-
}
10-
11-
@media (prefers-color-scheme: dark) {
12-
:root {
13-
--foreground-rgb: 255, 255, 255;
14-
--background-start-rgb: 0, 0, 0;
15-
--background-end-rgb: 0, 0, 0;
16-
}
17-
}
18-
19-
body {
20-
color: rgb(var(--foreground-rgb));
21-
background: linear-gradient(
22-
to bottom,
23-
transparent,
24-
rgb(var(--background-end-rgb))
25-
)
26-
rgb(var(--background-start-rgb));
27-
}
28-
29-
@layer utilities {
30-
.text-balance {
31-
text-wrap: balance;
32-
}
33-
}

‎app/layout.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,21 +62,6 @@ export default function RootLayout({
6262
{/* Title Tag */}
6363
<title>Pulkit - Developer</title>
6464

65-
{/* Structured Data */}
66-
<script type="application/ld+json">
67-
{`{
68-
"@context": "http://schema.org",
69-
"@type": "Person",
70-
"name": "Pulkit",
71-
"jobTitle": "Developer",
72-
"url": "https://devpulkit.in",
73-
"sameAs": [
74-
"http://linkedin.com/in/yourprofile",
75-
"http://github.com/yourprofile"
76-
]
77-
}`}
78-
</script>
79-
8065
<link rel="icon" href="./favicon.png" />
8166
</head>
8267
<body className={inter.className}>{children}</body>

‎app/page.tsx‎

Lines changed: 5 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,9 @@
1-
import Image from "next/image";
1+
import HeroSection from "@/components/Header/HeroSection";
22

3-
export default function Home() {
3+
export default function HomePage() {
44
return (
5-
<main className="flex min-h-screen flex-col items-center justify-between p-24">
6-
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
7-
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:dark:bg-zinc-800/30">
8-
Get started by editing&nbsp;
9-
<code className="font-mono font-bold">app/page.tsx</code>
10-
</p>
11-
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white lg:static lg:size-auto lg:bg-none dark:from-black dark:via-black">
12-
<a
13-
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
14-
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
By{" "}
19-
<Image
20-
src="/vercel.svg"
21-
alt="Vercel Logo"
22-
className="dark:invert"
23-
width={100}
24-
height={24}
25-
priority
26-
/>
27-
</a>
28-
</div>
29-
</div>
30-
31-
<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40">
32-
<Image
33-
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
34-
src="/next.svg"
35-
alt="Next.js Logo"
36-
width={180}
37-
height={37}
38-
priority
39-
/>
40-
</div>
41-
42-
<div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
43-
<a
44-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
45-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<h2 className="mb-3 text-2xl font-semibold">
50-
Docs{" "}
51-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
52-
-&gt;
53-
</span>
54-
</h2>
55-
<p className="m-0 max-w-[30ch] text-sm opacity-50">
56-
Find in-depth information about Next.js features and API.
57-
</p>
58-
</a>
59-
60-
<a
61-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
62-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
63-
target="_blank"
64-
rel="noopener noreferrer"
65-
>
66-
<h2 className="mb-3 text-2xl font-semibold">
67-
Learn{" "}
68-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
69-
-&gt;
70-
</span>
71-
</h2>
72-
<p className="m-0 max-w-[30ch] text-sm opacity-50">
73-
Learn about Next.js in an interactive course with&nbsp;quizzes!
74-
</p>
75-
</a>
76-
77-
<a
78-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
79-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
80-
target="_blank"
81-
rel="noopener noreferrer"
82-
>
83-
<h2 className="mb-3 text-2xl font-semibold">
84-
Templates{" "}
85-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
86-
-&gt;
87-
</span>
88-
</h2>
89-
<p className="m-0 max-w-[30ch] text-sm opacity-50">
90-
Explore starter templates for Next.js.
91-
</p>
92-
</a>
93-
94-
<a
95-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
96-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
97-
target="_blank"
98-
rel="noopener noreferrer"
99-
>
100-
<h2 className="mb-3 text-2xl font-semibold">
101-
Deploy{" "}
102-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
103-
-&gt;
104-
</span>
105-
</h2>
106-
<p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
107-
Instantly deploy your Next.js site to a shareable URL with Vercel.
108-
</p>
109-
</a>
110-
</div>
111-
</main>
5+
<div>
6+
<HeroSection />
7+
</div>
1128
);
1139
}

‎components/Header/GridBackground.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { useEffect, useState } from "react";
5+
6+
export default function GridBackground() {
7+
const param = 40;
8+
const [noOfBoxes, setNoOfBoxes] = useState({
9+
rows: 30,
10+
columns: 30,
11+
});
12+
13+
useEffect(() => {
14+
if (typeof window == "undefined") return;
15+
16+
const handleResize = () => {
17+
setNoOfBoxes({
18+
rows: Math.floor(window.innerHeight / param),
19+
columns: Math.floor(window.innerWidth / param),
20+
});
21+
};
22+
23+
// Initial Call
24+
handleResize();
25+
26+
window.addEventListener("resize", handleResize);
27+
return () => window.removeEventListener("resize", handleResize);
28+
}, []);
29+
30+
return (
31+
<div
32+
className="absolute left-0 top-0 grid h-screen w-screen bg-black"
33+
style={{
34+
gridTemplateColumns: `repeat(${noOfBoxes.columns}, 1fr)`,
35+
gridTemplateRows: `repeat(${noOfBoxes.rows}, 1fr)`,
36+
}}
37+
>
38+
{Array(noOfBoxes.columns * noOfBoxes.rows)
39+
.fill(0)
40+
.map((_, j) => (
41+
<div key={j} className="h-full w-full border border-gray-700"></div>
42+
))}
43+
</div>
44+
);
45+
}

‎components/Header/HeroSection.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client";
2+
3+
import NpxDevpulkit from "./NpxDevpulkit";
4+
import TypewriterEffect from "./Typewriter";
5+
import GridBackground from "./GridBackground";
6+
7+
export default function HeroSection() {
8+
return (
9+
<>
10+
<div id="home" className="h-screen w-screen" />
11+
<div className="absolute left-0 top-0 z-20 flex h-screen w-screen flex-col items-center justify-center">
12+
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
13+
<p className="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-2 text-4xl font-bold text-transparent sm:text-7xl">
14+
Hey, I am Pulkit
15+
</p>
16+
<TypewriterEffect />
17+
<NpxDevpulkit />
18+
</div>
19+
<GridBackground />
20+
</>
21+
);
22+
}

‎components/Header/NpxDevpulkit.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from "react";
2+
3+
export default function NpxDevpulkit() {
4+
const [copied, setCopied] = useState(false);
5+
function handleCopy() {
6+
navigator.clipboard.writeText("npx devpulkit").then(() => {
7+
setCopied(true);
8+
setTimeout(() => setCopied(false), 2000);
9+
});
10+
}
11+
return (
12+
<div
13+
className="mt-10 flex cursor-pointer items-center rounded-xl bg-white px-9 py-6 font-serif text-lg hover:bg-gray-200 md:mt-20 md:px-10 md:py-8 md:text-2xl"
14+
onClick={handleCopy}
15+
>
16+
npx devpulkit <IconClipboard copied={copied} />
17+
</div>
18+
);
19+
}
20+
21+
function IconClipboard({ copied }: { copied: boolean }) {
22+
return (
23+
<svg
24+
fill="currentColor"
25+
viewBox="0 0 16 16"
26+
className="ml-2 h-5 w-5 md:h-8 md:w-8"
27+
>
28+
{copied && (
29+
<path
30+
fillRule="evenodd"
31+
d="M10.854 7.146a.5.5 0 010 .708l-3 3a.5.5 0 01-.708 0l-1.5-1.5a.5.5 0 11.708-.708L7.5 9.793l2.646-2.647a.5.5 0 01.708 0z"
32+
/>
33+
)}
34+
<path d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" />
35+
<path d="M9.5 1a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5h3zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" />
36+
</svg>
37+
);
38+
}

0 commit comments

Comments
 (0)