Skip to content

Commit fdcb21a

Browse files
sonnessonnes
committed
Refactor: Remove Snippet functionality and update layout
- Deleted Snippet document type and related components, including pages and sitemap entries. - Updated layout styles for improved visual consistency. - Adjusted main page to focus solely on articles, removing references to snippets. - Enhanced header with author name for better identification. - Cleaned up navigation by removing the Snippets link.
1 parent c52dd28 commit fdcb21a

File tree

11 files changed

+106
-285
lines changed

11 files changed

+106
-285
lines changed

‎app/layout.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,8 @@ export default function RootLayout({
5757
return (
5858
<html className="h-full antialiased" lang="en">
5959
<head />
60-
<body className="flex h-full min-h-screen flex-col bg-zinc-50 dark:bg-black">
60+
<body className="flex h-full min-h-screen flex-col bg-white dark:bg-zinc-900">
6161
<ClientThemeProvider>
62-
<div className="fixed inset-0 flex justify-center sm:px-8">
63-
<div className="flex w-full max-w-7xl lg:px-8">
64-
<div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
65-
</div>
66-
</div>
6762
<div className="relative">
6863
<Header />
6964
<main>{children}</main>

‎app/page.tsx

Lines changed: 94 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import Image from 'next/image';
2-
3-
4-
import clsx from 'clsx';
5-
import { allArticles, allSnippets } from 'contentlayer/generated';
6-
import type { Snippet } from 'contentlayer/generated';
7-
2+
import { allArticles } from 'contentlayer/generated';
83
import { Container } from '@/components/container';
94
import {
105
GitHubIcon,
@@ -17,13 +12,13 @@ import Resume, { Experience } from '@/components/resume';
1712
import logoGojek from '@/public/images/logos/gojek.jpeg';
1813
import logoInfosys from '@/public/images/logos/infosys.jpeg';
1914
import logoPagalguy from '@/public/images/logos/pg.jpeg';
20-
import { Card } from '@/components/card';
15+
2116
import type { Article } from 'contentlayer/generated';
2217
import { formatDate } from '@/lib/formatDate';
2318
import photos from '@/lib/photos';
2419

2520
const resume: Experience[] = [
26-
{
21+
{
2722
company: 'Gojek',
2823
title: 'Senior Principal Architect',
2924
logo: logoGojek,
@@ -54,24 +49,13 @@ const resume: Experience[] = [
5449
];
5550

5651
function Photos() {
57-
let rotations = [
58-
'rotate-2',
59-
'-rotate-2',
60-
'rotate-2',
61-
'rotate-2',
62-
'-rotate-2',
63-
];
64-
6552
return (
66-
<div className="mt-16 sm:mt-20">
67-
<div className="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
68-
{photos.map((image, imageIndex) => (
53+
<div className="mt-6">
54+
<div className="grid grid-cols-3 gap-2">
55+
{photos.slice(0, 6).map((image, imageIndex) => (
6956
<div
7057
key={imageIndex}
71-
className={clsx(
72-
'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
73-
rotations[imageIndex % rotations.length]
74-
)}
58+
className="relative aspect-square overflow-hidden rounded-lg"
7559
>
7660
<Image
7761
src={image.src}
@@ -88,98 +72,105 @@ function Photos() {
8872

8973
function Article({ article }: { article: Article }) {
9074
return (
91-
<Card as="article">
92-
<Card.Title href={article.slug}>
93-
{article.title}
94-
</Card.Title>
95-
<Card.Eyebrow as="time" dateTime={article.date} decorate>
96-
{formatDate(article.date)}
97-
</Card.Eyebrow>
98-
<Card.Description>{article.description}</Card.Description>
99-
<Card.Cta>Read</Card.Cta>
100-
</Card>
101-
);
102-
}
103-
104-
function Snippet({ snippet }: { snippet: Snippet }) {
105-
return (
106-
<Card as="article">
107-
<Card.Title href={snippet.slug}>
108-
{snippet.title}
109-
</Card.Title>
110-
<Card.Eyebrow as="time" dateTime={snippet.date} decorate>
111-
{formatDate(snippet.date)}
112-
</Card.Eyebrow>
113-
<Card.Cta>View</Card.Cta>
114-
</Card>
75+
<article className="group relative flex flex-col items-start">
76+
<div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" />
77+
<div className="relative z-10 flex w-full items-center justify-between gap-4">
78+
<h2 className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
79+
<a href={article.slug}>
80+
<span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
81+
<span className="relative z-10">{article.title}</span>
82+
</a>
83+
</h2>
84+
<time
85+
className="flex items-center text-sm text-zinc-400 dark:text-zinc-500"
86+
dateTime={article.date}
87+
>
88+
{formatDate(article.date)}
89+
</time>
90+
</div>
91+
<p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
92+
{article.description}
93+
</p>
94+
<div className="relative z-10 mt-4 flex items-center text-sm font-medium text-red-500">
95+
Read article
96+
</div>
97+
</article>
11598
);
11699
}
117100

118101
export default async function Home() {
119-
const articles = allArticles.sort((a, b) => b.date.localeCompare(a.date)).slice(0, 3);
120-
const snippets = allSnippets.sort((a, b) => b.date.localeCompare(a.date)).slice(0, 3);
121-
102+
const articles = allArticles.sort((a, b) => b.date.localeCompare(a.date));
122103
return (
123104
<>
124105
<Container className="mt-9">
125-
<div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
126-
<div>
127-
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
128-
Ravi Atluri.
129-
</h1>
130-
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
131-
Sr. Principal Architect at Gojek. Working scalable and reliable
132-
systems & abstractions for product engineering teams.
133-
</p>
134-
<div className="mt-6 flex gap-6">
135-
<SocialLink
136-
href="https://twitter.com/sonnes"
137-
aria-label="Follow on Twitter"
138-
icon={TwitterIcon}
139-
/>
140-
<SocialLink
141-
href="https://instagram.com/sonnes"
142-
aria-label="Follow on Instagram"
143-
icon={InstagramIcon}
144-
/>
145-
<SocialLink
146-
href="https://github.com/sonnes"
147-
aria-label="Follow on GitHub"
148-
icon={GitHubIcon}
149-
/>
150-
<SocialLink
151-
href="https://www.linkedin.com/in/atluriravi"
152-
aria-label="Follow on LinkedIn"
153-
icon={LinkedInIcon}
154-
/>
106+
<div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-[1fr,400px]">
107+
{/* Main Content (Left Side) */}
108+
<div className="space-y-20">
109+
<div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40">
110+
<div className="flex flex-col space-y-16">
111+
{articles.map((article) => (
112+
<Article key={article.slug} article={article} />
113+
))}
114+
</div>
155115
</div>
156116
</div>
157-
<div className="space-y-10 lg:pl-16 xl:pl-24">
117+
118+
{/* Sidebar (Right Side) */}
119+
<div className="space-y-10 lg:pl-16">
120+
{/* Bio Section */}
121+
<div>
122+
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
123+
Sr. Principal Architect at Gojek. Working on scalable and reliable
124+
systems & abstractions for product engineering teams.
125+
</p>
126+
<div className="mt-6 flex gap-6">
127+
<SocialLink
128+
href="https://twitter.com/sonnes"
129+
aria-label="Follow on Twitter"
130+
icon={TwitterIcon}
131+
/>
132+
<SocialLink
133+
href="https://instagram.com/sonnes"
134+
aria-label="Follow on Instagram"
135+
icon={InstagramIcon}
136+
/>
137+
<SocialLink
138+
href="https://github.com/sonnes"
139+
aria-label="Follow on GitHub"
140+
icon={GitHubIcon}
141+
/>
142+
<SocialLink
143+
href="https://www.linkedin.com/in/atluriravi"
144+
aria-label="Follow on LinkedIn"
145+
icon={LinkedInIcon}
146+
/>
147+
</div>
148+
</div>
149+
150+
151+
{/* Work History */}
158152
<Resume resume={resume} />
159-
</div>
160-
</div>
161-
</Container>
162-
<Photos />
163-
<Container className="mt-24 md:mt-28">
164-
<div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
165-
<div className="flex flex-col gap-16">
166-
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-3xl">
167-
Articles
168-
</h2>
169-
{articles.map((article) => (
170-
<Article key={article.slug} article={article} />
171-
))}
172-
</div>
173153

174-
<div className="flex flex-col gap-16">
175-
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-3xl">
176-
Snippets
177-
</h2>
178-
{snippets.map((snippet) => (
179-
<Snippet key={snippet.slug} snippet={snippet} />
180-
))}
181-
</div>
154+
{/* Categories Section */}
155+
<div>
156+
<h2 className="mb-4 text-sm font-semibold text-zinc-800 dark:text-zinc-100">
157+
Tags
158+
</h2>
159+
<div className="flex flex-wrap gap-2">
160+
{['XDB', 'ALS', 'Accessibility', 'Go'].map((category) => (
161+
<span
162+
key={category}
163+
className="rounded-full bg-zinc-100 px-3 py-1 text-sm text-zinc-800 dark:bg-zinc-800 dark:text-zinc-100"
164+
>
165+
{category}
166+
</span>
167+
))}
168+
</div>
169+
</div>
182170

171+
{/* Photos Section */}
172+
<Photos />
173+
</div>
183174
</div>
184175
</Container>
185176
</>

‎app/sitemap.ts

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { allArticles } from 'contentlayer/generated';
2-
import { allSnippets } from 'contentlayer/generated';
32
import { MetadataRoute } from 'next';
43

54
import navigation from '@/lib/navigation';
@@ -28,12 +27,5 @@ export default function sitemap(): MetadataRoute.Sitemap {
2827
});
2928
}
3029

31-
for (const snippet of allSnippets) {
32-
urls.push({
33-
url: `https://raviatluri.in/${snippet.slug}`,
34-
lastModified: new Date(snippet.date),
35-
});
36-
}
37-
3830
return urls;
3931
}

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

Lines changed: 0 additions & 95 deletions
This file was deleted.

0 commit comments

Comments
 (0)