Second Main Commit to push some code in Github woth font-family

package.json

@@ -4,6 +4,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -18,8 +23,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "predeploy" : "npm run build",
-    "deploy" : "gh-pages -d build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/App.css

@@ -33,10 +33,10 @@
   justify-content: center;
   scroll-snap-align: start; /* Optional: align section with scroll snap */
 }
-
 .main-logo {
-  width: 140px;
+  width: 200px;
   height: auto;
+  border-radius: 5px;
 }
 .App-link {
   color: #61dafb;
@@ -55,3 +55,47 @@
   background-color: #f8f9fa; /* Change background on scroll */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow */
 }
+.main_page .bg-body-tertiary{
+  background: linear-gradient(135deg, rgba(52, 49, 47, 1), rgba(52, 49, 47, 0.8));
+}
+.navbar-nav .nav-link {
+  color: #ececec;
+  margin: 5px;
+  font-size: 22px;
+}
+.bg-attractive{
+  background: linear-gradient(135deg, rgba(52, 49, 47, 1), rgba(52, 49, 47, 0.8));
+  color: #cecece;
+}
+.App-body hr {
+  color: #cecece;
+  border: 2px solid #cecece;
+  margin: 0px;
+}
+.scroll-to-top {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #34312f; /* Use your preferred color */
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s ease;
+}
+
+.scroll-to-top:hover {
+  background-color: #2e2b29; /* Slightly darker for hover effect */
+}
+
+.scroll-to-top:focus {
+  outline: none;
+}
+.fs-70{ font-size: 70px; }

src/App.js

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import './App.css';
+import './css/generic-style.css';
 import Header from './components/Header';
 import Skills from './components/Skills';
 import Experience from './components/Experience';
@@ -9,9 +10,11 @@ import Projects from './components/Projects';
 import Blogs from './components/Blogs';
 import Footer from './components/Footer';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import Intrduction from './components/Intrduction';
 
 export default function App() {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [showScrollTopButton, setShowScrollTopButton] = useState(false);
 
   const sectionsRef = {
     skills: useRef(null),
@@ -20,6 +23,7 @@ export default function App() {
     education: useRef(null),
     projects: useRef(null),
     blogs: useRef(null),
+    introduction: useRef(null),
   };
 
   const scrollToSection = (ref) => {
@@ -28,6 +32,10 @@ export default function App() {
     }
   };
 
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   // Set up scroll observer for hash updates
   useEffect(() => {
     const observerOptions = {
@@ -59,10 +67,11 @@ export default function App() {
     };
   }, []);
 
-  // Sticky header functionality
+  // Sticky header and scroll-to-top button functionality
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 0);
+      setShowScrollTopButton(window.scrollY > 200); // Show button after 200px scroll
     };
 
     window.addEventListener('scroll', handleScroll);
@@ -73,7 +82,7 @@ export default function App() {
   }, []);
 
   return (
-    <div className="App test">
+    <div className="App main_page">
       {/* Add the "scrolled" class to Header when isScrolled is true */}
       <header className={`App-header ${isScrolled ? 'scrolled' : ''}`}>
         <Header
@@ -87,29 +96,45 @@ export default function App() {
       </header>
 
       <div className="App-body">
-        <div ref={sectionsRef.skills} id="skills" className="section">
+        <section ref={sectionsRef.introduction} id='introduction' className='section bg-attractive'>
+          <Intrduction/>
+        </section>
+        <hr></hr>
+        <div ref={sectionsRef.skills} id="skills" className="section bg-attractive">
           <Skills />
         </div>
-        <div ref={sectionsRef.experience} id="work-experience" className="section">
+        <hr></hr>
+        <div ref={sectionsRef.experience} id="work-experience" className="section bg-attractive">
           <Experience />
         </div>
-        <div ref={sectionsRef.skillsRating} id="skills-rating" className="section">
+        <hr></hr>
+        <div ref={sectionsRef.skillsRating} id="skills-rating" className="section bg-attractive">
           <SkillRating />
         </div>
-        <div ref={sectionsRef.education} id="education" className="section">
+        <hr></hr>
+        <div ref={sectionsRef.education} id="education" className="section bg-attractive">
           <Education />
         </div>
-        <div ref={sectionsRef.projects} id="projects" className="section">
+        <hr></hr>
+        <div ref={sectionsRef.projects} id="projects" className="section bg-attractive">
           <Projects />
         </div>
-        <div ref={sectionsRef.blogs} id="blogs" className="section">
+        <hr></hr>
+        <div ref={sectionsRef.blogs} id="blogs" className="section bg-attractive">
           <Blogs />
         </div>
       </div>
-
-      <footer className="App-footer">
+      <hr></hr>
+      <footer className="App-footer bg-attractive">
         <Footer />
       </footer>
+
+      {/* Scroll to Top Button */}
+      {showScrollTopButton && (
+        <button onClick={scrollToTop} className="scroll-to-top">
+          ↑
+        </button>
+      )}
     </div>
   );
 }

src/components/Header.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Navbar, Container, Nav, Col, Row } from 'react-bootstrap';
-import MainLogo from '../logo.svg';
+import MainLogo from '../images/Saad Ahmed logo.png'
 
 export default function Header({
   scrollToSkills,

src/components/Intrduction.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Container, Row, Col } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faLinkedin, faGoogle, faWhatsapp } from '@fortawesome/free-brands-svg-icons';
+
+export default function Introduction() {
+  return (
+    <>
+      <Container>
+        <Row>
+            <Col xs={12} lg={8}>
+                <div className='intro text-start'>
+                    <h1 className='fw-bold fs-70 cusrive-font'>Hi, I am Saad Ahmed</h1>
+                    <p className='fw-normal fs-1'>Software Engineer</p>
+                </div>
+                <div className="mt-3 text-start">
+                <a href="#" target="_blank" rel="noopener noreferrer" className="me-3 github">
+                    <FontAwesomeIcon icon={faGithub} size="2x" />
+                </a>
+                <a href="#" target="_blank" rel="noopener noreferrer" className="me-3 kinkedin">
+                    <FontAwesomeIcon icon={faLinkedin} size="2x" />
+                </a>
+                <a href="#" target="_blank" rel="noopener noreferrer" className="me-3 gmail">
+                    <FontAwesomeIcon icon={faGoogle} size="2x" />
+                </a>
+                <a href="#" target="_blank" rel="noopener noreferrer" className="me-3 whatsapp">
+                    <FontAwesomeIcon icon={faWhatsapp} size="2x" />
+                </a>
+                </div>
+            </Col>
+            <Col xs={12} lg={4}>
+                <img src='' alt='' className='image-fluid'/>
+            </Col>
+        </Row>
+      </Container>
+    </>
+  );
+}

src/components/ReachToMe.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function ReachToMe() {
+  return (
+    <>
+    <div className="container"></div>
+    </>
+  )
+}

src/css/generic-style.css

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&display=swap');
+
+/* Apply the font to specific elements */
+
+.cusrive-font{
+    font-family: 'Dancing Script', cursive;
+}