New Commit

app/HomeCode.js → app/HomeComponent/HomeCode.js

@@ -10,12 +10,12 @@ import Grid from "@mui/material/Grid";
 import MouseOutlinedIcon from "@mui/icons-material/MouseOutlined";
 import SteamHomePage from "./SteamHomePage";
 
-import ComponentA from "./about/aboutonly";
+import ComponentA from "../about/aboutonly";
 
-import ComponentS from "./skills/skillcode";
-import ComponentB from "./Homepageblogs/page";
-import ComponentP from "./HomepageProjects/page";
-import ComponentC from "./contact/code";
+import ComponentS from "../skills/skillcode";
+import ComponentB from "../Homepageblogs/page";
+import ComponentP from "../HomepageProjects/page";
+import ComponentC from "../contact/code";
 
 import css from "./css3.webp";
 import react from "./react.webp";
@@ -26,11 +26,11 @@ import next from "./next.webp";
 import Link from "next/link";
 import Image from "next/image";
 import dynamic from "next/dynamic";
-import SlideM from "./about/slideshowmbl";
+import SlideM from "../about/slideshowmbl";
 import SvgHomePage from "./SvgHomePage";
 // const SvgHomePage = dynamic(() => import("./SvgHomePage"));
-const Slideshowlg = dynamic(() => import("./about/slideshowlg"));
-const ResponsiveShow = dynamic(() => import("./about/responsiveshow"));
+const Slideshowlg = dynamic(() => import("../about/slideshowlg"));
+const ResponsiveShow = dynamic(() => import("../about/responsiveshow"));
 const Home = () => {
   const theme = useTheme();
   const isMatch = useMediaQuery(theme.breakpoints.down("lg"));

app/HomeComponent/HomeComp.js

@@ -0,0 +1,8 @@
+import React from "react";
+import Home from "./HomeCode";
+
+const HomeComp = () => {
+  return <Home />;
+};
+
+export default HomeComp;

app/blogs/how-to/[slug]/code.js

@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/alt-text */
 /* eslint-disable @next/next/no-img-element */
 import React from "react";
-import { CodeBlock, dracula } from "react-code-blocks";
+import { CopyBlock, dracula } from "react-code-blocks";
 
 import { ListItem, ListItemAvatar, ListItemText } from "@mui/material";
 import { useRouter } from "next/navigation";
@@ -32,16 +32,19 @@ export default function BlogCardDetail({ data }) {
         </div>
       ),
       code: ({ value }) => (
-        <div>
-          <CodeBlock
-            text={value.code}
-            theme={dracula}
-            language="jsx" // specify the code language here
-            showLineNumbers // if you want to display line numbers
-            // use any code highlighting theme
-          />
+        <>
+          <Grid style={{ cursor: "auto", overflow: "auto" }}>
+            <br />
+            <CopyBlock
+              text={value.code}
+              theme={dracula}
+              language="jsx" // specify the code language here
+              showLineNumbers // if you want to display line numbers
+              // use any code highlighting theme
+            />
+          </Grid>
           <br />
-        </div>
+        </>
       ),
     },
   };
@@ -69,7 +72,9 @@ export default function BlogCardDetail({ data }) {
         style={{ marginTop: "70px", maxWidth: "800px", overflow: "hidden" }}
       >
         <div className="bgwhite">
-          <h1 style={{ textAlign: "justify" }}>{data.title}</h1>
+          <h1 data-aos="zoom-in" style={{ textAlign: "justify" }}>
+            {data.title}
+          </h1>
 
           <ListItem
             className="SkillList"
@@ -89,10 +94,12 @@ export default function BlogCardDetail({ data }) {
             </ListItemAvatar>
             <ListItemText
               primary={"Sufian Mustafa"}
-              secondary={"9 min read.1 day ago"}
+              secondary={new Date(data._createdAt).toISOString().split("T")[0]}
               title="sufian"
               style={{ width: "30%" }}
               className="ListItemTextSkill"
+              data-aos="zoom-in"
+              data-aos-delay="100"
             />
           </ListItem>
 

app/blogs/how-to/page.js

@@ -151,17 +151,26 @@ export default async function AllPosts() {
             />
           </ListItemAvatar>
           <ListItemText
+            data-aos="zoom-in"
             primary={"Sufian Mustafa"}
             secondary={""}
             title="sufian"
             className="ListItemTextSkill"
           />
         </ListItem>
-        <h1 style={{ textAlign: "center" }}>
+        <h1
+          data-aos="zoom-in"
+          data-aos-delay="100"
+          style={{ textAlign: "center" }}
+        >
           {" "}
           Bio <br />
         </h1>
-        <p style={{ textAlign: "center" }}>
+        <p
+          data-aos="zoom-in"
+          data-aos-delay="150"
+          style={{ textAlign: "center" }}
+        >
           Hi I am Sufian Mustafa a passionate Web developer who is continually
           exploring and mastering new frontend technologies. I share my learning
           journey through insightful posts to assist fellow developers. Always
@@ -173,18 +182,20 @@ export default async function AllPosts() {
           connecting with you!
         </p>
         {data.map((blog) => (
-          <Card
+          <Link
+            style={{ textDecoration: "none" }}
+            href={`/blogs/how-to/${blog.slug.current}`}
             key={blog._id}
-            className="blog-card alt SkillList bgwhite blogsufi"
           >
-            <div className="meta bgwhite">
-              <div
-                className="photo"
-                style={{
-                  backgroundImage: `url(${urlFor(blog.blogimg).url()})`,
-                }}
-              />
-              {/* <ul className="details">
+            <Card className="blog-card alt SkillList bgwhite blogsufi">
+              <div className="meta bgwhite">
+                <div
+                  className="photo"
+                  style={{
+                    backgroundImage: `url(${urlFor(blog.blogimg).url()})`,
+                  }}
+                />
+                {/* <ul className="details">
                 <li className="author">
                   <a href="#">Sufian Mustafa</a>
                 </li>
@@ -203,18 +214,24 @@ export default async function AllPosts() {
                   </ul>
                 </li>
               </ul> */}
-            </div>
-            <div className="description bgwhite">
-              <h1> {truncateText(blog.title, 6)}</h1>
-              <p>{truncateText(blog.overview, 11)}</p>
+              </div>
+              <div className="description bgwhite">
+                <h1 data-aos="zoom-in" data-aos-delay="150">
+                  {" "}
+                  {truncateText(blog.title, 6)}
+                </h1>
+                <p data-aos="zoom-in" data-aos-delay="170">
+                  {truncateText(blog.overview, 12)}
+                </p>
 
-              <p className="read-more">
-                <Link href={`/blogs/how-to/${blog.slug.current}`}>
-                  Read More
-                </Link>
-              </p>
-            </div>
-          </Card>
+                <p data-aos="zoom-in" className="read-more">
+                  <Link href={`/blogs/how-to/${blog.slug.current}`}>
+                    Read More
+                  </Link>
+                </p>
+              </div>
+            </Card>
+          </Link>
         ))}
       </Grid>
     </Grid>

app/blogs/insights/BlogCard.js

@@ -41,15 +41,17 @@ export default function RecipeReviewCard({ postimg, title, slug }) {
           style={{ textDecoration: "none" }}
         >
           <Card
-            data-aos="zoom-in"
-            data-aos-delay="100"
-            data-aos-duration="350"
             className="BlogCard ProjectCard"
             style={{ margin: "auto", padding: "auto" }}
           >
             <CardHeader
               avatar={
-                <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
+                <Avatar
+                  data-aos="zoom-in"
+                  data-aos-delay="100"
+                  sx={{ bgcolor: red[500] }}
+                  aria-label="recipe"
+                >
                   S
                 </Avatar>
               }
@@ -63,7 +65,6 @@ export default function RecipeReviewCard({ postimg, title, slug }) {
                   <h1
                     data-aos="zoom-in"
                     data-aos-delay="150"
-                    data-aos-duration="300"
                     style={{ fontSize: "22px", margin: 0 }}
                   >
                     Sufian Mustafa
@@ -77,7 +78,6 @@ export default function RecipeReviewCard({ postimg, title, slug }) {
               <h1
                 data-aos="zoom-in"
                 data-aos-delay="200"
-                data-aos-duration="300"
                 style={{ left: "0%", fontSize: "22px" }}
               >
                 {" "}

app/blogs/insights/[slug]/code.js

@@ -2,7 +2,7 @@
 "use client";
 import React from "react";
 
-import { CodeBlock, dracula } from "react-code-blocks";
+import { CopyBlock, dracula } from "react-code-blocks";
 import { urlFor } from "../../../lib/sanityImageUrl";
 
 import Grid from "@mui/material/Grid";
@@ -30,15 +30,19 @@ export default function BlogCardDetail({ data }) {
         </div>
       ),
       code: ({ value }) => (
-        <div>
-          <CodeBlock
-            text={value.code}
-            language="jsx" // specify the code language here
-            showLineNumbers // if you want to display line numbers
-            theme={dracula} // use any code highlighting theme
-          />
+        <>
+          <Grid style={{ cursor: "auto", overflow: "auto" }}>
+            <br />
+            <CopyBlock
+              text={value.code}
+              theme={dracula}
+              language="jsx" // specify the code language here
+              showLineNumbers // if you want to display line numbers
+              // use any code highlighting theme
+            />
+          </Grid>
           <br />
-        </div>
+        </>
       ),
     },
   };
@@ -88,6 +92,8 @@ export default function BlogCardDetail({ data }) {
                     borderRadius: "4px",
                   }}
                 >
+                  {new Date(data._createdAt).toISOString().split("T")[0]}
+
                   {/* {tour.date} */}
                 </div>
 

app/contact/code.js

@@ -10,13 +10,12 @@ import emailjs from "@emailjs/browser";
 import Footer from "../footer/code";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 import { motion } from "framer-motion";
 import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined";
 import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined";
 
-import { Jquerry } from "../Jquerry";
+import { Jquerry } from "../HomeComponent/Jquerry";
 
 const ContactMe = () => {
   function sufianmustafawebdevelopercontact() {