Skip to content

Commit 515a23c

Browse files
codebucks27codebucks27
committed
updates
1 parent 72a7e6b commit 515a23c

39 files changed

+912
-1048
lines changed

‎src/app/(about )/about/page.js

-22
This file was deleted.

‎src/app/(about )/contact/page.js

-23
This file was deleted.

‎src/app/(about)/about/page.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import AboutCoverSection from "@/src/components/About/AboutCoverSection";
2+
import Skills from "@/src/components/About/Skills";
3+
import Link from "next/link";
4+
5+
6+
export const metadata = {
7+
title: "About Me",
8+
description: `Here are some details about my self.`,
9+
};
10+
11+
export default function About() {
12+
return (
13+
<>
14+
<AboutCoverSection />
15+
<Skills />
16+
<h2 className="mt-8 font-semibold text-lg md:text-2xl self-start mx-5 xs:mx-10 sm:mx-12 md:mx-16 lg:mx-20 text-dark dark:text-light dark:font-normal">
17+
Have a project in mind? Reach out to me 📞 from <Link href="/contact" className="!underline underline-offset-2" >here</Link> and let's make it happen.
18+
</h2>
19+
</>
20+
);
21+
}

‎src/app/(about)/contact/page.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import ContactForm from "@/src/components/Contact/ContactForm";
2+
import LottieAnimation from "@/src/components/Contact/LottieAnimation";
3+
import siteMetadata from "@/src/utils/siteMetaData";
4+
5+
6+
export const metadata = {
7+
title: "Contact Me",
8+
description: `Contact me through the form available on this page or email me at ${siteMetadata.email}`,
9+
};
10+
11+
12+
export default function Contact() {
13+
return (
14+
<section className="w-full h-auto md:h-[75vh] border-b-2 border-solid border-dark dark:border-light flex flex-col md:flex-row items-center justify-center text-dark dark:text-light">
15+
<div className="inline-block w-full sm:w-4/5 md:w-2/5 h-full md:border-r-2 border-solid border-dark dark:border-light"><LottieAnimation /></div>
16+
<div className="w-full md:w-3/5 flex flex-col items-start justify-center px-5 xs:px-10 md:px-16 pb-8">
17+
<h2 className="font-bold capitalize text-2xl xs:text-3xl sm:text-4xl">Let's Connect!</h2>
18+
<ContactForm />
19+
</div>
20+
</section>
21+
);
22+
}

‎src/app/(about )/layout.js renamed to ‎src/app/(about)/layout.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import InsightRoll from "@/src/components/About/InsightRoll";
22

3+
34
const insights = [
4-
"20+ Projects Completed",
5-
"3+ Years of Freelancing",
6-
"99% Client Satisfaction",
7-
"20K+ Subscribers",
8-
"Authored In-Depth Course on Educative",
9-
"Contributed as a Technical Course Reviewer 📝",
10-
"Recipient of the Hackernoon Noonies Award 🏆",
11-
];
5+
"20+ Projects Completed",
6+
"3+ Years of Freelancing",
7+
"99% Client Satisfaction",
8+
"20K+ Subscribers",
9+
"Authored In-Depth Course on Educative",
10+
"Contributed as a Technical Course Reviewer 📝",
11+
"Recipient of the Hackernoon Noonies Award 🏆",
12+
];
1213

1314
export default function AboutLayout({ children }) {
1415
return (

‎src/app/blogs/[slug]/page.js

+84-87
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
// "use client";
2-
import { allBlogs } from "contentlayer/generated";
3-
import Image from "next/image";
4-
import Tag from "@/src/components/Elements/Tag";
51
import BlogDetails from "@/src/components/Blog/BlogDetails";
6-
import { slug } from "github-slugger";
7-
import siteMetadata from "@/src/utils/siteMetaData";
82
import RenderMdx from "@/src/components/Blog/RenderMdx";
3+
import Tag from "@/src/components/Elements/Tag";
4+
import siteMetadata from "@/src/utils/siteMetaData";
5+
import { allBlogs } from "contentlayer/generated";
6+
import { slug } from "github-slugger";
7+
import Image from "next/image";
98

10-
export const generateStaticParams = async () =>
11-
allBlogs.map((blog) => ({ slug: blog._raw.flattenedPath }));
9+
export async function generateStaticParams() {
10+
return allBlogs.map((blog) => ({ slug: blog._raw.flattenedPath }));
11+
}
1212

1313
export async function generateMetadata({ params }) {
1414
const blog = allBlogs.find((blog) => blog._raw.flattenedPath === params.slug);
@@ -17,8 +17,8 @@ export async function generateMetadata({ params }) {
1717
}
1818

1919
const publishedAt = new Date(blog.publishedAt).toISOString();
20-
const modifiedAt = new Date(blog.updatedAt || blog.date).toISOString();
21-
const authors = blog?.author ? [blog.author] : siteMetadata.author;
20+
const modifiedAt = new Date(blog.updatedAt || blog.publishedAt).toISOString();
21+
2222
let imageList = [siteMetadata.socialBanner];
2323
if (blog.image) {
2424
imageList =
@@ -27,38 +27,37 @@ export async function generateMetadata({ params }) {
2727
: blog.image;
2828
}
2929
const ogImages = imageList.map((img) => {
30-
return {
31-
url: img.includes("http") ? img : siteMetadata.siteUrl + img,
32-
};
30+
return { url: img.includes("http") ? img : siteMetadata.siteUrl + img };
3331
});
3432

33+
const authors = blog?.author ? [blog.author] : siteMetadata.author;
34+
3535
return {
3636
title: blog.title,
3737
description: blog.description,
3838
openGraph: {
3939
title: blog.title,
4040
description: blog.description,
41+
url: siteMetadata.siteUrl + blog.url,
4142
siteName: siteMetadata.title,
4243
locale: "en_US",
4344
type: "article",
4445
publishedTime: publishedAt,
4546
modifiedTime: modifiedAt,
46-
url: siteMetadata.siteUrl + "/blogs/" + params.slug,
4747
images: ogImages,
4848
authors: authors.length > 0 ? authors : [siteMetadata.author],
4949
},
5050
twitter: {
5151
card: "summary_large_image",
5252
title: blog.title,
5353
description: blog.description,
54-
images: imageList,
54+
images: ogImages,
5555
},
5656
};
5757
}
5858

59-
const BlogLayout = ({ params }) => {
59+
export default function BlogPage({ params }) {
6060
const blog = allBlogs.find((blog) => blog._raw.flattenedPath === params.slug);
61-
if (!blog) throw new Error(`Blog not found for slug: ${params.slug}`);
6261

6362
let imageList = [siteMetadata.socialBanner];
6463
if (blog.image) {
@@ -67,7 +66,6 @@ const BlogLayout = ({ params }) => {
6766
? [siteMetadata.siteUrl + blog.image.filePath.replace("../public", "")]
6867
: blog.image;
6968
}
70-
7169
const jsonLd = {
7270
"@context": "https://schema.org",
7371
"@type": "NewsArticle",
@@ -85,84 +83,83 @@ const BlogLayout = ({ params }) => {
8583
description: blog.description,
8684
};
8785

88-
// console.log(blog);
89-
9086
return (
9187
<>
92-
<script
88+
89+
<script
9390
type="application/ld+json"
9491
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
9592
/>
96-
<article className=" py-0">
97-
<div className="mb-8 text-center relative w-full h-[70vh] bg-dark">
98-
<div className="w-full z-10 flex flex-col items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
99-
<Tag
100-
name={blog.tags[0]}
101-
link={`/categories/${slug(blog.tags[0])}`}
102-
className="px-6 text-sm py-2"
103-
/>
104-
105-
<h1 className="inline-block group mt-6 font-semibold capitalize text-light text-2xl md:text-3xl lg:text-5xl !leading-normal relative w-5/6">
106-
{blog.title}
107-
</h1>
108-
</div>
109-
<div className=" absolute top-0 left-0 bottom-0 right-0 h-full bg-dark/60 dark:bg-dark/40" />
110-
<Image
111-
src={blog.image.filePath.replace("../public", "")}
112-
placeholder="blur"
113-
blurDataURL={blog.image.blurhashDataUrl}
114-
width={blog.image.width}
115-
height={blog.image.height}
116-
alt={blog.title}
117-
className="w-full h-full object-cover object-center"
118-
priority
119-
sizes="100vw"
93+
94+
<article>
95+
<div className="mb-8 text-center relative w-full h-[70vh] bg-dark">
96+
<div className="w-full z-10 flex flex-col items-center justify-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
97+
<Tag
98+
name={blog.tags[0]}
99+
link={`/categories/${slug(blog.tags[0])}`}
100+
className="px-6 text-sm py-2"
120101
/>
102+
<h1
103+
className="inline-block mt-6 font-semibold capitalize text-light text-2xl md:text-3xl lg:text-5xl !leading-normal relative w-5/6"
104+
>
105+
{blog.title}
106+
</h1>
121107
</div>
108+
<div className="absolute top-0 left-0 right-0 bottom-0 h-full bg-dark/60 dark:bg-dark/40" />
109+
<Image
110+
src={blog.image.filePath.replace("../public", "")}
111+
placeholder="blur"
112+
blurDataURL={blog.image.blurhashDataUrl}
113+
alt={blog.title}
114+
width={blog.image.width}
115+
height={blog.image.height}
116+
className="aspect-square w-full h-full object-cover object-center"
117+
priority
118+
sizes="100vw"
119+
/>
120+
</div>
121+
<BlogDetails blog={blog} slug={params.slug} />
122122

123-
<BlogDetails blog={blog} slug={params.slug} />
123+
<div className="grid grid-cols-12 gap-y-8 lg:gap-8 sxl:gap-16 mt-8 px-5 md:px-10">
124+
<div className="col-span-12 lg:col-span-4">
125+
<details
126+
className="border-[1px] border-solid border-dark dark:border-light text-dark dark:text-light rounded-lg p-4 sticky top-6 max-h-[80vh] overflow-hidden overflow-y-auto"
127+
open
128+
>
129+
<summary className="text-lg font-semibold capitalize cursor-pointer">
130+
Table Of Content
131+
</summary>
132+
<ul className="mt-4 font-in text-base">
133+
{blog.toc.map((heading) => {
134+
return (
135+
<li key={`#${heading.slug}`} className="py-1">
136+
<a
137+
href={`#${heading.slug}`}
138+
data-level={heading.level}
139+
className="data-[level=two]:pl-0 data-[level=two]:pt-2
140+
data-[level=two]:border-t border-solid border-dark/40
141+
data-[level=three]:pl-4
142+
sm:data-[level=three]:pl-6
143+
flex items-center justify-start
144+
"
145+
>
146+
{heading.level === "three" ? (
147+
<span className="flex w-1 h-1 rounded-full bg-dark mr-2">
148+
&nbsp;
149+
</span>
150+
) : null}
124151

125-
<div className="grid grid-cols-12 gap-y-8 lg:gap-8 sxl:gap-16 w-full mt-8 px-5 md:px-10">
126-
<div className=" col-span-12 lg:col-span-4 relative">
127-
<details
128-
className="border-[1px] border-solid border-dark dark:border-light text-dark dark:text-light rounded-lg p-4 sticky top-6 max-h-[80vh] overflow-hidden overflow-y-auto"
129-
open
130-
>
131-
<summary className="text-base sm:text-lg font-semibold capitalize cursor-pointer">
132-
Table of contents
133-
</summary>
134-
<ul className="mt-4 font-in text-sm sm:text-base">
135-
{blog.toc.map((heading) => {
136-
return (
137-
<li key={`#${heading.slug}`} className="py-1">
138-
<a
139-
data-level={heading.level}
140-
href={`#${heading.slug}`}
141-
className="data-[level=two]:pl-0 w-full data-[level=two]:pt-2 data-[level=two]:border-t border-solid border-dark/40 dark:border-light/40 data-[level=three]:pl-4 sm:data-[level=three]:pl-6 flex items-center justify-start"
142-
>
143-
{heading.level === "three" ? (
144-
<span className="flex w-1 h-1 rounded-full bg-dark mr-2">
145-
&nbsp;
146-
</span>
147-
) : null}
148-
<span className="hover:underline">{heading.text}</span>
149-
</a>
150-
</li>
151-
);
152-
})}
153-
</ul>
154-
</details>
155-
</div>
156-
<RenderMdx blog={blog} />
152+
<span className="hover:underline">{heading.text}</span>
153+
</a>
154+
</li>
155+
);
156+
})}
157+
</ul>
158+
</details>
157159
</div>
158-
159-
{/* <div
160-
className="[&>*]:mb-3 [&>*:last-child]:mb-0 prose"
161-
dangerouslySetInnerHTML={{ __html: blog.body.html }}
162-
/> */}
163-
</article>{" "}
160+
<RenderMdx blog={blog} />
161+
</div>
162+
</article>
164163
</>
165164
);
166-
};
167-
168-
export default BlogLayout;
165+
}

0 commit comments

Comments
 (0)