Skip to content

Commit

Permalink
feat: complete basic home page by design
Browse files Browse the repository at this point in the history
  • Loading branch information
vignesh-gupta committed Oct 28, 2024
1 parent b362b5d commit ca4c0cb
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 4 deletions.
Binary file modified bun.lockb
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"next-themes": "^0.3.0",
"react": "19.0.0-rc-69d4b800-20241021",
"react-dom": "19.0.0-rc-69d4b800-20241021",
"react-icons": "^5.3.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7"
},
Expand Down
4 changes: 4 additions & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,10 @@ body {
body {
@apply bg-background text-foreground;
}

::selection{
@apply bg-foreground text-background;
}
}

.primary-button {
Expand Down
2 changes: 2 additions & 0 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { ThemeSwitch } from "@/components/theme/theme-switch";
import HeaderGradient from "@/components/common/header-gradient";
import Footer from "@/components/common/footer";
import FooterGradient from "@/components/common/footer-gradient";
import Header from "@/components/common/header";

export const metadata: Metadata = {
title: "Create Next App",
Expand All @@ -28,6 +29,7 @@ export default function RootLayout({
<body className={`antialiased relative ${inter.className}`}>
<HeaderGradient />
<ThemeProvider attribute="class" defaultTheme="dark">
<Header />
<ThemeSwitch className="fixed bottom-10 left-10" />
{children}
<Footer />
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const info: InfoCardsProps[] = [

const HomePage = () => {
return (
<main className="container max-w-screen-lg px-8 pt-24 mx-auto space-y-20">
<main className="container max-w-screen-lg px-8 pt-16 mx-auto space-y-20">
<HeroSection />
<ProjectSection showHeader />

Expand Down
4 changes: 2 additions & 2 deletions src/components/common/footer-gradient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import Image from "next/image";

const FooterGradient = () => {
return (
<div className="absolute inset-x-0 bottom-0 h-[550px]">
<div className="absolute inset-x-0 bottom-0 h-[550px] -z-50">
<div className="relative h-full w-full overflow-hidden">
<picture className="absolute bottom-0 left-1/2 block h-[550px] w-full -translate-x-1/2 select-none">
<picture className="absolute bottom-0 left-1/2 block h-[550px] w-full blur-3xl -translate-x-1/2 translate-y-5 select-none">
<Image src="/footer-gradient.svg" alt="hero gradient" fill />
</picture>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/header-gradient.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Image from "next/image";

const HeaderGradient = () => {
return (
<div className="absolute inset-x-0 top-0 select-none">
<div draggable={false} className="absolute inset-x-0 top-0 select-none -z-50">
<div className="relative h-[550px] w-full overflow-x-hidden">
<picture className="absolute left-1/2 top-0 z-[2] block h-[550px] w-[1440px] -translate-x-1/2 select-none">
<Image src="/header-gradient.svg" alt="hero gradient" fill />
Expand Down
57 changes: 57 additions & 0 deletions src/components/common/header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { navLinks, socials } from "@/lib/constants";
import Image from "next/image";
import Link from "next/link";

const Header = () => {
return (
<>
<header className="relative z-[999] pt-10 hidden px-4 md:block">
<div className="container mx-auto flex h-16 w-full max-w-[1024px] items-center justify-between rounded-full border-[1px] border-white/25 bg-white/25 px-8 backdrop-blur-md dark:border-[#5E5E5E]/20 dark:bg-[#18181D]/30">
<div className="flex items-center gap-10">
<Link aria-label="Vignesh Gupta Logo" href="/">
<Image src="/logo.svg" width={50} height={50} alt="Logo" />
</Link>
<nav
aria-label="Main"
data-orientation="horizontal"
dir="ltr"
className="relative flex justify-center"
>
<div className="relative">
<ul className="m-0 flex list-none items-center gap-10 rounded-[6px] p-1">
{navLinks.map((link) => (
<li key={`nav-link-${link.name}`}>
<Link
className="block py-2 text-onyx/70 transition-colors hover:text-onyx dark:text-muted-foreground dark:hover:text-white"
href={link.href}
>
{link.name}
</Link>
</li>
))}
</ul>
</div>
</nav>
</div>
<div className="flex items-center gap-4">
<div className="flex gap-6 text-onyx/70 dark:text-white/70">
{socials.map((social) => (
<Link
key={`header-social-${social.name}`}
className="group transition hover:text-onyx dark:hover:text-white"
target="_blank"
aria-label={social.name}
href={social.href}
>
<social.icon className="size-6" />
</Link>
))}
</div>
</div>
</div>
</header>
</>
);
};

export default Header;
23 changes: 23 additions & 0 deletions src/lib/constants.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { FaGithub, FaLinkedin } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";

export const socials = [
{ name: "Github", href: "https://github.com/vignesh-gupta/", icon: FaGithub },
{
name: "X (Twitter)",
href: "https://x.com/vigneshfixes/",
icon: FaXTwitter,
},
{
name: "LinkedIn",
href: "https://www.linkedin.com/in/vigneshgupta/",
icon: FaLinkedin,
},
];

export const navLinks = [
{ name: "About", href: "/about" },
{ name: "Work", href: "/work" },
{ name: "Notebook", href: "/notebook" },
{ name: "Contact", href: "/contact" },
];

0 comments on commit ca4c0cb

Please sign in to comment.