responsive content

erlisakulla · Apr 18, 2021 · 618466f · 618466f
1 parent 886f1ce
commit 618466f
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,12 @@
 # Personal Website
 
+## Framework: React
+
 ## TODO
 - [ ] Add more colors from the color theme
 - [ ] Colorful navs on hover
-- [ ] Make the website content and navbar responsive
+- [X] Make the website content responsive
+- [ ] Make navbar responsive
 - [ ] Illustrations for sections
 - [ ] Background designs
 - [ ] Activate navbar links when scrolled at them

diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -88,3 +88,33 @@ li a {
   text-align: center;
   width: 100%;
 }
+
+@media (max-width:960px) {
+  #footer-name {
+    font-size: 50px;
+  }
+
+  .social-media-icons {
+    margin: 0;
+  }
+
+  #footer-nav {
+    margin: 0;
+  }
+}
+
+@media (max-width:600px) {
+  .social-media-icons {
+    margin-bottom: 20px;
+  }
+
+  #footer-img{    
+    width: 500%;
+  }
+}
+
+@media (max-width:360px){
+  .cando-card {
+    transform: scale(0.8);
+  }
+}
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -13,19 +13,19 @@ class Navbar extends React.Component {
 
           <Grid container spacing={5}>
 
-            <Grid item xs={4}>
+            <Grid item xs={12} md={6} lg={4}>
               <Grid container spacing={5}>
-                <Grid item xs={6}>
+                <Grid item xs={4} md={6}>
                   <img id="footer-img" src={logo} alt="footer-img"/>
                 </Grid>
 
-                <Grid item xs={6}>
+                <Grid item xs={8} md={6}>
                   <h3 id="footer-name">Erlisa Kulla</h3>
                 </Grid>
               </Grid>
             </Grid>
 
-            <Grid item xs={4}>
+            <Grid item  xs={6} md={6} lg={4}>
               <div  id="footer-nav-cont">
                 <ul id="footer-nav">
                   <li><a href="#skills">Skills</a></li>
@@ -37,7 +37,7 @@ class Navbar extends React.Component {
 
             </Grid>
 
-            <Grid item xs={4}>
+            <Grid item  xs={6} md={12} lg={4}>
               <div className="social-media-icons">
                 <a href="https://github.com/erlisakulla" target="_blank" rel="noreferrer"><FiGithub size={40}/></a>
                 <a href="https://www.linkedin.com/in/erlisa-kulla/" target="_blank" rel="noreferrer"><FiLinkedin size={40}/></a> 

diff --git a/src/components/Navbar/Navbar.css b/src/components/Navbar/Navbar.css
@@ -7,6 +7,10 @@
   font-weight: 300;
 }
 
+/* #nav {
+  transform: translateY(30px);
+} */
+
 .nav-link:after {
   display:block;
   content: '';
@@ -35,3 +39,9 @@
   z-index: 100;
   background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 49%, rgba(255,255,255,0) 100%);
 }
+
+@media (max-width: 900px) {
+  #nav {
+    display: none;
+  }
+}
diff --git a/src/main/Home/HomePage.css b/src/main/Home/HomePage.css
@@ -1,9 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500;700&family=Orelega+One&display=swap');
 
 #home-img {  
-  max-width: 40%;
-  float: left;
   padding-top: 50px;
+  width: 120%;
 }
 
 #section-1, #skills, #about, #projects, #contact {
@@ -23,10 +22,9 @@
 }
 
 .intro-text {
-  width: 60%;
   height: 100%;
   float: left;
-  padding-top: 20%;
+  padding-top: 30%;
   padding-left: 100px;
 }
 
@@ -125,6 +123,7 @@
   padding-bottom: 100px;
   padding-left: 20%;
   padding-right: 20%;
+  padding-top: 0px;
 }
 
 .project-card, .cando-card {
@@ -177,7 +176,7 @@ h3 {
 }
 
 @keyframes cssAnimation {
-  to   { visibility: visible; }
+  to { visibility: visible; }
 }
 
 @keyframes fadeIn {
@@ -212,3 +211,109 @@ h3 {
   text-align: left;
   font-size: 13px;
 }
+
+@media (max-width:900px) {
+  #disappear {
+    display: none;
+  }
+
+  #about-text {
+    padding: 0px;
+    font-size: 14px;
+  }
+}
+
+@media (max-width:960px) {
+  #home-img {
+    padding: 0px;
+    padding-left: 10%;
+    padding-right: 10%;
+    width: 100%;
+  }
+
+  #name {
+    font-size: 54px;
+  }
+
+  #text {
+    font-size: 18px;
+  }
+
+  .intro-text {
+    padding: 0px;
+  }
+
+  #section-1 {
+    height: 100vh;
+  }
+
+  #skills, #about, #projects, #contact {
+    padding-left: 10;
+    padding-right: 10;
+  }
+}
+
+.project-card:hover {
+  z-index: 80;
+  transform: translateY(-5px);
+  transition: transform linear 0.2s;
+}
+
+.project-card {
+  max-width: 100%;
+}
+/* 
+@media (max-width:1260px) {
+  #section-1 {
+    height: auto;
+  }
+} */
+
+@media (max-width:600px) {
+  p {
+    font-size: 14px !important;
+  }
+
+  h5 {
+    font-size: 18px !important;
+  }
+
+  #jacobs-logo, #emis-logo, #bmw-logo, #idmc-logo, #jsc-logo {
+    width: 30%;
+  }
+
+  .MuiTimeline-root {
+    padding: 0 !important;
+  }
+}
+
+@media (max-width:361px) {
+  .skills-progress {
+    padding: 0 35px !important;
+  }
+
+  #about, #projects, #contact  {
+    padding: 0;
+
+  }
+
+  #about-text {
+    padding: 20px !important;
+    font-size: 14px !important;
+  } 
+
+  .MuiGrid-spacing-xs-8 > .MuiGrid-item {
+    padding: 0 !important;
+  }
+
+  #projects {
+    padding: 20px !important;
+    padding-bottom: 50px !important;
+  }
+}
+
+@media (max-width:390px) {
+  .skills-progress {
+    padding: 0 20px !important;
+  }
+}
diff --git a/src/main/Home/HomePage.js b/src/main/Home/HomePage.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import './HomePage.css';
 import self from '../../img/self.png';
+import { Grid } from '@material-ui/core';
 import { BackTop, Button } from 'antd';
 import { CanDoList } from '../sections/CanDo';
 import { LearningList } from '../sections/Learning';
@@ -60,9 +61,36 @@ class Home extends React.Component {
       <>
         <div className="home-page">
           <div id="section-1">
-            <img id="home-img" src={self} alt="intro-img"/>
-
-            <div className="intro-text">
+
+            <Grid container spacing={1}>
+              <Grid item xs={12}  md={4}>
+                <img id="home-img" src={self} alt="intro-img"/>
+              </Grid>
+
+              <Grid item xs={12} md={8}>
+                <div className="intro-text">
+                  <h2 id="name">Erlisa Kulla</h2>
+                  <p id="text">
+                    <a href="https://github.com/erlisakulla" target="_blank" rel="noreferrer"><b style={{color:'#3f51b5'}} id="software">Software Developer</b></a> and <a href="https://erlisakulla.artstation.com" target="_blank" rel="noreferrer"><b style={{color:'#f50057'}} id="artist">Artist</b></a> with a great passion for learning and creative exploration.
+                  </p>
+                  <a href="#skills">
+                    <Button 
+                      type="secondary" 
+                      shape="round" 
+                      size="large"
+                      className="link-btn"
+                      icon={<FiChevronsRight size={20} style={{marginRight:'10px'}} id="icon-arrow"/>}
+                    >
+                      Get to know me
+                    </Button>
+                  </a>
+                </div>
+              </Grid>
+            </Grid>
+
+            {/* <img id="home-img" src={self} alt="intro-img"/> */}
+
+            {/* <div className="intro-text">
               <h2 id="name">Erlisa Kulla</h2>
               <p id="text">
                 <a href="https://github.com/erlisakulla" target="_blank" rel="noreferrer"><b style={{color:'#3f51b5'}} id="software">Software Developer</b></a> and <a href="https://erlisakulla.artstation.com" target="_blank" rel="noreferrer"><b style={{color:'#f50057'}} id="artist">Artist</b></a> with a great passion for learning and creative exploration.
@@ -78,7 +106,7 @@ class Home extends React.Component {
                   Get to know me
                 </Button>
               </a>
-            </div>
+            </div> */}
           </div>
 
           <div id="skills">
@@ -98,9 +126,9 @@ class Home extends React.Component {
           <div id="about">
             <h1>About Me</h1>
             <p style={{fontSize:'16px'}} id="about-text">
-              I am from Albania, currently located in Bremen, Germany. <br/>
+              I am from Albania, currently located in 📍 Bremen, Germany. <br/>
               My biggest passions are programming and art and I am always looking for ways to combine the two.
-              I love painting, listening to music, playing bass, watching animated movies and shows, and of course programming.
+              I love 🎨 painting, 🎶 listening to music, 🎸 playing bass, 🎥 watching animated movies and shows, and of course 💻 programming.
             </p>
 
             <div id="experience">

diff --git a/src/main/sections/CanDo.js b/src/main/sections/CanDo.js
@@ -28,7 +28,7 @@ export const CanDoList = () => {
 
   return (
     <Grid container spacing={8}>
-      <Grid item xs={4}>
+      <Grid item xs={12} md={4}>
         <Card className="cando-card">
           <h5>UI/UX Design</h5>
           <hr/>
@@ -107,7 +107,7 @@ export const CanDoList = () => {
       </Grid>
 
 
-      <Grid item xs={4}>
+      <Grid item xs={12} md={4}>
         <Card elevation={3} className="cando-card">
           <h5>Frontend Development</h5>
           <hr/>
@@ -184,7 +184,7 @@ export const CanDoList = () => {
         </Card>
       </Grid>
 
-      <Grid item xs={4}>
+      <Grid item xs={12} md={4}>
         <Card elevation={3} className="cando-card">
           <h5>Backend Development</h5>
           <hr/>