auroradream04 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024 · Oct 29, 2024 · Nov 2, 2024
diff --git a/README.md b/README.md
@@ -1,125 +1 @@
-# Alvin Chang's Portfolio
 
-This is a personal portfolio website for Alvin Chang, showcasing projects, blogs, and experiences as a full-stack developer. The site is built using Next.js, Tailwind CSS, and other modern web technologies.
-
-🔗 [Live Demo](https://alvinchang.dev)
-
-## Important Notice
-
-While this project's code is open source, please note the following:
-
-- **Attribution Required**: If you use this template for commercial purposes, attribution to Alvin Chang (https://alvinchang.dev) is required.
-- **Copyright Notice**: The following elements are copyrighted and NOT available for reuse:
-  - All logos and branding elements
-  - Blog content and articles
-  - Personal information and copy text
-  - Project descriptions and images
-- **Template Usage**: Only the code structure and implementation are available for use under the license terms.
-
-## Table of Contents
-
-- [Features](#features)
-- [Technologies Used](#technologies-used)
-- [Getting Started](#getting-started)
-- [Configuration](#configuration)
-- [Scripts](#scripts)
-- [Deployment](#deployment)
-- [License](#license)
-- [Contact](#contact)
-
-## Features
-
-- **Responsive Design**: Optimized for various screen sizes.
-- **Dynamic Content**: Fetches and displays blog posts from WordPress.
-- **SEO Optimized**: Metadata and Open Graph tags for better search engine visibility.
-- **Contact Form**: Allows visitors to send messages directly using Nodemailer and Zoho Mail.
-- **Project Showcase**: Highlights various development projects.
-- **RSS Feed**: Provides an RSS feed for blog posts.
-
-## Technologies Used
-
-- **Next.js**: React framework for server-side rendering and static site generation.
-- **Tailwind CSS**: Utility-first CSS framework for styling.
-- **TypeScript**: Typed superset of JavaScript for better code quality.
-- **Shiki**: Syntax highlighter for code blocks.
-- **Nodemailer**: For sending emails from the contact form.
-- **Zoho Mail**: SMTP server for email handling.
-- **WordPress**: Headless CMS for blog content management.
-
-## Getting Started
-
-To get a local copy up and running, follow these steps:
-
-### Prerequisites
-
-- Node.js and npm installed on your machine.
-- A WordPress site set up for blog content (headless CMS).
-- Zoho Mail account for email functionality.
-
-### Installation
-
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/auroradream04/aurora-portfolio.git
-   ```
-
-2. Navigate to the project directory:
-   ```bash
-   cd aurora-portfolio
-   ```
-
-3. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-4. Create a `.env.local` file in the root directory based on the `.env.example` file and add your environment variables.
-
-## Configuration
-
-1. Update the `siteConfig` object in `src/app/config.tsx` with your personal information, projects, and experiences.
-2. Set up a WordPress site to host your blog content and update the `WORDPRESS_API_URL` in your `.env.local` file.
-3. Configure Zoho Mail credentials in your `.env.local` file for the contact form functionality.
-
-## Scripts
-
-- `npm run dev`: Starts the development server.
-- `npm run build`: Builds the application for production.
-- `npm start`: Starts the production server.
-
-## Deployment
-
-This project can be deployed on platforms like Vercel, Netlify, or any other hosting service that supports Next.js applications.
-
-## Usage and Attribution
-
-### Permitted Uses
-- Use as a template for your personal portfolio
-- Study and modify the code structure
-- Implement similar features in your own projects
-
-### Requirements
-- Attribution must be provided when used commercially
-- Remove all personal branding, content, and imagery before use
-- Replace all content in `siteConfig` with your own information
-
-### Attribution Format
-When using this template commercially, please include the following attribution in your footer or credits page:
-
-```
-Template designed by Alvin Chang (https://alvinchang.dev)
-```
-
-## License
-
-This project's code structure is available under a modified MIT License with additional requirements for commercial use. See [LICENSE](LICENSE) for details.
-
-**Note**: All personal content, including but not limited to logos, blog content, and personal information, is copyrighted and not available for reuse.
-
-## Contact
-
-For any inquiries, please contact Alvin Chang at alvin@studioaurora.io.
-
----
-
-If you like this project, please consider giving it a star on GitHub! ⭐
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "aurora-portfolio",
+  "name": "portfolio",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -14,9 +14,11 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-separator": "^1.0.0",
     "@react-three/drei": "^9.114.3",
     "@react-three/fiber": "^8.17.10",
     "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.7",

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon-48x48.png b/public/favicon-48x48.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/logox.png b/public/logox.png
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -1,21 +1 @@
-{
-  "name": "MyWebSite",
-  "short_name": "MySite",
-  "icons": [
-    {
-      "src": "/web-app-manifest-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "maskable"
-    },
-    {
-      "src": "/web-app-manifest-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ],
-  "theme_color": "#000000",
-  "background_color": "#000000",
-  "display": "standalone"
-}
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/app/blogs/[slug]/page.tsx b/src/app/blogs/[slug]/page.tsx
diff --git a/src/app/blogs/page.tsx b/src/app/blogs/page.tsx
diff --git a/src/app/components/ContactForm.tsx b/src/app/components/ContactForm.tsx
@@ -3,89 +3,12 @@
 import MotionDiv from "./MotionDiv";
 import { slideInFromRight } from "../utils/motion";
 import { Send } from "lucide-react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import * as z from "zod";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import {
-    Form,
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import SectionLabel from "./SectionLabel";
-import { sendMail } from "../utils/sendMail";
-import { toast } from "sonner";
-
-const formSchema = z.object({
-    name: z.string().min(2, {
-        message: "Name must be at least 2 characters.",
-    }),
-    email: z.string().email({
-        message: "Please enter a valid email address.",
-    }),
-    message: z.string().min(10, {
-        message: "Message must be at least 10 characters.",
-    }),
-});
+import { Button } from "@/components/ui/button";
 
 export default function ContactForm() {
-    const [isLoading, setIsLoading] = useState(false);
-    const form = useForm<z.infer<typeof formSchema>>({
-        resolver: zodResolver(formSchema),
-        defaultValues: {
-            name: "",
-            email: "",
-            message: "",
-        },
-    });
-
-    let isMobile = false;
-    if (typeof window !== "undefined") {
-        isMobile = window.matchMedia("(max-width: 1024px)").matches;
-    }
-
-    async function onSubmit(values: z.infer<typeof formSchema>) {
-        setIsLoading(true);
-        const response = await sendMail(
-            values.name,
-            values.email,
-            values.message
-        );
-        setIsLoading(false);
-
-            if (response && response.success) {
-            toast.success(response.message, {
-                description: "Your message has been sent. I will get back to you as soon as possible.",
-                duration: 5000,
-                position: isMobile ? "top-center" : "bottom-right",
-                classNames: {
-                    icon: "text-green-500",
-                    toast: "bg-background text-slate-100 border-slate-900",
-                    description: "text-slate-350",
-
-                }
-            });
-        } else if (response && !response.success) {
-            toast.error(response.message, {
-                description: "Please try again later.",
-                duration: 5000,
-                position: isMobile ? "top-center" : "bottom-right",
-                classNames: {
-                    icon: "text-red-600",
-                    toast: "bg-background text-slate-100 border-slate-900",
-                    description: "text-slate-350",
-
-                }
-            });
-        }
-        form.reset();
+    function handleButtonClick() {
+        window.location.href = "mailto:evan.huang000@proton.me";
     }
 
     return (
@@ -97,81 +20,15 @@ export default function ContactForm() {
         >
             <section className="w-full text-sm" id="contact">
                 <SectionLabel label="CONTACT" />
-                <Form {...form}>
-                    <form
-                        onSubmit={form.handleSubmit(onSubmit)}
-                        className="grid grid-cols-2 gap-4"
+                <div className="col-span-2 flex justify-start">
+                    <Button
+                        onClick={handleButtonClick}
+                        className="bg-gradient-to-r from-orange-600 to-pink-600 hover:from-orange-500 hover:to-pink-500 dark:text-white text-xs px-4 py-2 rounded-sm w-full"
                     >
-                        <FormField
-                            control={form.control}
-                            name="name"
-                            render={({ field }) => (
-                                <FormItem className="col-span-2 md:col-span-1">
-                                    <FormLabel className="text-slate-100 text-xs">
-                                        Name
-                                    </FormLabel>
-                                    <FormControl>
-                                        <Input
-                                            placeholder="Alvin Chang"
-                                            {...field}
-                                            className="bg-[rgba(255,255,255,0.01)] border-[rgba(255,255,255,0.1)] text-white text-xs p-2 rounded-sm focus:ring-orange-500"
-                                        />
-                                    </FormControl>
-                                    <FormMessage className="text-xs" />
-                                </FormItem>
-                            )}
-                        />
-                        <FormField
-                            control={form.control}
-                            name="email"
-                            render={({ field }) => (
-                                <FormItem className="col-span-2 md:col-span-1">
-                                    <FormLabel className="text-slate-100 text-xs">
-                                        Email
-                                    </FormLabel>
-                                    <FormControl>
-                                        <Input
-                                            placeholder="alvin@studioaurora.io"
-                                            {...field}
-                                            className="bg-[rgba(255,255,255,0.01)] border-[rgba(255,255,255,0.1)] text-white text-xs p-2 rounded-sm focus:ring-orange-500"
-                                        />
-                                    </FormControl>
-                                    <FormMessage className="text-xs" />
-                                </FormItem>
-                            )}
-                        />
-                        <FormField
-                            control={form.control}
-                            name="message"
-                            render={({ field }) => (
-                                <FormItem className="col-span-2">
-                                    <FormLabel className="text-slate-100 text-xs">
-                                        Message
-                                    </FormLabel>
-                                    <FormControl>
-                                        <Textarea
-                                            placeholder="I would like to request a quote for a website design..."
-                                            {...field}
-                                            className="bg-[rgba(255,255,255,0.01)] border-[rgba(255,255,255,0.1)] text-white text-xs p-2 rounded-sm focus:ring-orange-500 w-full"
-                                            rows={4}
-                                        />
-                                    </FormControl>
-                                    <FormMessage className="text-xs" />
-                                </FormItem>
-                            )}
-                        />
-                        <div className="col-span-2 flex justify-start">
-                            <Button
-                                type="submit"
-                                className="bg-gradient-to-r from-orange-600 to-pink-600 hover:from-orange-500 hover:to-pink-500 dark:text-white text-xs px-4 py-2 rounded-sm w-full"
-                                disabled={isLoading}
-                            >
-                                {isLoading ? "SENDING..." : "SEND MESSAGE"}
-                                <Send className="ml-2 h-4 w-4" />
-                            </Button>
-                        </div>
-                    </form>
-                </Form>
+                        SEND MESSAGE
+                        <Send className="ml-2 h-4 w-4" />
+                    </Button>
+                </div>
             </section>
         </MotionDiv>
     );

diff --git a/src/app/components/HeroTitle.tsx b/src/app/components/HeroTitle.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { motion } from "framer-motion";
 import { slideInFromLeft, slideInFromTop } from "../utils/motion";
 import Image from "next/image";
+import MotionTag from "./MotionTag";
 
 export default function HeroTitle() {
     let isMobile = false;
@@ -12,9 +12,10 @@ export default function HeroTitle() {
 
     return (
         <div>
-            <motion.div
-                variants={isMobile ? slideInFromTop(0.5) : slideInFromLeft(0.5)}
-                initial="hidden"
+            <MotionTag
+                tag="div"
+                variants={slideInFromLeft(0.5)}
+                initial={isMobile ? 'visible' : "hidden"}
                 animate="visible"
                 className="text-lg sm:text-xl md:text-2xl font-medium flex items-center w-full justify-center lg:justify-start"
             >
@@ -25,25 +26,27 @@ export default function HeroTitle() {
                     width={28}
                     height={28}
                 />
-                <h1>Hey there, I'm Alvin! 👋</h1>
-            </motion.div>
-            <motion.h1
-                variants={isMobile ? slideInFromTop(0.6) : slideInFromLeft(0.6)}
-                initial="hidden"
+                <h1>Hi, I'm Evan! 👋</h1>
+            </MotionTag>
+            <MotionTag
+                tag="h1"
+                variants={slideInFromLeft(0.6)}
+                initial={isMobile ? 'visible' : "hidden"}
                 animate="visible"
-                className="text-4xl sm:text-5xl lg:text-5xl 2xl:text-6xl font-bold text-center lg:text-start"
+                className="text-4xl sm:text-5xl lg:text-[2.75rem] xl:text-5xl 1640:text-[3.25rem] font-bold text-center lg:text-start"
             >
-                Delivering
-                <span className="gradient-accent"> the best </span>
-            </motion.h1>
-            <motion.h1
+                I'm a
+                <span className="gradient-accent"> Front-End </span>
+            </MotionTag>
+            <MotionTag
+                tag="h1"
                 variants={isMobile ? slideInFromTop(0.7) : slideInFromLeft(0.7)}
                 initial="hidden"
                 animate="visible"
-                className="text-4xl sm:text-5xl lg:text-5xl 2xl:text-6xl font-bold text-center lg:text-start mb-2"
+                className="text-4xl sm:text-5xl lg:text-[2.75rem] xl:text-5xl 1640:text-[3.25rem] font-bold text-center lg:text-start mb-2"
             >
-                in design and code.
-            </motion.h1>
+                Developer
+            </MotionTag>
         </div>
     );
 }
diff --git a/src/app/components/HireMeButton.tsx b/src/app/components/HireMeButton.tsx
@@ -61,7 +61,7 @@ export default function HireMeButton({ isSticky }: TProps) {
                         className="text-white text-[10px] lg:text-[11px] border border-[rgba(255,255,255,0.3)] font-bold tracking-widest bg-background
              px-4 py-2 rounded-md w-full h-full relative z-10"
                     >
-                        HIRE ME
+                        CONTACT
                     </button>
                 </div>
             </Link>

diff --git a/src/app/components/HomepageBlogs.tsx b/src/app/components/HomepageBlogs.tsx
diff --git a/src/app/components/MainTechnology.tsx b/src/app/components/MainTechnology.tsx
@@ -0,0 +1,26 @@
+import { cloneElement } from 'react';
+
+interface MainTechnologyProps {
+    technology: {
+        name: string;
+        icon: JSX.Element;
+        description: string;
+    };
+}
+
+export default function MainTechnology({ technology }: MainTechnologyProps) {
+    // Clone the icon element and add additional classes
+    const IconWithClasses = cloneElement(technology.icon, {
+        className: `text-3xl transition-all duration-300 group-hover:scale-125 ${technology.icon.props.className || ''}`
+    });
+
+    return (
+        <div className="group flex flex-col items-center gap-2 text-center" title={technology.name}>
+            {IconWithClasses}
+            <div>
+                <h3 className="text-xs font-bold">{technology.name}</h3>
+                <p className="text-[11px] text-slate-350 leading-normal">{technology.description}</p>
+            </div>
+        </div>
+    );
+}
diff --git a/src/app/components/MotionTag.tsx b/src/app/components/MotionTag.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { motion, useInView, HTMLMotionProps } from "framer-motion";
+import { useRef } from "react";
+import { useIsMobile } from "../hooks/useIsMobile";
+
+type MotionTags = keyof typeof motion;
+
+interface TProps extends HTMLMotionProps<any> {
+    tag: MotionTags;
+    children: React.ReactNode;
+    variants: any;
+    initial: any;
+    animate: any;
+    className?: string;
+    once?: boolean;
+    transition?: any;
+}
+
+export default function MotionTag({
+    tag,
+    children,
+    variants,
+    initial,
+    animate,
+    className,
+    once = true,
+    transition = { duration: 0.3 },
+    ...props
+}: TProps) {
+    const isMobile = useIsMobile();
+    const ref = useRef(null);
+    const isInView = useInView(ref, {
+        once,
+        margin: "-150px",
+    });
+
+    return (
+        <>
+            {tag === "div" ? (
+                <motion.div
+                    ref={ref}
+                    variants={variants}
+                    initial={!isMobile ? initial : "visible"}
+                    animate={isInView ? animate : initial}
+                    transition={transition}
+                    className={className}
+                >
+                    {children}
+                </motion.div>
+            ) : (
+                <motion.h1
+                    ref={ref}
+                    variants={variants}
+                    initial={!isMobile ? initial : "visible"}
+                    animate={isInView ? animate : initial}
+                    transition={transition}
+                    className={className}
+                >
+                    {children}
+                </motion.h1>
+            )}
+        </>
+    );
+}
+
+// ref={ref}
+// variants={variants}
+// initial={initial}
+// animate={isInView ? animate : initial}
+// transition={transition}
+// className={className}
+// viewport={{ once }}
diff --git a/src/app/components/SocialIcons.tsx b/src/app/components/SocialIcons.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { siteConfig } from "../config";
 import { slideInFromLeft, slideInFromTop } from "../utils/motion";
-import MotionDiv from "./MotionDiv";
+import MotionTag from "./MotionTag";
 
 type TProps = {
     isSticky?: boolean;
@@ -16,7 +16,8 @@ export default function SocialIcons({ isSticky, noAnimate }: TProps) {
         isMobile = window.matchMedia("(max-width: 1024px)").matches;
     }
     return (
-        <MotionDiv
+        <MotionTag
+            tag="div"
             variants={isMobile ? slideInFromTop(1) : slideInFromLeft(1)}
             initial={noAnimate ? "visible" : "hidden"}
             animate="visible"
@@ -35,6 +36,6 @@ export default function SocialIcons({ isSticky, noAnimate }: TProps) {
                     </li>
                 ))}
             </ul>
-        </MotionDiv>
+        </MotionTag>
     );
 }
diff --git a/src/app/components/StarBackground.tsx b/src/app/components/StarBackground.tsx
@@ -9,7 +9,7 @@ import * as random from "maath/random/dist/maath-random.esm";
 const StarBackground = (props: any) => {
   const ref: any = useRef();
   const [sphere] = useState(() =>
-    random.inSphere(new Float32Array(5000), { radius: 1.2 })
+    random.inSphere(new Float32Array(3000), { radius: 1.2 })
   );
 
   useFrame((state, delta) => {
@@ -49,4 +49,4 @@ const StarsCanvas = () => (
     </div>
 )
 
-export default StarsCanvas;
+export default StarsCanvas;
diff --git a/src/app/components/TableOfContents.tsx b/src/app/components/TableOfContents.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { siteConfig } from "../config";
 import { useState, useEffect, useRef } from "react";
 import { slideInFromLeft } from "../utils/motion";
-import MotionDiv from "./MotionDiv";
+import MotionTag from "./MotionTag";
 
 export default function TableOfContents() {
     const [activeSection, setActiveSection] = useState<string | null>(null);
@@ -62,7 +62,8 @@ export default function TableOfContents() {
     };
 
     return (
-        <MotionDiv
+        <MotionTag
+            tag="div"
             variants={slideInFromLeft(0.9)}
             initial="hidden"
             animate="visible"
@@ -96,6 +97,6 @@ export default function TableOfContents() {
                     </Link>
                 </div>
             ))}
-        </MotionDiv>
+        </MotionTag>
     );
 }
diff --git a/src/app/components/Technologies.tsx b/src/app/components/Technologies.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { siteConfig } from "../config";
+import { slideInFromRight } from "../utils/motion";
+import MainTechnology from "./MainTechnology";
+import MotionTag from "./MotionTag";
+import SectionLabel from "./SectionLabel";
+import { useState } from "react";
+import TechnologyItem from "./TechnologyItem";
+import { Separator } from "@/components/ui/separator";
+
+export default function Technologies() {
+    enum Categories {
+        MAIN = "Main",
+        ALL = "All Technologies",
+    }
+    const [selectedCategory, setSelectedCategory] = useState(Categories.MAIN);
+    const technologies = siteConfig.sections.technologies;
+    const allTechnologies = [...technologies.main, ...technologies.other];
+
+    return (
+        <MotionTag
+            tag="div"
+            variants={slideInFromRight(1.4)}
+            initial="hidden"
+            animate="visible"
+        >
+            <section
+                id="technologies"
+                className="w-full flex flex-wrap justify-center lg:justify-start mb-8 lg:mb-12 lg:pl-6"
+            >
+                <SectionLabel label="TECHNOLOGIES" />
+                {selectedCategory === Categories.MAIN ? (
+                    <div className="w-full grid grid-cols-3 gap-4">
+                        {technologies.main.map((technology, index) => {
+                            return (
+                                <MainTechnology
+                                    key={index}
+                                    technology={technology}
+                                />
+                            );
+                        })}
+                    </div>
+                ) : (
+                    <>
+                        <div className="w-full grid grid-cols-6 sm:grid-cols-7 md:grid-cols-9 lg:grid-cols-7 gap-2">
+                            {allTechnologies.map((technology, index) => {
+                                return (
+                                    <TechnologyItem
+                                        key={index}
+                                        technology={technology}
+                                        className={index === 27 ? 'md:hidden lg:block' : ''}
+                                    />
+                                );
+                            })}
+                        </div>
+                        <div className="w-full flex justify-center mt-4 text-center">
+                            <p className="text-[9px] italic text-slate-350 leading-normal">
+                                Disclaimer: This list contains all the technologies that I have worked with in the past. <br></br>
+                                Not necessarily the technologies that I am most comfortable with.
+                            </p>
+                        </div>
+                    </>
+                )}
+                <div
+                    className={`w-full flex justify-center items-center gap-4 ${selectedCategory === Categories.MAIN ? "mt-4" : ""} text-[10px]`}
+                >
+                    <button
+                        className={`hover:text-white transition ${
+                            selectedCategory === Categories.MAIN
+                                ? "text-white"
+                                : "text-slate-350"
+                        }`}
+                        onClick={() => setSelectedCategory(Categories.MAIN)}
+                    >
+                        Main Technologies
+                    </button>
+                    <Separator orientation="vertical" />
+                    <button
+                        className={`hover:text-white transition ${
+                            selectedCategory === Categories.ALL
+                                ? "text-white"
+                                : "text-slate-350"
+                        }`}
+                        onClick={() => setSelectedCategory(Categories.ALL)}
+                    >
+                        All Technologies
+                    </button>
+                </div>
+            </section>
+        </MotionTag>
+    );
+}
diff --git a/src/app/components/TechnologyItem.tsx b/src/app/components/TechnologyItem.tsx
@@ -0,0 +1,27 @@
+import { cloneElement } from "react";
+
+interface TechnologyItemProps {
+    technology: {
+        name: string;
+        icon: JSX.Element;
+        description?: string;
+    };
+    className?: string;
+}
+
+export default function TechnologyItem({ technology, className }: TechnologyItemProps) {
+    const IconWithClasses = cloneElement(technology.icon, {
+        className: `w-1/3 h-1/3 ${
+            technology.icon.props.className || ""
+        }`,
+    });
+
+    return (
+        <div
+            className={`bg-white bg-opacity-[0.04] hover:bg-opacity-[0.08] transition-all duration-300 rounded-sm aspect-square flex justify-center items-center ${className}`}
+            title={technology.name}
+        >
+            {IconWithClasses}
+        </div>
+    );
+}
diff --git a/src/app/components/TitleList.tsx b/src/app/components/TitleList.tsx
@@ -20,7 +20,7 @@ export default function TitleList({ titles }: { titles: string[] }) {
                     variants={isMobile ? slideInFromTop(0.8 + index * 0.2) : slideInFromLeft(0.8 + index * 0.2)}
                     initial="hidden"
                     animate="visible"
-                    className={`text-xs font-bold ${textColors[index % textColors.length]} ${bgColors[index % bgColors.length]} p-1 px-2 rounded-full flex items-center`}
+                    className={`text-xs lg:text-[0.6rem] xl:text-xs font-bold ${textColors[index % textColors.length]} ${bgColors[index % bgColors.length]} p-1 px-2 rounded-full flex items-center`}
                 >
                     <div className="w-2 h-2 bg-green-700 rounded-full mr-1"></div>
                     {title}

diff --git a/src/app/config.tsx b/src/app/config.tsx
diff --git a/src/app/feed.xml/route.ts b/src/app/feed.xml/route.ts
diff --git a/src/app/hooks/useIsMobile.ts b/src/app/hooks/useIsMobile.ts
@@ -0,0 +1,24 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+
+export function useIsMobile(breakpoint: number = 768) {
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < breakpoint);
+        };
+
+        // Check on mount
+        checkMobile();
+
+        // Add event listener for window resize
+        window.addEventListener('resize', checkMobile);
+
+        // Cleanup
+        return () => window.removeEventListener('resize', checkMobile);
+    }, [breakpoint]);
+
+    return isMobile;
+} 
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,18 +10,19 @@ import TableOfContents from "./components/TableOfContents";
 import HireMeButton from "./components/HireMeButton";
 import Footer from "./components/Footer";
 import ContactForm from "./components/ContactForm";
-import { fetchBlogs } from "./utils/fetchWordpress";
-import HomepageBlogs from "./components/HomepageBlogs";
+import Technologies from "./components/Technologies";
+import { Analytics } from "@vercel/analytics/react";
+import { SpeedInsights } from "@vercel/speed-insights/next";
 
 export default async function Home() {
+
     const jsonLd = {
         "@context": "https://schema.org",
         "@type": "Person",
         name: siteConfig.name,
         url: siteConfig.url,
         keywords: siteConfig.keywords,
     };
-    const blogs = await fetchBlogs();
 
     return (
         <main className="w-full min-h-screen px-4 sm:px-20 xl:px-40 2xl:px-80">
@@ -50,11 +51,13 @@ export default async function Home() {
                     <AboutMe />
                     <Experiences />
                     <Projects />
-                    <HomepageBlogs blogs={blogs} />
+                    <Technologies />
                     <ContactForm />
                     <Footer />
                     <SocialIcons />
                 </main>
+                <SpeedInsights />
+                <Analytics/>
             </section>
         </main>
     );

diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -1,5 +1,4 @@
 import { MetadataRoute } from "next";
-import { fetchBlogs } from "./utils/fetchWordpress";
 import { TPost } from "./utils/types";
 
 export async function generateSitemaps() {
@@ -9,18 +8,11 @@ export async function generateSitemaps() {
 }
 
 export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {
-    const posts = await fetchBlogs();
 
     return [
         {
             url: "https://alvinchang.dev",
             lastModified: new Date(),
         },
-
-        ...posts.map((post: TPost) => ({
-            url: `https://alvinchang.dev/blogs/${post.slug}`,
-            lastModified: new Date(post.modified_gmt),
-            priority: 0.8,
-        }))
     ];
-}
+}
diff --git a/src/app/utils/fetchWordpress.ts b/src/app/utils/fetchWordpress.ts
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-slate-200 dark:bg-slate-800",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }