test mobile

src/app/components/Experience.tsx

@@ -58,9 +58,9 @@ interface experienceProps {
 
 const Experience = ({ image, name, entries }: experienceProps) => {
   return (
-    <div className="mx-auto w-2/3">
-      <div className="flex w-full flex-row gap-4">
-        <div className="w-1/6">
+    <div className="mx-auto w-3/4 md:w-2/3">
+      <div className="flex w-full flex-col gap-4 md:flex-row">
+        <div className="mx-auto hidden w-1/4 md:mx-0 md:flex md:w-1/6 md:flex-col">
           <motion.p {...moveUp} className="text-center text-3xl font-bold">
             {name}
           </motion.p>
@@ -72,7 +72,19 @@ const Experience = ({ image, name, entries }: experienceProps) => {
             />
           </motion.div>
         </div>
-        <div className="border-gray w-5/6 justify-center border-l-2">
+        <div className="mx-auto w-1/2 md:mx-0 md:hidden md:w-1/6">
+          <motion.div {...hoverAnimation} {...fadeIn}>
+            <Image
+              src={image}
+              alt={name}
+              className="mx-auto aspect-square w-2/3 rounded-2xl shadow-xl"
+            />
+          </motion.div>
+          <motion.p {...moveUp} className="pt-2 text-center text-3xl font-bold">
+            {name}
+          </motion.p>
+        </div>
+        <div className="border-gray w-full justify-center border-l-2 md:w-5/6">
           {entries.map(({ name, date, description }, i) => (
             <motion.div
               {...slideIn(i / 3)}
@@ -81,9 +93,9 @@ const Experience = ({ image, name, entries }: experienceProps) => {
             >
               <div className="absolute -left-1.5 top-4 h-3 w-3 rounded-full bg-gray-500" />
               <div className="mx-4">
-                <motion.div className="flex flex-row justify-evenly">
+                <motion.div className="flex flex-col justify-evenly md:flex-row">
                   <p className="mr-auto text-lg underline">{name}</p>
-                  <motion.p {...fadeUp} className="ml-auto text-gray-500">
+                  <motion.p {...fadeUp} className="text-gray-500 md:ml-auto">
                     {date}
                   </motion.p>
                 </motion.div>

src/app/components/Footer.tsx

@@ -21,7 +21,7 @@ const Footer = () => {
   return (
     <div className="border-gray mx-auto h-[10vh] w-2/3 border-t-2 py-8 text-center">
       <p className="pt-2 text-center">© Kevin Loritsch</p>
-      <p className="pb-8">Last updated at: {lastCommit}</p>
+      <p className="pb-8">Last updated on: {lastCommit}</p>
     </div>
   );
 };

src/app/components/Header.tsx

@@ -14,23 +14,34 @@ const moveDown = {
 
 interface headerProps {
   title: string;
-  subtitle?: string;
+  subtitle1?: string;
+  subtitle2?: string;
 }
 
-const Header = ({ title, subtitle }: headerProps) => {
+const Header = ({ title, subtitle1, subtitle2 }: headerProps) => {
   return (
-    <div className="text-center">
+    <div className="mt-6 text-center">
       <motion.div {...moveDown} className="text-4xl font-bold">
         {title}
       </motion.div>
-      {subtitle && (
-        <div className="text-2xl text-gray-500">
-          <TypeAnimation
-            sequence={[subtitle, 2000, "", 100]}
-            wrapper="span"
-            cursor={true}
-            repeat={Infinity}
-          />
+      {subtitle1 && subtitle2 && (
+        <div className="mx-auto justify-center text-center">
+          <div className="mx-auto hidden text-2xl text-gray-500 md:block">
+            <TypeAnimation
+              sequence={[subtitle1, 2000, "", 100]}
+              wrapper="span"
+              cursor={true}
+              repeat={Infinity}
+            />
+          </div>
+          <div className="text-xl text-gray-500 md:hidden">
+            <TypeAnimation
+              sequence={[subtitle2, 2000, "", 100]}
+              wrapper="span"
+              cursor={true}
+              repeat={Infinity}
+            />
+          </div>
         </div>
       )}
     </div>

src/app/components/Landing.tsx

@@ -15,49 +15,80 @@ const hoverAnimation = {
   },
 };
 
+const slideIn = (delay = 0) => ({
+  initial: { opacity: 0, x: -10 },
+  whileInView: { opacity: 1, x: 0 },
+  transition: { duration: 0.8, delay },
+});
+
+const slideLeft = {
+  initial: { opacity: 0, x: 50 },
+  whileInView: { opacity: 1, x: 0 },
+  transition: { duration: 1.0 },
+};
+
+const slideRight = {
+  initial: { opacity: 0, x: -50 },
+  whileInView: { opacity: 1, x: 0 },
+  transition: { duration: 1.0 },
+};
+
 const Landing = () => {
   return (
     <div
-      className="relative mt-[8vh] h-[90vh] w-full"
+      className="relative mt-[8vh] h-[95vh] w-full md:h-[90vh]"
       style={{
         background:
           "linear-gradient(to bottom, #C7BED3 0%, #C4BED5 16%, #E4BBB7 32%, #FEBF94 48%, #FEC68F 64%, #FEE2C7 90%, white 100%)",
       }}
     >
       <Element name="home">
-        <div className="absolute flex h-full w-full flex-row items-center justify-center gap-12">
-          <div className="flex w-2/3 flex-row justify-evenly">
-            <div className="flex w-2/3 flex-col">
-              <p className="flex pb-2 text-left text-4xl font-bold md:text-5xl lg:text-6xl">
+        <div className="absolute flex h-full w-full items-center justify-evenly gap-12">
+          <div className="flex w-3/4 flex-col justify-evenly md:w-2/3 md:flex-row">
+            <div className="flex w-full flex-col md:w-2/3">
+              <motion.div {...slideRight} className="mx-auto w-2/3 md:hidden">
+                <Image
+                  src={profilePicture}
+                  alt="Kevin Loritsch"
+                  className="w-full"
+                />
+              </motion.div>
+              <p className="mx-auto flex pb-2 pt-4 text-center text-3xl font-bold md:mx-0 md:pt-0 md:text-left md:text-5xl lg:text-6xl">
                 Kevin Loritsch
               </p>
 
-              <div className="mr-auto flex w-fit flex-row gap-4 border-t-2 border-black px-4 pt-2">
+              <div className="mx-auto flex w-fit flex-row gap-4 border-t-2 border-black px-4 pt-2 md:ml-0 md:mr-auto">
                 {socialLinks.map(({ link, icon: Icon }, i) => (
-                  <Link key={i} href={link} target="_blank">
-                    <motion.div {...hoverAnimation}>
-                      <Icon className="text-2xl" />
-                    </motion.div>
-                  </Link>
+                  <motion.div {...slideIn(i / 5)} key={i}>
+                    <Link href={link} target="_blank">
+                      <motion.div {...hoverAnimation}>
+                        <Icon className="text-2xl" />
+                      </motion.div>
+                    </Link>
+                  </motion.div>
                 ))}
               </div>
-              <p className="py-4">
+
+              <motion.p
+                {...slideLeft}
+                className="py-4 text-center md:text-left"
+              >
                 Hi! My name is Kevin, and I am a Computer Science student at UC
                 Riverside (Chancellor's Scholar, 4.0 GPA) with experience in
                 software engineering, research, and teaching.
-              </p>
-              <p>
+              </motion.p>
+              <motion.p {...slideLeft} className="text-center md:text-left">
                 I'm interested in exploring work in algorithm design, AI,
                 research, and teaching.
-              </p>
+              </motion.p>
             </div>
-            <div className="w-1/3">
+            <motion.div {...slideRight} className="hidden w-1/3 md:flex">
               <Image
                 src={profilePicture}
                 alt="Kevin Loritsch"
                 className="w-3/4"
               />
-            </div>
+            </motion.div>
           </div>
         </div>
       </Element>

src/app/components/Navbar.tsx

@@ -3,10 +3,8 @@ import { motion } from "motion/react";
 import { Link as ScrollLink } from "react-scroll";
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import Image from "next/image";
 
 import navbarItems from "@/data/NavbarData";
-import profilePicture from "@/public/profilePicture.webp";
 
 const fadeIn = (delay = 0) => ({
   initial: { opacity: 0 },
@@ -45,14 +43,12 @@ const Navbar = () => {
   const pixels = use10vhAsPixels();
 
   return (
-    <div className="fixed left-0 top-0 z-50 flex h-[10vh] cursor-pointer justify-evenly bg-white px-8 shadow-xl">
-      <Link
-        href="/"
-        className="flex w-1/2 flex-row items-center gap-4 text-left"
-      >
-        <Image src={profilePicture} alt="Kevin Loritsch" className="w-1/12" />
-        <p className="font-bold">Kevin Loritsch</p>
-      </Link>
+    <div className="fixed left-0 top-0 z-50 flex h-[10vh] w-full cursor-pointer justify-evenly bg-white px-8 shadow-xl">
+      <div className="flex w-1/2 flex-row items-center gap-4 text-left">
+        <Link href="/">
+          <p className="font-bold">Kevin Loritsch</p>
+        </Link>
+      </div>
       <div className="flex w-1/2 flex-row items-center justify-end text-right">
         {navbarItems.map(({ name, link }, i) => (
           <motion.div {...fadeIn(i / 5)} key={i}>

src/app/components/Project.tsx

@@ -66,8 +66,8 @@ const Project = ({
       <div className="my-1">
         <div className="mx-auto mb-3 flex flex-row justify-center gap-2">
           {links.map(({ icon: Icon, link }, i) => (
-            <motion.div {...hoverAnimation} {...slideIn(i / 3)}>
-              <Link href={link} target="_blank" key={i}>
+            <motion.div {...hoverAnimation} {...slideIn(i / 3)} key={i}>
+              <Link href={link} target="_blank">
                 <Icon className="text-xl" />
               </Link>
             </motion.div>
@@ -78,11 +78,13 @@ const Project = ({
       <motion.div
         className="group relative aspect-[3/2] overflow-hidden rounded-2xl shadow-xl"
         whileHover={{ scale: 1.05, rotate: 1 }}
+        whileTap={{ scale: 1.05, rotate: 1 }}
       >
         <motion.div
           className="absolute inset-0"
           initial={{ opacity: 1 }}
           whileHover={{ opacity: 0.2, scale: 1.1 }}
+          whileTap={{ opacity: 0.2, scale: 1.1 }}
           transition={{ duration: 0.5 }}
         >
           <Image
@@ -98,6 +100,7 @@ const Project = ({
           style={{ backdropFilter: "blur(6px)" }}
           initial={{ opacity: 0 }}
           whileHover={{ opacity: 1 }}
+          whileTap={{ opacity: 1 }}
         >
           <div className="flex flex-col gap-y-4 text-sm text-white">
             <p>{date}</p>

src/app/components/Projects.tsx

@@ -8,12 +8,13 @@ const Projects = () => {
     <Element name="projects">
       <Header
         title={"My Projects"}
-        subtitle={"Hover to learn about each project!"}
+        subtitle1={"Hover to learn about each project!"}
+        subtitle2={"Tap and hold to learn more!"}
       />
-      <div className="flex w-full flex-row flex-wrap justify-center">
+      <div className="flex w-full flex-col flex-wrap justify-center md:flex-row">
         {projectItems.map(
           ({ image, title, date, description, role, techStack, links }, i) => (
-            <div key={i} className="w-2/5 py-8">
+            <div key={i} className="mx-auto w-full py-8 md:mx-0 md:w-2/5">
               <Project
                 image={image}
                 title={title}

src/data/SocialData.ts

@@ -1,4 +1,5 @@
-import { FaGithub, FaLinkedin, FaNewspaper } from "react-icons/fa";
+import { FaGithub, FaLinkedin } from "react-icons/fa";
+import { LuFileSpreadsheet } from "react-icons/lu";
 import { MdOutlineMarkEmailRead } from "react-icons/md";
 import { IconType } from "react-icons";
 
@@ -10,7 +11,7 @@ interface SocialLink {
 const socialLinks: SocialLink[] = [
   { link: "https://github.com/Kevinloritsch", icon: FaGithub },
   { link: "https://www.linkedin.com/in/kevin-loritsch/", icon: FaLinkedin },
-  { link: "/KevinLoritsch_Resume.pdf", icon: FaNewspaper },
+  { link: "/KevinLoritsch_Resume.pdf", icon: LuFileSpreadsheet },
   { link: "mailto:klori003@ucr.edu", icon: MdOutlineMarkEmailRead },
 ];