From fd499d9f7018d33e9a386a295c94ea2585e7a171 Mon Sep 17 00:00:00 2001 From: Priyanshu Date: Sat, 14 Feb 2026 19:20:55 +0530 Subject: [PATCH 01/14] feat: Revamp Navbar with Framer Motion animations and introduce ambient background orbs and ScrambleText component. --- src/app/page.tsx | 139 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 97 insertions(+), 42 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 4162543..aad681b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,22 +1,38 @@ "use client"; -import React, { useEffect } from "react"; -import AchievementsSection from "@/components/animation/AchievementSection"; +import { useEffect } from "react"; import { Button } from "@/components/ui/button"; -import { FiDownload } from "react-icons/fi"; +import { FiDownload, FiArrowRight } from "react-icons/fi"; import Social from "@/components/Social"; -import ProfilePicPage from "@/app/_components/ProfilePic"; +// import ProfilePicPage from "@/app/_components/ProfilePic"; import Link from "next/link"; -import { FlipWords } from "@/components/animation/Flipword"; +// import { FlipWords } from "@/components/animation/Flipword"; import { motion } from "framer-motion"; -import GitHubStats from "@/app/_components/GitHubStats"; +import ScrambleText from "@/components/animation/ScrambleText"; +// import AchievementsSection from "@/components/animation/AchievementSection"; import { config } from "@/lib/config"; import { useRouter } from "next/navigation"; +// import RotatingText from "@/components/RotatingText"; + const HeroSection = () => { const { username, description, name } = config; const router = useRouter(); + + const text = [ + "Full Stack Developer", + "Problem Solver", + "Software Engineer", + "NodeJS Developer", + "Software Architect", + "Web Developer", + "Pragmatic Engineer", + "NextJS Developer", + "Open Source Contributor", + "AI Engineer", + ]; + useEffect(() => { window.document.title = `${name} | Portfolio`; - }, []); + }, [name]); return ( { opacity: 1, transition: { delay: 2.4, duration: 0.5, ease: "easeIn" }, }} - className="bg-project" > -
-
+
+
{/* Text Section */} -
- - Full Stack Developer | Software Engineer | Open Source Contributor - -

- {"I'm "} - + {/* Badge */} + + + + Available for work + + + + +

{"I'm a "}

+ -

-

+ + + {description} -

-
+ + + - + {/* */} + -
- -
- {/* Image Scetion */} -
- - +
+ + {/* Profile Picture Section */} + {/* + {/* */} + {/* */} + {/* */}
- {/* Achievememt Section */} - + + {/* Achievement Stats Section */} + {/* */} ); }; From a8b1657cca49c1c3a2de9dbd82c80fdbfcdc575c Mon Sep 17 00:00:00 2001 From: Priyanshu Date: Mon, 16 Feb 2026 10:37:01 +0530 Subject: [PATCH 02/14] feat: Revamp portfolio UI/UX with new components, animations, and content restructuring across pages. --- src/app/globals.css | 338 +++++++++++++++++++++++++++++++++++++++++--- src/app/layout.tsx | 17 ++- src/app/page.tsx | 190 ++++++++++++------------- 3 files changed, 421 insertions(+), 124 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 8df4b3b..6ae12bc 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -14,6 +14,8 @@ --color-primary-foreground: hsl(var(--primary-foreground)); --color-accent: #166466; + --color-accent-hover: #1a8385; + --color-accent-glow: rgba(22, 100, 102, 0.4); --color-accent-foreground: hsl(var(--accent-foreground)); --radius-lg: var(--radius); @@ -22,6 +24,10 @@ --animate-accordion-down: accordion-down 0.2s ease-out; --animate-accordion-up: accordion-up 0.2s ease-out; + --animate-float: float 6s ease-in-out infinite; + --animate-pulse-glow: pulse-glow 2s ease-in-out infinite; + --animate-shimmer: shimmer 2s linear infinite; + --animate-fade-up: fade-up 0.6s ease-out both; @keyframes accordion-down { from { @@ -39,19 +45,160 @@ height: 0; } } + @keyframes float { + 0%, + 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-20px); + } + } + @keyframes pulse-glow { + 0%, + 100% { + box-shadow: 0 0 20px rgba(22, 100, 102, 0.2); + } + 50% { + box-shadow: 0 0 40px rgba(22, 100, 102, 0.5); + } + } + @keyframes shimmer { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } + } + @keyframes fade-up { + from { + opacity: 0; + transform: translateY(24px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + @keyframes gradient-shift { + 0%, + 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + } + @keyframes orb-float-1 { + 0%, + 100% { + transform: translate(0, 0) scale(1); + } + 25% { + transform: translate(30px, -40px) scale(1.1); + } + 50% { + transform: translate(-20px, -80px) scale(0.95); + } + 75% { + transform: translate(40px, -30px) scale(1.05); + } + } + @keyframes orb-float-2 { + 0%, + 100% { + transform: translate(0, 0) scale(1); + } + 25% { + transform: translate(-40px, 30px) scale(1.05); + } + 50% { + transform: translate(30px, 60px) scale(0.9); + } + 75% { + transform: translate(-20px, 40px) scale(1.1); + } + } + @keyframes border-glow { + 0%, + 100% { + border-color: rgba(22, 100, 102, 0.3); + } + 50% { + border-color: rgba(22, 100, 102, 0.8); + } + } } +/* ── Utility Classes ── */ + @utility container { margin-inline: auto; padding-inline: 1rem; } @utility bg-project { - background-image: url('/bg.jpg'); + background-image: url("/bg.jpg"); background-attachment: fixed; background-size: cover; } +@utility glass { + background: rgba(15, 23, 42, 0.6); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +@utility glass-card { + background: rgba(15, 23, 42, 0.5); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 16px; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +@utility glass-card-hover { + &:hover { + background: rgba(15, 23, 42, 0.7); + border-color: rgba(22, 100, 102, 0.4); + box-shadow: + 0 8px 32px rgba(22, 100, 102, 0.15), + 0 0 0 1px rgba(22, 100, 102, 0.1); + transform: translateY(-4px); + } +} + +@utility gradient-text { + background: linear-gradient(135deg, #166466 0%, #1a8385 40%, #22d3ee 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +@utility gradient-border { + position: relative; +} + +@utility glow-accent { + box-shadow: + 0 0 20px rgba(22, 100, 102, 0.3), + 0 0 60px rgba(22, 100, 102, 0.1); +} + +@utility text-shimmer { + background: linear-gradient(90deg, #166466, #22d3ee, #166466); + background-size: 200% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: shimmer 3s linear infinite; +} + +/* ── Base Layer ── */ + @layer base { *, ::after, @@ -64,14 +211,15 @@ textarea::placeholder { color: var(--color-gray-400); } - button:not(:disabled), [role="button"]:not(:disabled) { + button:not(:disabled), + [role="button"]:not(:disabled) { cursor: pointer; } } @layer base { :root { - --bg-image: url('/bg.jpg'); + --bg-image: url("/bg.jpg"); --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; @@ -96,19 +244,59 @@ @layer base { * { color: #fff; - transition-property: all; - transition-duration: 300ms; } + body { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + "Noto Sans", + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji"; /* background-color: #18181b; bg-zinc-950 */ color: #fff; - background: var(--bg-image) no-repeat center center fixed; + background: + radial-gradient( + ellipse at top left, + rgba(30, 30, 35, 0.9), + transparent 50% + ), + radial-gradient( + ellipse at bottom right, + rgba(25, 25, 30, 0.8), + transparent 50% + ), + radial-gradient( + ellipse at center, + rgba(20, 20, 25, 0.7), + transparent 70% + ), + linear-gradient( + 135deg, + #0a0a0a 0%, + #121214 25%, + #0f0f11 50%, + #141416 75%, + #0a0a0c 100% + ); + background-attachment: fixed; + overflow-x: hidden; } + h1 { font-size: 48px; line-height: 1.1; - font-weight: 600; + font-weight: 700; + letter-spacing: -0.02em; } @media (min-width: 1280px) { h1 { @@ -118,7 +306,8 @@ h2 { font-size: 36px; line-height: 1.1; - font-weight: 600; + font-weight: 700; + letter-spacing: -0.01em; } @media (min-width: 1280px) { h2 { @@ -135,19 +324,136 @@ font-size: 24px; } } + .text-outline { -webkit-text-stroke: 1px #ffffff; } .text-outline-hover { -webkit-text-stroke: 1px #166466; } -} + /* Scrollbar styling */ + ::-webkit-scrollbar { + width: 6px; + } + ::-webkit-scrollbar-track { + background: rgba(15, 23, 42, 0.5); + } + ::-webkit-scrollbar-thumb { + background: rgba(22, 100, 102, 0.5); + border-radius: 3px; + } + ::-webkit-scrollbar-thumb:hover { + background: rgba(22, 100, 102, 0.8); + } -/* .glassmorphism { - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - border-radius: 10px; - border: 1px solid rgba(255, 255, 255, 0.2); + /* Selection color */ + ::selection { + background: rgba(22, 100, 102, 0.4); + color: #fff; } - */ \ No newline at end of file +} + +/* ── Animated Background Orbs ── */ + +.orb { + position: fixed; + border-radius: 50%; + filter: blur(80px); + opacity: 0.15; + pointer-events: none; + z-index: -1; +} + +.orb-1 { + width: 400px; + height: 400px; + background: radial-gradient(circle, #166466, transparent 70%); + top: 10%; + left: 10%; + animation: orb-float-1 20s ease-in-out infinite; +} + +.orb-2 { + width: 350px; + height: 350px; + background: radial-gradient(circle, #22d3ee, transparent 70%); + top: 60%; + right: 10%; + animation: orb-float-2 25s ease-in-out infinite; +} + +.orb-3 { + width: 300px; + height: 300px; + background: radial-gradient(circle, #0f766e, transparent 70%); + bottom: 5%; + left: 40%; + animation: orb-float-1 18s ease-in-out infinite reverse; +} + +/* ── Section Divider ── */ + +.section-divider { + width: 100%; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + rgba(22, 100, 102, 0.5), + transparent + ); + margin: 2rem 0; +} + +/* ── Gradient Border Top (for navbar, footer) ── */ + +.gradient-border-top { + position: relative; +} +.gradient-border-top::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + transparent, + #166466, + #22d3ee, + #166466, + transparent + ); +} + +.gradient-border-bottom { + position: relative; +} +.gradient-border-bottom::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + #166466, + #22d3ee, + #166466, + transparent + ); +} + +/* ── Focus Styles ── */ + +input:focus, +textarea:focus, +select:focus { + outline: none; + border-color: #166466 !important; + box-shadow: 0 0 0 3px rgba(22, 100, 102, 0.2); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index dd04f6b..4f9bf27 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,12 +20,12 @@ export const metadata: Metadata = { template: "%s | Priyanshu", }, description: - "Modern, animated portfolio website built with Next.js 14, React 18, and TypeScript. Showcasing projects, skills, and contact info.", + "Modern, animated portfolio website built with Next.js, React, and TypeScript. Showcasing projects, skills, and contact info.", metadataBase: new URL("https://coderx85.vercel.app"), openGraph: { title: "Priyanshu | Portfolio", description: - "Modern, animated portfolio website built with Next.js 14, React 18, and TypeScript.", + "Modern, animated portfolio website built with Next.js, React, and TypeScript.", url: "https://coderx85.vercel.app", siteName: "Priyanshu Portfolio", images: [ @@ -43,7 +43,7 @@ export const metadata: Metadata = { card: "summary_large_image", title: "Priyanshu | Portfolio", description: - "Modern, animated portfolio website built with Next.js 14, React 18, and TypeScript.", + "Modern, animated portfolio website built with Next.js, React, and TypeScript.", creator: "@Coderx85", images: ["/images/hero.png"], }, @@ -90,10 +90,17 @@ export default function RootLayout({ enableSystem disableTransitionOnChange > -
+ {/* Ambient Background Orbs */} +