progress on formatting up to projects

src/app/api/send/route.js

@@ -15,8 +15,8 @@ export async function POST(req, res) {
       react: (
         <>
           <h1>{subject}</h1>
-          <p>Thank you for contacting us!</p>
-          <p>New message submitted:</p>
+          <p>Thank you for contacting me!</p>
+          <p>Your message was received:</p>
           <p>{message}</p>
         </>
       ),

src/app/components/AboutSection.jsx

@@ -5,43 +5,53 @@ import TabButton from "./TabButton";
 
 const TAB_DATA = [
   {
-    title: "Skills",
-    id: "skills",
+    title: "Frameworks",
+    id: "frameworks",
     content: (
       <ul className="list-disc pl-2">
         <li>Node.js</li>
         <li>Express</li>
-        <li>PostgreSQL</li>
-        <li>Sequelize</li>
-        <li>JavaScript</li>
         <li>React</li>
+        <li>Flask</li>
       </ul>
     ),
   },
   {
-    title: "Education",
-    id: "education",
+    title: "Languages",
+    id: "languages",
     content: (
       <ul className="list-disc pl-2">
-        <li>Fullstack Academy of Code</li>
-        <li>University of California, Santa Cruz</li>
+        <li>C</li>
+        <li>Python</li>
+        <li>Java</li>
+        <li>Javascript</li>
+        <li>HTML/CSS</li>
+        <li>SQL</li>
+        <li>MIPS Assembly</li>
+        <li>English and Cantonese :{")"}</li>
       </ul>
     ),
   },
   {
-    title: "Certifications",
-    id: "certifications",
+    title: "Dev Tools",
+    id: "dev tools",
     content: (
       <ul className="list-disc pl-2">
-        <li>AWS Cloud Practitioner</li>
-        <li>Google Professional Cloud Developer</li>
+        <li>Git</li>
+        <li>Unity</li>
+        <li>Agile</li>
+        <li>Scrum</li>
+        <li>Bash Scripting</li>
+        <li>Figma</li>
+        <li>MongoDB</li>
+        <li>Firebase</li>
       </ul>
     ),
   },
 ];
 
 const AboutSection = () => {
-  const [tab, setTab] = useState("skills");
+  const [tab, setTab] = useState("frameworks");
   const [isPending, startTransition] = useTransition();
 
   const handleTabChange = (id) => {
@@ -57,34 +67,32 @@ const AboutSection = () => {
         <div className="mt-4 md:mt-0 text-left flex flex-col h-full">
           <h2 className="text-4xl font-bold text-white mb-4">About Me</h2>
           <p className="text-base lg:text-lg">
-            I am a full stack web developer with a passion for creating
-            interactive and responsive web applications. I have experience
-            working with JavaScript, React, Redux, Node.js, Express, PostgreSQL,
-            Sequelize, HTML, CSS, and Git. I am a quick learner and I am always
-            looking to expand my knowledge and skill set. I am a team player and
-            I am excited to work with others to create amazing applications.
+            I am a full-time 3rd year student at the University of Toronto Scarborough, studying Computer Science and 
+            specializing in Software Engineering. From both personal and academic work, I have experience in developing
+            web applications, mobile applications, some video games and lots of small programs. I'm constantly searching
+            for opportunities to learn and expand my skillset, and I hope to learn from you as well!
           </p>
           <div className="flex flex-row justify-start mt-8">
             <TabButton
-              selectTab={() => handleTabChange("skills")}
-              active={tab === "skills"}
+              selectTab={() => handleTabChange("frameworks")}
+              active={tab === "frameworks"}
             >
               {" "}
-              Skills{" "}
+              Frameworks{" "}
             </TabButton>
             <TabButton
-              selectTab={() => handleTabChange("education")}
-              active={tab === "education"}
+              selectTab={() => handleTabChange("languages")}
+              active={tab === "languages"}
             >
               {" "}
-              Education{" "}
+              Languages{" "}
             </TabButton>
             <TabButton
-              selectTab={() => handleTabChange("certifications")}
-              active={tab === "certifications"}
+              selectTab={() => handleTabChange("dev tools")}
+              active={tab === "dev tools"}
             >
               {" "}
-              Certifications{" "}
+              Dev Tools{" "}
             </TabButton>
           </div>
           <div className="mt-8">

src/app/components/AchievementsSection.jsx

@@ -11,22 +11,22 @@ const AnimatedNumbers = dynamic(
 
 const achievementsList = [
   {
-    metric: "Projects",
-    value: "100",
+    metric: "Something",
+    value: "5",
     postfix: "+",
   },
   {
     prefix: "~",
     metric: "Users",
-    value: "100,000",
+    value: "100",
   },
   {
     metric: "Awards",
     value: "7",
   },
   {
-    metric: "Years",
-    value: "5",
+    metric: "Years Lived",
+    value: "20",
   },
 ];
 

src/app/components/EmailSection.jsx

@@ -18,15 +18,11 @@ const EmailSection = () => {
     const JSONdata = JSON.stringify(data);
     const endpoint = "/api/send";
 
-    // Form the request for sending data to the server.
     const options = {
-      // The method is POST because we are sending data.
       method: "POST",
-      // Tell the server we're sending JSON.
       headers: {
         "Content-Type": "application/json",
       },
-      // Body of the request is the JSON data we created above.
       body: JSONdata,
     };
 
@@ -56,10 +52,10 @@ const EmailSection = () => {
           try my best to get back to you!
         </p>
         <div className="socials flex flex-row gap-2">
-          <Link href="github.com">
+          <Link href="https://github.com/Pyrunix">
             <Image src={GithubIcon} alt="Github Icon" />
           </Link>
-          <Link href="linkedin.com">
+          <Link href="https://linkedin.com/in/darrentrieu">
             <Image src={LinkedinIcon} alt="Linkedin Icon" />
           </Link>
         </div>
@@ -84,7 +80,7 @@ const EmailSection = () => {
                 id="email"
                 required
                 className="bg-[#18191E] border border-[#33353F] placeholder-[#9CA2A9] text-gray-100 text-sm rounded-lg block w-full p-2.5"
-                placeholder="jacob@google.com"
+                placeholder="email@domain.com"
               />
             </div>
             <div className="mb-6">

src/app/components/Footer.jsx

@@ -4,7 +4,7 @@ const Footer = () => {
   return (
     <footer className="footer border z-10 border-t-[#33353F] border-l-transparent border-r-transparent text-white">
       <div className="container p-12 flex justify-between">
-        <span>LOGO</span>
+        <span>Thanks for visiting!</span>
         <p className="text-slate-600">All rights reserved.</p>
       </div>
     </footer>

src/app/components/HeroSection.jsx

@@ -16,29 +16,28 @@ const HeroSection = () => {
           className="col-span-8 place-self-center text-center sm:text-left justify-self-start"
         >
           <h1 className="text-white mb-4 text-4xl sm:text-5xl lg:text-8xl lg:leading-normal font-extrabold">
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-600">
-              Hello, I&apos;m{" "}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 via-purple-200 to-red-500">
+              Hello, I&apos;m Darren{" "}
             </span>
             <br></br>
+            I&apos;m{" "}
             <TypeAnimation
               sequence={[
-                "Judy",
+                "A CS Student",
                 1000,
-                "Web Developer",
+                "A Developer",
                 1000,
-                "Mobile Developer",
-                1000,
-                "UI/UX Designer",
+                "Eager To Learn",
                 1000,
               ]}
               wrapper="span"
-              speed={50}
+              speed={30}
               repeat={Infinity}
             />
           </h1>
           <p className="text-[#ADB7BE] text-base sm:text-lg mb-6 lg:text-xl">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-            voluptuous.
+            My name's Darren Trieu, a 3rd year CS student specializing in Software Engineering at the University of Toronto Scarborough.
+
           </p>
           <div>
             <Link
@@ -63,13 +62,11 @@ const HeroSection = () => {
           transition={{ duration: 0.5 }}
           className="col-span-4 place-self-center mt-4 lg:mt-0"
         >
-          <div className="rounded-full bg-[#181818] w-[250px] h-[250px] lg:w-[400px] lg:h-[400px] relative">
-            <Image
-              src="/images/hero-image.png"
-              alt="hero image"
-              className="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
-              width={300}
-              height={300}
+          <div className="rounded-full bg-[#181818] w-[250px] h-[250px] lg:w-[400px] lg:h-[400px] relative overflow-hidden">
+            <img
+              src="/images/portfolio_img.png"
+              alt="What happened to my photo?"
+              className="absolute inset-0 w-full h-full object-cover object-center rounded-full"
             />
           </div>
         </motion.div>

src/app/components/Navbar.jsx

@@ -30,7 +30,7 @@ const Navbar = () => {
           href={"/"}
           className="text-2xl md:text-5xl text-white font-semibold"
         >
-          LOGO
+          DT
         </Link>
         <div className="mobile-menu block md:hidden">
           {!navbarOpen ? (

src/app/page.js

@@ -12,7 +12,6 @@ export default function Home() {
       <Navbar />
       <div className="container mt-24 mx-auto px-12 py-4">
         <HeroSection />
-        <AchievementsSection />
         <AboutSection />
         <ProjectsSection />
         <EmailSection />