update UI

src/pages/About.jsx

@@ -6,28 +6,28 @@ function About() {
   const skills = useRecoilValue(skillsAtom);
 
   return (
-    <div className="relative">
-      <div id="about" className=" absolute -top-16   "></div>
+    <section className="relative">
+      <div id="about" className=" absolute    "></div>
       <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 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">
-            <div className="basis-2/3 text-base">
+          <div className="flex flex-col md:flex-row gap-6">
+            <article className="basis-6/12 text-base font-body">
               <p>
-                "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!"
+                "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
+                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
@@ -38,6 +38,13 @@ function About() {
                 contribute effectively to the growth of an organization. If you
                 think you've got an opening that I might like, let's connect 🔗 */}
               </p>
+            </article>
+            <div className="border ">
+              <img
+                className="rounded-3xl"
+                src="/public/img/ProfileMe.jpg"
+                alt="profile Image"
+              />
             </div>
             <div className=" basis-1/3">
               <h4 className="mb-2 text-subTMini">Languages:</h4>
@@ -50,7 +57,7 @@ function About() {
           </div>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 

src/pages/Experience.jsx

@@ -7,28 +7,38 @@ function Experiance() {
   const experianceList = useRecoilValue(projectsAtom);
 
   const experianceListUI = experianceList.map((item, key) => {
+    const even = key % 2;
+
     return (
       <section
-        className="flex-1 gap-4 mb-12 bg-[#e0e0e0] border rounded-3xl shadow-box"
+        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>
-          <div className="p-4">
-            <img className="rounded-3xl" src={item.img[0]} />
+        <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>
-          <div className="flex flex-col px-4 pt-4 pb-8">
+          <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 ">
+              <h2 className="text-subTMiniPhone md:text-subTMini mb-4 font-ht">
                 {item.title}
               </h2>
             </div>
 
-            <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
+            {/* <div className="text-base mb-6 line-clamp-3 md:line-clamp-6">
               <p>{item.info}</p>
-            </div>
+            </div> */}
             <Tags listOfTags={item.tags} />
             <div className="grow"></div>
-            <div className=" text-right">
+            <div className=" text-left">
               <Link
                 className=" drop-shadow-doublelight hover:drop-shadow-light "
                 to={`/experience/${item.id}`}
@@ -46,10 +56,10 @@ function Experiance() {
     <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">
-          Experience<span className=" text-highlight">.</span>
+        <h2 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-4">
+        <div className="py-4 flex flex-col md:flex-row  gap-10">
           {experianceListUI}
         </div>
       </div>

src/pages/Start.jsx

@@ -8,11 +8,11 @@ function Start() {
           <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-tags">
+          <h2 className="text-subTPhone md:text-subT font-ht">
             I'm a<span className=" text-highlight"> Frontend Engineer</span>
           </h2>
-          <p className="text-base w-1/2 text-left my-4">
-            Hi, I’m Mariia! I’m a web developer with startup experience,
+          <p className="text-base md:w-1/2 w-full  text-left my-4 font-body">
+            I’m a Stockholm-based 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>{" "}

src/store.js

@@ -6,6 +6,7 @@ const experianceList = [
     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.",
     img: ["/img/net0_0.png", "/img/net0_1.png", "/img/net0_2.png"],
+    previewImg: "/img/mockup_net0.png",
     tags: [
       "React",
       "Vite",
@@ -27,6 +28,7 @@ const experianceList = [
     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",
   },
 ];
 
@@ -58,6 +60,8 @@ export const skillsAtom = atom({
       "TablePlus",
       "Trello",
       "Figma",
+      "Spline",
+      "Blender",
     ],
   },
 });

tailwind.config.js

@@ -3,15 +3,12 @@ export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     fontFamily: {
-      /* //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"],
+      body: ["Jura", "system-ui"],
       //nav
       tags: ["Raleway", "system-ui"],
     },
@@ -39,7 +36,8 @@ export default {
       },
       //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;",
+        box: "8px 8px 16px #cacaca,-8px -8px 16px #f6f6f6",
+        // 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: {