Merge pull request #21 from nirmalyax/revert-17-add

Revert "Larger the Icons for Header and Footer Section(Responsive)"

Author: nirmalyax

README.md

@@ -6,8 +6,7 @@
 
 <div align="center">
 
-![GitHub repo size](https://img.shields.io/github/repo-size/nirmalyax/React-folio?color=yellow) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
-
+![GitHub repo size](https://img.shields.io/github/repo-size/nirmalyax/React-folio?color=yellow)  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
 </div>
 
 <table align="center">
@@ -93,7 +92,7 @@ Clone down this repository. You will need `node.js` and `git` installed globally
 
    ```bash
    git clone https://github.com/username/repository-name.git
-   ```
+
 
 ## 🛠 Installation and Setup Instructions
 
@@ -106,12 +105,11 @@ Clone down this repository. You will need `node.js` and `git` installed globally
    <br/>
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 
 The page will reload if you make edits.
 
 <br />
 Feel free to contribute to this repo.
 
 ### Show some ❤️&nbsp; by giving the star :star: to this repository!!
-
 <h1 align=center> 🧠 Happy Hacking 🧠 </h1>

src/components/footer/Footer.jsx

@@ -16,18 +16,14 @@ const Footer = () => {
         <li><a href="#contact">Contact</a></li>
       </ul>
       <div className="footer__socials">
-        <a href="https://www.linkedin.com/in/nirmalya-mondal" target="_blank" rel="noopener noreferrer">
-          <BsLinkedin />
-        </a>
-        <a href="https://github.com/nirmalyax" target="_blank" rel="noopener noreferrer">
-          <FaGithub />
-        </a>
+      <a href="https://www.linkedin.com/in/nirmalya-mondal/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
+      <a href="https://github.com/nirmalyax" target="_blank" rel="noreferrer" ><FaGithub /></a>
       </div>
       <div className="footer__copyright">
         <small>&copy;2023. All rights reserved.</small>
       </div>
     </footer>
-  );
-};
+  )
+}
 
-export default Footer;
+export default Footer

src/components/footer/footer.css

@@ -62,62 +62,4 @@ footer a {
     .footer__socials {
         margin-bottom: 2.6rem;
     }
-}
-
-
-footer {
-    margin: 5;
-    padding: 0;
-  }
-  
-  
-  footer {
-    background-color: var(--color-primary); 
-    color: #fff; 
-    text-align: center;
-    padding: 10px 0;
-    font-size: 1.3rem; 
-  }
-  
- 
-  .footer__logo {
-    text-decoration: none;
-    color: var(--color-bg); 
-    font-weight: bold;
-  }
-  
- 
-  .permalinks {
-    list-style: none;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    gap: 20px;
-    margin: 20px 0;
-  }
-  
-  .permalinks li {
-    margin: 0;
-  }
-  
-  .permalinks a {
-    text-decoration: none;
-    color: var(--color-bg); 
-  }
-  
-  
-  .footer__socials {
-    margin: 20px 0;
-  }
-  
-  .footer__socials a {
-    text-decoration: none;
-    color: #fff; 
-    font-size: 20px; 
-    margin: 0 15px;
-  }
- 
-  .footer__copyright {
-    font-size: 1.0rem; 
-  }
-  
+}

src/components/header/Header.jsx

@@ -7,13 +7,13 @@ const Header = () => {
   return (
     <header id="home">
       <div className="container header__container">
-        <h5 className="header__text">Hello I'm</h5>
-        <h1 className="header__title">Nirmalya Mondal</h1>
-        <h5 className="header__text text-light">Front-end Developer & Test Engineer</h5>
+        <h5>Hello I'm</h5>
+        <h1 >Nirmalya Mondal</h1>
+        <h5 className="text-light">Front-end Developer & Test Engineer</h5>
         <CTA />
-        <a href="#contact" className="scroll__down">
-          Scroll Down &#10230;
-        </a>
+          <a href="#contact" className="scroll__down">
+            Scroll Down &#10230;
+          </a>
         <HeaderSocials />
       </div>
     </header>

src/components/header/HeaderSocials.jsx

@@ -2,16 +2,15 @@ import React from 'react';
 import { BsLinkedin } from 'react-icons/bs';
 import { FaGithub } from 'react-icons/fa';
 import { SiLeetcode } from 'react-icons/si';
-import './header.css';
 
 const HeaderSocials = () => {
   return (
     <div className="header__socials">
-      <a href="https://www.linkedin.com/in/nirmalya-mondal/" target="_blank" rel="noreferrer" ><BsLinkedin className="social-icon" /></a>
-      <a href="https://github.com/nirmalyax" target="_blank" rel="noreferrer" ><FaGithub className="social-icon" /></a>
-      <a href="https://leetcode.com/nirmalyax/" target="_blank" rel="noreferrer" ><SiLeetcode className="social-icon" /></a>
+      <a href="https://www.linkedin.com/in/nirmalya-mondal/" target="_blank" rel="noreferrer" ><BsLinkedin /></a>
+      <a href="https://github.com/nirmalyax" target="_blank" rel="noreferrer" ><FaGithub /></a>
+      <a href="https://leetcode.com/nirmalyax/" target="_blank" rel="noreferrer" ><SiLeetcode /></a>
     </div>
   )
 }
 
-export default HeaderSocials;
+export default HeaderSocials;

src/components/header/header.css

@@ -67,85 +67,4 @@ header {
   .scroll__down {
     display: none;
   }
-}
-
-/* Existing CSS styles 
-.header__container {
-  padding: 20px; 
-  text-align: center;
-}
-
-.header__title {
-  margin-top: 20px; 
-}
-
-.scroll__down {
-  margin-top: 20px; 
-  margin-left: 30px;
-}
-*/
-
-.social-icon {
-  font-size: 20px;
-  
-}
-
-@media (min-width: 768px) {
-  .social-icon {
-    font-size: 38px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .social-icon {
-    font-size: 26px;
-  }
-}
-
-.scroll__down {
-  font-size: 15px;
-  margin-left: 60px;
-}
-
-@media (min-width: 768px) {
-  .scroll__down {
-    font-size: 22px;
-    margin-left: 30px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .scroll__down {
-    font-size: 20px;
-    margin-right: -70px;
-    
-  }
-}
-
-.header__text {
-  font-size: 14px;
-}
-
-.header__title {
-  font-size: 40px;
-}
-
-@media (min-width: 768px) {
-  .header__text {
-    font-size: 18px;
-  }
-
-  .header__title {
-    font-size: 32px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .header__text {
-    font-size: 20px;
-  }
-
-  .header__title {
-    font-size: 60px;
-  }
-}
+}