added text and UI

src/components/Tags.jsx

@@ -1,12 +1,12 @@
 function Tags({ listOfTags }) {
   const tagList = listOfTags.map((itemTag, keyTag) => {
     return (
-      <div className={`bg-gray-600 py-1 px-1 rounded-xl `} key={keyTag}>
+      <div className={`bg-gray-800 py-1 px-2 rounded-xl `} key={keyTag}>
         {itemTag}
       </div>
     );
   });
-  return <div className="text-xs flex gap-2 mt-6 ">{tagList}</div>;
+  return <div className="text-tags flex flex-wrap gap-2  ">{tagList}</div>;
 }
 
 export default Tags;

src/pages/About.jsx

@@ -1,8 +1,37 @@
+import { useRecoilValue } from "recoil";
+import Tags from "../components/Tags";
+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>
-      <h1> About</h1>
+      <h2 className="mb-2 text-subT"> About</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
+            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 🔗
+          </p>
+        </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>
+      </div>
     </div>
   );
 }

src/pages/Experience.jsx

@@ -30,7 +30,7 @@ function Experiance() {
               src={item.img[0]}
             />
           </div>
-          <div className="text-sm">
+          <div className="text-sm mb-6">
             <p>{item.info}</p>
           </div>
           <Tags listOfTags={item.tags} />

src/pages/Start.jsx

@@ -2,14 +2,18 @@ function Start() {
   return (
     <div className="relative">
       <div id="start" className="absolute  -top-16 "></div>
+
       <div>
-        <h1> Start</h1>
-      </div>
-      <div>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos nostrum
-        repudiandae, excepturi, eaque autem tenetur commodi qui praesentium
-        nesciunt atque ullam consectetur cum aliquam corporis quae maxime libero
-        impedit exercitationem?
+        <h1 className=" text-title">Hello, my name is Maria.</h1>
+        <h2 className=" text-subT">I'm a Frontend Engineer</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>
       </div>
     </div>
   );

src/store.js

@@ -11,7 +11,7 @@ const experianceList = [
       "/img/placeholder.png",
       "/img/placeholder.png",
     ],
-    tags: ["react", "vite", "wordpress"],
+    tags: ["React", "Vite", "Wordpress"],
     link: "https://www.net0.se",
   },
   {
@@ -69,3 +69,24 @@ const experianceList = [
 ];
 
 export const projectsAtom = atom({ key: "projects", default: experianceList });
+export const skillsAtom = atom({
+  key: "skills",
+  default: {
+    languages: ["JavaScript", "TypeScript", "SQL", "HTML", "CSS"],
+    frameworks: [
+      "React",
+      "Node.js",
+      "Next.js",
+      "Vite.js",
+      "Apollo GraphQL",
+      "Tailwind",
+      "Material UI",
+      "Chakra UI",
+      "Axios & Fetch",
+      "Framer Motion",
+      "WordPress",
+      "Shopify",
+    ],
+    tools: ["GIT", "MySQL", "Docker"],
+  },
+});

tailwind.config.js

@@ -6,6 +6,19 @@ export default {
       sans: ["Roboto Mono", "system-ui"],
       headline: ["Roboto Mono", "system-ui"],
     },
+    fontSize: {
+      title: ["5rem", { fontWeight: "800" }],
+      subT: ["3.5rem", { fontWeight: "800" }],
+      subTMini: ["1.4rem", { fontWeight: "800" }],
+      tags: ["0.8rem", { fontWeight: "400" }],
+      sm: "0.8rem",
+      base: "1rem",
+      xl: "1.25rem",
+      "2xl": "1.563rem",
+      "3xl": "1.953rem",
+      "4xl": "2.441rem",
+      "5xl": "3.052rem",
+    },
     extend: {
       colors: {
         neon: "#ccff00",