Adding Blog

kemerald25 · Jun 29, 2022 · 50e17bf · 50e17bf
1 parent 131c20c
commit 50e17bf
Show file tree

Hide file tree

Showing 9 changed files with 289 additions and 120 deletions.
diff --git a/_posts/firstblog.md b/_posts/firstblog.md
@@ -8,7 +8,7 @@ preview: >-
   when an unknown printer took a galley of type and scrambled it to make a type
   specimen book.
 image: >-
-  https://images.pexels.com/photos/12319913/pexels-photo-12319913.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1
+  https://images.unsplash.com/photo-1656188505561-19f1a1b6cda8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80
 keywords: "Keyword One, Keyword Two"
 author:
   authorname: Author One

diff --git a/components/ContentSection/index.js b/components/ContentSection/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const ContentSection = ({ content }) => {
+  return (
+    <div
+      className="markdown-class"
+      dangerouslySetInnerHTML={{ __html: content }}></div>
+  );
+};
+
+export default ContentSection;
diff --git a/components/Footer/index.js b/components/Footer/index.js
@@ -0,0 +1,24 @@
+import React from "react";
+import Socials from "../Socials";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <>
+      <div className="mt-40 mob:mt-5 laptop:mt-40 mob:p-2 laptop:p-0">
+        <h1 className="text-2xl text-bold">Contact.</h1>
+        <div className="mt-5">
+          <Socials />
+        </div>
+      </div>
+      <h1 className="text-sm text-bold mt-10 mob:mt-2 laptop:mt-10 mob:p-2 laptop:p-0">
+        Made With ❤ by{" "}
+        <Link href="http://www.chetanverma.com">
+          <a className="underline underline-offset-1">Chetan Verma</a>
+        </Link>
+      </h1>
+    </>
+  );
+};
+
+export default Footer;
diff --git a/components/Header/index.js b/components/Header/index.js
@@ -1,15 +1,17 @@
 import React from "react";
 import Button from "../Button";
 import { useRouter } from "next/router";
+// Local Data
+import data from "../../yourData";
 
 const Header = ({ handleWorkScroll, handleAboutScroll, isBlog }) => {
   const router = useRouter();
   return (
-    <div className="mt-10 flex flex-row items-center justify-between sticky top-0 z-10">
+    <div className="mt-10 flex flex-row items-center justify-between sticky bg-white top-0 z-10">
       <h1
         onClick={() => router.push("/")}
         className="font-medium cursor-pointer mob:p-2 laptop:p-0">
-        Portfolio.
+        {data.name}.
       </h1>
       {!isBlog ? (
         <div className="flex">

diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
@@ -1,32 +1,56 @@
-import React from "react";
+import React, { useRef } from "react";
 import { getPostBySlug, getAllPosts } from "../../utils/api";
 import markdownToHtml from "../../utils/markdownToHtml";
 import Header from "../../components/Header";
+import ContentSection from "../../components/ContentSection";
+import Footer from "../../components/Footer";
+import Head from "next/head";
+import { useIsomorphicLayoutEffect } from "../../utils";
+import { stagger } from "../../animations";
 
 const BlogPost = ({ post }) => {
-  console.log(post);
+  const textOne = useRef();
+  const textTwo = useRef();
+
+  useIsomorphicLayoutEffect(() => {
+    stagger([textOne.current, textTwo.current], { y: 30 }, { y: 0 });
+  }, []);
+
   return (
-    <div className="container mx-auto mt-10">
-      <Header isBlog={true} />
-      <div className="mt-10 flex flex-col">
-        <img
-          className="w-full h-96 rounded-lg shadow-lg object-cover"
-          src={post.image}></img>
-        <h1 className="mt-10 text-4xl mob:text-2xl laptop:text-6xl text-bold">
-          {post.title}
-        </h1>
-        <h2 className="mt-2 text-xl max-w-4xl text-darkgray opacity-50">
-          {post.tagline}
-        </h2>
+    <>
+      <Head>
+        <title>{"Blog - " + post.title}</title>
+        <meta name="description" content={post.preview} />
+      </Head>
+      <div className="container mx-auto mt-10">
+        <Header isBlog={true} />
+        <div className="mt-10 flex flex-col">
+          <img
+            className="w-full h-96 rounded-lg shadow-lg object-cover"
+            src={post.image}></img>
+          <h1
+            ref={textOne}
+            className="mt-10 text-4xl mob:text-2xl laptop:text-6xl text-bold">
+            {post.title}
+          </h1>
+          <h2
+            ref={textTwo}
+            className="mt-2 text-xl max-w-4xl text-darkgray opacity-50">
+            {post.tagline}
+          </h2>
+        </div>
+        <ContentSection content={post.content}></ContentSection>
+        <Footer />
       </div>
-    </div>
+    </>
   );
 };
 
 export async function getStaticProps({ params }) {
   const post = getPostBySlug(params.slug, [
     "date",
     "slug",
+    "preview",
     "title",
     "tagline",
     "preview",

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -1,41 +1,65 @@
+import { useRef } from "react";
 import { getAllPosts } from "../../utils/api";
 import { ISOToDate } from "../../utils";
 import Header from "../../components/Header";
-import Router, { useRouter } from "next/router";
+import Router from "next/router";
+import Head from "next/head";
+import { useIsomorphicLayoutEffect } from "../../utils";
+import { stagger } from "../../animations";
 
 const Blog = ({ posts }) => {
+  const text = useRef();
+
+  useIsomorphicLayoutEffect(() => {
+    stagger([text.current], { y: 30 }, { y: 0 });
+  }, []);
   return (
-    <div className="container mx-auto mb-10">
-      <Header isBlog={true}></Header>
-      <div className="mt-10">
-        <h1 className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
-          Blog.
-        </h1>
-        <div className="mt-10 grid grid-cols-3 gap-10">
-          {posts &&
-            posts.map((post, index) => (
-              <div
-                className="w-96 cursor-pointer"
-                key={index}
-                onClick={() => Router.push(`/blog/${post.slug}`)}>
-                <img
-                  className="w-full h-60 rounded-lg shadow-lg"
-                  src="https://images.unsplash.com/photo-1656188505561-19f1a1b6cda8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"></img>
-                <h2 className="mt-5 text-4xl">{post.title}</h2>
-                <p className="mt-2 opacity-50 text-lg">{post.preview}</p>
-                <span className="text-sm mt-5 opacity-25">
-                  {ISOToDate(post.date)}
-                </span>
-              </div>
-            ))}
+    <>
+      <Head>
+        <title>Blog</title>
+      </Head>
+      <div className="container mx-auto mb-10">
+        <Header isBlog={true}></Header>
+        <div className="mt-10">
+          <h1
+            ref={text}
+            className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
+            Blog.
+          </h1>
+          <div className="mt-10 grid grid-cols-3 gap-10">
+            {posts &&
+              posts.map((post, index) => (
+                <div
+                  className="w-96 cursor-pointer"
+                  key={index}
+                  onClick={() => Router.push(`/blog/${post.slug}`)}>
+                  <img
+                    className="w-full h-60 rounded-lg shadow-lg object-cover"
+                    src={post.image}
+                    alt={post.title}></img>
+                  <h2 className="mt-5 text-4xl">{post.title}</h2>
+                  <p className="mt-2 opacity-50 text-lg">{post.preview}</p>
+                  <span className="text-sm mt-5 opacity-25">
+                    {ISOToDate(post.date)}
+                  </span>
+                </div>
+              ))}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
 export async function getStaticProps({ params }) {
-  const posts = getAllPosts(["slug", "title", "preview", "author", "date"]);
+  const posts = getAllPosts([
+    "slug",
+    "title",
+    "image",
+    "preview",
+    "author",
+    "date",
+  ]);
 
   return {
     props: {

diff --git a/pages/index.js b/pages/index.js
@@ -1,11 +1,12 @@
 import { useRef } from "react";
-import Link from "next/link";
 import Header from "../components/Header";
 import ServiceCard from "../components/ServiceCard";
 import Socials from "../components/Socials";
 import WorkCard from "../components/WorkCard";
 import { useIsomorphicLayoutEffect } from "../utils";
 import { stagger } from "../animations";
+import Footer from "../components/Footer";
+import Head from "next/head";
 
 // Local Data
 import data from "../yourData";
@@ -45,85 +46,79 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="container mx-auto mb-10">
-      <Header
-        handleWorkScroll={handleWorkScroll}
-        handleAboutScroll={handleAboutScroll}
-      />
-      <div className="laptop:mt-20 mob:mt-10">
-        <div className="mt-5">
-          <h1
-            ref={textOne}
-            className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
-            {data.headerTaglineOne}
-          </h1>
-          <h1
-            ref={textTwo}
-            className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
-            {data.headerTaglineTwo}
-          </h1>
-          <h1
-            ref={textThree}
-            className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
-            {data.headerTaglineThree}
-          </h1>
-          <h1
-            ref={textFour}
-            className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
-            {data.headerTaglineFour}
-          </h1>
-        </div>
+    <>
+      <Head>
+        <title>{data.name}</title>
+      </Head>
+      <div className="container mx-auto mb-10">
+        <Header
+          handleWorkScroll={handleWorkScroll}
+          handleAboutScroll={handleAboutScroll}
+        />
+        <div className="laptop:mt-20 mob:mt-10">
+          <div className="mt-5">
+            <h1
+              ref={textOne}
+              className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
+              {data.headerTaglineOne}
+            </h1>
+            <h1
+              ref={textTwo}
+              className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
+              {data.headerTaglineTwo}
+            </h1>
+            <h1
+              ref={textThree}
+              className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
+              {data.headerTaglineThree}
+            </h1>
+            <h1
+              ref={textFour}
+              className="text-8xl mob:text-3xl laptop:text-8xl mob:p-2 text-bold w-4/5 mob:w-full laptop:w-4/5">
+              {data.headerTaglineFour}
+            </h1>
+          </div>
 
-        <Socials className="mt-5 mob:mt-2 laptop:mt-5" />
-      </div>
-      <div
-        className="mt-40 mob:mt-10 laptop:mt-40 mob:p-2 laptop:p-0"
-        ref={workRef}>
-        <h1 className="text-2xl text-bold">Work.</h1>
-        <div className="mt-10 mob:mt-5 laptop:mt-10 grid grid-cols-2 mob:grid-cols-1 laptop:grid-cols-2 gap-4">
-          {data.projects.map((project, index) => (
-            <WorkCard
-              key={index}
-              img={project.imageSrc}
-              name={project.title}
-              description={project.description}
-              onClick={() => window.open(project.url)}
-            />
-          ))}
+          <Socials className="mt-5 mob:mt-2 laptop:mt-5" />
         </div>
-      </div>
-      <div className="mt-40 mob:mt-2 laptop:mt-40 mob:p-2 laptop:p-0">
-        <h1 className="text-2xl text-bold">Services.</h1>
-        <div className="mt-10 grid grid-cols-2 mob:grid-cols-1 laptop:grid-cols-2 gap-6">
-          {data.services.map((service, index) => (
-            <ServiceCard
-              key={index}
-              name={service.title}
-              description={service.description}
-            />
-          ))}
+        <div
+          className="mt-40 mob:mt-10 laptop:mt-40 mob:p-2 laptop:p-0"
+          ref={workRef}>
+          <h1 className="text-2xl text-bold">Work.</h1>
+          <div className="mt-10 mob:mt-5 laptop:mt-10 grid grid-cols-2 mob:grid-cols-1 laptop:grid-cols-2 gap-4">
+            {data.projects.map((project, index) => (
+              <WorkCard
+                key={index}
+                img={project.imageSrc}
+                name={project.title}
+                description={project.description}
+                onClick={() => window.open(project.url)}
+              />
+            ))}
+          </div>
         </div>
-      </div>
-      <div
-        className="mt-40 mob:mt-2 laptop:mt-40 mob:p-2 laptop:p-0"
-        ref={aboutRef}>
-        <h1 className="text-2xl text-bold">About.</h1>
-        <p className="m-5 mob:m-0 laptop:m-5 mob:mt-2 laptop:ml-0 ml-0 text-3xl mob:text-xl laptop:text-3xl w-3/5 mob:w-full laptop:w-3/5">
-          {data.aboutpara}
-        </p>
-      </div>
-      <div className="mt-40 mob:mt-5 laptop:mt-40 mob:p-2 laptop:p-0">
-        <h1 className="text-2xl text-bold">Contact.</h1>
-        <div className="mt-5">
-          <Socials />
+        <div className="mt-40 mob:mt-2 laptop:mt-40 mob:p-2 laptop:p-0">
+          <h1 className="text-2xl text-bold">Services.</h1>
+          <div className="mt-10 grid grid-cols-2 mob:grid-cols-1 laptop:grid-cols-2 gap-6">
+            {data.services.map((service, index) => (
+              <ServiceCard
+                key={index}
+                name={service.title}
+                description={service.description}
+              />
+            ))}
+          </div>
+        </div>
+        <div
+          className="mt-40 mob:mt-2 laptop:mt-40 mob:p-2 laptop:p-0"
+          ref={aboutRef}>
+          <h1 className="text-2xl text-bold">About.</h1>
+          <p className="m-5 mob:m-0 laptop:m-5 mob:mt-2 laptop:ml-0 ml-0 text-3xl mob:text-xl laptop:text-3xl w-3/5 mob:w-full laptop:w-3/5">
+            {data.aboutpara}
+          </p>
         </div>
+        <Footer />
       </div>
-      <h1 className="text-sm text-bold mt-10 mob:mt-2 laptop:mt-10 mob:p-2 laptop:p-0">
-        Made With ❤ by{" "}
-        <Link href="http://www.chetanverma.com">
-          <a className="underline underline-offset-1">Chetan Verma</a>
-        </Link>
-      </h1>
-    </div>
+    </>
   );
 }