Skip to content

Commit 4a67240

Browse files
sankalpaacharyasankalpaacharya
committed
feat: add footer component and integrate it into blog post layout
1 parent 3940938 commit 4a67240

3 files changed

Lines changed: 145 additions & 24 deletions

File tree

‎app/blog/[slug]/page.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { HugeiconsIcon } from "@hugeicons/react";
55
import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
66
import { TableOfContents } from "@/components/blog/table-of-contents";
77
import { AskAIButtons } from "@/components/blog/ask-ai-buttons";
8+
import { Footer } from "@/components/footer";
89

910
export function generateStaticParams() {
1011
const slugs = getAllPostSlugs();
@@ -69,7 +70,8 @@ export default async function BlogPost({
6970
: "font-[family-name:var(--font-poppins)] prose prose-invert max-w-none pb-8 prose-headings:font-medium prose-headings:tracking-tight prose-headings:text-foreground prose-h1:text-[1.875rem] prose-h1:mt-16 prose-h1:mb-8 prose-h2:text-[1.375rem] prose-h2:mt-14 prose-h2:mb-6 prose-h3:text-lg prose-h3:mt-10 prose-h3:mb-4 prose-p:text-[1.0625rem] prose-p:text-foreground/90 prose-p:leading-[1.9] prose-p:my-7 prose-strong:text-foreground prose-strong:font-medium prose-code:text-sm prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-a:text-[#e8a87c] prose-a:no-underline hover:prose-a:underline prose-a:transition-colors prose-li:text-[1.0625rem] prose-li:text-foreground/90 prose-li:my-3 prose-li:leading-[1.8] prose-ul:my-7 prose-ol:my-7 prose-blockquote:border-l-[#e8a87c] prose-blockquote:text-foreground/70 prose-blockquote:italic prose-blockquote:pl-6 prose-blockquote:my-8 prose-pre:p-0 prose-pre:m-0 prose-pre:bg-transparent prose-pre:my-8 prose-img:my-10 prose-img:rounded-lg prose-hr:my-16 prose-hr:border-muted-foreground/15";
7071

7172
return (
72-
<main className="min-h-screen relative">
73+
<>
74+
<main className="min-h-screen relative">
7375
{/* Header for normal blog posts */}
7476
{!isScrolly && (
7577
<div className="max-w-2xl mx-auto px-6">
@@ -134,5 +136,7 @@ export default async function BlogPost({
134136
</div>
135137
)}
136138
</main>
139+
<Footer />
140+
</>
137141
);
138142
}

‎app/page.tsx‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,6 @@ export default function Home() {
9797
<motion.div
9898
key={post.slug}
9999
variants={item}
100-
layout
101-
initial="collapsed"
102-
whileHover="expanded"
103100
className="group"
104101
>
105102
<Link
@@ -124,28 +121,21 @@ export default function Home() {
124121
</span>
125122
</div>
126123

127-
{/* Hidden Details */}
128-
<motion.div
129-
variants={{
130-
collapsed: { height: 0, opacity: 0, marginTop: 0 },
131-
expanded: {
132-
height: "auto",
133-
opacity: 1,
134-
marginTop: 4,
135-
},
136-
}}
137-
transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
138-
className="overflow-hidden"
124+
{/* Description — inline expand using grid for smooth height animation */}
125+
<div
126+
className="grid grid-rows-[0fr] group-hover:grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-out"
139127
>
140-
<div className="flex flex-col md:flex-row md:justify-between pl-9 pr-0 md:pr-14 pb-4 gap-4">
141-
<p className="text-sm text-muted-foreground/80 max-w-lg leading-relaxed font-serif italic">
142-
{post.description}
143-
</p>
144-
<span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/60 shrink-0 pt-1">
145-
{post.topic}
146-
</span>
128+
<div className="overflow-hidden">
129+
<div className="flex flex-col md:flex-row md:justify-between pl-9 pr-0 md:pr-14 pb-4 gap-3">
130+
<p className="text-sm text-muted-foreground/80 max-w-lg leading-relaxed font-serif italic">
131+
{post.description}
132+
</p>
133+
<span className="font-mono text-[10px] uppercase tracking-wider text-muted-foreground/60 shrink-0 pt-1">
134+
{post.topic}
135+
</span>
136+
</div>
147137
</div>
148-
</motion.div>
138+
</div>
149139
</Link>
150140
</motion.div>
151141
))}

‎components/footer.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import Link from "next/link";
2+
import Image from "next/image";
3+
import { HugeiconsIcon } from "@hugeicons/react";
4+
import {
5+
NewTwitterIcon,
6+
LinkedinIcon,
7+
GithubIcon,
8+
RssIcon,
9+
} from "@hugeicons/core-free-icons";
10+
11+
const socialLinks = [
12+
{
13+
name: "X (Twitter)",
14+
href: "https://x.com/sankalpa_02",
15+
icon: NewTwitterIcon,
16+
},
17+
{
18+
name: "LinkedIn",
19+
href: "https://linkedin.com/in/sankalpa02",
20+
icon: LinkedinIcon,
21+
},
22+
{
23+
name: "GitHub",
24+
href: "https://github.com/sankalpaacharya",
25+
icon: GithubIcon,
26+
},
27+
{
28+
name: "RSS",
29+
href: "/rss.xml",
30+
icon: RssIcon,
31+
},
32+
];
33+
34+
const navLinks = [
35+
{ label: "Home", href: "/" },
36+
{ label: "Hire Me", href: "/hire-me" },
37+
{ label: "RSS", href: "/rss.xml" },
38+
];
39+
40+
export function Footer() {
41+
const year = new Date().getFullYear();
42+
43+
return (
44+
<footer className="relative mt-24 border-t border-border">
45+
<div className="max-w-2xl mx-auto px-6 py-14">
46+
{/* Top section */}
47+
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-10">
48+
{/* Brand */}
49+
<div className="flex flex-col gap-4">
50+
<Link href="/" className="flex items-center gap-3 group w-fit">
51+
<div className="p-0.5 rounded-xl bg-linear-to-br from-white/20 to-white/5 backdrop-blur-sm">
52+
<div className="w-9 h-9 rounded-lg overflow-hidden bg-background/50 border border-white/10">
53+
<Image
54+
src="https://github.com/sankalpaacharya.png"
55+
alt="Sanku"
56+
width={36}
57+
height={36}
58+
className="object-cover"
59+
/>
60+
</div>
61+
</div>
62+
<span className="font-semibold text-foreground group-hover:text-primary transition-colors duration-200">
63+
Inside React
64+
</span>
65+
</Link>
66+
67+
<p className="text-sm text-muted-foreground leading-relaxed max-w-65">
68+
Deep dives into React internals,{" "}
69+
<span className="text-primary/80">Fiber</span>, reconciliation,
70+
and the web platform.
71+
</p>
72+
</div>
73+
74+
{/* Navigation + Social */}
75+
<div className="flex flex-col gap-6">
76+
{/* Nav */}
77+
<nav className="flex flex-col gap-2.5">
78+
{navLinks.map((link) => (
79+
<Link
80+
key={link.href}
81+
href={link.href}
82+
className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-200 w-fit relative group"
83+
>
84+
{link.label}
85+
<span className="absolute -bottom-px left-0 w-0 h-px bg-primary group-hover:w-full transition-all duration-300" />
86+
</Link>
87+
))}
88+
</nav>
89+
90+
{/* Socials */}
91+
<div className="flex items-center gap-1">
92+
{socialLinks.map((social) => (
93+
<a
94+
key={social.name}
95+
href={social.href}
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
aria-label={social.name}
99+
className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-all duration-200"
100+
>
101+
<HugeiconsIcon icon={social.icon} size={15} />
102+
</a>
103+
))}
104+
</div>
105+
</div>
106+
</div>
107+
108+
{/* Divider */}
109+
<div className="mt-12 mb-6 h-px bg-border" />
110+
111+
{/* Bottom bar */}
112+
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 text-xs text-muted-foreground/50">
113+
<p>
114+
© {year}{" "}
115+
<span className="text-muted-foreground/70">Sankalpa Acharya</span>.
116+
All rights reserved.
117+
</p>
118+
<p>
119+
Built with{" "}
120+
<span className="text-primary/70">Next.js</span> &amp;{" "}
121+
<span className="text-primary/70">Tailwind CSS</span>
122+
</p>
123+
</div>
124+
</div>
125+
</footer>
126+
);
127+
}

0 commit comments

Comments
 (0)