🎇 Fixed minor bugs and issues, added functional blog system using Con…

…tenthook, improved some animations, added header onScroll effect
binary-blazer · Jul 18, 2024 · c3e1331 · c3e1331
1 parent 1a7a076
commit c3e1331
Show file tree

Hide file tree

Showing 19 changed files with 2,636 additions and 2,080 deletions.
diff --git a/README.md b/README.md
@@ -51,10 +51,11 @@ To learn more about Next.js, take a look at the following resources:
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
 ## ⚠️ Blacklist
+
 - People written here are disallowed to use any of my portfolio versions including their assets and code because of copyright infringements from [right now or the past]
 
-| Person      | Portfolio URL                | Github Profile                                |
-| ----------- | ---------------------------- | --------------------------------------------- |
+| Person | Portfolio URL | Github Profile |
+| ------ | ------------- | -------------- |
 
 ## ⭐ Star
 

diff --git a/app/about/page.jsx b/app/about/page.jsx
@@ -120,7 +120,7 @@ export default function About() {
         <div className="mt-16 flex w-full flex-col items-start justify-center">
           <h3 className="text-center text-xl font-bold">{currentTab.name}</h3>
           <motion.div
-            className="mt-2 grid  w-full grid-cols-2 items-center justify-start gap-2 md:grid-cols-3 lg:grid-cols-4"
+            className="mt-2 grid w-full grid-cols-2 items-center justify-start gap-2 md:grid-cols-3 lg:grid-cols-4"
             transition={{ duration: 0.2, staggerChildren: 0.15 }}
           >
             {currentTab.technologies.map((tech, index) => (

diff --git a/app/api/blog/content/route.js b/app/api/blog/content/route.js
@@ -0,0 +1,16 @@
+import { getContent } from "@contenthook/browser";
+
+export async function POST(request) {
+  try {
+    const { fileName } = await request.clone().json();
+
+    const content = await getContent({
+      api_key: process.env.CONTENTHOOK_API_KEY,
+      fileName,
+    });
+
+    return new Response(JSON.stringify(content), { status: 200 });
+  } catch (error) {
+    return new Response(error.message, { status: 500 });
+  }
+}
diff --git a/app/api/blog/contents/route.js b/app/api/blog/contents/route.js
@@ -0,0 +1,13 @@
+import { getContents } from "@contenthook/browser";
+
+export async function GET(request) {
+  try {
+    const contents = await getContents({
+      api_key: process.env.CONTENTHOOK_API_KEY,
+    });
+
+    return new Response(JSON.stringify(contents), { status: 200 });
+  } catch (error) {
+    return new Response(error.message, { status: 500 });
+  }
+}
diff --git a/app/api/contact/route.js b/app/api/contact/route.js
@@ -32,11 +32,6 @@ export async function POST(request) {
       return new Response("Last name is too long", { status: 400 });
     }
 
-    const isEnglish = /^[A-Za-z0-9]*$/.test(message);
-    if (!isEnglish) {
-      return new Response("Message must be in English", { status: 400 });
-    }
-
     if (
       blacklistedWords.some((word) =>
         email.toLowerCase().replace("@", " ").includes(word),

diff --git a/app/blog/[slug]/page.jsx b/app/blog/[slug]/page.jsx
@@ -3,26 +3,27 @@
 import React from "react";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { technologies } from "@/main.config";
-import { getContents } from "@contenthook/browser";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 
 export default function BlogSlug() {
   const pathname = usePathname();
   const [content, setContent] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
 
   React.useEffect(() => {
     const fetchContent = async () => {
       const slug = pathname.split("/").pop();
 
-      const data = await getContents({
-        api_key: process.env.CONTENTHOOK_API_KEY,
-      });
+      const res = await fetch("/api/blog/content", {
+        method: "POST",
+        body: JSON.stringify({ fileName: slug }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }).then((res) => res.json());
 
-      const content = data.find(
-        (content) => content.metadata[0].value === slug,
-      );
-      setContent(content);
+      setContent(res.content);
+      setLoading(false);
     };
     fetchContent();
   }, [pathname]);
@@ -36,44 +37,52 @@ export default function BlogSlug() {
         transition={{ duration: 0.5 }}
         className="mx-auto flex min-h-screen w-full flex-col items-center justify-center p-8 lg:mt-0 lg:p-32"
       >
-        {content ? (
+        {loading ? (
           <div className="mt-[14rem] flex w-full flex-col items-start justify-center xl:mt-24">
             <div className="flex w-full flex-col items-center justify-center">
-              <h2 className="text-center text-4xl font-bold">
-                {content.metadata[0].value}
+              <div className="loading-dots flex w-auto flex-row items-center justify-center rounded-lg bg-neutral-800 p-4 shadow-lg">
+                <div className="loading-dots--dot"></div>
+                <div className="loading-dots--dot"></div>
+                <div className="loading-dots--dot"></div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="mt-[14rem] flex w-full flex-col items-start justify-center xl:mt-24">
+            <div className="max-w-1/2 flex w-full flex-col items-start justify-center">
+              <h2 className="text-center text-5xl font-bold lg:text-6xl">
+                {content.metadata.title}
               </h2>
-              <p className="text-center text-lg text-neutral-500">
-                {content.metadata[1].value}
+              <p className="text-md text-center text-neutral-500">
+                {new Date(content.metadata.date).toLocaleDateString("en-US", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
               </p>
+              <div className="mt-6 flex w-full flex-row items-center justify-start">
+                {content.metadata.tags.map((tag) => (
+                  <div
+                    key={tag}
+                    className="mr-2 rounded-lg bg-neutral-800 px-2 py-1 text-neutral-200"
+                  >
+                    {tag}
+                  </div>
+                ))}
+              </div>
             </div>
+            <div className="mb-6 mt-12 w-full border-b border-neutral-700"></div>
             <div className="flex w-full flex-col items-start justify-center">
               <div className="flex w-full flex-col items-start justify-center">
-                <Image
-                  src={content.metadata[5].value}
-                  alt={content.metadata[0].value}
-                  width={800}
-                  height={400}
-                  className="rounded-lg"
-                />
                 <div
-                  className="mt-4 flex w-full flex-col items-start justify-center"
+                  className="lg:prose-md prose prose-invert mt-14 flex w-full flex-col items-start justify-center"
                   dangerouslySetInnerHTML={{
-                    __html: content.metadata[2].value,
+                    __html: content.html,
                   }}
                 />
               </div>
             </div>
           </div>
-        ) : (
-          <div className="mt-[14rem] flex w-full flex-col items-start justify-center xl:mt-24">
-            <div className="flex w-full flex-col items-center justify-center">
-              <div className="loading-dots flex w-auto flex-row items-center justify-center rounded-lg bg-neutral-800 p-4 shadow-lg">
-                <div className="loading-dots--dot"></div>
-                <div className="loading-dots--dot"></div>
-                <div className="loading-dots--dot"></div>
-              </div>
-            </div>
-          </div>
         )}
       </motion.main>
     </>

diff --git a/app/blog/page.jsx b/app/blog/page.jsx
@@ -3,7 +3,6 @@
 import React from "react";
 import Image from "next/image";
 import { technologies } from "@/main.config";
-import { getContents } from "@contenthook/browser";
 import { AnimatePresence, motion } from "framer-motion";
 
 export default function Blog() {
@@ -16,11 +15,9 @@ export default function Blog() {
   React.useEffect(() => {
     const fetchContents = async () => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      const data = await getContents({
-        api_key: process.env.CONTENTHOOK_API_KEY,
-      });
-      console.log(data);
-      setContents(data);
+      const data = await fetch("/api/blog/contents");
+      const response = await data.json();
+      setContents(response);
     };
 
     fetchContents();
@@ -47,25 +44,25 @@ export default function Blog() {
               <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                 {contents.map((content) => (
                   <div
-                    key={content.metadata[0].value}
+                    key={content.metadata.title}
                     className="mt-4 flex w-full cursor-pointer flex-col items-start justify-center rounded-lg bg-neutral-800 p-4 shadow-lg transition-opacity duration-200 ease-in-out hover:opacity-80"
-                    onClick={handlePostClick(content.metadata[0].value)}
+                    onClick={handlePostClick(content.title)}
                   >
                     <Image
-                      src={content.metadata[5].value}
-                      alt={content.metadata[0].value}
+                      src={content.metadata.banner}
+                      alt={content.metadata.title}
                       width={300}
                       height={200}
-                      className="rounded-lg"
+                      className="w-full rounded-lg"
                     />
                     <h3 className="mt-4 text-lg font-bold">
-                      {content.metadata[0].value}
+                      {content.metadata.title}
                     </h3>
                     <p className="text-neutral-500">
-                      {content.metadata[1].value}
+                      {content.metadata.description}
                     </p>
                     <div className="mt-4 flex w-full flex-row items-center justify-start">
-                      {content.metadata[3].value.slice(0, 3).map((tag) => (
+                      {content.metadata.tags.slice(0, 3).map((tag) => (
                         <span
                           key={tag}
                           className="mr-2 rounded-md bg-neutral-700 p-2 text-xs font-bold text-neutral-200"

diff --git a/app/not-found.jsx b/app/not-found.jsx
@@ -17,7 +17,7 @@ export default function NotFound() {
       className="flex h-screen flex-col items-center justify-center"
     >
       {config.underConstruction && (
-        <div className="backdrop-blur-l  mb-[2.5rem] rounded-lg bg-yellow-500/10 p-3 shadow-lg backdrop-filter 2xl:text-lg">
+        <div className="backdrop-blur-l mb-[2.5rem] rounded-lg bg-yellow-500/10 p-3 shadow-lg backdrop-filter 2xl:text-lg">
           This page might be under construction!
         </div>
       )}

diff --git a/app/page.jsx b/app/page.jsx
@@ -360,7 +360,7 @@ export default function Home() {
           <p className="mt-2 text-left text-xl">
             I&apos;m a full-stack developer with a passion for open-source
             software and the web. I&apos;ve been developing for the web for over
-            6 years and have a strong understanding of web technologies and best
+            7 years and have a strong understanding of web technologies and best
             practices. I&apos;m also a strong advocate for open-source software
             and have contributed to many projects over the years.
           </p>
@@ -464,17 +464,17 @@ export default function Home() {
                       </div>
                     )}
                     {project.status.complete && (
-                      <div className="rounded-lg bg-green-500 px-2 py-1 text-xs font-bold text-green-500">
+                      <div className="rounded-lg bg-green-500 px-2 py-1 text-xs font-bold text-green-200">
                         Complete
                       </div>
                     )}
                     {project.status.paused && (
-                      <div className="rounded-lg bg-yellow-500 px-2 py-1 text-xs font-bold text-yellow-500">
+                      <div className="rounded-lg bg-yellow-500 px-2 py-1 text-xs font-bold text-yellow-200">
                         Paused
                       </div>
                     )}
                     {project.status.cancelled && (
-                      <div className="rounded-lg bg-red-500 px-2 py-1 text-xs font-bold text-red-500">
+                      <div className="rounded-lg bg-red-500 px-2 py-1 text-xs font-bold text-red-200">
                         Cancelled
                       </div>
                     )}

diff --git a/app/projects/page.jsx b/app/projects/page.jsx
@@ -109,17 +109,17 @@ export default function Page() {
                     </div>
                   )}
                   {project.status.complete && (
-                    <div className="rounded-lg bg-green-500 px-2 py-1 text-xs font-bold text-green-500">
+                    <div className="rounded-lg bg-green-500 px-2 py-1 text-xs font-bold text-green-200">
                       Complete
                     </div>
                   )}
                   {project.status.paused && (
-                    <div className="rounded-lg bg-yellow-500 px-2 py-1 text-xs font-bold text-yellow-500">
+                    <div className="rounded-lg bg-yellow-500 px-2 py-1 text-xs font-bold text-yellow-200">
                       Paused
                     </div>
                   )}
                   {project.status.cancelled && (
-                    <div className="rounded-lg bg-red-500 px-2 py-1 text-xs font-bold text-red-500">
+                    <div className="rounded-lg bg-red-500 px-2 py-1 text-xs font-bold text-red-200">
                       Cancelled
                     </div>
                   )}

diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -2,11 +2,17 @@
 
 import React from "react";
 import Image from "next/image";
+import { useEffect } from "react";
 import germanyFlag from "../public/img/germany-flag.png";
 
 export default function Footer() {
+  useEffect(() => {
+    console.log("This site was created by BinaryBlazer. Please keep footer and the header credits intact.");
+  }, []);
+
   return (
     <>
+      {/* Please don't touch the footer credits. I worked hard to make my developer portfolio. */}
       <footer className="mt-[10rem] flex w-full flex-col items-center justify-center border-t border-neutral-700 bg-neutral-900 p-8 py-8 text-white lg:px-32">
         <p className="text-center">
           &copy; 2018 - {new Date().getFullYear()} BinaryBlazer

diff --git a/components/Header.jsx b/components/Header.jsx
@@ -9,6 +9,7 @@ export default function Header() {
   const router = useRouter();
   const pathname = usePathname();
   const screensize = ScreenSizr.getScreenSize();
+  const [scrolled, setScrolled] = useState(false);
 
   const [indicatorStyle, setIndicatorStyle] = useState({
     left: 0,
@@ -112,9 +113,23 @@ export default function Header() {
     }
   }, [pathname, currentScreen]);
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 10) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
     <>
-      <header className="fixed top-0 z-50 flex w-full flex-row items-center justify-between bg-neutral-900 px-8 py-4 backdrop-blur-lg backdrop-filter lg:px-32">
+      <header
+        className={`fixed ${scrolled ? "border border-neutral-700/40" : "border border-neutral-700/0"} ${scrolled ? "top-[1rem] w-[86.3%] rounded-2xl px-4 py-4 shadow-lg" : "top-0 w-[90%] border-none px-4 py-4"} left-1/2 z-50 flex -translate-x-1/2 flex-row items-center justify-between bg-neutral-900 backdrop-blur-lg backdrop-filter transition-all duration-200 ease-in-out`}
+      >
         <div className="flex flex-row items-center justify-center gap-4">
           <div>
             <button
@@ -382,6 +397,7 @@ export default function Header() {
                 ))}
               </div>
               <div className="w-full border-b border-neutral-800"></div>
+              {/* Please don't touch the below button or change it. I worked hard to make my developer portfolio. */}
               <button
                 className="w-full gap-2 rounded-lg p-2 px-8 text-white transition-colors hover:bg-white/5"
                 onClick={() => router.push("/socials/github")}

diff --git a/content/example.mdx b/content/example.mdx
@@ -1,15 +1,15 @@
 ---
-title: Example Post
+title: Post Example
 description: This is an example post.
 date: 2024-05-26
-tags: [example, post]
+tags: ["example", "post"]
 author: BinaryBlazer
 banner: https://www.contenthook.dev/img/banner.png
 ---
 
 # Example Post
 
-> Hello!
+> heheheheeeeeeeee
 > This is the content of the example post. You can write your MDX content here.
 
 1. Numbered list

diff --git a/main.config.js b/main.config.js
@@ -139,12 +139,7 @@ export const projects = [
       paused: false,
       cancelled: false,
     },
-    technologies: [
-      "NextJS",
-      "Golang",
-      "NodeJS",
-      "TypeScript"
-    ],
+    technologies: ["NextJS", "Golang", "NodeJS", "TypeScript"],
     image: "https://www.contenthook.dev/img/logo.png",
     banner: "https://www.contenthook.dev/img/banner.png",
   },