From f32c26bb7d1ca792ee0774db2d0925fb5f70cf3e Mon Sep 17 00:00:00 2001 From: Mariia Shabelnik Date: Wed, 25 Sep 2024 13:34:57 +0200 Subject: [PATCH] UI update --- index.html | 24 +++++++----- public/img/oreo-logo.png | Bin 0 -> 980 bytes src/App.jsx | 5 +-- src/components/Header.jsx | 46 +++++++++++++--------- src/components/Tags.jsx | 4 +- src/index.css | 4 +- src/pages/About.jsx | 66 +++++++++++++++++++------------- src/pages/Contact.jsx | 2 +- src/pages/Experience.jsx | 68 +++++++++++++++------------------ src/pages/FullPage.jsx | 2 +- src/pages/Home.jsx | 78 -------------------------------------- src/pages/Start.jsx | 50 ++++++++++++++++-------- src/store.js | 2 +- tailwind.config.js | 42 ++++++++++++-------- 14 files changed, 182 insertions(+), 211 deletions(-) create mode 100644 public/img/oreo-logo.png delete mode 100644 src/pages/Home.jsx diff --git a/index.html b/index.html index 2f0d51a..95bdc89 100644 --- a/index.html +++ b/index.html @@ -4,32 +4,36 @@ , + 🫰 " /> + + + + + + - Mariia Shabelnik diff --git a/public/img/oreo-logo.png b/public/img/oreo-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..1040a8d47067262fd0a088e599f7073ef7908c18 GIT binary patch literal 980 zcmV;_11tQAP)-{S$1-^b8T^j@wO$~_+WCmo}TPLiV?y?Xkdb|Lqp@tg1miJ z`?%u3Kgh%VM`Bp$!~B$##oZ09I#8ud|A7|6^uZbKuAWWqfVQat*3vVG zezh5_cc1aw#^p0=x6i0;+eTE|b{ng^Ov|Dsl^-8xXp;K)7HtQ7reR19Wu5gJ-CTFr~$ zJS_;Yh)oTL4G-d^>Dh~aQz3p+5r&l`Ye|eiSC&%CEHc+_2BwaIEJ2wVB({lKbZyOvx=)7c-Cfk6Ff*hs4It3Wa}kp)1{*HtEV04$qy59@3Pmy= zWpt&ZeOq^13p|>}$#PT}fc6G2Pun2^G$$b|gO^(SMpG-`Uc_4NF{Tba$|3sAMju*4@bipwXUxa`uHiB*Pmn0UC;NgILw!uU@@s z?dG-n@5AOcW8Z_+x{eH#5Ev@mwIQNLHoI%hDrDpX`{dHl$hFbkVICqlcHd|9v%|xK zOmib0G2CBoW>JWkiXt*Ha%@!61cS8-wx@S_)r!W#+yqQj|4E3^-No;r=H)W3zxf7C zPfc!NAkICxp>-{G=kxD*=-6=cp1W_`I5BY)pBDuO@aMmHesX3SFTD0LUU~i1jaOWD zS#ikNIC9^|q2uGY{E|zGmtTHy^IPw}x%K>u&SQW_#NUEI{*0+|ty(g- literal 0 HcmV?d00001 diff --git a/src/App.jsx b/src/App.jsx index b70a026..49afcf3 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,5 @@ //import "./App.css"; import { Routes, Route } from "react-router-dom"; -import Home from "./pages/Home"; -import Experience from "./pages/Experience"; -import Contact from "./pages/Contact"; import Footer from "./components/Footer"; import Header from "./components/Header"; import ExperianceDetail from "./pages/ExperienceDetail"; @@ -12,7 +9,7 @@ import ScrollToAnchor from "./components/ScrollToAnchor"; function App() { return ( -
+
diff --git a/src/components/Header.jsx b/src/components/Header.jsx index dc41439..3889260 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -13,20 +13,21 @@ function Header() { }, [isOpen]); const menu = [ - { link: "/#about", title: ".me()" }, - { link: "/#experience", title: ".experience()" }, - { link: "/#contact", title: ".contact()" }, + { link: "/#about", title: ".about( )" }, + { link: "/#experience", title: ".projects( )" }, + { link: "/#contact", title: ".contact( )" }, ]; const menuUI = menu.map((item) => { - let className = "drop-shadow-light hover:drop-shadow-doublelight"; - if (location.pathname === item.link) { - className += " text-white"; + let className = "drop-shadow-doublelight hover:drop-shadow-active"; + console.log(location); + if (`/${location.hash}` === item.link) { + className += " text-white "; } else { - className += " text-white/40"; + className += " text-gray-500"; } return ( -
  • +
  • { @@ -40,10 +41,19 @@ function Header() { ); }); - const headerClasses = ["sticky", "top-0", "z-40", "backdrop-blur-md", "h-16"]; + const headerClasses = [ + "sticky", + "top-0", + "z-40", + "backdrop-blur-sm", + "h-16", + "border-b-[1px]", + "border-white", + "rounded-b-[1rem]", + ]; const logoClasses = ["hover:drop-shadow-light"]; const overlayMenu = [ - "bg-black/90", + "bg-white/90", "z-50", "fixed", "left-0", @@ -54,11 +64,11 @@ function Header() { "p-2", ]; if (isOpen) { - headerClasses.push("bg-black/90"); - logoClasses.push("drop-shadow-yellow"); + headerClasses.push("bg-white/70"); + logoClasses.push("drop-shadow-gray"); } else { - headerClasses.push("bg-bgColor/90"); - logoClasses.push("drop-shadow-doublelight"); + headerClasses.push("bg-bgColor/70"); + logoClasses.push("drop-shadow-active"); } return ( @@ -71,11 +81,11 @@ function Header() {
    • )}
    -
    -