Make responsive

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"

src/App.tsx

@@ -6,15 +6,15 @@ import './styles/App.css'
 /**
  * App
  * 
- * Lays out page contents
+ * Lays out page
  *
  */
 function App() {
   const [hoveredProject, setHoveredProject] = useState<string | null> (null);
 
   return (
     <div className='app-layout'>
-      <HeroSection/>
+      <div className='hero-section'> <HeroSection/> </div> 
       <div className='main-content'>
         <h3> Hello! &#128075; </h3>
         <p> I’m Sean, a fourth-year student at Tufts University &#128024; pursuing a Bachelor’s 

src/components/Hero.tsx

@@ -11,17 +11,17 @@ import emailWhite from '../assets/email-white.png'
  */
 export default function HeroSection (){
     return (
-        <div className='hero-text'>
+        <div>
             <h1 className='name'> <span className='first-name'>Sean</span> <span className='last-name'>Reilly</span> </h1>
             <div className='external-links'>
                 <a href="https://github.com/S-P-R" target="_blank" rel="noopener noreferrer">
-                    <img src={githubLogoWhite} alt="Github Logo" style={{ width: 50, height: 50 }} />
+                    <img className="icon" src={githubLogoWhite} alt="Github Logo" />
                 </a>
                 <a href="https://www.linkedin.com/in/sean-reilly-301176225/" target="_blank" rel="noopener noreferrer">
-                    <img src={linkedinLogoWhite} alt="Linkedin Logo" style={{ width: 50, height: 50 }} />
+                    <img className="icon" src={linkedinLogoWhite} alt="Linkedin Logo"  />
                 </a>
                 <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">
-                    <img src={emailWhite} alt="Email Logo" style={{ width: 50, height: 50 }} />
+                    <img className="icon" src={emailWhite} alt="Email Logo"  />
                 </a>
             </div>
         </div>

src/components/Project.tsx

@@ -27,7 +27,9 @@ export default function Project ({name, description, shouldDim, onMouseEnter, on
                 <h3 className="project-name"> {name} </h3>
                 <div className='project-content'>
                     <p> {description} </p>
-                    <img className="project-image" src={imageURL} alt="Project Screenshot" style={{ width: 360, height: 204 }} />
+                    <div className='image-container'>
+                        <img className="project-image" src={imageURL} alt="Project Screenshot" />
+                    </div>
                 </div>
             </div>
     )

src/index.css

@@ -2,5 +2,18 @@
   background-color: #000000;
   color: rgb(255, 255, 255);
   font-family: 'League Spartan', sans-serif;
-  font-size: 100%;
-}
+  /* font-size: calc(1rem + 1vw); */
+  font-size: clamp(1rem, 2vw + .25rem, 2rem);
+  font-size: clamp(1rem, 1.10vw + .545rem, 2rem);
+  /* font-size: 2.25rem */
+  /* font-size: 100%; */
+}
+
+/* img {
+  height: 100%;
+  width: auto;
+
+  border-style: solid;
+  border-radius: 10px;
+  border-color: aqua;
+} */

src/styles/App.css

@@ -1,16 +1,46 @@
-.app-layout {
+.hero-section {
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
+    flex-direction: column;
+    margin: 4rem;
+    margin-top: 2.4rem;
+    margin-bottom: .25rem;
 }
 
 .main-content {
+    font-size: .85rem;
     display: flex;
     flex-direction: column;
-
-    margin: 10rem;
-    margin-top: 8rem;
-    font-size: 1.5rem;
+    margin: 4rem;
+    margin-top: 2.5rem;
     line-height: 1.5;
 }
+
+@media screen and (min-width: 1080px) {
+    .app-layout {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    .hero-section {
+        margin: 4rem;
+        margin-top: 2.4rem;
+        position: sticky;
+        top: 2.8rem; /* Slight increase over top-margin gets rid of small stutter when starting to scroll */
+        align-self: flex-start; /* Necessary for sticky positioning to work */
+    }
+
+    .main-content {
+        margin-top: 3.2rem
+    }
+}
+
+@media screen and (max-width: 1080px) {
+    .app-layout {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 100%;
+    }
+}

src/styles/Hero.css

@@ -1,17 +1,7 @@
-.hero-text {
-    display: flex;
-    flex-direction: column;
-    margin: 10rem;
-    margin-top: 6rem;
-    position: sticky;
-    top: 7rem; /* Slight increase over top-margin gets rid of small stutter when starting to scroll */
-    align-self: flex-start; /* Necessary for sticky positioning to work */
-}
-
 .name {
     white-space: nowrap;
     transition: text-shadow 0.3s ease, transform 0.3s ease;
-    font-size: 5rem;
+    font-size: 2.5rem;
 }
 
 .name:hover {
@@ -23,18 +13,23 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-
+    height: 1.75rem;
 }
 
 .external-links > * {
     transition: transform 0.3s ease, opacity 0.3s ease;
     opacity: 0.75;
-    padding-right: 3rem; 
+    padding-right: 1.2rem; 
 }
 
 .external-links > *:hover {
-    padding-right: 3rem; 
+    padding-right: 1.2rem; 
     transition: transform 0.3s ease, opacity 0.3s ease;
     transform: scale(1.15);
     opacity: 1;
-}
+}
+
+.icon {
+    height: 100%;
+    width: auto;
+}

src/styles/Project.css

@@ -5,7 +5,7 @@
     border-radius: 40px;
     border-style: solid;
     border-width: .2rem;
-    padding: 1rem;
+    padding: .4rem;
     transition: background-color .5s ease, border-color .3s ease;
     color: inherit;
     text-decoration: none;
@@ -31,13 +31,21 @@
 }
 
 .project-content > * {
-    margin: 1rem;
+    margin: .4rem;
     margin-left: 0rem;
 }
 
+.image-container {
+    height: 5rem
+}
+
 .project-image {
     border-color: #232323;
     border-radius: 5px;
     border-style: solid;
     border-width: .1rem;
+    height: 100%;
+    width: auto;
+    max-width: 720px;
+    max-height: 408px;
 }

vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
 })