Merge pull request #8 from samilieberman/fix/mobile-styles

fix various styling bugs
samilieberman · Aug 26, 2024 · 626947b · 626947b
2 parents fadff39 + 3f9c6e4
commit 626947b
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 58 deletions.
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,11 +1,10 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Home from "../Home/Home";
 import Education from "../Education/Education";
 import Work from "../Work/Work";
 import Projects from "../Projects/Projects";
 import Skills from "../Skills/Skills";
-import { Button } from "react-bootstrap";
-import { AppWrapper, ButtonWrapper, Background, ThemeButton } from "./styles";
+import { AppWrapper, Background, DownButton, ThemeButton, UpBotton } from "./styles";
 
 function App() {
   const [theme, setTheme] = useState("light");
@@ -28,6 +27,9 @@ function App() {
     }
   }, []);
 
+  const contentRef = useRef(null)
+  const executeScroll = () => contentRef.current.scrollIntoView({ behavior: 'smooth' });
+
   const isMobile = width <= 768;
 
   return (
@@ -45,19 +47,18 @@ function App() {
       </ThemeButton>
       <Background fluid>
         <Home />
-        <Education />
+        <DownButton
+          onClick={executeScroll}
+        >
+          🔽
+        </DownButton>
+        <Education ref={contentRef} />
         <Work />
         <Skills theme={theme} />
         <Projects isMobile={isMobile} />
-        <ButtonWrapper>
-          <Button
-            variant="dark"
-            size="sm"
-            onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
-          >
-            ⇧
-          </Button>
-        </ButtonWrapper>
+        <UpBotton onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+          🔼
+        </UpBotton>
       </Background>
     </AppWrapper>
   );

diff --git a/src/components/App/styles.js b/src/components/App/styles.js
@@ -1,19 +1,10 @@
 import styled from 'styled-components'
 import { Container } from "react-bootstrap";
 
-const ButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 1rem;
-`;
-
-const Sticky = styled.div`
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
+const AppWrapper = styled.div`
+  background-color: ${props => props.theme === 'light' ? '#f0efe1' : 'black'};
+  color: ${props => props.theme === 'light' ? 'black' : 'white'};
+  overflow-x: hidden;
 `;
 
 const Background = styled(Container)`
@@ -27,17 +18,20 @@ const Background = styled(Container)`
   }  
 `;
 
-const WIP = styled.div`
-  padding: 2rem;
-  text-align: center;
-  background-color: ${(props) => props.background};
-  color: white;
+const DownButton = styled.button`
+  align-self: center;
+  background: transparent;
+  border: none; 
+  display: flex;
+  margin-top: 10px;
 `;
 
-const AppWrapper = styled.div`
-  background-color: ${props => props.theme === 'light' ? '#f0efe1' : 'black'};
-  color: ${props => props.theme === 'light' ? 'black' : 'white'};
-  overflow-x: hidden;
+const Sticky = styled.div`
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
 `;
 
 const ThemeButton = styled.button`
@@ -54,4 +48,19 @@ const ThemeButton = styled.button`
   }
 `;
 
-export { AppWrapper, ButtonWrapper, Sticky, Background, WIP, ThemeButton };
+const UpBotton = styled.button`
+  align-self: center;
+  background: transparent;
+  border: none; 
+  display: flex;
+  margin-bottom: 10px;
+`;
+
+const WIP = styled.div`
+  padding: 2rem;
+  text-align: center;
+  background-color: ${(props) => props.background};
+  color: white;
+`;
+
+export { AppWrapper, Background, DownButton, Sticky, ThemeButton, UpBotton, WIP };
diff --git a/src/components/Education/Education.js b/src/components/Education/Education.js
@@ -1,17 +1,17 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { EducationWrapper, Text, HeadingText } from "./styles";
 import { Row } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 import data from "../../data.json";
 
-function Education() {
+const Education = forwardRef((_, ref) => {
   return (
     <EducationWrapper fluid>
-      <Row>
+      <Row ref={ref}>
         <HeadingText> Education </HeadingText>
       </Row>
-      {data[0].education.map((item) => (
-        <Row>
+      {data[0].education.map((item, idx) => (
+        <Row key={idx}>
           <Text>
             {item.college}
             <br />
@@ -23,5 +23,6 @@ function Education() {
       ))}
     </EducationWrapper>
   );
-}
+});
+
 export default Education;
diff --git a/src/components/Education/styles.js b/src/components/Education/styles.js
@@ -18,6 +18,10 @@ const EducationWrapper = styled(Container)`
   margin-top: 4rem;
   align-items: center;
   justify-content: center;
+
+  @media only screen and (min-width: 400px) {
+    margin-top: 5rem;
+}  
 `;
 
 export { Text, HeadingText, EducationWrapper };
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -14,8 +14,8 @@ function Home() {
   return (
     <HomeWrapper>
       <HeaderText>
-        {data.map((me) => (
-          <div>
+        {data.map((me, idx) => (
+          <div key={idx}>
             <StyledTypist cursor={{ show: false }} avgTypingDelay={40} onTypingDone={onHeaderTyped}> 
               <p>Hi, <StyledTypist.Delay ms={300} /> my name is {me.name}.</p>
             </StyledTypist>

diff --git a/src/components/Home/styles.js b/src/components/Home/styles.js
@@ -15,7 +15,7 @@ const HeaderText = styled.div`
     font-size: 40px;
     height: 65vh;
     justify-content: center;
-    margin: 4rem;
+    margin: 50px;
     text-align: center;
 
     @media only screen and (min-width: 400px) {

diff --git a/src/components/Projects/Projects.js b/src/components/Projects/Projects.js
@@ -11,15 +11,18 @@ function Projects({ isMobile }) {
         <HeadingText> Projects </HeadingText>
       </Row>
       <Row>
-        {data[0].projects.map((item) => (
-           !isMobile ?
-          <StyledCol>
-            <a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a>: {item.description}
-          </StyledCol>
-          :
-          <StyledRow>
-            <a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a>: {item.description}
-          </StyledRow>
+        {data[0].projects.map((item, idx) => (
+          <div key={idx}>
+            {!isMobile ?
+            <StyledCol>
+              <a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a>: {item.description}
+            </StyledCol>
+            :
+            <StyledRow>
+              <a href={item.url} target="_blank" rel="noopener noreferrer">{item.name}</a>: {item.description}
+            </StyledRow>
+          }
+          </div>
         ))}
       </Row>
     </ProjectsWrapper>

diff --git a/src/components/Skills/Skills.js b/src/components/Skills/Skills.js
@@ -10,8 +10,8 @@ function Skills({theme}) {
       <Row>
         <HeadingText>Skills</HeadingText>
       </Row>
-      {data[0].skills.map((skill) => (
-        <SkillBadge pill variant="primary" theme={theme}>
+      {data[0].skills.map((skill, idx) => (
+        <SkillBadge key={idx} pill variant="primary" theme={theme}>
           {skill}
         </SkillBadge>
       ))}

diff --git a/src/components/Work/Work.js b/src/components/Work/Work.js
@@ -10,8 +10,8 @@ function Work() {
       <Row>
         <HeadingText> Work </HeadingText>
       </Row>
-      {data[0].employment.map((employer) => (
-        <Row>
+      {data[0].employment.map((employer, idx) => (
+        <Row key={idx}>
           <Text>
             <a href={employer.link} target="_blank" rel="noopener noreferrer">{employer.employer}</a> <br />
             {employer.title} <br />