refactor: update project layout and descriptions - Move project title to top - Simplify project descriptions - Adjust layout for better readability

2025-05-05 20:12:43 +02:00 · 2025-05-05 20:12:43 +02:00 · 6a6c24ab20
commit 6a6c24ab20
parent 055975162a
10 changed files with 2188 additions and 1537 deletions
--- a/index.html
+++ b/index.html
@ -2,6 +2,15 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
+    />
+    <meta
+      name="description"
+      content="Mariia Shabelnik - Frontend Engineer portfolio showcasing web development projects and skills"
+    />
+    <meta name="theme-color" content="#f0f0f3" />
    <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>
@ -10,7 +19,6 @@
    </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 -->
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,6 +9,8 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@splinetool/react-spline": "^4.0.0",
+    "@splinetool/runtime": "^1.9.89",
    "hamburger-react": "^2.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@ -21,10 +23,10 @@
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@vitejs/plugin-react": "^4.4.1",
    "autoprefixer": "^10.4.15",
    "postcss": "^8.4.29",
    "tailwindcss": "^3.3.3",
-    "vite": "^3.0.0"
+    "vite": "^6.3.5"
  }
 }
--- a/src/App.jsx
+++ b/src/App.jsx
@ -1,11 +1,11 @@
 //import "./App.css";
 import { Routes, Route } from "react-router-dom";
-import Footer from "./components/Footer";
 import Header from "./components/Header";
 import ExperianceDetail from "./pages/ExperienceDetail";
 import FullPage from "./pages/FullPage";
 import { RecoilRoot } from "recoil";
 import ScrollToAnchor from "./components/ScrollToAnchor";
+/* import Spline from "@splinetool/react-spline"; */

 function App() {
  return (
@ -14,13 +14,15 @@ function App() {
        <main className=" min-h-screen">
          <Header />
          <ScrollToAnchor />
+          {/* <div className="w-full h-screen">
+            <Spline scene="https://prod.spline.design/magHjLGpPc2Y1jP4/scene.splinecode" />
+          </div> */}
          <Routes>
            <Route path="/" element={<FullPage />} />
            {/* <Route path="/experience" element={<Experience />} />
            <Route path="/contact" element={<Contact />} />*/}
            <Route path="/experience/:id" element={<ExperianceDetail />} />
          </Routes>
-          <Footer />
        </main>
      </RecoilRoot>
    </div>
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@ -1,9 +1,34 @@
+import { FaLinkedin, FaEnvelope } from "react-icons/fa";
+
 function Footer() {
  const fullYear = new Date().getFullYear();
+  const email = "mariia.shabelnik@gmail.com"; // Replace with your email
+  const linkedinUrl = "https://www.linkedin.com/in/mariia-shabelnik/"; // Replace with your LinkedIn URL
+
  return (
    <footer className="container mx-auto my-10 px-6 sticky top-[95vh]">
-      <div className=" text-center text-sm text-white/50 ">
-        © {fullYear} Mariia Shabelnik, all rights reserved
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex gap-6">
+          <a
+            href={`mailto:${email}`}
+            className="text-gray-500 hover:text-highlight transition-colors duration-300"
+            aria-label="Send email to Mariia"
+          >
+            <FaEnvelope className="w-6 h-6" />
+          </a>
+          <a
+            href={linkedinUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-500 hover:text-highlight transition-colors duration-300"
+            aria-label="Visit Mariia's LinkedIn profile"
+          >
+            <FaLinkedin className="w-6 h-6" />
+          </a>
+        </div>
+        <div className="text-center text-sm text-gray-500">
+          © {fullYear} Mariia Shabelnik, all rights reserved
+        </div>
      </div>
    </footer>
  );
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@ -20,20 +20,22 @@ function Header() {

  const menuUI = menu.map((item) => {
    let className = "drop-shadow-doublelight hover:drop-shadow-active";
-    console.log(location);
    if (`/${location.hash}` === item.link) {
-      className += " text-white  ";
+      className += " text-white";
    } else {
      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={() => {
            setOpen(false);
          }}
          to={item.link}
+          aria-current={
+            location.hash === item.link.slice(2) ? "page" : undefined
+          }
        >
          {item.title}
        </Link>
@ -74,27 +76,54 @@ function Header() {
  return (
    <>
      {isOpen && (
-        <div className={overlayMenu.join(" ")}>
-          <div className=" h-[calc(100vh-20rem)]  flex flex-col justify-center">
-            <ul>{menuUI}</ul>
+        <nav
+          className={overlayMenu.join(" ")}
+          aria-label="Mobile navigation menu"
+          role="navigation"
+        >
+          <div className="h-[calc(100vh-20rem)] flex flex-col justify-center">
+            <ul role="menu" aria-label="Mobile menu items">
+              {menuUI}
+            </ul>
          </div>
-        </div>
+        </nav>
      )}
      <header className={headerClasses.join(" ")}>
-        <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">
+        <div className="container mx-auto h-full max-w-7xl">
+          <nav
+            className="flex items-center h-full px-10"
+            aria-label="Main navigation"
+            role="navigation"
+          >
+            <div className="flex-none text-3xl md:text-4xl font-logo text-[#6d6d6d]">
+              <Link
+                className={logoClasses.join(" ")}
+                to="/#start"
+                aria-label="Home"
+              >
                MS
              </Link>
            </div>

            <div className="grow"></div>
-            <div className="flex-none hidden md:block ">
-              <ul className="flex flex-row gap-4 text-lg">{menuUI}</ul>
+            <div className="flex-none hidden md:block">
+              <ul
+                className="flex flex-row gap-4 text-lg"
+                role="menu"
+                aria-label="Main menu items"
+              >
+                {menuUI}
+              </ul>
            </div>
            <div className="flex-none block md:hidden">
-              <Hamburger toggled={isOpen} toggle={setOpen} duration={0.9} />
+              <Hamburger
+                toggled={isOpen}
+                toggle={setOpen}
+                duration={0.9}
+                aria-label="Toggle mobile menu"
+                aria-expanded={isOpen}
+                aria-controls="mobile-menu"
+              />
            </div>
          </nav>
        </div>
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@ -6,17 +6,20 @@ function About() {
  const skills = useRecoilValue(skillsAtom);

  return (
-    <section className="relative">
+    <section className="relative" aria-labelledby="about-heading">
      <div id="about" className=" absolute    "></div>
      <div className=" min-h-screen flex items-center">
        <div>
-          <h2 className="mb-6 text-subTPhone md:text-subT font-headline">
+          <h2
+            id="about-heading"
+            className="mb-6 text-subTPhone md:text-subT font-headline"
+          >
            About me<span className=" text-highlight">.</span>
          </h2>
          <div className="flex flex-col md:flex-row gap-6">
            <article className="basis-6/12 text-base font-body">
              <p>
-                "I’m a Stockholm-based developer passionate about building
+                "I'm 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
@ -26,7 +29,7 @@ function About() {
                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
+                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
@ -39,21 +42,36 @@ function About() {
                think you've got an opening that I might like, let's connect 🔗 */}
              </p>
            </article>
-            <div className="border ">
+            <figure className="border">
              <img
                className="rounded-3xl"
                src="/public/img/ProfileMe.jpg"
-                alt="profile Image"
+                alt="Mariia Shabelnik's profile photo"
              />
-            </div>
-            <div className=" basis-1/3">
-              <h4 className="mb-2 text-subTMini">Languages:</h4>
-              <Tags listOfTags={skills.languages} />
-              <h4 className="my-2 text-subTMini">Frameworks:</h4>{" "}
-              <Tags listOfTags={skills.frameworks} />
-              <h4 className="my-2 text-subTMini">Tools I use:</h4>{" "}
-              <Tags listOfTags={skills.tools} />
-            </div>
+            </figure>
+            <aside className="basis-1/3" aria-labelledby="skills-heading">
+              <h2 id="skills-heading" className="sr-only">
+                Skills and Technologies
+              </h2>
+              <section aria-labelledby="languages-heading">
+                <h3 id="languages-heading" className="mb-2 text-subTMini">
+                  Languages:
+                </h3>
+                <Tags listOfTags={skills.languages} />
+              </section>
+              <section aria-labelledby="frameworks-heading">
+                <h3 id="frameworks-heading" className="my-2 text-subTMini">
+                  Frameworks:
+                </h3>
+                <Tags listOfTags={skills.frameworks} />
+              </section>
+              <section aria-labelledby="tools-heading">
+                <h3 id="tools-heading" className="my-2 text-subTMini">
+                  Tools I use:
+                </h3>
+                <Tags listOfTags={skills.tools} />
+              </section>
+            </aside>
          </div>
        </div>
      </div>
--- a/src/pages/Experience.jsx
+++ b/src/pages/Experience.jsx
@ -10,60 +10,60 @@ function Experiance() {
    const even = key % 2;

    return (
-      <section
+      <article
        className={`flex-1 gap-4 mb-12 bg-[#f0f0f3] border shadow-box ${
          (even === 0 && "rounded-tl-3xl rounded-br-3xl") ||
          "rounded-tr-3xl rounded-bl-3xl"
        }`}
        key={item.id}
      >
-        <div
-          className={`flex pt-4 md:pt-14 flex-col ${
-            even === 1 && "md:flex-row-reverse"
-          }`}
-        >
-          <div className="  basis-5/12">
-            <img className="w-full" src={item.previewImg} />
+        <div className={`flex pt-4 md:pt-14 flex-col `}>
+          <div className="px-4 mb-4">
+            <h3 className="text-subTMiniPhone md:text-subTMini font-ht">
+              {item.title}
+            </h3>
          </div>
+          <figure className="basis-5/12">
+            <img
+              className="w-full"
+              src={item.previewImg}
+              alt={`Preview of ${item.title} project`}
+            />
+          </figure>
          <div className="grow"></div>
          <div className="flex flex-col px-4 pt-4 pb-8 basis-3/12">
-            <div>
-              <h2 className="text-subTMiniPhone md:text-subTMini mb-4 font-ht">
-                {item.title}
-              </h2>
+            <div className="mb-4">
+              <Tags listOfTags={item.tags} />
            </div>

-            {/* <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
+            <div className="text-base mb-6">
              <p>{item.info}</p>
-            </div> */}
-            <Tags listOfTags={item.tags} />
-            <div className="grow"></div>
-            <div className=" text-left">
-              <Link
-                className=" drop-shadow-doublelight hover:drop-shadow-light "
-                to={`/experience/${item.id}`}
-              >
-                read more
-              </Link>
            </div>
          </div>
        </div>
-      </section>
+      </article>
    );
  });

  return (
-    <div className="relative">
-      <div id="experience" className=" absolute -top-16 "></div>
-      <div className=" min-h-screen">
-        <h2 className=" text-subTPhone md:text-subT font-headline mb-6">
-          Projects<span className=" text-highlight">.</span>
+    <section className="relative" aria-labelledby="projects-heading">
+      <div
+        id="experience"
+        className="absolute -top-16"
+        aria-hidden="true"
+      ></div>
+      <div className="min-h-screen">
+        <h2
+          id="projects-heading"
+          className="text-subTPhone md:text-subT font-headline mb-6"
+        >
+          Projects<span className="text-highlight">.</span>
        </h2>
-        <div className="py-4 flex flex-col md:flex-row  gap-10">
+        <div className="py-4 flex flex-col md:flex-row gap-10" role="list">
          {experianceListUI}
        </div>
      </div>
-    </div>
+    </section>
  );
 }

--- a/src/pages/FullPage.jsx
+++ b/src/pages/FullPage.jsx
@ -1,15 +1,15 @@
 import About from "./About";
-import Contact from "./Contact";
+import Footer from "../components/Footer";
 import Experiance from "./Experience";
 import Start from "./Start";

 function FullPage() {
  return (
-    <div className="container mx-auto px-10 max-w-7xl">
+    <div className="container mx-auto px-10 max-w-6xl">
      <Start />
      <About />
      <Experiance />
-      <Contact />
+      <Footer />
    </div>
  );
 }
--- a/src/store.js
+++ b/src/store.js
@ -4,7 +4,7 @@ const experianceList = [
  {
    id: "46bf76ae-8915-4e5d-ae92-4151be80e75a",
    title: "Netzero web",
-    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.",
+    info: "Led UI/UX design and frontend development for Net0's sustainability platform. Built with React and TypeScript, featuring a modern interface that combines eco-conscious design with efficient user experience.",
    img: ["/img/net0_0.png", "/img/net0_1.png", "/img/net0_2.png"],
    previewImg: "/img/mockup_net0.png",
    tags: [
@ -24,11 +24,11 @@ const experianceList = [
  {
    id: "55515a25-deb1-451c-bc7d-006d293f54aa",
    title: "Lets fly",
-    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.",
+    info: "Developed an aviation services platform using Next.js and WordPress. Implemented server-side rendering for optimal performance and created a responsive design with Tailwind CSS. Integrated GraphQL for efficient data management.",
    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/",
-    previewImg: "/img/mockup_net0.png",
+    previewImg: "/img/letsfly_1.png",
  },
 ];