From bf6591e4e1c43936673248305afd189769930e91 Mon Sep 17 00:00:00 2001 From: yousifpa98 Date: Fri, 20 Dec 2024 02:40:46 +0100 Subject: [PATCH] navigation done only animations left to do for it --- package-lock.json | 9 +++++ package.json | 1 + src/App.jsx | 8 ++++ src/assets/icons/navIcons/address-card.svg | 1 + src/assets/icons/navIcons/code.svg | 1 + src/assets/icons/navIcons/envelope.svg | 1 + src/assets/icons/navIcons/house.svg | 1 + src/assets/icons/navIcons/suitcase.svg | 1 + src/components/Hero.jsx | 2 +- src/components/Home.jsx | 6 ++- src/components/Navigation.jsx | 45 +++++++++++++++++++++- src/components/mainViews/About.jsx | 9 +++++ src/components/mainViews/Contact.jsx | 9 +++++ src/components/mainViews/Experience.jsx | 9 +++++ src/components/mainViews/Projects.jsx | 9 +++++ src/css/Hero.css | 4 -- src/css/Home.css | 1 + src/css/Navigation.css | 36 ++++++++++++++++- src/css/TechStack.css | 4 +- 19 files changed, 144 insertions(+), 13 deletions(-) create mode 100644 src/assets/icons/navIcons/address-card.svg create mode 100644 src/assets/icons/navIcons/code.svg create mode 100644 src/assets/icons/navIcons/envelope.svg create mode 100644 src/assets/icons/navIcons/house.svg create mode 100644 src/assets/icons/navIcons/suitcase.svg create mode 100644 src/components/mainViews/About.jsx create mode 100644 src/components/mainViews/Contact.jsx create mode 100644 src/components/mainViews/Experience.jsx create mode 100644 src/components/mainViews/Projects.jsx diff --git a/package-lock.json b/package-lock.json index 43eaf77..dd94169 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "animate.css": "^4.1.1", + "clsx": "^2.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^7.0.2", @@ -1785,6 +1786,14 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", diff --git a/package.json b/package.json index af1bb02..f0e56b0 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "animate.css": "^4.1.1", + "clsx": "^2.1.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^7.0.2", diff --git a/src/App.jsx b/src/App.jsx index fce2c51..eae62fb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,6 +3,10 @@ import Layout from "./layout/Layout"; import { Route, Routes } from "react-router-dom"; import Home from "./components/Home"; import "./App.css"; +import About from "./components/mainViews/About"; +import Experience from "./components/mainViews/Experience"; +import Projects from "./components/mainViews/Projects"; +import Contact from "./components/mainViews/Contact"; const App = () => { return ( @@ -10,6 +14,10 @@ const App = () => { {/* */} } /> + } /> + } /> + } /> + } /> {/* */} diff --git a/src/assets/icons/navIcons/address-card.svg b/src/assets/icons/navIcons/address-card.svg new file mode 100644 index 0000000..1046264 --- /dev/null +++ b/src/assets/icons/navIcons/address-card.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/navIcons/code.svg b/src/assets/icons/navIcons/code.svg new file mode 100644 index 0000000..8eb7fe7 --- /dev/null +++ b/src/assets/icons/navIcons/code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/navIcons/envelope.svg b/src/assets/icons/navIcons/envelope.svg new file mode 100644 index 0000000..bf8ea45 --- /dev/null +++ b/src/assets/icons/navIcons/envelope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/navIcons/house.svg b/src/assets/icons/navIcons/house.svg new file mode 100644 index 0000000..8ef8cf9 --- /dev/null +++ b/src/assets/icons/navIcons/house.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/navIcons/suitcase.svg b/src/assets/icons/navIcons/suitcase.svg new file mode 100644 index 0000000..67b7709 --- /dev/null +++ b/src/assets/icons/navIcons/suitcase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index acf926e..4b512ad 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -15,7 +15,7 @@ const Hero = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => { Hi, I'm Yousif.
{" "} - I'm a Full-Stack Developer from Germany. + I'm a Full-Stack Developer from Germany.

); diff --git a/src/components/Home.jsx b/src/components/Home.jsx index 3657e3c..d5f863c 100644 --- a/src/components/Home.jsx +++ b/src/components/Home.jsx @@ -37,7 +37,11 @@ const Home = () => { - +
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx index acc73e1..d8cd4ea 100644 --- a/src/components/Navigation.jsx +++ b/src/components/Navigation.jsx @@ -1,8 +1,49 @@ import React from "react"; import "../css/Navigation.css"; +import { useState } from "react"; +import AddressCardIcon from "../assets/icons/navIcons/address-card.svg?react"; +import CodeIcon from "../assets/icons/navIcons/code.svg?react"; +import EnvelopeIcon from "../assets/icons/navIcons/envelope.svg?react"; +import HouseIcon from "../assets/icons/navIcons/house.svg?react"; +import SuitcaseIcon from "../assets/icons/navIcons/suitcase.svg?react"; +import { NavLink } from "react-router-dom"; +import clsx from "clsx"; -const Navigation = () => { - return
Nav
; +const Navigation = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => { + const [animation, setAnimation] = useState(initialAnimation); + + const navItems = [ + { name: "Home", to: "/", icon: HouseIcon, id: 1 }, + { name: "About", to: "/about", icon: AddressCardIcon, id: 2 }, + { name: "Experience", to: "/workExp", icon: SuitcaseIcon, id: 3 }, + { name: "Projects", to: "/projects", icon: CodeIcon, id: 4 }, + { name: "Contact", to: "/contact", icon: EnvelopeIcon, id: 5 }, + ]; + return ( +
onMouseEnter(setAnimation)} + onAnimationEnd={() => onAnimationEnd(setAnimation)} + > +
    + {navItems.map((item) => { + const IconComponent = item.icon; + return ( +
  • + + clsx("navLink", { active: isActive }) + } + > + {item.name} + +
    • + ); + })} +
+
+ ); }; export default Navigation; diff --git a/src/components/mainViews/About.jsx b/src/components/mainViews/About.jsx new file mode 100644 index 0000000..bea4d72 --- /dev/null +++ b/src/components/mainViews/About.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const About = () => { + return ( +
About
+ ) +} + +export default About \ No newline at end of file diff --git a/src/components/mainViews/Contact.jsx b/src/components/mainViews/Contact.jsx new file mode 100644 index 0000000..43fea43 --- /dev/null +++ b/src/components/mainViews/Contact.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Contact = () => { + return ( +
Contact
+ ) +} + +export default Contact \ No newline at end of file diff --git a/src/components/mainViews/Experience.jsx b/src/components/mainViews/Experience.jsx new file mode 100644 index 0000000..ca20111 --- /dev/null +++ b/src/components/mainViews/Experience.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Experience = () => { + return ( +
Experience
+ ) +} + +export default Experience \ No newline at end of file diff --git a/src/components/mainViews/Projects.jsx b/src/components/mainViews/Projects.jsx new file mode 100644 index 0000000..9abd0eb --- /dev/null +++ b/src/components/mainViews/Projects.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const Projects = () => { + return ( +
Projects
+ ) +} + +export default Projects \ No newline at end of file diff --git a/src/css/Hero.css b/src/css/Hero.css index 0739e4e..c4ea066 100644 --- a/src/css/Hero.css +++ b/src/css/Hero.css @@ -3,10 +3,6 @@ animation-duration: 1.5s; } -.hero:hover { - animation-duration: .5s; -} - .hero p span { color: white; font-weight: bold; diff --git a/src/css/Home.css b/src/css/Home.css index 5eaa261..809f8c1 100644 --- a/src/css/Home.css +++ b/src/css/Home.css @@ -16,6 +16,7 @@ .container:hover { cursor: pointer; + animation-duration: .5s; } h2 { diff --git a/src/css/Navigation.css b/src/css/Navigation.css index 4351095..977f121 100644 --- a/src/css/Navigation.css +++ b/src/css/Navigation.css @@ -1,3 +1,35 @@ .navigation { - grid-area: 1 / 9 / 9 / 12; -} \ No newline at end of file + grid-area: 1 / 9 / 9 / 12; +} + +.navList { + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + list-style-type: none; + height: 100%; +} + +.navItem { + font-size: 1.5rem; +} + +.navIcon { + fill: white; + height: 1.5rem; + width: auto; +} + +.navLink { + text-decoration: none; + color: white; + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +.navLink.active span { + border-bottom: 1px solid white; +} diff --git a/src/css/TechStack.css b/src/css/TechStack.css index 42bf512..8a5d306 100644 --- a/src/css/TechStack.css +++ b/src/css/TechStack.css @@ -7,9 +7,7 @@ animation-duration: 1s; } -.techStackContainer:hover { - animation-duration: 0.5s; -} + .techStackContainer h2 { margin-bottom: 10px;