improved the ui and added new sections

muhammad-fiaz · Jan 2, 2025 · 153d05a · 153d05a
1 parent 2883f81
commit 153d05a
Show file tree

Hide file tree

Showing 33 changed files with 693 additions and 343 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,17 @@
 # Portfolio Changelog - Release Notes
 
+## V2.0.1
+- Added mew FAQ Section
+- improved Blog and Project Section
+- improved UI and Performance
+- improved SEO
 
 ## v2.0.0 - new Renewed Portfolio
 - New Design and UI
 - Improved Performance
 - Improved SEO
 - Improved Functionality
+- Fixed initial load blank page due to server side rendering
 
 
 ## v1.0.8

diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@
 [![Maintainer](https://img.shields.io/badge/maintainer-muhammad--fiaz-blue)](https://github.com/muhammad-fiaz)
 
 [![Latest Release](https://img.shields.io/github/release/muhammad-fiaz/portfolio.svg)](https://github.com/muhammad-fiaz/portfolio/releases/latest)
-[![Current Version](https://img.shields.io/badge/Current%20Version-v2.0.0-blue.svg)](https://github.com/muhammad-fiaz/portfolio/releases/tag/v2.0.0)
+[![Current Version](https://img.shields.io/badge/Current%20Version-v2.0.1-blue.svg)](https://github.com/muhammad-fiaz/portfolio/releases/tag/v2.0.1)
 
 
 ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": true,
   "description": "Open source portfolio website built with Next.js amd TypeScript.",
   "author": "muhammad-fiaz <contact@muhammadfiaz.com>",

diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://muhammadfiaz.com/robots.txt</loc><changefreq>daily</changefreq><priority>1</priority></url>
 <url><loc>https://muhammadfiaz.com/manifest.webmanifest</loc><changefreq>daily</changefreq><priority>1</priority></url>
+<url><loc>https://muhammadfiaz.com/robots.txt</loc><changefreq>daily</changefreq><priority>1</priority></url>
+<url><loc>https://muhammadfiaz.com/about</loc><changefreq>daily</changefreq><priority>1</priority></url>
+<url><loc>https://muhammadfiaz.com/home</loc><changefreq>daily</changefreq><priority>1</priority></url>
+<url><loc>https://muhammadfiaz.com</loc><changefreq>daily</changefreq><priority>1</priority></url>
 <url><loc>https://muhammadfiaz.com/blog</loc><changefreq>daily</changefreq><priority>1</priority></url>
 <url><loc>https://muhammadfiaz.com/projects</loc><changefreq>daily</changefreq><priority>1</priority></url>
-<url><loc>https://muhammadfiaz.com</loc><changefreq>daily</changefreq><priority>1</priority></url>
-<url><loc>https://muhammadfiaz.com/home</loc><changefreq>daily</changefreq><priority>1</priority></url>
-<url><loc>https://muhammadfiaz.com/about</loc><changefreq>daily</changefreq><priority>1</priority></url>
 </urlset>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,9 +14,14 @@ import { SessionProvider } from 'next-auth/react';
 import { ThemeProvider } from '../components/utils/themeContext';
 import ProgressBar from '@/src/components/ui/progress';
 import BackToTopButton from '@/src/components/ui/BackToTopButton';
-import Chatbot from '@/src/components/ui/ChatBot';
+import dynamic from 'next/dynamic';
 import React from 'react';
 
+// Dynamically import the Chatbot component with ssr: false (render only client-side)
+const Chatbot = dynamic(() => import('@/src/components/ui/ChatBot'), {
+  ssr: false
+});
+
 const graphik = local({
   src: [
     {
@@ -31,7 +36,7 @@ const graphik = local({
     },
   ],
   variable: '--font-graphik',
-  display: 'swap',
+  display: 'swap', // Ensures text is visible while the font loads
 });
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
@@ -46,10 +51,15 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
     <Head />
 
     <body className="transition ease-in-out min-h-screen">
-    <SessionProvider>
-      <ThemeProvider>
-        <NextUIProvider>
+    <NextUIProvider>
+
+    <ThemeProvider>
+        <SessionProvider>
+
+          {/* Show progress bar during loading */}
           <ProgressBar />
+
+          {/* Main layout structure */}
           <Header />
 
           <main className="flex flex-col justify-center items-center mx-auto">
@@ -58,12 +68,16 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
             <SpeedInsights />
             <Analytics />
           </main>
-          <Chatbot/>
+
+          {/* Chatbot now renders client-side only */}
+          <Chatbot />
           <BackToTopButton />
           <Footer />
-        </NextUIProvider>
-      </ThemeProvider>
-    </SessionProvider>
+
+        </SessionProvider>
+    </ThemeProvider>
+    </NextUIProvider>
+
     </body>
     </html>
   );

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -1,35 +1,34 @@
+"use client";
 import { siteConfig } from '@/src/configs/config';
 import Link from 'next/link';
+import AnimationContainer from '@/src/components/utils/AnimationContainer';
 
 export default function NotFound() {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center text-white">
-      <h1 className="text-6xl font-extrabold text-white mb-6">404</h1>
-      <p className="text-2xl text-gray-400 mb-4">
-        Oops! The page you're looking for doesn't exist.
-      </p>
-      <p className="text-lg text-gray-500 mb-8">
-        The page might have been moved or deleted, or the URL may be incorrect.
-      </p>
-      <div className="flex items-center justify-center gap-4">
-        <Link
-          href="/"
-          className="px-6 py-3 bg-blue-600 text-lg text-white rounded-lg hover:bg-blue-700 transition duration-300"
-        >
-          Go Back Home
-        </Link>
-        <Link
-          href={`${siteConfig.social.github}/portfolio/issues/new`}
-          className="px-6 py-3 bg-green-600 text-lg text-white rounded-lg hover:bg-green-700 transition duration-300"
-        >
-          Report a Bug
-        </Link>
-      </div>
-      <div className="mt-12">
-        <p className="text-sm text-gray-500">
-          © 2024 {siteConfig.author}. All Rights Reserved.
+    <AnimationContainer customClassName="w-full">
+      <div className="min-h-screen flex flex-col items-center justify-center text-white px-4 sm:px-6 lg:px-8">
+        <h1 className="text-6xl sm:text-7xl font-extrabold text-white mb-6">404</h1>
+        <p className="text-2xl sm:text-3xl text-gray-400 mb-4 text-center">
+          Oops! The page you're looking for doesn't exist.
+        </p>
+        <p className="text-lg sm:text-xl text-gray-500 mb-8 text-center">
+          The page might have been moved or deleted, or the URL may be incorrect.
         </p>
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Link
+            href="/home"
+            className="px-6 py-3 bg-black text-white dark:bg-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 text-lg sm:text-xl rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg w-full sm:w-auto text-center"
+          >
+            Go Back Home
+          </Link>
+          <Link
+            href={`https://github.com/${siteConfig.social.github}/portfolio/issues/new`}
+            className="px-6 py-3 bg-black text-white dark:bg-white dark:text-black hover:bg-gray-800 dark:hover:bg-gray-200 text-lg sm:text-xl rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg w-full sm:w-auto text-center"
+          >
+            Report a Bug
+          </Link>
+        </div>
       </div>
-    </div>
+    </AnimationContainer>
   );
 }
diff --git a/src/components/content/AboutMe.tsx b/src/components/content/AboutMe.tsx
@@ -2,15 +2,18 @@
 
 import AnimationContainer from '../utils/AnimationContainer';
 import { siteConfig } from '@/src/configs/config';
+import SectionHeader from '@/src/components/ui/SectionHeader';
 
 const AboutMe = () => {
   return (
     <AnimationContainer customClassName="w-full mb-16">
-      <h2 className="font-bold text-2xl tracking-tight mb-8 text-foreground dark:text-white text-center lg:text-start">
-        About Me
-      </h2>
+      <SectionHeader
+        id="aboutme"
+        title="About Me"
+        content={`Here is a little bit about me and my journey as a developer.`}
+      />
 
-      <p className="text-base text-foreground dark:text-white">
+      <p className="text-sm sm:text-base md:text-lg text-foreground dark:text-white">
         Hey there! 👋 I'm <strong className="text-foreground dark:text-white">{siteConfig.author}</strong>, and I've been
         passionate about coding since I was a child. I fell in love with
         programming at a young age, spending countless hours learning,
@@ -19,7 +22,7 @@ const AboutMe = () => {
         build innovative solutions that solve real-world problems.
       </p>
 
-      <p className="text-base text-foreground dark:text-white mt-4">
+      <p className="text-sm sm:text-base md:text-lg text-foreground dark:text-white mt-4">
         As I’ve evolved in my career, I’ve expanded my expertise into new areas
         like Machine Learning (ML) and Artificial Intelligence (AI), diving deep
         into neural networks and other cutting-edge technologies. But no matter
@@ -28,14 +31,14 @@ const AboutMe = () => {
         boundaries of what’s possible.
       </p>
 
-      <p className="text-base text-foreground dark:text-white mt-4">
+      <p className="text-sm sm:text-base md:text-lg text-foreground dark:text-white mt-4">
         Today, I’m not just focused on building apps and websites; I’m also
         exploring DevOps tools like Docker, Kubernetes, and AWS to optimize and
         scale my projects. I believe in continuous learning and growth, and I’m
         always looking for new challenges that help me expand my skills.
       </p>
 
-      <p className="text-base text-foreground dark:text-white mt-4">
+      <p className="text-sm sm:text-base md:text-lg text-foreground dark:text-white mt-4">
         If you’re interested in collaborating on something exciting or need help
         with a project, feel free to reach out. Let’s create something amazing
         together!

diff --git a/src/components/content/ContactMe.tsx b/src/components/content/ContactMe.tsx
@@ -2,7 +2,8 @@
 import React, { useState } from 'react';
 import AnimationContainer from '../utils/AnimationContainer';
 import { siteConfig } from '@/src/configs/config';
-import { Button } from '@nextui-org/button';
+import { Input, Textarea, Button } from '@nextui-org/react';
+import SectionHeader from '@/src/components/ui/SectionHeader';
 
 const ContactMe = () => {
   const [isSubmitted, setIsSubmitted] = useState(false);
@@ -18,13 +19,11 @@ const ContactMe = () => {
 
   return (
     <AnimationContainer customClassName="w-full">
-      {/* Use h2 for main section header */}
-      <h2
-        className="font-bold text-2xl md:text-2xl tracking-tight mb-8 text-foreground dark:text-white text-center lg:text-start"
+      <SectionHeader
         id="contactme"
-      >
-        Contact me
-      </h2>
+        title="Contact Me"
+        content="Fill out the form below to contact me. Please, no spam. I strive to respond to all legitimate inquiries, but please be clear and concise in your message. Whether you have a question about my work, a project collaboration, or just want to connect, feel free to reach out. I look forward to hearing from you!"
+      />
 
       <div className="w-full flex justify-between items-center flex-col mx-auto max-w-screen-xl">
         <div className="w-full flex justify-between items-center flex-col lg:flex-row gap-6 mb-10">
@@ -40,20 +39,12 @@ const ContactMe = () => {
         </div>
 
         <div className="w-full flex justify-center items-center flex-col">
-          <form
-            onSubmit={handleSubmit}
-            className="w-full space-y-4"
-          >
+          <form onSubmit={handleSubmit} className="w-full space-y-4">
             <div>
-              <label className="sr-only" htmlFor="name">
-                Name
-              </label>
-              <input
-                className="w-full rounded-xl p-3 text-base outline-none border text-foreground dark:text-white bg-white dark:bg-neutral-800 border-gray-900/50 dark:border-gray-700 focus:border-gray-800 dark:focus:border-gray-600 transition ease"
+              <Input
+                isClearable={true}
+                label="Name"
                 placeholder="Name"
-                type="text"
-                id="name"
-                name="name"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
                 required
@@ -62,45 +53,34 @@ const ContactMe = () => {
 
             <div className="grid grid-cols-1 gap-4 lg:gap-8 sm:grid-cols-2">
               <div>
-                <label className="sr-only" htmlFor="email">
-                  Email
-                </label>
-                <input
-                  className="w-full rounded-xl p-3 text-base outline-none border text-foreground dark:text-white bg-white dark:bg-neutral-800 border-gray-900/50 dark:border-gray-700 focus:border-gray-800 dark:focus:border-gray-600 transition ease"
+                <Input
+                  isClearable={true}
+                  label="Email"
                   placeholder="Email"
                   type="email"
-                  id="email"
-                  name="email"
                   required
                 />
               </div>
 
               <div>
-                <label className="sr-only" htmlFor="phone">
-                  Phone
-                </label>
-                <input
-                  className="w-full rounded-xl p-3 text-base outline-none border text-foreground dark:text-white bg-white dark:bg-neutral-800 border-gray-900/50 dark:border-gray-700 focus:border-gray-800 dark:focus:border-gray-600 transition ease"
+                <Input
+                  isClearable={true}
+                  label="Phone"
                   placeholder="Phone"
                   type="tel"
-                  id="phone"
-                  name="phone"
                   required
                 />
               </div>
             </div>
 
             <div>
-              <label className="sr-only" htmlFor="message">
-                Message
-              </label>
-              <textarea
-                className="w-full h-32 rounded-xl p-3 text-base outline-none border text-foreground dark:text-white bg-white dark:bg-neutral-800 border-gray-900/50 dark:border-gray-700 focus:border-gray-800 dark:focus:border-gray-600 transition ease"
+              <Textarea
+                isClearable={true}
+                label="Message"
                 placeholder="Message"
-                id="message"
-                name="message"
+                rows={4}
                 required
-              ></textarea>
+              />
             </div>
 
             <Button
@@ -133,10 +113,12 @@ const ContactMe = () => {
         <div className="fixed top-0 left-0 w-full h-full bg-black/60 flex items-center justify-center z-50">
           <div className="bg-white dark:bg-neutral-800 rounded-xl p-6 shadow-lg text-center">
             <h3 className="font-bold text-lg text-foreground dark:text-white mb-4">
-              Thank you, {name}! <span className="text-black dark:text-white">🎉</span>
+              Thank you, {name}!{' '}
+              <span className="text-black dark:text-white">🎉</span>
             </h3>
             <p className="text-base text-foreground dark:text-gray-400">
-              Your message has been sent to {siteConfig.social.email} successfully.
+              Your message has been sent to {siteConfig.social.email}{' '}
+              successfully.
             </p>
             <Button
               onPress={() => setIsSubmitted(false)}