Skip to content

Commit cd8b25f

Browse files
pradipchaudharypradipchaudhary
committed
update UI
1 parent f6caf60 commit cd8b25f

File tree

6 files changed

+316
-96
lines changed

6 files changed

+316
-96
lines changed

‎package-lock.json‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"lint": "eslint"
1010
},
1111
"dependencies": {
12+
"lucide-react": "^0.556.0",
1213
"next": "16.0.3",
1314
"react": "19.2.0",
1415
"react-dom": "19.2.0",

‎src/app/globals.css‎

Lines changed: 79 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,100 @@
11
@import "tailwindcss";
22

3-
/* Reset some default styles */
4-
html,
5-
body {
6-
padding: 0;
7-
margin: 0;
8-
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
9-
'Helvetica Neue', Arial, sans-serif;
10-
background-color: #f9fafb;
11-
/* Light theme background */
12-
color: #1f2937;
13-
/* Dark gray text for light theme */
14-
scroll-behavior: smooth;
15-
}
3+
/* -----------------------
4+
BASE THEME (Tailwind v4)
5+
------------------------ */
6+
@layer base {
7+
:root {
8+
--background: 222 22% 6%;
9+
--foreground: 220 27% 98%;
1610

17-
a {
18-
color: inherit;
19-
text-decoration: none;
20-
}
11+
--primary: 220 90% 56%;
12+
--primary-foreground: 0 0% 100%;
2113

22-
* {
23-
box-sizing: border-box;
24-
}
14+
--secondary: 220 20% 16%;
15+
--secondary-foreground: 220 27% 96%;
2516

26-
/* Scrollbar Styling */
27-
::-webkit-scrollbar {
28-
width: 8px;
29-
}
17+
--muted: 220 15% 24%;
18+
--muted-foreground: 220 15% 70%;
3019

31-
::-webkit-scrollbar-thumb {
32-
background-color: rgba(100, 116, 139, 0.5);
33-
/* gray-400 */
34-
border-radius: 8px;
35-
}
20+
--border: 220 15% 22%;
21+
--input: 220 20% 26%;
22+
--ring: 220 90% 56%;
23+
--radius: 0.75rem;
3624

37-
::-webkit-scrollbar-thumb:hover {
38-
background-color: rgba(100, 116, 139, 0.8);
39-
}
25+
/* ✨ GRADIENTS */
26+
--gradient-hero: linear-gradient(135deg,
27+
hsl(220 90% 56% / 0.15),
28+
hsl(280 75% 60% / 0.15),
29+
hsl(200 80% 65% / 0.15));
4030

41-
/* Headings */
42-
h1,
43-
h2,
44-
h3,
45-
h4,
46-
h5,
47-
h6 {
48-
font-weight: 600;
49-
color: #111827;
50-
/* dark text for light theme */
51-
margin: 0;
52-
}
31+
--gradient-text: linear-gradient(90deg,
32+
hsl(220 90% 60%),
33+
hsl(280 70% 65%));
5334

54-
/* Paragraphs */
55-
p {
56-
line-height: 1.6;
57-
margin: 0;
58-
}
35+
--gradient-card: linear-gradient(180deg,
36+
hsl(220 20% 10%),
37+
hsl(220 20% 6%));
5938

60-
/* Buttons */
61-
button {
62-
cursor: pointer;
63-
transition: all 0.2s ease-in-out;
64-
}
39+
--gradient-border: linear-gradient(90deg,
40+
hsl(220 80% 60%),
41+
hsl(280 80% 65%));
6542

66-
/* Links hover */
67-
a:hover {
68-
text-decoration: underline;
43+
/* ✨ Glow effects */
44+
--glow-primary: 0 0 40px hsl(220 90% 60% / 0.35);
45+
--glow-primary-intense: 0 0 80px hsl(220 90% 60% / 0.45);
46+
}
6947
}
7048

71-
/* Utility class for visually hidden elements */
72-
.sr-only {
73-
position: absolute;
74-
width: 1px;
75-
height: 1px;
76-
padding: 0;
77-
overflow: hidden;
78-
clip: rect(0, 0, 0, 0);
79-
white-space: nowrap;
80-
border: 0;
49+
/* Apply global text + background */
50+
body {
51+
background-color: hsl(var(--background));
52+
color: hsl(var(--foreground));
53+
font-family: var(--font-geist-sans), sans-serif;
8154
}
8255

83-
/* Custom light theme card background */
84-
.card {
85-
background-color: #ffffff;
86-
border-radius: 0.5rem;
87-
/* rounded-md */
88-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
89-
padding: 1rem;
90-
}
56+
/* -----------------------
57+
UTILITIES
58+
------------------------ */
59+
@layer utilities {
60+
.font-mono {
61+
font-family: var(--font-geist-mono), monospace;
62+
}
63+
64+
.text-gradient {
65+
background: var(--gradient-text);
66+
-webkit-background-clip: text;
67+
color: transparent;
68+
}
69+
70+
.bg-hero-gradient {
71+
background: var(--gradient-hero);
72+
}
9173

92-
/* Code block styling */
93-
pre {
94-
background-color: #f3f4f6;
95-
/* Tailwind gray-100 */
96-
padding: 1rem;
97-
border-radius: 0.5rem;
98-
overflow-x: auto;
74+
.bg-grid {
75+
background-image:
76+
linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
77+
linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px);
78+
background-size: 60px 60px;
79+
}
80+
81+
.glow-primary {
82+
box-shadow: var(--glow-primary);
83+
}
84+
85+
.glow-primary-intense {
86+
box-shadow: var(--glow-primary-intense);
87+
}
9988
}
10089

101-
code {
102-
font-family: 'Fira Code', monospace;
103-
font-size: 0.875rem;
104-
color: #111827;
105-
/* dark text */
90+
/* -----------------------
91+
SCROLLBAR
92+
------------------------ */
93+
::-webkit-scrollbar {
94+
width: 8px;
10695
}
10796

108-
/* Image responsive helper */
109-
img {
110-
display: block;
111-
max-width: 100%;
112-
height: auto;
97+
::-webkit-scrollbar-thumb {
98+
background: hsl(var(--muted));
99+
border-radius: 4px;
113100
}

‎src/app/page.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
import ComingSoon from "@/components/ComingSoon";
1+
import Header from "@/components/Header";
2+
import Hero from "@/components/Hero";
23

34
export default function Home() {
45
return (
5-
<>
6-
<ComingSoon />
6+
<div className="min-h-screen bg-background">
7+
{/* header */}
8+
<Header />
9+
{/* main */}
10+
<main>
11+
<Hero />
12+
</main>
713

8-
</>
14+
</div>
915
);
1016
}

‎src/components/Header.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
"use client";
2+
3+
import React from "react";
4+
import Image from "next/image";
5+
import Link from "next/link";
6+
import { Star, Github } from "lucide-react";
7+
8+
const Header: React.FC = () => {
9+
return (
10+
<header className="sticky top-0 z-50 border-b border-white/10 bg-neutral-950/60 backdrop-blur">
11+
<div className="mx-auto max-w-7xl py-2 px-4 sm:px-6 lg:px-8">
12+
<div className="flex h-16 items-center justify-between">
13+
14+
{/* LEFT: Logo + Navigation */}
15+
<div className="flex items-center gap-8">
16+
17+
{/* Logo */}
18+
<Link href="/" className="flex items-center">
19+
<Image
20+
src="/100PlusJS.png"
21+
alt="Pradip Chaudhary Logo"
22+
width={170}
23+
height={60}
24+
className="rounded-md"
25+
priority
26+
/>
27+
</Link>
28+
29+
{/* Navigation */}
30+
<nav className="hidden md:flex items-center gap-7">
31+
<Link
32+
href="#projects"
33+
className="text-sm text-neutral-300 hover:text-white transition"
34+
>
35+
Projects
36+
</Link>
37+
38+
<a
39+
href="https://github.com/pradipchaudhary/100-Plus-JavaScript-Projects"
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
className="text-sm text-neutral-300 hover:text-white transition"
43+
>
44+
Repository
45+
</a>
46+
47+
<Link
48+
href="#about"
49+
className="text-sm text-neutral-300 hover:text-white transition"
50+
>
51+
About
52+
</Link>
53+
54+
<Link
55+
href="#contact"
56+
className="text-sm text-neutral-300 hover:text-white transition"
57+
>
58+
Contact
59+
</Link>
60+
</nav>
61+
</div>
62+
63+
{/* RIGHT: GitHub Buttons */}
64+
<div className="flex items-center gap-3">
65+
66+
{/* Star Count Button (external) */}
67+
<a
68+
href="https://github.com/pradipchaudhary/100-Plus-JavaScript-Projects"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
aria-label="GitHub Stars"
72+
className="group inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm font-medium text-white hover:bg-white/10 transition"
73+
>
74+
<Star className="h-4 w-4 text-amber-400" />
75+
<span id="starCount" className="tabular-nums text-neutral-200">
76+
—
77+
</span>
78+
</a>
79+
80+
{/* Star Repo Button (external) */}
81+
<a
82+
href="https://github.com/pradipchaudhary/100-Plus-JavaScript-Projects"
83+
target="_blank"
84+
rel="noopener noreferrer"
85+
aria-label="Star Repository on GitHub"
86+
className="inline-flex items-center gap-2 rounded-md border border-indigo-500/30 bg-indigo-500/10 px-3 py-2 text-sm font-medium text-indigo-300 hover:bg-indigo-500/20 hover:text-indigo-200 transition"
87+
>
88+
<Github className="h-4 w-4" />
89+
<span>Star Repo</span>
90+
</a>
91+
92+
</div>
93+
</div>
94+
</div>
95+
</header>
96+
);
97+
};
98+
99+
export default Header;

0 commit comments

Comments
 (0)