diff --git a/package-lock.json b/package-lock.json index 53e52f2..fe92543 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,11 @@ "name": "portfolio-saaday", "version": "0.1.0", "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", @@ -2493,6 +2498,76 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz", + "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz", + "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz", + "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz", + "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz", + "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", diff --git a/package.json b/package.json index e5f9f95..17ac8a3 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index ab3992a..821e897 100644 --- a/src/App.css +++ b/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; } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3376fb1..b80c6bd 100644 --- a/src/App.js +++ b/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 ( -
+
{/* Add the "scrolled" class to Header when isScrolled is true */}
-
+
+ +
+
+
-
+
+
-
+
+
-
+
+
-
+
+
-
+
+
- -
+
+
+ + {/* Scroll to Top Button */} + {showScrollTopButton && ( + + )}
); } \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index c2dc3e6..39d6074 100644 --- a/src/components/Header.jsx +++ b/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, diff --git a/src/components/Intrduction.jsx b/src/components/Intrduction.jsx new file mode 100644 index 0000000..9d7e9a1 --- /dev/null +++ b/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 ( + <> + + + +
+

Hi, I am Saad Ahmed

+

Software Engineer

+
+ + + + + + + + + ); +} diff --git a/src/components/ReachToMe.jsx b/src/components/ReachToMe.jsx new file mode 100644 index 0000000..6a6b780 --- /dev/null +++ b/src/components/ReachToMe.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +export default function ReachToMe() { + return ( + <> +
+ + ) +} diff --git a/src/css/generic-style.css b/src/css/generic-style.css new file mode 100644 index 0000000..8a75258 --- /dev/null +++ b/src/css/generic-style.css @@ -0,0 +1,7 @@ +@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap'); + +/* Apply the font to specific elements */ + +.cusrive-font{ + font-family: 'Dancing Script', cursive; +} \ No newline at end of file diff --git a/src/images/Saad Ahmed logo.png b/src/images/Saad Ahmed logo.png new file mode 100644 index 0000000..7dd32c5 Binary files /dev/null and b/src/images/Saad Ahmed logo.png differ