Technigo · AgnesSj01 · Nov 28, 2025 · Nov 28, 2025 · Nov 28, 2025 · Nov 28, 2025
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
-# Portfolio
+Agnes Sjösten – Portfolio
+
+A personal portfolio built with React and Styled Components, showcasing my projects, skills, and background as a creative developer.
+
+Tech stack
+
+React
+
+Styled Components
+
+JavaScript (ES6)
+
+Vite
+
+Run locally
+npm install
+npm run dev
diff --git a/index.html b/index.html
@@ -1,11 +1,55 @@
-<!doctype html>
+<!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>
+    <title>Agnes Portfolio</title>
+
+    <!-- Favicon and app icons -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <!-- SEO Description -->
+    <meta
+      name="description"
+      content="Portfolio by Agnes Sjösten — Creative developer with a passion for design, functionality, and user experience."
+    />
+
+    <!-- Open Graph / Social Media Preview -->
+    <meta property="og:title" content="Agnes Sjösten – Creative Developer" />
+    <meta
+      property="og:description"
+      content="Portfolio by Agnes Sjösten. Creative developer with a passion for design, functionality and user experience."
+    />
+    <meta
+      property="og:image"
+      content="https://agnessjosten-portfolio.netlify.app/AgnesSjosten.jpg"
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+
+    <meta
+      property="og:url"
+      content="https://agnessjosten-portfolio.netlify.app/"
+    />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter Preview -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Agnes Sjösten – Creative Developer" />
+    <meta
+      name="twitter:description"
+      content="Portfolio by Agnes Sjösten. Creative developer with a passion for design, functionality and user experience."
+    />
+    <meta
+      name="twitter:image"
+      content="https://agnessjosten-portfolio.netlify.app/AgnesSjosten.jpg"
+    />
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>

diff --git a/package.json b/package.json
@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "components": "^0.1.0",
+    "lucide-react": "^0.554.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled": "^1.0.0",
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/public/AgnesSjosten.jpg b/public/AgnesSjosten.jpg
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/og-image.jpg b/public/og-image.jpg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,38 @@
+import Hero from "./components/Hero";
+import Tech from "./components/Tech";
+import Projects from "./components/Projects";
+import SkillsData from "./components/SkillsData";
+import MyTexts from "./components/MyTexts";
+import LetsTalk from "./components/LetsTalk";
+import { GlobalStyle } from "./components/GlobalStyle";
+
+import styled from "styled-components";
+
+/* Main wrapper for the entire page layout */
+const PageWrapper = styled.div`
+  min-height: 100vh; /* sidan minst lika hög som skärmen */
+  display: flex;
+  flex-direction: column;
+`;
+
+/* Content area that grows above the footer */
+const Content = styled.main`
+  flex: 1; /* innehållet tar allt utrymme ovanför footern */
+`;
+
+/* Root application component assembling all sections */
 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>
-    </>
-  )
-}
+    <PageWrapper>
+      <GlobalStyle />
+      <Content>
+        <Hero />
+        <Tech />
+        <Projects />
+        <SkillsData />
+        <MyTexts />
+        <LetsTalk />
+      </Content>
+    </PageWrapper>
+  );
+};
diff --git a/src/assets/API2.png b/src/assets/API2.png
diff --git a/src/assets/APIPic.png b/src/assets/APIPic.png
diff --git a/src/assets/Agnes.jpg b/src/assets/Agnes.jpg
diff --git a/src/assets/Agnes2.jpg b/src/assets/Agnes2.jpg
diff --git a/src/assets/BusinessSite.png b/src/assets/BusinessSite.png
diff --git a/src/assets/CoctailApp.png b/src/assets/CoctailApp.png
diff --git a/src/assets/Code.png b/src/assets/Code.png
diff --git a/src/assets/Coffee.jpg b/src/assets/Coffee.jpg
diff --git a/src/assets/Coffee2.png b/src/assets/Coffee2.png
diff --git a/src/assets/Happy.png b/src/assets/Happy.png
diff --git a/src/assets/HayStack.png b/src/assets/HayStack.png
diff --git a/src/assets/MovieApp.png b/src/assets/MovieApp.png
diff --git a/src/assets/ReadingRoom.png b/src/assets/ReadingRoom.png
diff --git a/src/assets/RecipeApp.png b/src/assets/RecipeApp.png
diff --git a/src/assets/RecipeLibrary.png b/src/assets/RecipeLibrary.png
diff --git a/src/assets/RiddleRush.png b/src/assets/RiddleRush.png
diff --git a/src/assets/Skärmbild 2025-11-27 085359.png b/src/assets/Skärmbild 2025-11-27 085359.png
diff --git a/src/assets/Sun.png b/src/assets/Sun.png
diff --git a/src/assets/SunRise.png b/src/assets/SunRise.png
diff --git a/src/assets/WeatherApp.png b/src/assets/WeatherApp.png
diff --git a/src/assets/icons/ArrowDown.svg b/src/assets/icons/ArrowDown.svg
diff --git a/src/assets/icons/Facebook.svg b/src/assets/icons/Facebook.svg
diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg
diff --git a/src/assets/icons/linkedin.svg b/src/assets/icons/linkedin.svg
diff --git a/src/assets/icons/web.svg b/src/assets/icons/web.svg
diff --git a/src/assets/sunflower.jpg b/src/assets/sunflower.jpg
diff --git a/src/components/GlobalStyle.jsx b/src/components/GlobalStyle.jsx
@@ -0,0 +1,86 @@
+import { createGlobalStyle } from "styled-components";
+
+/* 
+  Basic global reset:
+  - Removes default margins and padding
+  - Sets border-box sizing for all elements
+  - Defines base font, colors, and line-height
+  - Prevents horizontal overflow
+  - Makes images responsive
+*/
+
+export const GlobalStyle = createGlobalStyle`
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html, body {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: "Inter", sans-serif;
+    color: #000;
+    background: #fff;
+    overflow-x: hidden;
+    line-height: 1.6; 
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+  }
+
+  /* ----------------------------- */
+  /* MOBILE-FIRST*/
+  /* ----------------------------- */
+
+
+  h1 {
+    font-size: 40px;      /* Mobil */
+    font-weight:bold; 
+    font-family: "Inter", sans-serif;
+  }
+
+  h2 {
+    font-size: 38px;
+    font-family: "Inter", sans-serif;
+
+  }
+
+  h3 {
+    font-size: 20px;
+    font-family: "Inter", sans-serif;
+  }
+
+  p {
+    font-size: 16px;
+font-family: "Inter", sans-serif;
+    margin: 0 auto; 
+    max-width: 750px;       
+  }
+
+  /* ----------------------------- */
+  /* TABLET (≥ 768px) */
+  /* ----------------------------- */
+  @media (min-width: 768px) {
+   h1 { font-size: 70px; letter-spacing: -0.5px; }
+    h2 { font-size: 60px; letter-spacing: -0.9px; font-weight: 700; }
+    h3 { font-size: 30px; letter-spacing: -0.3px; font-weight: 500;}
+    p  { font-size: 20px; letter-spacing: -0.1px;}
+  }
+
+  /* ----------------------------- */
+  /* DESKTOP (≥ 1024px) */
+  /* ----------------------------- */
+  @media (min-width: 1024px) {
+    h1 { font-size: 100px; letter-spacing: -0.5px; }
+    h2 { font-size: 80px; letter-spacing: -0.9px; font-weight: 700; }
+    h3 { font-size: 30px; letter-spacing: -0.3px; font-weight: 500;}
+    p  { font-size: 18px; letter-spacing: -0.1px;}
+  }
+`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}