Refactor image loading and update image elements in components

README.md

@@ -1,2 +1 @@
-A portfolio made with NextJS + Tailwind + MDX + TypeScript
-
+A portfolio made with NextJS + Tailwind + MDX + TypeScript

package.json

@@ -14,8 +14,8 @@
     "gray-matter": "^4.0.3",
     "next": "14.1.0",
     "next-mdx-remote": "^4.4.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.0.1",
     "rehype-highlight": "^7.0.0"
   },

src/pages/404.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 

src/pages/about/index.tsx

@@ -1,34 +1,17 @@
-import type { Metadata } from 'next'
 import TechStack from '@/components/(about)/TechStack'
 import Image from 'next/image'
 
-export const metadata: Metadata = {
-    title: 'Pranshu05 // About',
-    description: 'About me, Pranshu Patel!',
-}
-
 const AboutPage: React.FC = () => {
     return (
         <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
             <div className="pb-8">
                 <h1 className="text-3xl font-bold text-zinc-100">About me!</h1>
             </div>
-            <p>
-                <Image src='https://i.imgur.com/gyDSUsG.jpg' width={200} height={200} alt='me' className='sm:w-200 max-sm:w-full max-sm:float-start max-sm:mb-3 sm:float-right sm:ml-3 rounded-md grayscale'/>
-                Hey there! 👋🏻 I&apos;m Pranshu, a passionate full-stack developer and college fresher based in India. Currently working
-                on a few projects and pursuing B.Tech. in ICT from{' '}<a className="link" href="https://daiict.ac.in" target="_blank" rel="noopener noreferrer">DA-IICT</a>.
-                <br />
-                <br />I started my coding journey in 2020 when I was 14 during the{' '}<a className="link" href="https://en.wikipedia.org/wiki/COVID-19" target="_blank">Covid</a>{' '}
-                pandemic. I started with the basics of C and programming and then moved to web development. I have been working with web technologies like HTML, CSS, JavaScript, React, and Node.js. I also have experience with discord bot development using discord.js and Node.js and have worked with databases like
-                MongoDB and Firebase. I&apos;m currently exploring Next.js and TypeScript. I&apos;m also passionate about UI/UX and its design and development.
-            </p>
+            <p><Image src='https://i.imgur.com/gyDSUsG.jpg' width={200} height={200} alt='me' className='sm:w-200 max-sm:w-full max-sm:float-start max-sm:mb-3 sm:float-right sm:ml-3 rounded-md grayscale' />Hey there! 👋🏻 I&apos;m Pranshu, a passionate full-stack developer and college fresher based in India. Currently working on a few projects and pursuing B.Tech. in ICT from{' '}<a className="link" href="https://daiict.ac.in" target="_blank" rel="noopener noreferrer">DA-IICT</a>.<br /><br />I started my coding journey in 2020 when I was 14 during the{' '}<a className="link" href="https://en.wikipedia.org/wiki/COVID-19" target="_blank">Covid</a>{' '}pandemic. I started with the basics of C and programming and then moved to web development. I have been working with web technologies like HTML, CSS, JavaScript, React, and Node.js. I also have experience with discord bot development using discord.js and Node.js and have worked with databases like MongoDB and Firebase. I&apos;m currently exploring Next.js and TypeScript. I&apos;m also passionate about UI/UX and its design and development.</p>
             <h2 className="text-2xl font-bold my-4 text-zinc-100">Tech Stack</h2>
             <p>Below is a list of technologies which I use for development and programming purpose. Including languages, frameworks, IDEs, apps and various softwares.</p>
             <TechStack />
-            <p>
-                I am always open to learning new technologies and love to work on new projects. If you have any project ideas or want to
-                collaborate, feel free to reach out to me on{' '}<a className="link" href="https://twitter.com/pranshu_05" target="_blank" rel="noopener noreferrer">Twitter </a>{' '}[I may be delayed in responding at times].
-            </p>
+            <p>I am always open to learning new technologies and love to work on new projects. If you have any project ideas or want to collaborate, feel free to reach out to me on{' '}<a className="link" href="https://twitter.com/pranshu_05" target="_blank" rel="noopener noreferrer">Twitter</a>{' '}[I may be delayed in responding at times].</p>
         </div>
     )
 }

src/pages/gallery/index.tsx

@@ -1,11 +1,5 @@
-import type { Metadata } from 'next';
 import ImageGallery from '../../components/(gallery)/ImageGallery';
 
-export const metadata: Metadata = {
-    title: 'Pranshu05 // Gallary',
-    description: 'My Gallary, feel free to explore!',
-};
-
 const ImageGalleryPage: React.FC = () => {
     return (
         <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">

src/pages/guestbook/index.tsx

@@ -1,15 +1,9 @@
-import type { Metadata } from "next";
 import LoginContainer from "@/components/(guestbook)/LoginContainer";
 import MessageList from "@/components/(guestbook)/MessageList";
 import PostMessage from "@/components/(guestbook)/PostMessage";
 import { useState, useEffect } from "react";
 import { getAuth, onAuthStateChanged, User } from "firebase/auth";
 
-export const metadata: Metadata = {
-    title: "Pranshu05 // Guestbook",
-    description: "My guestbook, feel free to leave a message!",
-};
-
 const Guestbook: React.FC = () => {
     const [isSignedIn, setIsSignedIn] = useState<boolean>(false);
     const [myUser, setMyUser] = useState<User | null>(null);

src/pages/index.tsx

@@ -1,14 +1,8 @@
-import type { Metadata } from "next";
 import dynamic from "next/dynamic";
 
 const HomeContainer = dynamic(() => import("@/components/(home)/HomeContainer"), {
-    ssr: false,
-  });
-
-export const metadata: Metadata = {
-    title: 'Pranshu05',
-    description: 'Portfolio website of Pranshu05',
-};
+  ssr: false,
+});
 
 const Home: React.FC = () => (<HomeContainer />)
 

src/pages/music/index.tsx

@@ -1,14 +1,7 @@
-import type { Metadata } from 'next';
 import RecentlyPlayed from '@/components/(music)/RecentlyPlayed';
 import RecentTracks from '@/components/(music)/RecentTracks';
-// import TopTracks from '@/components/(music)/TopTracks';
 import TopAlbums from '@/components/(music)/TopAlbums';
 
-export const metadata: Metadata = {
-    title: 'Pranshu05 // Music',
-    description: 'My Music Activity, feel free to explore!',
-};
-
 const MusicPage: React.FC = () => {
     return (
         <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
@@ -18,7 +11,6 @@ const MusicPage: React.FC = () => {
             </div>
             <RecentlyPlayed />
             <RecentTracks />
-            {/* <TopTracks /> */}
             <TopAlbums />
         </div>
     );

src/pages/posts/index.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { Metadata } from 'next';
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
@@ -20,11 +19,6 @@ interface Post {
     frontmatter: Frontmatter;
 }
 
-export const metadata: Metadata = {
-    title: 'Pranshu05 // Posts',
-    description: 'My personal Blogs',
-};
-
 const Blog: React.FC<{ posts: Post[] }> = ({ posts }) => {
     const [viewCounts, setViewCounts] = useState<{ [key: string]: number }>({});
 

src/styles/globals.css

@@ -24,62 +24,45 @@
   transition-duration: 300ms;
 }
 
-.link:hover {
+.link:hover,
+.post a:hover {
   text-decoration-color: rgb(212, 212, 216);
 }
 
-.post h1 {
-  font-size: 1.5rem;
+.post h1,
+.post h2,
+.post h3,
+.post h4,
+.post h5,
+.post h6 {
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
-  line-height: 1.5rem;
   font-weight: 700;
   color: rgb(244 244 245);
 }
 
+.post h1 {
+  font-size: 1.5rem;
+}
+
 .post h2 {
   font-size: 1.25rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  line-height: 1.25rem;
-  font-weight: 700;
-  color: rgb(244 244 245);
 }
 
 .post h3 {
   font-size: 1.125rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  line-height: 1.125rem;
-  font-weight: 700;
-  color: rgb(244 244 245);
 }
 
 .post h4 {
   font-size: 1rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  line-height: 1rem;
-  font-weight: 700;
-  color: rgb(244 244 245);
 }
 
 .post h5 {
   font-size: 0.875rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  line-height: 0.875rem;
-  font-weight: 700;
-  color: rgb(244 244 245);
 }
 
 .post h6 {
   font-size: 0.75rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  line-height: 0.75rem;
-  font-weight: 700;
-  color: rgb(244 244 245);
 }
 
 .post p {
@@ -90,24 +73,21 @@
   font-weight: 400;
 }
 
-.post ul {
+.post ul,
+.post ol {
   font-size: 1rem;
   font-weight: 400;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  line-height: 1.5rem;
-  list-style: disc;
   margin-left: 1rem;
 }
 
+.post ul {
+  list-style: disc;
+}
+
 .post ol {
-  font-size: 1rem;
-  font-weight: 400;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  line-height: 1.5rem;
   list-style: decimal;
-  margin-left: 1rem;
 }
 
 .post li {