made responsive

Author: ansiace

package.json

@@ -9,10 +9,11 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^14.5.2",
     "emailjs": "^4.0.3",
-    "framer-motion": "^11.5.6",
+    "framer-motion": "^11.11.17",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
+    "react-scroll": "^1.9.0",
     "swiper": "^11.1.14",
     "web-vitals": "^2.1.0"
   },

src/App.css

@@ -37,4 +37,8 @@
 }
 
 
-  
+@media screen and ( max-width: 480px ) {
+  .App{
+    padding: 0.5rem 1rem;
+  }
+}

src/components/Card/Card.css

@@ -30,4 +30,10 @@
     padding: 10px;
     font-size: 16px;
     color: #5290FD;
+}
+
+@media screen and ( max-width: 480px ) {
+    .card{
+        width: auto;
+    }
 }

src/components/Contact/Contact.css

@@ -38,4 +38,20 @@ textarea{
 .c-blur1 {
     top: 1rem;
     left: 8rem;
+}
+
+@media screen and ( max-width: 480px ){
+    
+    .contact-form{
+        display: flex;
+        flex-direction: column;
+        transform: scale(0.5);
+        position: relative;
+        margin-top: -2rem;
+        margin-bottom: 3rem; 
+            
+    }
+
+    
+
 }

src/components/Contact/Contact.jsx

@@ -34,7 +34,7 @@ const Contact = () => {
 
 
     return(
-        <div className="contact-form">
+        <div className="contact-form" id='Contact' >
             <div className="w-left">
                 <div className="awesome">
                     <span style={{color: darkMode? 'white': ''}} >Get in touch</span>

src/components/Experience/Experience.css

@@ -41,3 +41,10 @@
 .achievement span:nth-of-type(2){
     color: var(--orange);
 }
+
+@media screen and ( max-width: 480px ){
+    .achievement{
+        margin-left: -1.5rem;
+        margin-right: -1.4rem;
+    }
+}

src/components/Experience/Experience.jsx

@@ -3,7 +3,7 @@ import './Experience.css'
 
 const Experience = () =>  {
     return(
-        <div className="experience">
+        <div className="experience" id='Experiences'>
         <div className="achievement">
           <div className="circle">8+</div>
           <span>years</span>

src/components/Footer/Footer.css

@@ -18,4 +18,10 @@
 .f-icons{
     display: flex;
     gap: 2rem;
+}
+
+@media screen and ( max-width: 480px ){
+    .f-content{
+        transform: scale(.5);
+    }
 }

src/components/Intro/Intro.css

@@ -101,4 +101,23 @@
     top: -18%;
     left: 56%;
     filter: blur(78px);
+}
+
+@media screen and ( max-width: 480px ) {
+    .intro{
+        flex-direction: column;
+        height: 64rem;
+        gap: 7rem;
+    }
+
+    .i-right{
+        transform: scale(0.8);
+        left: -3rem;
+    }
+    .i-right .blur{
+        display: none;
+    }
+    .floating-div:nth-of-type(1){
+        top: -7rem !important;
+    }
 }

src/components/Intro/Intro.jsx

@@ -12,13 +12,9 @@ import glassesimoji from '../../img/glassesimoji.png';
 import FloatingDiv from '../FloatingDiv/FloatingDiv';
 import { themeContext } from '../../Context';
 import { useContext } from "react";
-// import { motion } from 'framer-motion'
-
-
+// import { motion } from "framer-motion";
 const Intro = () => {
 
-    // const transition = {duration:2, type:'spring'}
-
   const theme = useContext(themeContext);
   const darkMode = theme.state.darkMode;
     return(
@@ -47,11 +43,15 @@ const Intro = () => {
             <img src={Vector2} alt="" />
             <img src={boy} alt="" />
             <img src={glassesimoji} alt=""/> 
-            <div style={{top: '-4%', left:'58%' }}>
+            <div style={{top: '-4%', left:'58%' }}
+            className='floating-div'
+            >
                 <FloatingDiv image ={Crown} txt1='Web' txt2='Developer' />
             </div>
-            <div style={{top: '18.1rem', left: '1rem'}}>
-                <FloatingDiv image={thumbup} txt1='Best Design'  txt2='Award'/>
+            <div style={{top: '18.1rem', left: '1rem'}}
+            className='floating-div'
+            >
+                <FloatingDiv image={thumbup} txt1='Best Photography'  txt2='Award'/>
             </div>
             {/* blur divs */}
             <div className='blur' style={{background: "rgb(238 210 255)"}}></div>

src/components/Navbar/Navbar.css

@@ -24,6 +24,7 @@
     align-items: center;
     justify-content: center;
     font-weight: 400;
+    
 }
 
 .n-list{
@@ -35,6 +36,8 @@
     gap: 2rem;
     margin-right: 4rem;
     list-style: none;
+    margin-left: -10rem;
+    cursor: pointer;
 
 }
 .n-list > ul > li:hover  {
@@ -44,4 +47,13 @@
 
 .n-button{
     flex:2;
+}
+
+@media screen and ( max-width: 480px ) {
+    .n-list{
+        display: none;
+    }
+    .n-button{
+        display: none;
+    }
 }

src/components/Navbar/Navbar.jsx

@@ -1,26 +1,40 @@
 import React from 'react'
 import './Navbar.css'
 import Toggle from '../Toggle/Toggle'
+import { Link } from 'react-scroll'
 
  const Navbar = () => {
      return(
         <div className="n-wrapper">
             <div className="n-left">
-                <div className="n-name">Animesh</div>
+                <div className="n-name">ansiace</div>
                 <Toggle/>
             </div>
             <div className="n-right">
                 <div className="n-list">
                     <ul style={{ListStyleType: 'none '}}>
+                        <Link spy={true} to='Navbar' smooth={true} activeClass="activeClass">
                         <li>Home</li>
+                        </Link>
+                        <Link spy={true} to='Services' smooth={true} activeClass="activeClass">
                         <li>Services</li>
+                        </Link>
+                        <Link spy={true} to='Portfolio' smooth={true} activeClass="activeClass">
                         <li>Portfolio</li>
+                        </Link>
+                        <Link spy={true} to='Experiences' smooth={true} activeClass="activeClass">
                         <li>Experiences</li>
+                        </Link>                        
+                        <Link spy={true} to='Testimonials' smooth={true} activeClass="activeClass">
                         <li>Testimonials</li>
+                        </Link>
+                        
                     </ul>
                 </div>
                 <button className="button n-button">
+                <Link spy={true} to='Contact' smooth={true} activeClass="activeClass">
                     Contact
+                </Link>
                 </button>
             </div>
         </div>

src/components/Portfolio/Portfolio.jsx

@@ -13,7 +13,7 @@ const Portfolio = () => {
     const theme = useContext(themeContext);
     const darkMode = theme.state.darkMode;
     return(
-        <div className="portfolio">
+        <div className="portfolio" id='Portfolio'>
 
             {/* heading */}
             <span style={{color: darkMode? 'white': ''}}>Recent Projects</span>

src/components/Services/Services.css

@@ -15,6 +15,7 @@
     color: var(--black);
     font-size: 2.5rem;
     font-weight: bold;
+    
 }
 .awesome > :nth-child(2){
     color: var(--orange);
@@ -34,6 +35,7 @@
 }
 .cards{
     position: relative;
+    margin-left: 4rem;
 }
 .cards>*{
     position: absolute;
@@ -49,3 +51,21 @@
     top: 13rem;
     left: -18rem;
 }
+
+@media screen and ( max-width: 480px ) {
+    .services{
+        margin-top: 0;
+        flex-direction: column;
+        gap: 5rem;
+        height: 66rem;
+        padding: 0;
+    }
+    .cards{
+        display: flex;
+        flex-direction: column;
+        gap: 17rem;
+    }
+    .cards>* {
+        position: static;
+    }
+}

src/components/Services/Services.jsx

@@ -5,14 +5,14 @@ import Glasses from "../../img/glasses.png";
 import Humble from "../../img/humble.png";
 import Card from '../Card/Card';
 import { themeContext } from '../../Context';
-import { useContext } from "react";
+import { useContext } from "react";    
 
 const Services = () => {
 
     const theme = useContext(themeContext);
     const darkMode = theme.state.darkMode;
     return(
-        <div className="services">
+        <div className="services" id='Services' >
 
             {/* left side */}
             <div className="awesome">
@@ -42,7 +42,7 @@ const Services = () => {
               <Card
                 emoji={Glasses}
                 heading={"Developer"}
-                detail={"Html, Css, JavaScript, React"}
+                detail={"Html, Css, JavaScript, React,Figma, Sketch, Photoshop "}
               />
             </div>
             {/* 3rd card */}

src/components/Testimonial/Testimonial.css

@@ -61,3 +61,13 @@
 .t-wrapper .swiper-pagination-bullet-active{
     background: var(--orange);
 }
+
+@media screen and ( max-width: 480px ){
+    .t-wrapper{
+        padding: 0;
+    }
+    .testimonial>img{
+        width: 70px;
+        height: 70px;
+    }
+}

src/components/Testimonial/Testimonial.jsx

@@ -36,7 +36,7 @@ const Testimonial = () => {
     ]
 
     return(
-        <div className="t-wrapper">
+        <div className="t-wrapper" id='Testimonials'>
             <div className="t-heading">
                 <span>Clients always get</span>
                 <span>Exceptional Work</span>

src/components/Works/Works.css

@@ -73,4 +73,25 @@
     background: #F5C32C;
     left: 47.5rem;
     top: -5rem;
+}
+
+@media screen and ( max-width: 480px ){
+    .works{
+        flex-direction: column;
+        height: 55rem;
+        padding: 0;
+        gap: 5rem;
+    }
+    .w-right{
+        display: flex;
+        align-items: flex-start;
+        justify-content: start;
+        transform: scale(0.7);
+    }
+    .w-mainCircle{
+        position: static;
+    }
+    .w-backCircle{
+        left: 8rem!important;
+    }
 }

src/components/Works/Works.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import './Works.css'
+import React from 'react';
+import './Works.css';
 import Upwork from "../../img/Upwork.png";
 import Fiverr from "../../img/fiverr.png";
 import Amazon from "../../img/amazon.png";