mobile responsive

zinxon · Aug 20, 2024 · b851e98 · b851e98
1 parent 3da86de
commit b851e98
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -5,7 +5,7 @@ import Skills from "@/components/main/Skills";
 export default function Home() {
   return (
     <main className="h-full w-full">
-      <div className="flex flex-col gap-20">
+      <div className="flex flex-col gap-10 md:gap-20">
         <Hero />
         <Skills />
         <Projects />

diff --git a/components/main/Footer.tsx b/components/main/Footer.tsx
@@ -12,14 +12,18 @@ import Link from "next/link";
 
 const Footer = () => {
   return (
-    <div className="w-full h-full bg-transparent text-gray-200 shadow-lg p-[15px] ">
+    <div className="w-full h-full bg-transparent text-gray-200 shadow-lg p-[15px]">
       <div className="w-full flex flex-col items-center justify-center m-auto">
-        <div className="w-full h-full flex flex-row items-center justify-around flex-wrap">
+        <div className="w-full h-full flex flex-col md:flex-row items-center justify-around flex-wrap gap-5 md:gap-0">
           <div className="min-w-[200px] h-auto flex flex-col items-center justify-start">
             <div className="font-bold text-[16px]">Community</div>
             <p className="flex flex-row items-center my-[15px] cursor-pointer">
               <RxGithubLogo />
-              <a href="https://github.com/zinxon" target={"_blank"}>
+              <a
+                href="https://github.com/zinxon"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <span className="text-[15px] ml-[6px]">Github</span>
               </a>
             </p>
@@ -28,7 +32,11 @@ const Footer = () => {
             <div className="font-bold text-[16px]">Social Media</div>
             <p className="flex flex-row items-center my-[15px] cursor-pointer">
               <RxLinkedinLogo />
-              <a href="https://linkedin.com/in/shingson/" target={"_blank"}>
+              <a
+                href="https://linkedin.com/in/shingson/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
                 <span className="text-[15px] ml-[6px]">Linkedin</span>
               </a>
             </p>
@@ -41,7 +49,7 @@ const Footer = () => {
           </div>
         </div>
 
-        <div className="mb-[20px] text-[15px] text-center">
+        <div className="mb-[20px] text-[15px] text-center mt-5">
           &copy; James Dev 2024 All rights reserved
         </div>
       </div>

diff --git a/components/main/Projects.tsx b/components/main/Projects.tsx
@@ -3,11 +3,14 @@ import ProjectCard from "../sub/ProjectCard";
 
 const Projects = () => {
   return (
-    <div className="flex flex-col items-center justify-center" id="projects">
-      <h1 className="text-[40px] font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-cyan-500 py-20">
+    <div
+      className="flex flex-col items-center justify-center py-10"
+      id="projects"
+    >
+      <h1 className="text-[32px] md:text-[40px] font-semibold text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-cyan-500 py-10 md:py-20">
         My Projects
       </h1>
-      <div className="h-full w-full grid grid-cols-3 md:flex-row gap-10 px-10">
+      <div className="h-full w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 px-4 md:px-10">
         <ProjectCard
           src="/TradingHub.png"
           title="Trading Hub"

diff --git a/components/sub/HeroContent.tsx b/components/sub/HeroContent.tsx
@@ -14,7 +14,7 @@ export const HeroContent = () => {
     <motion.div
       initial="Hidden"
       animate="visible"
-      className="flex flex-row items-center justify-center px-20 mt-40 w-full z-[20]"
+      className="flex flex-col md:flex-row items-center justify-center px-4 md:px-20 mt-20 md:mt-40 w-full z-[20]"
     >
       <div className="h-full w-full flex flex-col gap-5 justify-center m-auto text-start">
         <motion.div
@@ -28,7 +28,7 @@ export const HeroContent = () => {
         </motion.div>
         <motion.div
           variants={slideInFromLeft(0.5)}
-          className="flex flex-col gap-6 mt-6 text-6xl font-bold text-white max-w-[600px] w-auto h-auto"
+          className="flex flex-col gap-6 mt-6 text-4xl md:text-6xl font-bold text-white max-w-[600px] w-auto h-auto"
         >
           <span>
             Professional in
@@ -56,13 +56,14 @@ export const HeroContent = () => {
       </div>
       <motion.div
         variants={slideInFromRight(0.8)}
-        className="w-full h-full flex justify-center items-center"
+        className="w-full h-full flex justify-center items-center mt-10 md:mt-0"
       >
         <Image
           src="/mainIconsdark.svg"
           alt="work icons"
           height={650}
           width={650}
+          className="w-full max-w-[650px]"
         />
       </motion.div>
     </motion.div>