feat(content): display my latest posts on medium

Author: neuodev

components/Latest.tsx

@@ -1,99 +1,27 @@
 import React, { useState } from "react";
 import SectionTitle from "./common/SectionTitle";
 import me from "../json/me.json";
-import Video, { VideoType } from "./Video";
-import Modal from "./common/Modal";
 import Button from "./common/Button";
-import YouTubeIcon from "@mui/icons-material/YouTube";
-import CancelIcon from "@mui/icons-material/Cancel";
-import { IconButton } from "@mui/material";
-import { Box } from "@mui/system";
-
-const Latest = () => {
-  const [currVideo, setCurrVideo] = useState<VideoType | null>(null);
-  const [showMore, setShowMore] = useState<boolean>(false);
+import Post, { IPost } from "./Post";
 
+const LatestContent = () => {
   return (
     <section className="min-h-screen mb-20">
       <SectionTitle
         prefix="Latest"
         focus="content"
-        subtitle="tips, insights, and best practices about web developpment and personal life"
+        subtitle="tips, insights, and best practices about software engineering and personal life"
       />
 
       <div className="grid grid-cols-12 gap-y-10 md:gap-10 max-w-screen-lg mx-4 lg:mx-auto">
-        {me.content.videos.slice(0, me.content.videosCutOff).map((v) => (
-          <div
-            className="col-span-12 md:col-span-6"
-            key={v.title}
-            onClick={() => setCurrVideo(v)}
-          >
-            <Video video={v} />
+        {me.content.posts.map((post: IPost) => (
+          <div className="relative w-full col-span-4" key={post.image}>
+            <Post post={post} />
           </div>
         ))}
       </div>
-
-      {showMore && (
-        <div className="grid grid-cols-12 mt-10 gap-y-10 md:gap-10 max-w-screen-lg mx-4 lg:mx-auto">
-          {me.content.videos.slice(me.content.videosCutOff).map((v) => (
-            <div
-              className="col-span-12 md:col-span-6"
-              key={v.title}
-              onClick={() => setCurrVideo(v)}
-            >
-              <Video video={v} />
-            </div>
-          ))}
-        </div>
-      )}
-
-      <Box className="flex items-center justify-center mt-10">
-        <Button
-          variant="secondary"
-          onClick={() => {
-            setShowMore(!showMore);
-          }}
-        >
-          {showMore ? "Show less" : "Show more"}
-        </Button>
-      </Box>
-
-      {currVideo !== null && (
-        <Modal open onClose={() => setCurrVideo(null)}>
-          <iframe
-            className="w-full h-300 md:h-450 inline-block bg-gray-900"
-            src={`https://www.youtube.com/embed/${currVideo.videoId}`}
-            title={currVideo.title}
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          />
-          <div className="flex items-center justify-between mt-4">
-            <h1 className="text-xl md:text-4xl font-semibold text-indigo-500">
-              {currVideo.title}
-            </h1>
-            <IconButton onClick={() => setCurrVideo(null)} className="p-0">
-              <CancelIcon className="text-indigo-500" />
-            </IconButton>
-          </div>
-          <p className="text-gray-400 mt-2 lg:pr-28 leading-relaxed">
-            {currVideo.description}
-          </p>
-
-          <Button
-            variant="primary"
-            className="mt-8"
-            onClick={() =>
-              window.open(
-                `https://www.youtube.com/watch?v=${currVideo.videoId}`
-              )
-            }
-            iconStart={<YouTubeIcon />}
-          >
-            Watch on Youtube
-          </Button>
-        </Modal>
-      )}
     </section>
   );
 };
 
-export default Latest;
+export default LatestContent;

components/Post.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box } from "@mui/material";
+
+export type IPost = {
+  image: string;
+  url: string;
+};
+
+const Post: React.FC<{ post: IPost }> = ({ post }) => {
+  return (
+    <div className="hover:scale-105 cursor-pointer transition-transform shadow-xl hover:shadow-2xl">
+      <a href={post.url} target="_blank" rel="noopener noreferrer">
+        <Box
+          component="img"
+          className="inline-block overflow-hidden rounded-md"
+          src={post.image}
+          alt="Post preview"
+        />
+      </a>
+    </div>
+  );
+};
+
+export default Post;

components/Video.tsx

@@ -46,18 +46,6 @@
       "urlAsText": "linkedin.com/in/neuodev/"
     }
   ],
-  "contact": [
-    {
-      "label": "Email",
-      "id": "email",
-      "value": "[email protected]"
-    },
-    {
-      "label": "Phone",
-      "id": "whatsapp",
-      "value": "+20 01552832217"
-    }
-  ],
   "experiences": [
     {
       "company": {
@@ -157,88 +145,29 @@
     }
   ],
   "content": {
-    "videosCutOff": 4,
-    "videos": [
-      {
-        "title": "But How JavaScript Actually Works ?!",
-        "thumbnail": "/thumbnails/how-js-works.png",
-        "description": "In this video, I will explain how JavaScript actually works. This includes explaining fundamental concepts in JavaScript like the Call Stack, Callback Queue, WebAPI, and Event Loop,...",
-        "videoId": "NxhkaN2klUg"
-      },
-      {
-        "title": "Fetch API Clearly Explained",
-        "thumbnail": "/thumbnails/fetch-api.png",
-        "description": "In this video, I will talk about the Fetch API and the underlying HTTP Protocol, and how the frontend interacts with the server. All of these with in-depth detailed examples to make sure you understand the concepts on a deeper level",
-        "videoId": "WLXZYM6Dk9Q"
-      },
-      {
-        "title": "The Ultimate Guide to JS \"This\" Keyword",
-        "thumbnail": "/thumbnails/this-keyword.png",
-        "description": "In this video, I am talking about one of the confusing topics in JavaScript.  I discussed where the confusing natures of the \"this\" keyword come from and various use cases.",
-        "videoId": "0gz0Wmi1gEg"
-      },
-      {
-        "title": "Why should you have your own server?",
-        "thumbnail": "/thumbnails/why-should-you-have-your-own-server.png",
-        "description": "In this video I am taking about why me and you should have our own server. Server at not just made for production! We can do more with it!",
-        "videoId": "F4FSwM1oxhw"
-      },
-      {
-        "title": "Why should you learn rust?",
-        "thumbnail": "/thumbnails/why-should-you-learn-rust.png",
-        "description": "In this video I am sharing my personal reason for learning Rust why should everyone else should consider learning Rust",
-        "videoId": "XJf615CfJXE"
-      },
-      {
-        "title": "Vim Masterclas course review",
-        "thumbnail": "/thumbnails/vim-mastery-course-review.png",
-        "description": "In this video I am reviewing the famouse course from Udemy about the tool that changed how I write my code",
-        "videoId": "6gHXQ8XE0J8"
-      },
-      {
-        "title": "Bash mastery class course review",
-        "thumbnail": "/thumbnails/bash-course-review.png",
-        "description": "A review for the famous BASH mastery course on Udemy",
-        "videoId": "uLHggJC00PI"
-      },
-      {
-        "title": "Best resources to learn rust",
-        "thumbnail": "/thumbnails/best-resources-to-learn-rust.png",
-        "description": "A quick video for people who are welling to learn rust but doesn't know where to start",
-        "videoId": "wCqMRKUBN_M"
-      },
+    "contentCutOff": 4,
+    "posts": [
       {
-        "title": "How to aquire new skills?",
-        "thumbnail": "/thumbnails/how-to-aquire-new-skills.png",
-        "description": "In this video I am sharing my own methods and techniques for aquiring new skills in most effcient way",
-        "videoId": "ht0isWbUhh8"
+        "image": "images/story_5.jpg",
+        "url": "https://blog.ahmedibrahim.dev/how-i-get-myself-started-doing-hard-things-when-i-dont-want-to-4141e8538cfe"
       },
       {
-        "title": "How to boost your productivity?",
-        "thumbnail": "/thumbnails/how-to-boost-your-productvity.png",
-        "description": "In this video I am sharing my own thoughts on what makes someone PRODUCTIVE",
-        "videoId": "topmycLwhGE"
+        "image": "images/story_4.jpg",
+        "url": "https://blog.ahmedibrahim.dev/my-islamic-morning-routine-as-a-software-engineer-working-from-home-ced36311cd51"
       },
       {
-        "title": "How to plan for your life?",
-        "thumbnail": "/thumbnails/how-to-plan-for-your-life.png",
-        "description": "In this video I am sharing my own way for putting a new plan and complete it end to end",
-        "videoId": "ITZtvSlAljU"
+        "image": "images/story_3.jpg",
+        "url": "https://blog.ahmedibrahim.dev/how-a-single-ted-video-changed-my-life-e47689ed5717"
       },
       {
-        "title": "How to put your daily plan?",
-        "thumbnail": "/thumbnails/how-to-put-a-daily-plan.png",
-        "description": "Learn how to get the most out of your day",
-        "videoId": "video"
+        "image": "images/story_2.jpg",
+        "url": "https://blog.ahmedibrahim.dev/my-principles-of-losing-and-keeping-weight-after-a-decade-of-research-87b3d20543de"
       },
       {
-        "title": "How to set the right goals?",
-        "thumbnail": "/thumbnails/how-to-set-the-right-goals.png",
-        "description": "In this video I am taking about my own way for setting my goals",
-        "videoId": "m6-1Mi0YkEo"
+        "image": "images/story_1.jpg",
+        "url": "https://blog.ahmedibrahim.dev/my-mind-wasnt-prepared-to-start-a-blog-but-now-it-is-36a6843a97f5"
       }
-    ],
-    "posts": null
+    ]
   },
   "projects": [
     {