UI update

2024-09-25 13:34:57 +02:00 · 2024-09-25 13:34:57 +02:00 · f32c26bb7d
commit f32c26bb7d
parent 1668da060a
14 changed files with 182 additions and 211 deletions
--- a/index.html
+++ b/index.html
@ -4,32 +4,36 @@
    <meta charset="UTF-8" />
    <link
      rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
-      <text y=%22.9em%22 font-size=%2290%22>
-        👋
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>, <text y=%22.9em%22 font-size=%2290%22>
+        🫰
      </text>
    </svg>"
    />
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- nav font -->
    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
+    <!-- body font  -->
    <link
-      href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap"
      rel="stylesheet"
    />
+    <!-- headline-title font -->
    <link
-      href="https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;600;700;800;900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap"
+      rel="stylesheet"
+    />
+    <!-- logo font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap"
      rel="stylesheet"
    />

-    <link
-      href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap"
-      rel="stylesheet"
-    />
    <title>Mariia Shabelnik</title>
  </head>
  <body>
--- a/public/img/oreo-logo.png
+++ b/public/img/oreo-logo.png
--- 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 (
-    <div className="text-white">
+    <div className=" text-gray-600 ">
      <RecoilRoot>
        <main className=" min-h-screen">
          <Header />
--- 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 (
-      <li className="my-10 text-xl md:my-0 md:text-base" key={item.link}>
+      <li className="my-10 text-xl md:my-0 md:text-base " key={item.link}>
        <Link
          className={className}
          onClick={() => {
@ -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() {
        </div>
      )}
      <header className={headerClasses.join(" ")}>
-        <div className="container mx-auto h-full">
-          <nav className="flex items-center h-full px-2">
-            <div className="flex-none text-3xl md:text-4xl font-black font-logo ">
+        <div className="container mx-auto h-full max-w-7xl ">
+          <nav className="flex items-center h-full px-10 ">
+            <div className="flex-none text-3xl md:text-4xl font-logo text-[#6d6d6d] ">
              <Link className={logoClasses.join(" ")} to="/#start">
-                MW
+                MS
              </Link>
            </div>

--- a/src/components/Tags.jsx
+++ b/src/components/Tags.jsx
@ -1,13 +1,13 @@
 function Tags({ listOfTags }) {
  const tagList = listOfTags.map((itemTag, keyTag) => {
    return (
-      <div className={`bg-gray-800 py-1 px-2 rounded-xl `} key={keyTag}>
+      <div className={`bg-gray-500 py-1 px-2 rounded-xl `} key={keyTag}>
        {itemTag}
      </div>
    );
  });
  return (
-    <div className="text-tags flex flex-wrap gap-2 font-tags text-highlight ">
+    <div className="text-tags flex flex-wrap gap-2 font-tags text-white ">
      {tagList}
    </div>
  );
--- a/src/index.css
+++ b/src/index.css
@ -4,8 +4,8 @@
@tailwind components;
@tailwind utilities;
 body {
-  background-color: #031417;
+  background-color: #f0f0f3;
 }
 ::selection {
-  background: #7d9c00b1;
+  background: #caebfa;
 }
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@ -4,26 +4,39 @@ import { skillsAtom } from "../store";

 function About() {
  const skills = useRecoilValue(skillsAtom);
-  console.log(skills);
+
  return (
    <div className="relative">
      <div id="about" className=" absolute -top-16   "></div>
-      <div className=" h-screen">
+      <div className=" min-h-screen flex items-center">
+        <div>
          <h2 className="mb-2 text-subTPhone md:text-subT font-headline">
            About<span className=" text-highlight">.</span>
          </h2>
          <div className="flex flex-col md:flex-row">
            <div className="basis-2/3 text-base">
              <p>
-              As a prospective Frontend Developer, I seek a challenging career
+                "I’m Mariia Shabelnik, a Stockholm-based developer passionate
+                about building innovative, secure digital experiences with a
+                focus on both frontend and backend technologies. With expertise
+                in JavaScript, React, TypeScript, and a keen eye for web design,
+                I create solutions that combine functionality with creativity. I
+                use Node.js for backend development and SQL for database
+                management, ensuring my applications are both robust and
+                scalable. I also have a deep passion for 3D design, which adds a
+                unique, immersive dimension to my work. I thrive in
+                collaborative environments that encourage continuous learning
+                and value creative problem-solving. Let’s collaborate to push
+                the boundaries of digital innovation!"
+                {/* As a prospective Frontend Developer, I seek a challenging career
                opportunity in the IT industry, where I can collaborate with a
                dynamic team, continually learn, and foster innovation. My
-              dedication lies in transforming design concepts into user-friendly
-              experiences and achieving organizational goals through creativity
-              and teamwork. I aspire to engage in work that allows the
-              utilization of technical and creative skills to contribute
-              effectively to the growth of an organization. If you think you've
-              got an opening that I might like, let's connect 🔗
+                dedication lies in transforming design concepts into
+                user-friendly experiences and achieving organizational goals
+                through creativity and teamwork. I aspire to engage in work that
+                allows the utilization of technical and creative skills to
+                contribute effectively to the growth of an organization. If you
+                think you've got an opening that I might like, let's connect 🔗 */}
              </p>
            </div>
            <div className=" basis-1/3">
@ -37,6 +50,7 @@ function About() {
          </div>
        </div>
      </div>
+    </div>
  );
 }

--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@ -2,7 +2,7 @@ function Contact() {
  return (
    <div className="relative">
      <div id="contact" className=" absolute -top-16 "></div>
-      <h1>Welcome to C#ontact</h1>
+      <h1>Contact me</h1>
    </div>
  );
 }
--- a/src/pages/Experience.jsx
+++ b/src/pages/Experience.jsx
@ -7,31 +7,22 @@ function Experiance() {
  const experianceList = useRecoilValue(projectsAtom);

  const experianceListUI = experianceList.map((item, key) => {
-    const position = key % 2;
-
-    const imgClasses = ["basis-1/3", "hidden", "md:block"];
-
-    if (position === 1) {
-      imgClasses.push("md:order-last");
-    }
-
    return (
-      <section className="flex flex-col md:flex-row gap-4 mb-12" key={item.id}>
-        <div className={imgClasses.join(" ")}>
-          <img className="rounded-md" src={item.img[0]} />
+      <section
+        className="flex-1 gap-4 mb-12 bg-[#e0e0e0] border rounded-3xl shadow-box"
+        key={item.id}
+      >
+        <div>
+          <div className="p-4">
+            <img className="rounded-3xl" src={item.img[0]} />
          </div>
-        <div className="basis-2/3 flex flex-col">
+          <div className="flex flex-col px-4 pt-4 pb-8">
            <div>
              <h2 className="text-subTMiniPhone md:text-subTMini mb-4 ">
                {item.title}
              </h2>
            </div>
-          <div>
-            <img
-              className="block md:hidden mb-4 rounded-md"
-              src={item.img[0]}
-            />
-          </div>
+
            <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
              <p>{item.info}</p>
            </div>
@ -46,6 +37,7 @@ function Experiance() {
              </Link>
            </div>
          </div>
+        </div>
      </section>
    );
  });
@ -53,11 +45,13 @@ function Experiance() {
  return (
    <div className="relative">
      <div id="experience" className=" absolute -top-16 "></div>
-      <div className=" h-screen">
+      <div className=" min-h-screen">
        <h2 className=" text-subTPhone md:text-subT font-headline">
          Experience<span className=" text-highlight">.</span>
        </h2>
-        <div className="py-4">{experianceListUI}</div>
+        <div className="py-4 flex flex-col md:flex-row gap-4">
+          {experianceListUI}
+        </div>
      </div>
    </div>
  );
--- a/src/pages/FullPage.jsx
+++ b/src/pages/FullPage.jsx
@ -5,7 +5,7 @@ import Start from "./Start";

 function FullPage() {
  return (
-    <div className="container mx-auto px-2">
+    <div className="container mx-auto px-10 max-w-7xl">
      <Start />
      <About />
      <Experiance />
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@ -1,78 +0,0 @@
-import {
-  Animator,
-  ScrollContainer,
-  ScrollPage,
-  batch,
-  Fade,
-  FadeIn,
-  FadeOut,
-  Move,
-  MoveIn,
-  MoveOut,
-  Sticky,
-  StickyIn,
-  StickyOut,
-  Zoom,
-  ZoomIn,
-  ZoomOut,
-} from "react-scroll-motion";
-
-function Home() {
-  const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn());
-  const FadeUp = batch(Fade(), Move(), Sticky());
-
-  return (
-    <ScrollContainer>
-      <ScrollPage>
-        <Animator animation={batch(Fade(), Sticky(), MoveOut(0, 200))}>
-          <span>Hello, my name is Mariia 😀</span>
-        </Animator>
-        <span style={{ fontSize: "40px" }}>
-          <Animator animation={MoveIn(-1000, 0)}>Hello Guys 👋🏻</Animator>
-        </span>
-      </ScrollPage>
-
-      <ScrollPage>
-        <Animator animation={ZoomInScrollOut}>
-          <span style={{ fontSize: "40px" }}>I'm Frontend developer ✨</span>
-        </Animator>
-      </ScrollPage>
-
-      <ScrollPage>
-        <Animator animation={FadeUp}>
-          <span style={{ fontSize: "40px" }}>I'm Webbdesigner ⛅️</span>
-        </Animator>
-      </ScrollPage>
-
-      <ScrollPage>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100%",
-          }}
-        >
-          <span style={{ fontSize: "40px" }}>
-            <Animator animation={MoveIn(1000, 0)}>Nice to meet you 🙋🏻‍♀️</Animator>
-            - I'm Dante Chun -
-            <Animator animation={MoveOut(1000, 0)}>Good bye ✋🏻</Animator>
-            <Animator animation={MoveOut(-1000, 0)}>See you 💛</Animator>
-          </span>
-        </div>
-      </ScrollPage>
-
-      <ScrollPage>
-        <Animator animation={batch(Fade(), Sticky())}>
-          <span style={{ fontSize: "40px" }}>Done</span>
-          <br />
-          <span style={{ fontSize: "30px" }}>
-            There's FadeAnimation, MoveAnimation, StickyAnimation, ZoomAnimation
-          </span>
-        </Animator>
-      </ScrollPage>
-    </ScrollContainer>
-  );
-}
-
-export default Home;
--- a/src/pages/Start.jsx
+++ b/src/pages/Start.jsx
@ -3,21 +3,41 @@ function Start() {
    <div className="relative">
      <div id="start" className="absolute  -top-16 "></div>

-      <div className=" h-screen">
-        <h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-headline">
+      <div className=" min-h-screen flex items-center">
+        <div className="">
+          <h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-ht">
            Hello, my name is Maria<span className=" text-highlight">.</span>
          </h1>
-        <h2 className="text-subTPhone md:text-subT font-headline">
+          <h2 className="text-subTPhone md:text-subT font-tags">
            I'm a<span className=" text-highlight"> Frontend Engineer</span>
          </h2>
-        <p className="text-base">
-          In my recent journey as a junior frontend engineer, I've gained
-          valuable experience through involvement in various projects within
-          startup environments. Passionate about art and design, I've developed
-          my skills beyond coding. Let's connect and explore opportunities
-          together! By the way, you might catch a glimpse of my black mini
-          poodle, Oreo, who's an integral part of my creative space.
+          <p className="text-base w-1/2 text-left my-4">
+            Hi, I’m Mariia! I’m a web developer with startup experience,
+            building things with JavaScript, React, and Node.js. I’m also into
+            3D design and art, and my mini poodle,{" "}
+            <span className="font-black">Oreo</span>{" "}
+            <img
+              src="/img/oreo-logo.png"
+              alt="oreo_logo"
+              className=" inline h-"
+            />{" "}
+            , is always in my creative space. Let’s chat!
+            {/* Hi, I’m Mariia! I’m a developer who loves building functional,
+            user-friendly web experiences with a creative twist. I’ve been
+            working as a junior frontend engineer in startups, gaining hands-on
+            experience. I use JavaScript, React, Node.js, and SQL, and I’m
+            always exploring 3D design to add a little extra flair. Let’s
+            connect and maybe you’ll meet my mini poodle,{" "}
+            <span className="font-black">Oreo</span>{" "}
+            <img
+              src="/img/oreo-logo.png"
+              alt="oreo_logo"
+              className=" inline h-"
+            />{" "}
+            , who’s always hanging out with me while I work! */}
+            {/* "Hi, I’m Mariia! I’m a frontend developer with experience in startup projects, working with JavaScript, React, Node.js, and SQL. I love combining my technical skills with my passion for art and design, especially through 3D projects. Let’s connect and see what we can create together—also, say hi to my mini poodle, Oreo, who’s always by my side in my creative space!" */}
          </p>
+        </div>{" "}
      </div>
    </div>
  );
--- a/src/store.js
+++ b/src/store.js
@ -54,7 +54,7 @@ export const skillsAtom = atom({
      "MySQL",
      "Docker",
      "Visual Studio Code",
-      "Postman API",
+      "Rapid API",
      "TablePlus",
      "Trello",
      "Figma",
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,10 +3,17 @@ export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
-      sans: ["Ubuntu Mono", "system-ui"],
-      logo: ["Dela Gothic One", "system-ui"],
-      tags: ["Ubuntu Mono", "system-ui"],
-      headline: ["Tektur", "system-ui"],
+      /* //3D logo font
+      logo3D: ["Nabla", "system-ui"], */
+
+      //logo font
+      logo: ["Sixtyfour", "system-ui"],
+      //headline-title text
+      ht: ["Sora", "system-ui"],
+      //body text
+      sans: ["Jura", "system-ui"],
+      //nav
+      tags: ["Raleway", "system-ui"],
    },
    fontSize: {
      title: ["5rem", { lineHeight: "5rem", fontWeight: "900" }],
@ -17,7 +24,7 @@ export default {
      subTMiniPhone: ["1.2rem", { lineHeight: "1.2rem", fontWeight: "800" }],
      tags: ["0.8rem", { fontWeight: "400" }],
      sm: "0.8rem",
-      base: "1rem",
+      base: "1.2rem",
      xl: "1.25rem",
      "2xl": "1.563rem",
      "3xl": "1.953rem",
@ -26,20 +33,23 @@ export default {
    },
    extend: {
      colors: {
-        neon: "#ccff00",
-        bgColor: "#031417",
-        highlight: "#ccff00",
+        neon: "#caebfa",
+        bgColor: "#F0F0F3",
+        highlight: "#D2D2D2",
      },
+      //20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
+      boxShadow: {
+        box: "rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;",
+      },
+
      dropShadow: {
-        light: "0 0 5px theme('colors.indigo.800')",
-        yellow: "0 0 9px theme('colors.lime.400')",
-        doublelight: [
-          "0 0 5px theme('colors.lime.400')",
-          "0 0 15px theme('colors.yellow.400')",
-        ],
+        light: "0 0 5px theme('colors.sky.100')",
+        gray: "0 0 9px #8c92a8",
+        doublelight: ["0 0 5px #96989a", "0 0 15px #a0d9fa"],
+        //doublelight:
        active: [
-          "0 0 5px theme('colors.lime.400')",
-          "0 0 15px theme('colors.indigo.950')",
+          "0 0 5px theme('colors.sky.300')",
+          "0 0 15px theme('colors.sky.100')",
        ],
      },
    },