diff --git a/README.md b/README.md
index 200f4282..e92ace6e 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,34 @@
 # Portfolio
+https://project-portfolio-ml.netlify.app/
+
+Marina Lendt – Frontend Developer Portfolio
+
+Project Overview
+This is a personal portfolio website showcasing my projects, skills, and background as a frontend developer. The goal of the project is to demonstrate:
+
+- Responsive, mobile-first design
+- Accessible and user-friendly interfaces
+- Clean, reusable React components
+- Integration of images, icons, and external links
+
+Features
+
+# Header Section
+Introduction with name, profession, and a short bio
+
+# Tech Section
+Showing different tech that I have learnt 
+
+# Projects Section
+Cards displaying featured projects with live demo and GitHub links 
+
+# Skills Section
+Showing different skills in code, toolbox, and other skills
+
+# Articles Section
+Article cards with image, title, date, excerpt, and link to read more
+
+# Accessibility
+Proper use of semantic HTML (<section>, <article>, <time>)
+Focus-visible styles for keyboard navigation
+Alt attributes for all images
\ No newline at end of file
diff --git a/index.html b/index.html
index 6676fb2d..d20fae84 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,35 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Open Graph -->
+  <meta property="og:title" content="Marina Lendt - Frontend Developer">
+  <meta property="og:description" content="From healthcare to frontend development - my portfolio">
+  <meta property="og:image" content="https://project-portfolio-ml.netlify.app/ML-og-image.png">
+  <meta property="og:url" content="https://project-portfolio-ml.netlify.app/">
+  <meta property="og:type" content="website">
+
+  <!-- Favicon for browser -->
+  <link rel="icon" href="/ML-og-image.png" type="image/png">
+
+  <!-- Apple Touch Icon for iOS -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/ML-og-image.png">
+
+  <!-- Google fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet">
+  <title>Portfolio</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 48911600..83c48e82 100644
--- a/package.json
+++ b/package.json
@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
diff --git a/public/ML-og-image.png b/public/ML-og-image.png
new file mode 100644
index 00000000..78608332
Binary files /dev/null and b/public/ML-og-image.png differ
diff --git a/src/App.jsx b/src/App.jsx
index a161d8d3..257a903e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,29 @@
+import React from "react";
+
+import { GlobalStyles } from "./styles/GlobalStyles";
+import { HeaderSection } from "./sections/HeaderSection";
+import { TechSection } from "./sections/TechSection";
+import { ProjectsSection } from "./sections/ProjectsSection";
+import { SkillsSection } from "./sections/SkillsSection";
+import { ArticleSection } from "./sections/ArticleSection";
+import { ContactSection } from "./sections/ContactSection";
+// import { Buttons } from "./components/Buttons";
+
+
+
 export const App = () => {
   return (
     <>
-      <h1>Portfolio</h1>
-      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, laborum! Maxime animi nostrum facilis distinctio neque labore consectetur beatae eum ipsum excepturi voluptatum, dicta repellendus incidunt fugiat, consequatur rem aperiam.</p>
+      <GlobalStyles />
+      <HeaderSection />
+      <TechSection />
+      <ProjectsSection />
+      <SkillsSection />
+      <ArticleSection />
+      <ContactSection />
     </>
-  )
+  );
 }
+
+
+
diff --git a/src/assets/btn-github.svg b/src/assets/btn-github.svg
new file mode 100644
index 00000000..f4cc66bc
--- /dev/null
+++ b/src/assets/btn-github.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1094 22.6562C12.1094 22.5625 12.0156 22.4688 11.875 22.4688C11.7344 22.4688 11.6406 22.5625 11.6406 22.6562C11.6406 22.75 11.7344 22.8438 11.875 22.7969C12.0156 22.7969 12.1094 22.75 12.1094 22.6562ZM10.6562 22.4219C10.6562 22.5156 10.75 22.6562 10.8906 22.6562C10.9844 22.7031 11.125 22.6562 11.1719 22.5625C11.1719 22.4688 11.125 22.375 10.9844 22.3281C10.8438 22.2812 10.7031 22.3281 10.6562 22.4219ZM12.7656 22.375C12.625 22.375 12.5312 22.4688 12.5312 22.6094C12.5312 22.7031 12.6719 22.75 12.8125 22.7031C12.9531 22.6562 13.0469 22.6094 13 22.5156C13 22.4219 12.8594 22.3281 12.7656 22.375ZM15.8125 4.375C9.34375 4.375 4.375 9.34375 4.375 15.8125C4.375 21.0156 7.60938 25.4688 12.2969 27.0625C12.9062 27.1562 13.0938 26.7812 13.0938 26.5C13.0938 26.1719 13.0938 24.5781 13.0938 23.5938C13.0938 23.5938 9.8125 24.2969 9.10938 22.1875C9.10938 22.1875 8.59375 20.8281 7.84375 20.5C7.84375 20.5 6.76562 19.75 7.89062 19.75C7.89062 19.75 9.0625 19.8438 9.71875 20.9688C10.75 22.7969 12.4375 22.2812 13.1406 21.9531C13.2344 21.2031 13.5156 20.6875 13.8906 20.3594C11.2656 20.0781 8.59375 19.7031 8.59375 15.2031C8.59375 13.8906 8.96875 13.2812 9.71875 12.4375C9.57812 12.1094 9.20312 10.8906 9.85938 9.25C10.7969 8.96875 13.0938 10.5156 13.0938 10.5156C14.0312 10.2344 15.0156 10.1406 16 10.1406C17.0312 10.1406 18.0156 10.2344 18.9531 10.5156C18.9531 10.5156 21.2031 8.92188 22.1875 9.25C22.8438 10.8906 22.4219 12.1094 22.3281 12.4375C23.0781 13.2812 23.5469 13.8906 23.5469 15.2031C23.5469 19.7031 20.7812 20.0781 18.1562 20.3594C18.5781 20.7344 18.9531 21.4375 18.9531 22.5625C18.9531 24.1094 18.9062 26.0781 18.9062 26.4531C18.9062 26.7812 19.1406 27.1562 19.75 27.0156C24.4375 25.4688 27.625 21.0156 27.625 15.8125C27.625 9.34375 22.3281 4.375 15.8125 4.375ZM8.92188 20.5469C8.82812 20.5938 8.875 20.7344 8.92188 20.8281C9.01562 20.875 9.10938 20.9219 9.20312 20.875C9.25 20.8281 9.25 20.6875 9.15625 20.5938C9.0625 20.5469 8.96875 20.5 8.92188 20.5469ZM8.40625 20.1719C8.35938 20.2656 8.40625 20.3125 8.5 20.3594C8.59375 20.4062 8.6875 20.4062 8.73438 20.3125C8.73438 20.2656 8.6875 20.2188 8.59375 20.1719C8.5 20.125 8.45312 20.125 8.40625 20.1719ZM9.90625 21.8594C9.85938 21.9062 9.85938 22.0469 10 22.1406C10.0938 22.2344 10.2344 22.2812 10.2812 22.1875C10.3281 22.1406 10.3281 22 10.2344 21.9062C10.1406 21.8125 10 21.7656 9.90625 21.8594ZM9.39062 21.1562C9.29688 21.2031 9.29688 21.3438 9.39062 21.4375C9.48438 21.5312 9.57812 21.5781 9.67188 21.5312C9.71875 21.4844 9.71875 21.3438 9.67188 21.25C9.57812 21.1562 9.48438 21.1094 9.39062 21.1562Z" fill="white"/>
+</svg>
diff --git a/src/assets/btn-instagram.svg b/src/assets/btn-instagram.svg
new file mode 100644
index 00000000..60fedfbd
--- /dev/null
+++ b/src/assets/btn-instagram.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 10.6094C13 10.6094 10.6094 13.0469 10.6094 16C10.6094 19 13 21.3906 16 21.3906C18.9531 21.3906 21.3906 19 21.3906 16C21.3906 13.0469 18.9531 10.6094 16 10.6094ZM16 19.5156C14.0781 19.5156 12.4844 17.9688 12.4844 16C12.4844 14.0781 14.0312 12.5312 16 12.5312C17.9219 12.5312 19.4688 14.0781 19.4688 16C19.4688 17.9688 17.9219 19.5156 16 19.5156ZM22.8438 10.4219C22.8438 9.71875 22.2812 9.15625 21.5781 9.15625C20.875 9.15625 20.3125 9.71875 20.3125 10.4219C20.3125 11.125 20.875 11.6875 21.5781 11.6875C22.2812 11.6875 22.8438 11.125 22.8438 10.4219ZM26.4062 11.6875C26.3125 10 25.9375 8.5 24.7188 7.28125C23.5 6.0625 22 5.6875 20.3125 5.59375C18.5781 5.5 13.375 5.5 11.6406 5.59375C9.95312 5.6875 8.5 6.0625 7.23438 7.28125C6.01562 8.5 5.64062 10 5.54688 11.6875C5.45312 13.4219 5.45312 18.625 5.54688 20.3594C5.64062 22.0469 6.01562 23.5 7.23438 24.7656C8.5 25.9844 9.95312 26.3594 11.6406 26.4531C13.375 26.5469 18.5781 26.5469 20.3125 26.4531C22 26.3594 23.5 25.9844 24.7188 24.7656C25.9375 23.5 26.3125 22.0469 26.4062 20.3594C26.5 18.625 26.5 13.4219 26.4062 11.6875ZM24.1562 22.1875C23.8281 23.125 23.0781 23.8281 22.1875 24.2031C20.7812 24.7656 17.5 24.625 16 24.625C14.4531 24.625 11.1719 24.7656 9.8125 24.2031C8.875 23.8281 8.17188 23.125 7.79688 22.1875C7.23438 20.8281 7.375 17.5469 7.375 16C7.375 14.5 7.23438 11.2188 7.79688 9.8125C8.17188 8.92188 8.875 8.21875 9.8125 7.84375C11.1719 7.28125 14.4531 7.42188 16 7.42188C17.5 7.42188 20.7812 7.28125 22.1875 7.84375C23.0781 8.17188 23.7812 8.92188 24.1562 9.8125C24.7188 11.2188 24.5781 14.5 24.5781 16C24.5781 17.5469 24.7188 20.8281 24.1562 22.1875Z" fill="white"/>
+</svg>
diff --git a/src/assets/btn-linkedin.svg b/src/assets/btn-linkedin.svg
new file mode 100644
index 00000000..cd79edde
--- /dev/null
+++ b/src/assets/btn-linkedin.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1875 25V10.9844H5.82812V25H10.1875ZM7.98438 9.10938C9.39062 9.10938 10.5156 7.9375 10.5156 6.53125C10.5156 5.17188 9.39062 4.04688 7.98438 4.04688C6.625 4.04688 5.5 5.17188 5.5 6.53125C5.5 7.9375 6.625 9.10938 7.98438 9.10938ZM26.4531 25H26.5V17.3125C26.5 13.5625 25.6562 10.6562 21.25 10.6562C19.1406 10.6562 17.7344 11.8281 17.125 12.9062H17.0781V10.9844H12.9062V25H17.2656V18.0625C17.2656 16.2344 17.5938 14.5 19.8438 14.5C22.0938 14.5 22.1406 16.5625 22.1406 18.2031V25H26.4531Z" fill="white"/>
+</svg>
diff --git a/src/assets/business-site.png b/src/assets/business-site.png
new file mode 100644
index 00000000..72c4747f
Binary files /dev/null and b/src/assets/business-site.png differ
diff --git a/src/assets/data-img.jpg b/src/assets/data-img.jpg
new file mode 100644
index 00000000..4d8fd7a0
Binary files /dev/null and b/src/assets/data-img.jpg differ
diff --git a/src/assets/floorball-img.jpg b/src/assets/floorball-img.jpg
new file mode 100644
index 00000000..c2c3ddfb
Binary files /dev/null and b/src/assets/floorball-img.jpg differ
diff --git a/src/assets/icon-arrow-down.svg b/src/assets/icon-arrow-down.svg
new file mode 100644
index 00000000..b4c1dd4a
--- /dev/null
+++ b/src/assets/icon-arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 21L21 15L18.9 12.9L16.5 15.3V9H13.5V15.3L11.1 12.9L9 15L15 21ZM15 30C12.925 30 10.975 29.6062 9.15 28.8187C7.325 28.0312 5.7375 26.9625 4.3875 25.6125C3.0375 24.2625 1.96875 22.675 1.18125 20.85C0.39375 19.025 0 17.075 0 15C0 12.925 0.39375 10.975 1.18125 9.15C1.96875 7.325 3.0375 5.7375 4.3875 4.3875C5.7375 3.0375 7.325 1.96875 9.15 1.18125C10.975 0.39375 12.925 0 15 0C17.075 0 19.025 0.39375 20.85 1.18125C22.675 1.96875 24.2625 3.0375 25.6125 4.3875C26.9625 5.7375 28.0312 7.325 28.8187 9.15C29.6062 10.975 30 12.925 30 15C30 17.075 29.6062 19.025 28.8187 20.85C28.0312 22.675 26.9625 24.2625 25.6125 25.6125C24.2625 26.9625 22.675 28.0312 20.85 28.8187C19.025 29.6062 17.075 30 15 30ZM15 27C18.35 27 21.1875 25.8375 23.5125 23.5125C25.8375 21.1875 27 18.35 27 15C27 11.65 25.8375 8.8125 23.5125 6.4875C21.1875 4.1625 18.35 3 15 3C11.65 3 8.8125 4.1625 6.4875 6.4875C4.1625 8.8125 3 11.65 3 15C3 18.35 4.1625 21.1875 6.4875 23.5125C8.8125 25.8375 11.65 27 15 27Z" fill="#1C1B1F"/>
+</svg>
diff --git a/src/assets/icon-github.svg b/src/assets/icon-github.svg
new file mode 100644
index 00000000..89f5ddb4
--- /dev/null
+++ b/src/assets/icon-github.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6452 25.7684C10.6452 25.6363 10.5161 25.5042 10.3226 25.5042C10.129 25.5042 10 25.6363 10 25.7684C10 25.9006 10.129 26.0327 10.3226 25.9667C10.5161 25.9667 10.6452 25.9006 10.6452 25.7684ZM8.64516 25.4381C8.64516 25.5702 8.77419 25.7684 8.96774 25.7684C9.09677 25.8345 9.29032 25.7684 9.35484 25.6363C9.35484 25.5042 9.29032 25.372 9.09677 25.3059C8.90323 25.2399 8.70968 25.3059 8.64516 25.4381ZM11.5484 25.372C11.3548 25.372 11.2258 25.5042 11.2258 25.7024C11.2258 25.8345 11.4194 25.9006 11.6129 25.8345C11.8065 25.7684 11.9355 25.7024 11.871 25.5702C11.871 25.4381 11.6774 25.3059 11.5484 25.372ZM15.7419 0C6.83871 0 0 7.00373 0 16.1218C0 23.4559 4.45161 29.7328 10.9032 31.9793C11.7419 32.1115 12 31.5829 12 31.1864C12 30.7239 12 28.4774 12 27.0899C12 27.0899 7.48387 28.081 6.51613 25.1077C6.51613 25.1077 5.80645 23.1916 4.77419 22.7291C4.77419 22.7291 3.29032 21.6719 4.83871 21.6719C4.83871 21.6719 6.45161 21.8041 7.35484 23.3898C8.77419 25.9667 11.0968 25.2399 12.0645 24.7774C12.1935 23.7202 12.5806 22.9934 13.0968 22.5309C9.48387 22.1344 5.80645 21.6059 5.80645 15.2628C5.80645 13.4128 6.32258 12.5539 7.35484 11.3645C7.16129 10.902 6.64516 9.18414 7.54839 6.87159C8.83871 6.47515 12 8.65556 12 8.65556C13.2903 8.25912 14.6452 8.12697 16 8.12697C17.4194 8.12697 18.7742 8.25912 20.0645 8.65556C20.0645 8.65556 23.1613 6.40908 24.5161 6.87159C25.4194 9.18414 24.8387 10.902 24.7097 11.3645C25.7419 12.5539 26.3871 13.4128 26.3871 15.2628C26.3871 21.6059 22.5806 22.1344 18.9677 22.5309C19.5484 23.0595 20.0645 24.0506 20.0645 25.6363C20.0645 27.8167 20 30.5918 20 31.1204C20 31.5829 20.3226 32.1115 21.1613 31.9132C27.6129 29.7328 32 23.4559 32 16.1218C32 7.00373 24.7097 0 15.7419 0ZM6.25806 22.7952C6.12903 22.8612 6.19355 23.0595 6.25806 23.1916C6.3871 23.2577 6.51613 23.3237 6.64516 23.2577C6.70968 23.1916 6.70968 22.9934 6.58065 22.8612C6.45161 22.7952 6.32258 22.7291 6.25806 22.7952ZM5.54839 22.2666C5.48387 22.3987 5.54839 22.4648 5.67742 22.5309C5.80645 22.5969 5.93548 22.5969 6 22.4648C6 22.3987 5.93548 22.3327 5.80645 22.2666C5.67742 22.2005 5.6129 22.2005 5.54839 22.2666ZM7.6129 24.6452C7.54839 24.7113 7.54839 24.9095 7.74194 25.0416C7.87097 25.1738 8.06452 25.2399 8.12903 25.1077C8.19355 25.0416 8.19355 24.8434 8.06452 24.7113C7.93548 24.5791 7.74194 24.5131 7.6129 24.6452ZM6.90323 23.6541C6.77419 23.7202 6.77419 23.9184 6.90323 24.0506C7.03226 24.1827 7.16129 24.2488 7.29032 24.1827C7.35484 24.1166 7.35484 23.9184 7.29032 23.7863C7.16129 23.6541 7.03226 23.588 6.90323 23.6541Z" fill="white"/>
+</svg>
diff --git a/src/assets/icon-web.svg b/src/assets/icon-web.svg
new file mode 100644
index 00000000..e752b728
--- /dev/null
+++ b/src/assets/icon-web.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.495 30.99C23.97 30.99 30.99 23.985 30.99 15.495C30.99 7.02 23.97 0 15.48 0C7.005 0 0 7.02 0 15.495C0 23.985 7.02 30.99 15.495 30.99ZM6.465 6.06C7.965 4.635 9.78 3.54 11.805 2.94C10.74 4.005 9.84 5.50501 9.165 7.335C8.115 7.005 7.21501 6.57 6.465 6.06ZM19.2001 2.955C21.21 3.555 23.025 4.635 24.51 6.06C23.775 6.58499 22.8751 7.005 21.825 7.35C21.15 5.50501 20.25 4.005 19.2001 2.955ZM16.545 3.435C17.79 4.035 18.93 5.655 19.74 7.86C18.75 8.03999 17.685 8.14501 16.545 8.19V3.435ZM11.25 7.86C12.075 5.655 13.2001 4.035 14.445 3.435V8.19C13.305 8.14501 12.24 8.03999 11.25 7.86ZM2.445 14.4451C2.65501 11.895 3.61501 9.54 5.085 7.605C6 8.27999 7.185 8.86501 8.565 9.3C8.17501 10.86 7.92 12.5999 7.845 14.4451H2.445ZM23.145 14.4451C23.07 12.5999 22.815 10.86 22.425 9.3C23.805 8.86501 24.99 8.295 25.89 7.605C27.375 9.54 28.335 11.895 28.545 14.4451H23.145ZM9.99 14.4451C10.065 12.81 10.29 11.25 10.635 9.83999C11.835 10.08 13.1099 10.23 14.445 10.29V14.4451H9.99ZM16.545 14.4451V10.29C17.88 10.23 19.155 10.08 20.355 9.83999C20.7 11.25 20.925 12.81 21 14.4451H16.545ZM2.445 16.545H7.845C7.92 18.42 8.17501 20.175 8.565 21.75C7.2 22.185 6.03 22.755 5.13 23.43C3.63 21.4799 2.65501 19.11 2.445 16.545ZM9.99 16.545H14.445V20.775C13.125 20.835 11.835 20.985 10.65 21.21C10.29 19.785 10.05 18.195 9.99 16.545ZM16.545 20.775V16.545H21C20.94 18.195 20.7 19.785 20.34 21.21C19.155 20.985 17.88 20.835 16.545 20.775ZM22.425 21.75C22.83 20.175 23.07 18.42 23.145 16.545H28.545C28.335 19.11 27.3601 21.4799 25.86 23.43C24.9601 22.755 23.79 22.185 22.425 21.75ZM16.545 22.875C17.6699 22.9199 18.735 23.025 19.71 23.205C18.9 25.365 17.775 26.97 16.545 27.555V22.875ZM11.28 23.205C12.255 23.025 13.32 22.9199 14.445 22.875V27.555C13.215 26.97 12.09 25.365 11.28 23.205ZM6.50999 24.975C7.245 24.465 8.145 24.0451 9.18 23.715C9.85501 25.515 10.74 26.985 11.775 28.035C9.795 27.435 7.995 26.3701 6.50999 24.975ZM21.81 23.715C22.845 24.0451 23.745 24.465 24.4801 24.975C22.995 26.3701 21.1949 27.435 19.215 28.035C20.25 26.985 21.135 25.515 21.81 23.715Z" fill="white"/>
+</svg>
diff --git a/src/assets/picture1.jpg b/src/assets/picture1.jpg
new file mode 100644
index 00000000..340f543a
Binary files /dev/null and b/src/assets/picture1.jpg differ
diff --git a/src/assets/picture2.jpg b/src/assets/picture2.jpg
new file mode 100644
index 00000000..66fa19f3
Binary files /dev/null and b/src/assets/picture2.jpg differ
diff --git a/src/assets/picture3.jpg b/src/assets/picture3.jpg
new file mode 100644
index 00000000..f8e9e05d
Binary files /dev/null and b/src/assets/picture3.jpg differ
diff --git a/src/assets/profile-img.jpg b/src/assets/profile-img.jpg
new file mode 100644
index 00000000..915ccb15
Binary files /dev/null and b/src/assets/profile-img.jpg differ
diff --git a/src/assets/quiz-app.png b/src/assets/quiz-app.png
new file mode 100644
index 00000000..99fca5b0
Binary files /dev/null and b/src/assets/quiz-app.png differ
diff --git a/src/assets/recipe-library.png b/src/assets/recipe-library.png
new file mode 100644
index 00000000..0277ce87
Binary files /dev/null and b/src/assets/recipe-library.png differ
diff --git a/src/assets/stethoscope-img.jpg b/src/assets/stethoscope-img.jpg
new file mode 100644
index 00000000..546c1c43
Binary files /dev/null and b/src/assets/stethoscope-img.jpg differ
diff --git a/src/assets/weather-app.png b/src/assets/weather-app.png
new file mode 100644
index 00000000..8a270d51
Binary files /dev/null and b/src/assets/weather-app.png differ
diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard.jsx
new file mode 100644
index 00000000..f0e4856a
--- /dev/null
+++ b/src/components/ArticleCard.jsx
@@ -0,0 +1,143 @@
+import React from "react";
+import styled from "styled-components";
+import IconWebSVG from "../assets/icon-web.svg";
+
+export const ArticleCard = ({ data }) => {
+  return (
+    <CardWrapper>
+      <ImageBox>
+        <Image src={data.image} alt={data.title} />
+      </ImageBox>
+      <TextBox>
+        <DateTag dateTime={data.date}>{data.date}</DateTag>
+        <CardTitle>{data.title}</CardTitle>
+        <CardText>{data.text}</CardText>
+        <ReadButton href={data.link} aria-label={`Read full article: ${data.title}`}>
+          <ButtonIcon src={IconWebSVG} alt="" /> Read article
+        </ReadButton>
+      </TextBox>
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+  margin-top: 64px;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: flex-start; 
+    gap: 32px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    gap: 125px;
+  }
+`;
+
+const ImageBox = styled.div`
+  width: 327px;
+  height: 200px; 
+  flex-shrink: 0;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    width: 200px;
+    height: 338px;
+    flex-shrink: 0;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    width: 479px;
+    height: 311px;
+  }
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  object-fit: cover;
+`;
+
+const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  text-align: left;
+  font-size: 16px;
+  
+  /* Tablet */
+  @media (min-width: 768px) {
+    padding-left:0;
+    max-width: calc(100% - 200px);
+  }
+    
+  /* Desktop */
+  @media (min-width: 1024px) {
+    max-width: calc(100% - 379px);
+  }
+`;
+
+const DateTag = styled.time`
+  display: flex;
+  align-items: center;
+  width: 130px;
+  height: 24px;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
+  border: 1px solid rgba(0, 0, 0, 1);
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 500;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 24px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 1);
+  line-height: 24px;
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    font-size: 30px;
+  }
+`;
+
+const CardText = styled.p`
+  font-size: 16px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 22px;
+`;
+
+const ReadButton = styled.a`
+  width: 271px;
+  height: 48px;
+  display: inline-flex;
+  text-align: center;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 1);
+  color: rgba(255, 255, 255, 1) ;
+  border-radius: 12px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 3px solid #f39c12;
+    outline-offset: 2px;
+  }
+`;
+
+const ButtonIcon = styled.img`
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;
\ No newline at end of file
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
new file mode 100644
index 00000000..5b056c92
--- /dev/null
+++ b/src/components/ProjectCard.jsx
@@ -0,0 +1,164 @@
+import React from "react";
+import styled from "styled-components";
+import IconWebSVG from "../assets/icon-web.svg";
+import IconGithubSVG from "../assets/icon-github.svg";
+
+export const ProjectCard = ({ project }) => {
+  const { title, description, tech, liveDemo, viewCode, image } = project;
+
+  return (
+    <CardWrapper role="group" aria-label={`Project: ${title}`}>
+      <ProjectImage src={image} alt={`${title} picture showing project`} />
+      <ProjectInfo>
+        <TechTags>
+          {tech.map((item) => (
+            <Tag key={item}>{item}</Tag>
+          ))}
+        </TechTags>
+
+        <ProjectTitle>{title}</ProjectTitle>
+        <ProjectDescription>{description}</ProjectDescription>
+        <Buttons>
+          <ButtonPrimary href={liveDemo} target="_blank" rel="noopener noreferrer">
+            <Icon src={IconWebSVG} alt="" aria-hidden="true" /> Live demo
+          </ButtonPrimary>
+          <ButtonPrimary href={viewCode} target="_blank" rel="noopener noreferrer">
+            <Icon src={IconGithubSVG} alt="" aria-hidden="true" /> View code
+          </ButtonPrimary>
+        </Buttons>
+
+      </ProjectInfo>
+    </CardWrapper>
+  );
+};
+
+const CardWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+
+  /*  Desktop */
+  @media (min-width: 1024px) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 80px;
+
+    &:nth-child(even) {
+      flex-direction: row-reverse;
+    }
+  }
+`;
+
+const ProjectImage = styled.img`
+  width: 100%;
+  max-width: 343px;
+  max-height: 479px;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  object-fit: cover;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    max-width: 696px;
+    margin: 0 auto;
+  }
+
+   /* Desktop */
+  @media (min-width: 1024px) {
+    max-width: 479px;
+    flex-shrink: 0;
+  }
+`;
+
+const ProjectInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    align-items: flex-start;
+    text-align: left;
+    width: 100%; 
+    margin: 0;
+    max-width: 479px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    max-width: 580px;
+  }
+`;
+
+const TechTags = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+const Tag = styled.li`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 71px;
+  min-height: 24px;
+  background: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(0, 0, 0, 1);
+  border-radius: 4px;
+  padding: 2px 6px;
+  font-size: 16px;
+`;
+
+const ProjectTitle = styled.h3`
+  font-size: 24px;
+  font-weight: 500;
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    font-size: 30px;
+  }
+`;
+
+const ProjectDescription = styled.p`
+  font-size: 16px;
+  line-height: 1.4;
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    font-size: 18px;
+  }
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+`;
+
+const ButtonPrimary = styled.a`
+  display: inline-flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 303px;
+
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 1);
+  color: rgba(255, 255, 255, 1);
+  text-decoration: none;
+  font-weight: 500;
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+const Icon = styled.img`
+  width: 31px;
+  height: 31px;
+  margin-right: 8px;
+`;
\ No newline at end of file
diff --git a/src/components/SkillsCard.jsx b/src/components/SkillsCard.jsx
new file mode 100644
index 00000000..7218854f
--- /dev/null
+++ b/src/components/SkillsCard.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import styled from "styled-components";
+
+export const SkillsCard = ({ category }) => {
+  return (
+    <CardWrapper>
+      <CategoryTitle>{category.title}</CategoryTitle>
+      <SkillTags aria-label={`Skills in ${category.title}`}>
+        {category.skills.map((skill, index) => (
+          <Tag key={index}>{skill}</Tag>
+        ))}
+      </SkillTags>
+    </CardWrapper>
+  );
+};
+
+//här tar vi emot category som prop. Vi loopar igenom category.skills för att visa varje skill i en lista. 
+
+const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: rgba(0, 0, 0, 1) ;
+  color: rgba(255, 255, 255, 1) ; 
+  width: 165px;
+`;
+
+const CategoryTitle = styled.h3`
+  display: inline-flex;
+  justify-content: center;
+  padding: 2px 6px;
+  border: 1px solid rgba(228, 228, 228, 1);
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 500;
+`;
+
+const SkillTags = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  list-style: none;
+`;
+
+const Tag = styled.li`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 22px;
+`;
+
diff --git a/src/data/articles.js b/src/data/articles.js
new file mode 100644
index 00000000..42b2c63c
--- /dev/null
+++ b/src/data/articles.js
@@ -0,0 +1,33 @@
+import React from "react";
+import ArticleImage1 from "../assets/floorball-img.jpg";
+import ArticleImage2 from "../assets/stethoscope-img.jpg";
+import ArticleImage3 from "../assets/data-img.jpg";
+
+
+export const articles = [
+  {
+    image: ArticleImage1,
+    date: "February 24th",
+    title: "Where is the passion?",
+    text: "From sports fields to lines of code. I’m a former nurse and elite athlete turned Frontend Developer student. I thrive on teamwork, problem-solving, and building creative, user-centered web solutions. Currently exploring HTML, CSS, JavaScript, React, and Node.js — always learning and growing in tech.",
+    link: "https://www.linkedin.com/posts/marina-lendt-1b3439194_fr%C3%A5n-idrottsplanen-till-kodraderna-activity-7395022889470656512-2L0E?utm_source=share&utm_medium=member_desktop&rcm=ACoAAC2gYNcBFQ9RdRRKm6_ec4kEU-b_foJs9Q8"
+
+  },
+
+  {
+    image: ArticleImage2,
+    date: "July 14th",
+    title: "Teamwork and Growth in the Workplace",
+    text: "Teamwork, trust, and growth. Working closely with dedicated colleagues in healthcare taught me the value of teamwork, clear communication, and trust. I thrive and develop best when I feel supported and can rely on the people around me — principles I now carry with me into web development, where collaboration and shared purpose drive both learning and success.",
+    link: "https://narrow-composer-f16.notion.site/Teamwork-and-Growth-in-the-Workplace-2b9c059d9f1480cc9e90e31f5bab4013?source=copy_link"
+
+  },
+
+  {
+    image: ArticleImage3,
+    date: "November 9th",
+    title: "Starting Over: Embracing a New Career in Tech",
+    text: "Embracing a new beginning. Changing careers after nearly 18 years in the same field was both challenging and exciting. Starting from scratch in web development has tested me in many ways, but it’s also incredibly rewarding. Every day brings opportunities to learn, solve problems, and grow — and I’m just getting started on this new journey!",
+    link: "https://narrow-composer-f16.notion.site/Starting-Over-Embracing-a-New-Career-in-Tech-2b9c059d9f1480b6ba79cbba9750e201?source=copy_link"
+  }
+];
diff --git a/src/data/projects.js b/src/data/projects.js
new file mode 100644
index 00000000..14b59065
--- /dev/null
+++ b/src/data/projects.js
@@ -0,0 +1,43 @@
+import ProjectImage1 from "../assets/business-site.png";
+import ProjectImage2 from "../assets/recipe-library.png";
+import ProjectImage3 from "../assets/weather-app.png";
+import ProjectImage4 from "../assets/quiz-app.png";
+
+export const projects = [
+  {
+    image: ProjectImage1,
+    title: "Business site",
+    description: "My very first project in coding ever. A fictive webpage about a small sourdough-based bakery. Built only with HTML and CSS",
+    tech: ["HTML", "CSS"],
+    liveDemo: "https://breadrevolt.netlify.app/",
+    viewCode: "https://github.com/marinalendt-png/js-project-business-site",
+  },
+
+  {
+    image: ProjectImage2,
+    title: "Recipe library",
+    description: "This is a basic recipe-site where I used API for the first time. A recipe library app where you can search for different recipes based on cuisines",
+    tech: ["HTML", "CSS", "API", "JavaScript"],
+    liveDemo: "https://marina-recipelibrary.netlify.app/",
+    viewCode: "https://github.com/marinalendt-png/js-project-recipe-library",
+  },
+
+  {
+    image: ProjectImage3,
+    title: "Weather App",
+    description: "This was a very fun mob-programming project. A weather app were we used real-live API from SMHI",
+    tech: ["HTML", "CSS", "API", "JavaScript", "TypeScript", "Mob-programming"],
+    liveDemo: "https://project-weather-app-b2.netlify.app/",
+    viewCode: "https://github.com/marinalendt-png/js-project-weather-app",
+  },
+
+  {
+    image: ProjectImage4,
+    title: "Accessibility app",
+    description: "Quiz Bonanza! Also a mob-programming project based on accessibility. This app is a quiz with random questions, accessible for everyone!",
+    tech: ["HTML", "CSS", "API", "JavaScript", "TypeScript", "Mob-programming", "Tailwind CSS"],
+    liveDemo: "https://quizbonanza.netlify.app/",
+    viewCode: "https://github.com/gabriellaberko/js-project-accessibility",
+  },
+];
+
diff --git a/src/data/projects.json b/src/data/projects.json
deleted file mode 100644
index 7c426028..00000000
--- a/src/data/projects.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "projects": [
-    {
-      "name": "Business site",
-      "image": "https://images.unsplash.com/photo-1557008075-7f2c5efa4cfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2497&q=80",
-      "tags": [
-        "HTML5",
-        "CSS3",
-        "JavaScript"
-      ],
-      "netlify": "link",
-      "github": "link"
-    },
-    {
-      "name": "Weather app",
-      "image": "https://images.unsplash.com/photo-1520792532857-293bd046307a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2370&q=80",
-      "tags": [
-        "HTML5",
-        "CSS3",
-        "JavaScript",
-        "TypeScript",
-        "APIs"
-      ],
-      "netlify": "link",
-      "github": "link"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/src/data/skills.js b/src/data/skills.js
new file mode 100644
index 00000000..d5dbf39e
--- /dev/null
+++ b/src/data/skills.js
@@ -0,0 +1,21 @@
+export const skills = [
+  {
+    title: "Code",
+    skills: ["HTML", "CSS", "JavaScript", "TypeScript", "React", "Accessibility", "Tailwind CSS"],
+  },
+
+  {
+    title: "Toolbox",
+    skills: ["VS Code", "Figma", "GitHub", "Disco", "Notion", "Google"],
+  },
+
+  {
+    title: "Upcoming",
+    skills: ["Node.js"],
+  },
+
+  {
+    title: "More",
+    skills: ["Teamwork", "Communication", "Problem solving", "Compassion"],
+  },
+]; 
\ No newline at end of file
diff --git a/src/data/tech.js b/src/data/tech.js
new file mode 100644
index 00000000..72689240
--- /dev/null
+++ b/src/data/tech.js
@@ -0,0 +1,15 @@
+export const tech = [
+  "HTML",
+  "CSS",
+  "Flexbox",
+  "Grid",
+  "JavaScript",
+  "JSX",
+  "React",
+  "Node.js",
+  "Web Accessibility",
+  "APIs",
+  "GitHub",
+  "Figma",
+  "Mob-programming",
+];
diff --git a/src/index.css b/src/index.css
index 61010be6..e69de29b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +0,0 @@
-body {
-  background: pink;
-  color: hotpink;
-}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index ed109d76..d37526f3 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -8,5 +8,5 @@ import './index.css'
 createRoot(document.getElementById('root')).render(
   <StrictMode>
     <App />
-  </StrictMode>,
+  </StrictMode>
 )
diff --git a/src/sections/ArticleSection.jsx b/src/sections/ArticleSection.jsx
new file mode 100644
index 00000000..fc7f5152
--- /dev/null
+++ b/src/sections/ArticleSection.jsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { articles } from "../data/articles";
+import { ArticleCard } from "../components/ArticleCard";
+import styled from "styled-components";
+
+
+export const ArticleSection = ({ data }) => {
+  return (
+    <SectionWrapper>
+      <SectionTitle>My Words</SectionTitle>
+      <ArticlesGrid as="ul">
+        {articles.map((article, index) => (
+          <li key={index}>
+            <ArticleCard data={article} />
+          </li>
+        ))}
+      </ArticlesGrid>
+    </SectionWrapper>
+  );
+}
+
+const SectionWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 64px 16px;
+  background-color: rgba(255, 255, 255, 1);
+
+  /* Tablet */
+   @media (min-width: 768px) {
+   padding: 64px 24px; 
+    gap: 64px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    padding: 128px 128px;
+    gap: 128px;
+  }
+`;
+
+const SectionTitle = styled.h2`
+  font-size: 48px;
+  font-weight: 700;
+  text-align: center;
+  color: rgba(0, 0, 0, 1);
+  line-height: 44px;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    font-size: 48px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    font-size: 80px;
+  }
+`;
+
+const ArticlesGrid = styled.ul`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 48px; 
+  margin: 0 auto;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    gap: 64px;
+  }
+
+  /* Desktop */ 
+  @media (min-width: 1024px) {
+    gap: 96px;
+  }
+`;
diff --git a/src/sections/ContactSection.jsx b/src/sections/ContactSection.jsx
new file mode 100644
index 00000000..4cbfe777
--- /dev/null
+++ b/src/sections/ContactSection.jsx
@@ -0,0 +1,96 @@
+import React from "react";
+import styled from "styled-components";
+import ProfileImage from "../assets/profile-img.jpg";
+import ButtonInstagramSVG from "../assets/btn-instagram.svg";
+import ButtonLinkedInSVG from "../assets/btn-linkedin.svg";
+import ButtonGithubSVG from "../assets/btn-github.svg";
+
+
+export const ContactSection = () => {
+  return (
+    <Wrapper>
+      <Title>Let´s Talk</Title>
+      <Image src={ProfileImage} alt="Profile picture of Marina Lendt" />
+      <ContactInfo>
+        <Name>Marina Lendt</Name>
+        <Phone>+46(0)708 60 72 77</Phone>
+        <Email>marinalendt@gmail.com</Email>
+      </ContactInfo>
+      <SocialLinks>
+        <SocialButton href="www.linkedin.com/in/marina-lendt-1b3439194" aria-label="Visit me on LinkedIn" target="blank" rel="noopener noreferrer">
+          <img src={ButtonLinkedInSVG} alt="LinkedIn" />
+        </SocialButton>
+        <SocialButton href="https://github.com/dashboard" aria-label="Visit me on Github" target="blank" rel="noopener noreferrer">
+          <img src={ButtonGithubSVG} alt="Github" />
+        </SocialButton>
+        <SocialButton href="https://www.instagram.com/marinalendt/" aria-label="Visit me on Instagram" target="blank" rel="noopener noreferrer">
+          <img src={ButtonInstagramSVG} alt="Instagram" />
+        </SocialButton>
+      </SocialLinks>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  width: 100%;
+  background: rgba(0, 0, 0, 1);
+  color: rgba(255, 255, 255, 1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 64px 16px;
+  gap: 32px;
+`;
+
+const Title = styled.h2`
+  font-size: 48px;
+  font-weight: 700;
+`;
+
+const Image = styled.img`
+  width: 164px;
+  height: 164px;
+  border-radius: 50%;
+`;
+
+const ContactInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+
+  /* Tablet och desktop */
+  @media (min-width: 768px) {
+    align-items: center;
+  }
+`;
+
+const Name = styled.p`
+  font-size: 24px;
+  font-weight: 500;
+`;
+
+const Phone = styled.p`
+  font-size: 24px;
+  font-weight: 500;
+`;
+
+const Email = styled.p`
+  font-size: 24px;
+  font-weight: 500;
+`;
+
+const SocialLinks = styled.div`
+  display: flex;
+  gap: 16px;
+`;
+
+const SocialButton = styled.a`
+  padding: 8px 12px;
+  transition: 0.2s;
+
+ &:focus-visible {
+    outline: 3px solid #f39c12;
+    outline-offset: 2px;
+  }
+`;
diff --git a/src/sections/HeaderSection.jsx b/src/sections/HeaderSection.jsx
new file mode 100644
index 00000000..c1bd679f
--- /dev/null
+++ b/src/sections/HeaderSection.jsx
@@ -0,0 +1,246 @@
+import React from "react";
+import styled from "styled-components";
+import picture1 from "../assets/picture1.jpg";
+import picture2 from "../assets/picture2.jpg";
+import picture3 from "../assets/picture3.jpg";
+
+export const HeaderSection = () => {
+  return (
+    <Wrapper>
+      <TextBox>
+        <p>Hi there, I´m</p> {/* Used p here instead of h3 for accessibility */}
+        <h1>Marina Lendt</h1>
+      </TextBox>
+
+      <ContentWrapper>
+        <h2>Frontend Developer in training. I love teamwork and like building friendly, accessible websites</h2>
+        <ImageBox>
+          <img src={picture1} alt="Picture of nature" />
+          <img src={picture2} alt="Profile picture" />
+          <img src={picture3} alt="Picture of a computer" />
+        </ImageBox>
+      </ContentWrapper>
+
+      <TextBoxInfo>
+        <p>I am a nurse who, changed my career to web development and discoverd how rewarding it is to create solutions that work. Teamwork is where I really preform at my best - my experience in both healthcare and elite sports has given med strong collaboration skills. </p>
+      </TextBoxInfo>
+
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 16px;
+  padding: 64px 16px;
+  width: 100%;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    padding: 64px 24px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    padding: 128px 0 64px 0;
+  }
+`;
+
+const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 740px;
+  text-align: center;
+  align-items: center;
+  gap: 24px;
+
+  p, h1 {
+    color: rgba(0, 0, 0, 1);
+  }
+  p {
+    font-size: 24px;
+    font-weight: 500;
+    margin: 0;
+  }
+
+  h1 {
+    font-size: 52px;
+    font-weight: 700;
+    line-height: 56px;
+    margin: 0; 
+  }
+
+/* Tablet */
+  @media (min-width: 768px) {
+    p {
+      font-size: 24px;
+    }
+
+    h1 {
+      font-size: 52px;
+      line-height: 100px;
+    }
+  }   
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    max-width: 1100px;
+
+    p {
+      font-size: 30px;
+    }
+
+    h1 {
+      font-size: 100px;
+    }
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;  /* h2 above the img */
+  align-items: center;
+  gap: 24px;
+
+  h2 {
+    text-align: center;
+    font-size: 20px;
+    margin: 0;
+  }
+
+  @media (min-width: 768px) {
+    flex-direction: column-reverse; /* h2 under the img */
+
+    h2 {
+      text-align: center;
+      font-size: 24px;
+      margin-top: 24px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+  flex-direction: column-reverse; /* h2 under the img */
+
+    h2 {
+      max-width: 1100px;
+      text-align: center;
+      font-size: 30px;
+      margin-top: 40px;
+    }
+  }
+`;
+
+const ImageBox = styled.div`
+  position: relative; 
+  width: 100%;
+  max-width: 315px;
+  margin: 0 auto;
+  aspect-ratio: 315 / 171; 
+  
+  img {
+    border-radius: 12px;
+    object-fit: cover;
+    position: absolute;
+    top:0;
+  }
+
+  /* place to the left and places child 1 behind the central img */ 
+  img:nth-child(1) {
+    left: 0;                      
+    transform: rotate(-5deg);
+    transform-origin: top right;
+    z-index: 1;  
+    width: 144px;
+    height: 154px;    
+  }
+    
+  /* central img */
+  img:nth-child(2) {
+    left: 50%; 
+    transform: translateX(-50%) rotate(0deg);   
+    transform-origin: center center;
+    z-index: 3;
+    width: 144px;
+    height: 154px;  
+  }
+
+  /* place to the right and places child 3 behind the central img */ 
+  img:nth-child(3) {
+    right: 0;                   
+    transform: rotate(5deg);
+    transform-origin: top left;
+    z-index: 1;
+    width: 144px;
+    height: 154px;                 
+  }
+    
+  /* Tablet */
+  @media (min-width: 768px) {
+      max-width: 500px;
+      aspect-ratio: 500 / 277;
+
+    img:nth-child(1) {
+        width: 260px;
+        height: 277px; 
+        left: -70px;
+    }
+
+    img:nth-child(2) {
+        width: 260px;
+        height: 277px; 
+    }
+
+    img:nth-child(3) {
+        width: 260px;
+        height: 277px;
+        right: -70px;
+    }
+  }
+
+    /* Desktop */
+    @media (min-width: 1024px) {
+      max-width: 1100px;
+      aspect-ratio: 1100 / 382;
+
+      img:nth-child(1) {
+      width: 358px;
+      height: 382px;
+      left: 60px;
+    }
+
+    img:nth-child(2) {
+      width: 358px;
+      height: 382px;
+    }
+
+    img:nth-child(3) {
+      width: 358px;
+      height: 382px;
+      right: 60px ;
+    }
+  }
+`;
+
+const TextBoxInfo = styled.div`
+  font-size: 16px;
+  text-align: left;
+  gap: 24px;
+  width: 100%;
+  max-width: 1000px;
+
+  @media (min-width: 768px) {
+    text-align: center;
+    max-width: 700px;
+    }
+
+  @media (min-width: 1024px) {
+    text-align: center;
+    max-width: 1000px;
+    font-size: 18px;
+  }
+}
+`;
\ No newline at end of file
diff --git a/src/sections/ProjectsSection.jsx b/src/sections/ProjectsSection.jsx
new file mode 100644
index 00000000..ee34afe1
--- /dev/null
+++ b/src/sections/ProjectsSection.jsx
@@ -0,0 +1,90 @@
+import React from "react";
+import { projects } from "../data/projects";
+import { ProjectCard } from "../components/ProjectCard";
+import styled from "styled-components";
+import IconArrowDownSVG from "../assets/icon-arrow-down.svg";
+
+export const ProjectsSection = () => {
+  return (
+    <Wrapper>
+      <Title>Featured Projects</Title>
+      <ProjectsGrid>
+        {projects.map((project, index) => (
+          <ProjectCard key={index} project={project} />
+        ))}
+      </ProjectsGrid>
+
+      <SeeMoreButton>
+        <IconArrowDown src={IconArrowDownSVG} alt="See more projects here" />
+        See more projects
+      </SeeMoreButton>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  width: 100%;
+  margin: 0 auto;
+  padding: 64px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 64px;
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    max-width: 1184px;
+    padding: 128px 128;
+    gap: 128px;
+  }
+`;
+
+const Title = styled.h2`
+  font-size: 48px;
+  font-weight: 700;
+  text-align: center;
+  color: rgba(0, 0, 0, 1);
+
+  @media (min-width: 1024px) {
+    font-size: 80px;
+    }
+`;
+
+const ProjectsGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 32px;
+  width: 100%;
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    gap: 125px;
+  }
+`;
+
+const SeeMoreButton = styled.button`
+  width: 271px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  border: 2px solid rgba(0, 0, 0, 1);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 1);
+  font-size: 18px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 3px solid #f39c12;
+    outline-offset: 2px;
+  }
+`;
+
+const IconArrowDown = styled.img`
+  width: 30px;
+  height: 30px;
+`;
+
+
diff --git a/src/sections/SkillsSection.jsx b/src/sections/SkillsSection.jsx
new file mode 100644
index 00000000..ef988d2f
--- /dev/null
+++ b/src/sections/SkillsSection.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import { skills } from "../data/skills";
+import { SkillsCard } from "../components/SkillsCard";
+import styled from "styled-components";
+
+export const SkillsSection = () => {
+  return (
+    <Wrapper>
+      <Title>Skills</Title>
+      <SkillsGrid>
+        {skills.map((category, index) => (
+          <li key={index}>
+            <SkillsCard category={category} />
+          </li>
+        ))}
+      </SkillsGrid>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 1);
+  color: rgba(255, 255, 255, 1);
+  padding: 48px 16px; 
+  gap: 24px;
+`;
+
+const Title = styled.h2`
+  font-size: 48px;
+  font-weight: 700;
+  text-align: center;
+  line-height: 56px; 
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    font-size: 80px;
+  }
+`;
+
+const SkillsGrid = styled.ul`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+
+  /* Tablet */
+  @media (min-width: 768px) and (max-width: 1023px) {
+    align-items: center;
+    text-align: center; 
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    justify-items: center;
+    text-align: flex-start;
+    gap: 24px 16px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+`;
\ No newline at end of file
diff --git a/src/sections/TechSection.jsx b/src/sections/TechSection.jsx
new file mode 100644
index 00000000..c1be2eb0
--- /dev/null
+++ b/src/sections/TechSection.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { tech } from "../data/tech";
+import styled from "styled-components";
+
+export const TechSection = () => {
+  return (
+    <Wrapper aria-label="Tech I use">
+      <h2>Tech</h2>
+      <p>{tech.join(", ")} </p>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.section`
+  width: 100%;
+  background: rgba(0, 0, 0, 1) ;
+  display: flex;
+  padding: 64px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+
+  h2 {
+    color: rgba(255, 255, 255, 1);
+    text-align: center; 
+    font-size: 60px;
+    font-weight: 700;
+  }
+
+  p {
+
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.4;
+    max-width: 343px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    padding: 128px 0;
+
+  h2 {
+      font-size: 80px;
+   }
+
+  p {
+    font-size: 18px;
+    max-width: 782px;
+   }
+  }
+`;
diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
new file mode 100644
index 00000000..387e3992
--- /dev/null
+++ b/src/styles/GlobalStyles.js
@@ -0,0 +1,49 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyles = createGlobalStyle`
+* {
+    box-sizing: border-box; 
+    margin: 0;
+    padding: 0;
+}  
+
+body {
+  background: rgba(255, 255, 255, 1);
+  font-family: "poppins", sans-serif;
+  width: 100%;
+  scroll-behavior: smooth;
+}
+
+/* List without bullets */
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+=======/* MEDIA QUERIES */ ========
+
+/* Tablet */
+@media (min-width: 768px) and (max-width: 1024px) {
+  body {
+  max-width: 774px;
+  }
+
+}
+/* Desktop */
+@media (min-width: 1025px) {
+  body {
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+h1 {
+  font-size: 100px;
+}
+
+h2 {
+  font-size: 80px;
+}
+
+}
+`;
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b9..d133d633 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,5 +3,11 @@ import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-styled-components', { displayName: true }]]
+      }
+    })
+  ]
 })
