Implemented million.js

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+bun.lockb
 
 # Editor directories and files
 .vscode/*

src/Frontend/Components/NavBar/NavBar.jsx

@@ -1,18 +1,24 @@
-import React from 'react'
-import './NavBar.css'
+import React from 'react';
+import './NavBar.css';
 
 const NavBar = ({ handleContactClick }) => {
   return (
-    <div className='lg:flex xss:hidden py-4 nav px-7 sm:px-6 lg:px-[8rem] justify-between items-center'>
-
-      <h1 className='font-mono text-lg sm:text-xl cursor-default'>&lt;/SiddZ&gt;</h1>
-      <div className='flex gap-4 sm:gap-6 lg:gap-[3.15rem] items-center'>
+    <div className="lg:flex xss:hidden py-4 nav px-7 sm:px-6 lg:px-[8rem] justify-between items-center">
+      <h1 className="font-mono text-lg sm:text-xl cursor-default">
+        {'<'}/SiddZ{'>'}
+      </h1>
+      <div className="flex gap-4 sm:gap-6 lg:gap-[3.15rem] items-center">
         {/* <h1 className='font-inter text-[#ffffff] text-base sm:text-lg xl:text-xl cursor-pointer hover-underline-animation'>About</h1> */}
         {/* <h1 className='font-inter text-[#FFFFFF] text-base sm:text-lg xl:text-xl cursor-pointer hover-underline-animation'>Projects</h1> */}
-        <button onClick={handleContactClick} className='font-pop text-base sm:text-lg xl:text-xl px-3 sm:px-4 lg:px-[1.3rem] py-1 sm:py-2 lg:py-[0.4rem] bg-[#eeeeee] text-black rounded-full overflow-hidden hover:bg-[#f1f1f1] transition-all hover:scale-105 ease-in-out text-btn'>Contact</button>
+        <button
+          onClick={handleContactClick}
+          className="font-pop text-base sm:text-lg xl:text-xl px-3 sm:px-4 lg:px-[1.3rem] py-1 sm:py-2 lg:py-[0.4rem] bg-[#eeeeee] text-black rounded-full overflow-hidden hover:bg-[#f1f1f1] transition-all hover:scale-105 ease-in-out text-btn"
+        >
+          Contact
+        </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default NavBar
+export default NavBar;

src/Frontend/Components/Project/Project.jsx

@@ -1,31 +1,48 @@
-import React from 'react'
-
+import React from 'react';
+//million-ignore
 const Project = ({ title, image, description, link, lang, workInProgress }) => {
   return (
-    <div className='max-w-[25rem] xs:mb-0 xss:mb-7'>
-      <img src={`/${image}`} alt="" className='object-cover rounded-md' />
-      <h1 className='md:text-[1.5rem] sm:text-[3.2vw] xs:text-[3.1vw] xss:text-[1.5rem] leading-8 md:mt-4 sm:mt-[0.6rem] xs:mt-[0.5rem] xss:mt-4 font-pop font-bold text-[#E4E4E4]'>{title}</h1>
-      <p className='bg-gradient-to-r cursor-default md:text-sm sm:text-[2vw] xs:text-[1.9vw] xss:text-[0.82rem] sm:leading-4 xs:leading-3 opacity-90 from-[#9BE15D] to-[#00E3AE] text-transparent bg-clip-text'>
+    <div className="max-w-[25rem] xs:mb-0 xss:mb-7">
+      <img src={`/${image}`} alt={title} className="object-cover rounded-md" />
+      <h1 className="md:text-[1.5rem] sm:text-[3.2vw] xs:text-[3.1vw] xss:text-[1.5rem] leading-8 md:mt-4 sm:mt-[0.6rem] xs:mt-[0.5rem] xss:mt-4 font-pop font-bold text-[#E4E4E4]">
+        {title}
+      </h1>
+      <p className="bg-gradient-to-r cursor-default md:text-sm sm:text-[2vw] xs:text-[1.9vw] xss:text-[0.82rem] sm:leading-4 xs:leading-3 opacity-90 from-[#9BE15D] to-[#00E3AE] text-transparent bg-clip-text">
         {lang.map((language, index) => (
           <React.Fragment key={index}>
             {language}
-            {index < lang.length - 1 && <span className='text-[#496331]'> / </span>}
+            {index < lang.length - 1 && (
+              <span className="text-[#496331]"> / </span>
+            )}
           </React.Fragment>
         ))}
       </p>
-      <p className='w-full text-[#d4d4d4] mt-2 sm:text-base xs:text-xs'>{description}</p>
-      <div className='flex items-center gap-5'>
-        <a href={link} target='_blank' rel="noopener noreferrer" className='mt-2 flex items-center gap-[0.55rem] group hover:cursor-pointer'>
+      <p className="w-full text-[#d4d4d4] mt-2 sm:text-base xs:text-xs">
+        {description}
+      </p>
+      <div className="flex items-center gap-5">
+        <a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-2 flex items-center gap-[0.55rem] group hover:cursor-pointer"
+        >
           <i className="ri-link text-base bg-gradient-to-b from-[#72EDF2] to-[#5151E5] text-transparent bg-clip-text"></i>
-          <div className='inline-flex flex-col'>
-            <h1 className='text-sm bg-gradient-to-b translate-y-[1px] from-[#72EDF2] to-[#5151E5] text-transparent bg-clip-text'>Live Preview</h1>
-            <div className='group-hover:bg-gradient-to-r bg-transparent from-[#72EDF2] to-[#5151E5] h-[0.7px] w-full'></div>
+          <div className="inline-flex flex-col">
+            <h1 className="text-sm bg-gradient-to-b translate-y-[1px] from-[#72EDF2] to-[#5151E5] text-transparent bg-clip-text">
+              Live Preview
+            </h1>
+            <div className="group-hover:bg-gradient-to-r bg-transparent from-[#72EDF2] to-[#5151E5] h-[0.7px] w-full"></div>
           </div>
         </a>
-        {workInProgress && <h1 className='sm:text-[0.72rem] xs:text-[0.5rem] font-semibold mt-2 px-[0.65rem] py-[0.17rem] bg-[#ff9900d9] rounded-full text-[#000000] cursor-default'>Work in Progress</h1>}
+        {workInProgress && (
+          <h1 className="sm:text-[0.72rem] xs:text-[0.5rem] font-semibold mt-2 px-[0.65rem] py-[0.17rem] bg-[#ff9900d9] rounded-full text-[#000000] cursor-default">
+            Work in Progress
+          </h1>
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Project
+export default Project;

vite.config.js

@@ -1,7 +1,15 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import million from 'million/compiler';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
-// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [
+    million.vite({
+      auto: {
+        threshold: 0.05,
+        skip: ['useBadHook', /badVariable/g],
+      },
+    }),
+    react(),
+  ],
+});