style: format code with Prettier

README.md

@@ -36,27 +36,33 @@ This portfolio showcases my journey as a developer specializing in **Minecraft A
 ## Tech Stack
 
 ### Web Development
+
 - **Frontend**: React, Vanilla JavaScript
 - **Backend**: FastAPI, Flask, Next.js, Prisma ORM
 - **Databases**: PostgreSQL, SQLite, JSON
 
 ### Styling
+
 - **Tailwind CSS**: Utility-first CSS framework
 - **Bootstrap**: Additional styling framework
 
 ### 3D and Animations
+
 - **Three.js**: JavaScript library for 3D graphics
 - **Framer Motion**: Library for animations and transitions
 
 ### Tools and Utilities
+
 - **Vite**: Modern frontend build tool
 - **EmailJS**: Email service for JavaScript
 - **React Hot Toast**: Notification library for React
 - **Google Analytics**: Website performance tracking
 - **GitHub Actions**: CI/CD for automated deployment with Vercel
 
 ### Programming Languages
+
 - TypeScript, JavaScript
 
 ## Inspired?
-Feel free to explore the code and contribute! If you like the project, consider giving it a star ⭐️ on GitHub. It means a lot to me!
+
+Feel free to explore the code and contribute! If you like the project, consider giving it a star ⭐️ on GitHub. It means a lot to me!

eslint.config.js

@@ -1,48 +1,48 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import react from 'eslint-plugin-react'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import typescript from '@typescript-eslint/eslint-plugin'
-import parser from '@typescript-eslint/parser'
-import next from 'eslint-plugin-next'
+import js from "@eslint/js";
+import globals from "globals";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import typescript from "@typescript-eslint/eslint-plugin";
+import parser from "@typescript-eslint/parser";
+import next from "eslint-plugin-next";
 
 export default [
-  { ignores: ['dist', '.next'] },
+  { ignores: ["dist", ".next"] },
   {
-    files: ['**/*.{js,jsx,ts,tsx}'],
+    files: ["**/*.{js,jsx,ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parser: parser,
       parserOptions: {
-        ecmaVersion: 'latest',
+        ecmaVersion: "latest",
         ecmaFeatures: { jsx: true },
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
     plugins: {
       react,
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-      '@typescript-eslint': typescript,
-      next, 
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "@typescript-eslint": typescript,
+      next,
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
       ...typescript.configs.recommended.rules,
       ...next.configs.recommended.rules,
-      'react/jsx-no-target-blank': 'off',
-      'react-refresh/only-export-components': [
-        'warn',
+      "react/jsx-no-target-blank": "off",
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
-      '@typescript-eslint/no-unused-vars': 'off',
-      'react/no-unknown-property': 'off',
+      "@typescript-eslint/no-unused-vars": "off",
+      "react/no-unknown-property": "off",
     },
   },
-]
+];

index.html

@@ -5,18 +5,29 @@
     <link rel="icon" type="image/png" href="./keyyard.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta property="og:title" content="Keyyard Portfolio" />
-    <meta property="og:description" content="Hieu - Keyyard's portfolio website for Official Minecraft Marketplaces." />
+    <meta
+      property="og:description"
+      content="Hieu - Keyyard's portfolio website for Official Minecraft Marketplaces."
+    />
     <meta property="og:image" content="/keyyard.png" />
-    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Montserrat:wght@400;700&family=Open+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
     <title>Keyyard Portfolio</title>
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Z3K6D9SXF4"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-Z3K6D9SXF4"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
 
-      gtag('config', 'G-Z3K6D9SXF4');
+      gtag("config", "G-Z3K6D9SXF4");
     </script>
   </head>
   <body>

next.config.js

@@ -1,2 +1,2 @@
 export const reactStrictMode = false;
-export const productionBrowserSourceMaps = true;
+export const productionBrowserSourceMaps = true;

postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/App.css

@@ -6,5 +6,5 @@
 canvas {
   width: 100%;
   height: 100%;
-  display: absolute ;
-}
+  display: absolute;
+}

src/carousel.css

@@ -1,26 +1,26 @@
 .carousel .slide {
-    background: none;
-    border: none;
+  background: none;
+  border: none;
 }
 
 .carousel .control-arrow,
 .carousel.carousel-slider .control-arrow {
-    opacity: 0.5;
+  opacity: 0.5;
 }
 
 .carousel .control-arrow:hover,
 .carousel.carousel-slider .control-arrow:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .carousel .control-dots .dot {
-    display: none;
+  display: none;
 }
 
 .carousel .control-dots .dot.selected {
-    display: none;
+  display: none;
 }
 
 .carousel .thumb {
-    border-color: #171717;
+  border-color: #171717;
 }

src/components/About.tsx

@@ -5,7 +5,9 @@ import { aboutMeData, techStackData } from "../data";
 const About = () => {
   return (
     <section id="about" className="min-h-[95vh]">
-      <h2 className="text-4xl font-semibold pt-4 mt-10 text-center border-t-2 mb-6">About</h2>
+      <h2 className="text-4xl font-semibold pt-4 mt-10 text-center border-t-2 mb-6">
+        About
+      </h2>
       <div className="container mx-auto px-6 lg:px-20 mt-8">
         <motion.div
           className="p-6 bg-neutral-800 rounded-xl shadow shadow-stone-900 drop-shadow"
@@ -23,7 +25,9 @@ const About = () => {
         </motion.div>
 
         <div className="mt-12 mb-4">
-          <h3 className="text-3xl font-semibold mb-2 text-center">Tech Stack</h3>
+          <h3 className="text-3xl font-semibold mb-2 text-center">
+            Tech Stack
+          </h3>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {techStackData.map((stack, index) => (
               <motion.div
@@ -37,7 +41,8 @@ const About = () => {
                 <ul className="list-disc list-inside space-y-2 text-gray-300">
                   {stack.items.map((item, idx) => (
                     <li key={idx}>
-                      {"label" in item && <strong>{item.label}:</strong>} {item.value}
+                      {"label" in item && <strong>{item.label}:</strong>}{" "}
+                      {item.value}
                     </li>
                   ))}
                 </ul>
@@ -50,4 +55,4 @@ const About = () => {
   );
 };
 
-export default About;
+export default About;

src/components/Contact.tsx

@@ -9,7 +9,7 @@ const Contact = () => {
   });
 
   const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
     const { name, value } = e.target;
     setFormData((prevState) => ({
@@ -20,14 +20,14 @@ const Contact = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const response = await fetch('/api/sendEmail', {
-      method: 'POST',
+    const response = await fetch("/api/sendEmail", {
+      method: "POST",
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
       body: JSON.stringify(formData),
     });
-  
+
     if (response.ok) {
       toast.success("Email sent successfully!");
     } else {
@@ -37,9 +37,13 @@ const Contact = () => {
 
   return (
     <section id="contact" className="min-h-[95vh]">
-      <h2 className="text-4xl font-semibold pt-4 text-center border-t-2">Contact</h2>
+      <h2 className="text-4xl font-semibold pt-4 text-center border-t-2">
+        Contact
+      </h2>
       <Toaster />
-      <h3 className="text-center text-lg mt-4">Let's Build Something Cool! Drop me a message.</h3>
+      <h3 className="text-center text-lg mt-4">
+        Let's Build Something Cool! Drop me a message.
+      </h3>
       <span className="text-xs text-gray-400 text-right block">
         Click on the icons or contact me via the form!
       </span>
@@ -170,7 +174,11 @@ const Contact = () => {
             </div>
           </div>
         </a>
-        <a className="mx-1" href="https://discord.com/users/keyyard" target="_blank">
+        <a
+          className="mx-1"
+          href="https://discord.com/users/keyyard"
+          target="_blank"
+        >
           <div className="relative w-8 h-14 flex items-center justify-center rounded-full transition-colors duration-300 group">
             <svg
               aria-hidden="true"

src/components/Experiences.tsx

@@ -27,7 +27,9 @@ const Experiences = () => {
 
   return (
     <section id="experiences" className="min-h-[95vh]">
-      <h2 className="text-4xl font-semibold pt-4 text-center border-t-2 ">Experiences</h2>
+      <h2 className="text-4xl font-semibold pt-4 text-center border-t-2 ">
+        Experiences
+      </h2>
       <div className="p-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
         <div className="space-y-4">
           {resolution <= 1024 && selectedExperience && (
@@ -69,7 +71,10 @@ const Experiences = () => {
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
               initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: sectionInView ? 1 : 0, y: sectionInView ? 0 : 20 }}
+              animate={{
+                opacity: sectionInView ? 1 : 0,
+                y: sectionInView ? 0 : 20,
+              }}
               transition={{ duration: 0.25, delay: index * 0.1 }}
               ref={sectionRef}
             >
@@ -139,4 +144,4 @@ const Experiences = () => {
   );
 };
 
-export default Experiences;
+export default Experiences;

src/components/Hero.tsx

@@ -49,9 +49,11 @@ export function Hero() {
       <div className="pt-4 flex w-[50vw] h-[55vh]" id="head"></div>
       <div className="flex flex-col items-center justify-items-center p-4 text-[15px]">
         <div className="text-start mt-32 md:mt-20">
-          { introductionText.map((text, index) => (
-            <p key={index} className="text-lg">{text}</p>
-          )) }
+          {introductionText.map((text, index) => (
+            <p key={index} className="text-lg">
+              {text}
+            </p>
+          ))}
         </div>
       </div>
     </section>

src/components/MinecraftProjects.tsx

@@ -1,11 +1,13 @@
 import { motion } from "framer-motion";
 import { Carousel } from "react-responsive-carousel";
-import { mcProjects } from "../data" 
+import { mcProjects } from "../data";
 
 const MinecraftProjects = () => {
   return (
     <section id="projects" className="min-h-[95vh]">
-      <h2 className="text-4xl font-semibold pt-4 text-center border-t-2">Minecraft Projects</h2>
+      <h2 className="text-4xl font-semibold pt-4 text-center border-t-2">
+        Minecraft Projects
+      </h2>
       <span className="text-xs text-gray-400 text-right block">
         Download counts are aggregated from multiple sources.
       </span>
@@ -31,10 +33,12 @@ const MinecraftProjects = () => {
                   />
                 )}
               </h3>
-              <h4 className="text-md text-gray-200 leading-3">{proj.short_info}</h4>
-                <h4 className="text-md text-gray-200 text-ellipsis overflow-hidden mt-2 leading-5 group-hover:overflow-visible group-hover:whitespace-normal">
+              <h4 className="text-md text-gray-200 leading-3">
+                {proj.short_info}
+              </h4>
+              <h4 className="text-md text-gray-200 text-ellipsis overflow-hidden mt-2 leading-5 group-hover:overflow-visible group-hover:whitespace-normal">
                 {proj.description}
-                </h4>
+              </h4>
               <Carousel className="mt-4" infiniteLoop={true}>
                 {proj.imgs &&
                   proj.imgs.map((img, imgIndex) => (
@@ -58,8 +62,10 @@ const MinecraftProjects = () => {
                         linkObj.name === "Github"
                           ? "bg-[#5a4378] text-white hover:bg-[#5a4378]"
                           : linkObj.name === "MCPEDL"
-                          ? "bg-[#4a8a4a] text-white hover:bg-[#4a8a4a]"
-                          : linkObj.name === "CurseForge" ? "bg-[#f16436] text-white hover:bg-[#f16436]" : "bg-[#333] text-white hover:bg-[#333]"
+                            ? "bg-[#4a8a4a] text-white hover:bg-[#4a8a4a]"
+                            : linkObj.name === "CurseForge"
+                              ? "bg-[#f16436] text-white hover:bg-[#f16436]"
+                              : "bg-[#333] text-white hover:bg-[#333]"
                       }`}
                     >
                       {linkObj.name}

src/components/MyHead.tsx

@@ -72,8 +72,8 @@ function Model() {
 const HeadRender = () => {
   return (
     <>
-    <Canvas camera={{ position: [0, 0, 6], fov: 50 }} id="head">
-        <ambientLight intensity={0.5}/>
+      <Canvas camera={{ position: [0, 0, 6], fov: 50 }} id="head">
+        <ambientLight intensity={0.5} />
         <Model />
       </Canvas>
     </>