UI update and added text_imgs

2024-01-05 21:57:43 +01:00 · 2024-01-05 21:57:43 +01:00 · 0cbe047fc5
commit 0cbe047fc5
parent 9ddf5233ad
17 changed files with 88 additions and 190 deletions
--- a/index.html
+++ b/index.html
@ -17,6 +17,15 @@
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap"
      rel="stylesheet"
    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Tektur:wght@400;500;600;700;800;900&display=swap"
+      rel="stylesheet"
+    />
+
    <title>Mariia Shabelnik</title>
  </head>
  <body>
--- a/public/img/letsfly_1.png
+++ b/public/img/letsfly_1.png
--- a/public/img/letsfly_2.png
+++ b/public/img/letsfly_2.png
--- a/public/img/letsfly_3.png
+++ b/public/img/letsfly_3.png
--- a/public/img/net0_0.png
+++ b/public/img/net0_0.png
--- a/public/img/net0_1.png
+++ b/public/img/net0_1.png
--- a/public/img/net0_2.png
+++ b/public/img/net0_2.png
--- a/src/App.css
+++ b/src/App.css
@ -1,109 +0,0 @@
-body {
-  margin: 0;
-  font-family: "Roboto Mono", monospace;
-  background-color: #302f39;
-  color: white;
-}
-
-.container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 0 1em;
-}
-
-.nav .container {
-  height: 4em;
-}
-
-.content {
-  margin-top: 5em;
-}
-
-.nav {
-  background-color: #302f38;
-  height: 4em;
-
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  z-index: 100000;
-}
-
-/*box-shadow: inset 0px 3px 20px 10px rgba(0, 0, 0, 0.3);*/
-
-.nav a {
-  text-decoration: none;
-  color: #e5e5ff;
-  transition: 0.3s;
-}
-
-.nav a:hover {
-  color: #fff;
-  text-shadow: 0 0 5px #f2ef00;
-}
-
-.nav-items {
-  display: flex;
-  justify-content: space-between;
-  height: 100%;
-  align-items: center;
-}
-
-.menu-items {
-  display: flex;
-}
-
-.menu-items div {
-  margin-left: 1em;
-}
-
-.logo {
-  font-size: 2em;
-  font-weight: bold;
-}
-
-.logo a {
-  text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00;
-  z-index: 10000;
-}
-
-.hamburger {
-  display: none;
-}
-
-.copyright {
-  font-size: 0.7em;
-  text-align: center;
-}
-
-.hamburger-menu {
-  background-color: #302f38;
-  z-index: 100;
-  position: fixed;
-  right: 0;
-  backdrop-filter: blur(3px) contrast(60%);
-  -webkit-backdrop-filter: blur(3px) contrast(60%);
-  top: 4em;
-  bottom: 0;
-  left: 0px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-end;
-}
-
-.hamburger-menu a {
-  font-size: 2em;
-  text-decoration: none;
-  margin-right: 1em;
-}
-
-@media screen and (max-width: 768px) {
-  .hamburger {
-    display: inline;
-  }
-  .menu-items {
-    display: none;
-  }
-}
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@ -40,7 +40,7 @@ function Header() {
    );
  });

-  const headerClasses = ["sticky", "top-0", "z-40", "backdrop-blur-sm", "h-16"];
+  const headerClasses = ["sticky", "top-0", "z-40", "backdrop-blur-md", "h-16"];
  const logoClasses = ["hover:drop-shadow-light"];
  const overlayMenu = [
    "bg-black/90",
@ -73,7 +73,7 @@ function Header() {
      <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-4xl font-black ">
+            <div className="flex-none text-3xl md:text-4xl font-black font-headline ">
              <Link className={logoClasses.join(" ")} to="/#start">
                MS.
              </Link>
--- a/src/components/Tags.jsx
+++ b/src/components/Tags.jsx
@ -6,7 +6,11 @@ function Tags({ listOfTags }) {
      </div>
    );
  });
-  return <div className="text-tags flex flex-wrap gap-2  ">{tagList}</div>;
+  return (
+    <div className="text-tags flex flex-wrap gap-2 font-tags text-highlight ">
+      {tagList}
+    </div>
+  );
 }

 export default Tags;
--- a/src/index.css
+++ b/src/index.css
@ -6,3 +6,6 @@
 body {
  background-color: #031417;
 }
+::selection {
+  background: #7d9c00b1;
+}
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@ -8,7 +8,9 @@ function About() {
  return (
    <div className="relative">
      <div id="about" className=" absolute -top-16 "></div>
-      <h2 className="mb-2 text-subT"> About</h2>
+      <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>
--- a/src/pages/Experience.jsx
+++ b/src/pages/Experience.jsx
@ -9,7 +9,7 @@ function Experiance() {
  const experianceListUI = experianceList.map((item, key) => {
    const position = key % 2;

-    const imgClasses = ["flex-1", "hidden", "md:block"];
+    const imgClasses = ["basis-1/3", "hidden", "md:block"];

    if (position === 1) {
      imgClasses.push("md:order-last");
@ -20,9 +20,11 @@ function Experiance() {
        <div className={imgClasses.join(" ")}>
          <img className="rounded-md" src={item.img[0]} />
        </div>
-        <div className="flex-1 flex flex-col">
+        <div className="basis-2/3 flex flex-col">
          <div>
-            <h2 className="text-2xl mb-4"> {item.title}</h2>
+            <h2 className="text-subTMiniPhone md:text-subTMini mb-4 ">
+              {item.title}
+            </h2>
          </div>
          <div>
            <img
@ -30,7 +32,7 @@ function Experiance() {
              src={item.img[0]}
            />
          </div>
-          <div className="text-sm mb-6">
+          <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
            <p>{item.info}</p>
          </div>
          <Tags listOfTags={item.tags} />
@ -51,7 +53,9 @@ function Experiance() {
  return (
    <div className="relative">
      <div id="experience" className=" absolute -top-16 "></div>
-      <h1>Welcome to Experience</h1>
+      <h2 className=" text-subTPhone md:text-subT font-headline">
+        Experience<span className=" text-highlight">.</span>
+      </h2>
      <div className="py-4">{experianceListUI}</div>
    </div>
  );
--- a/src/pages/ExperienceDetail.jsx
+++ b/src/pages/ExperienceDetail.jsx
@ -38,7 +38,7 @@ function ExperianceDetail() {
  return (
    <div className="container mx-auto my-10 px-6">
      <button
-        className="text-4xl"
+        className="text-4xl "
        aria-label="Back"
        onClick={() => {
          navigate(-1);
@ -46,14 +46,16 @@ function ExperianceDetail() {
      >
        <BackButton />
      </button>
-      <div className="flex">
+      <div className="flex flex-col">
        <div className="flex-1">
-          <h1>Project: {myProject.title}</h1>
+          <h1 className=" text-subTPhone md:text-subT">
+            Project: {myProject.title}
+          </h1>
        </div>
-
-        <Tags listOfTags={myProject.tags} />
+        <div className="flex-1 mt-2 mb-6">
+          <Tags listOfTags={myProject.tags} />
+        </div>{" "}
      </div>
-      {linkUI}
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1">
          <ImageGallery
@ -65,8 +67,13 @@ function ExperianceDetail() {
            items={projectImg}
          />
        </div>
-        <div className="flex-1">{myProject.info}</div>
-      </div>
+        <div className="flex-1 text-base">
+          {myProject.info}
+          <div className=" drop-shadow-doublelight hover:drop-shadow-light my-2 text-end">
+            {linkUI}
+          </div>
+        </div>
+      </div>{" "}
    </div>
  );
 }
--- a/src/pages/Start.jsx
+++ b/src/pages/Start.jsx
@ -4,8 +4,12 @@ function Start() {
      <div id="start" className="absolute  -top-16 "></div>

      <div>
-        <h1 className=" text-title">Hello, my name is Maria.</h1>
-        <h2 className=" text-subT">I'm a Frontend Engineer</h2>
+        <h1 className="text-titlePhone md:text-title md:leading-tight mb-2 font-headline">
+          Hello, my name is Maria<span className=" text-highlight">.</span>
+        </h1>
+        <h2 className="text-subTPhone md:text-subT font-headline">
+          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
--- a/src/store.js
+++ b/src/store.js
@ -4,67 +4,27 @@ const experianceList = [
  {
    id: "46bf76ae-8915-4e5d-ae92-4151be80e75a",
    title: "Netzero web",
-    info: "Lorem ipsum dolor, sit amet consectetur adipisicing   elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. ",
-    img: [
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
+    info: "Discover the intersection of sustainability and technology in my collaboration with Net0. As the creative force behind the UI/UX design, I meticulously crafted a seamless and visually appealing user experience. Bringing this vision to life, I also spearheaded the frontend development, using React to construct an intuitive and efficient system for Net0. Immerse yourself in the synergy of eco-conscious practices and cutting-edge technology as we navigate towards a greener future, one React component at a time.",
+    img: ["/img/net0_0.png", "/img/net0_1.png", "/img/net0_2.png"],
+    tags: [
+      "React",
+      "Vite",
+      "Figma",
+      "Tailwind",
+      "TypeScript",
+      "Rest API",
+      "Node.js",
+      "Postgres",
    ],
-    tags: ["React", "Vite", "Wordpress"],
    link: "https://www.net0.se",
  },
  {
    id: "55515a25-deb1-451c-bc7d-006d293f54aa",
    title: "Lets fly",
-    info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. ",
-    img: [
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-    ],
-    tags: ["react", "vite", "shopify"],
-    link: undefined,
-  },
-  {
-    id: "e93a5d54-3442-4b19-b568-8ae550aa09fe",
-    title: "Project 3",
-    info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
-    img: [
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-    ],
-    tags: ["react", "vite", "wordpress"],
-    link: undefined,
-  },
-  {
-    id: "cedeb531-0409-4e1f-b7e9-9668dcaa5e71",
-    title: "Project 4",
-    info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
-    img: [
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-    ],
-    tags: ["react", "vite", "wordpress"],
-    link: undefined,
-  },
-  {
-    id: "5e2ea8b8-bb1e-4c9d-a723-42406bf7be72",
-    title: "Project 5",
-    info: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae cumque laborum, placeat nobis fugit nemo ipsa voluptates error quo possimus ea velit quos voluptatum magnam id eius quam accusamus. Eum blanditiis aperiam minus inventore laboriosam, et vel ipsam perspiciatis a facilis cum, iure alias recusandae dolorem adipisci illum. Quo maxime nisi minus mollitia praesentium cumque, temporibus incidunt nulla culpa eligendi consequatur doloremque repudiandae aspernatur quas necessitatibus tenetur. Similique fuga rerum provident distinctio doloremque qui accusamus, sequi voluptate eveniet voluptatum autem odio placeat quasi temporibus quas nulla laborum sunt tenetur dolorum, incidunt error porro amet modi? Temporibus amet optio mollitia omnis?",
-    img: [
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-      "/img/placeholder.png",
-    ],
-    tags: ["react", "vite", "wordpress"],
-    link: undefined,
+    info: "Letsfly is a website aimed at providing a platform for aviation-related services and information. Built on Next.js, a popular React framework, the website leverages its server-side rendering (SSR) capability to enhance performance and user experience. Tailwind was used as the CSS framework to quickly and efficiently create an attractive and responsive design. WordPress, a well-known Content Management System (CMS), was employed as the content management system to administer and publish content on the website. The reason for choosing WordPress was a client request; he was familiar with this system and wanted to be able to modify the content himself. GraphQL was selected as the API layer to enable efficient data management and flexible data queries between the frontend and backend.",
+    img: ["/img/letsfly_1.png", "/img/letsfly_2.png", "/img/letsfly_3.png"],
+    tags: ["React", "NextJS", "Wordpress", "GraphQL", "MySQL", "Tailwind"],
+    link: "https://preview.letsfly.app/",
  },
 ];

@ -87,6 +47,15 @@ export const skillsAtom = atom({
      "WordPress",
      "Shopify",
    ],
-    tools: ["GIT", "MySQL", "Docker"],
+    tools: [
+      "GIT",
+      "MySQL",
+      "Docker",
+      "Visual Studio Code",
+      "Postman API",
+      "TablePlus",
+      "Trello",
+      "Figma",
+    ],
  },
 });
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -3,13 +3,17 @@ export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    fontFamily: {
-      sans: ["Roboto Mono", "system-ui"],
-      headline: ["Roboto Mono", "system-ui"],
+      sans: ["Ubuntu Mono", "system-ui"],
+      headline: ["Tektur", "system-ui"],
+      tags: ["Ubuntu Mono", "system-ui"],
    },
    fontSize: {
-      title: ["5rem", { fontWeight: "800" }],
-      subT: ["3.5rem", { fontWeight: "800" }],
-      subTMini: ["1.4rem", { fontWeight: "800" }],
+      title: ["5rem", { lineHeight: "5rem", fontWeight: "900" }],
+      titlePhone: ["3rem", { lineHeight: "3rem", fontWeight: "900" }],
+      subT: ["3.5rem", { lineHeight: "3.5rem", fontWeight: "800" }],
+      subTPhone: ["2.5rem", { lineHeight: "2.5rem", fontWeight: "800" }],
+      subTMini: ["1.4rem", { lineHeight: "1.4rem", fontWeight: "900" }],
+      subTMiniPhone: ["1.2rem", { lineHeight: "1.2rem", fontWeight: "800" }],
      tags: ["0.8rem", { fontWeight: "400" }],
      sm: "0.8rem",
      base: "1rem",
@ -22,7 +26,8 @@ export default {
    extend: {
      colors: {
        neon: "#ccff00",
-        bgColor: "#302f39",
+        bgColor: "#031417",
+        highlight: "#ccff00",
      },
      dropShadow: {
        light: "0 0 5px theme('colors.indigo.800')",