Technigo · JeffieJansson · Nov 18, 2025 · Nov 19, 2025 · Nov 19, 2025 · Nov 20, 2025
diff --git a/README.md b/README.md
@@ -1 +1,31 @@
-# Portfolio
+# Developer Portfolio – Jennifer Jansson
+
+This is my personal developer portfolio built with **React** and **styled-components**.  
+It showcases my projects, technical skills, articles, and ways to get in contact with me.  
+The design follows a provided Figma layout and the site is fully responsive.
+
+## Features
+
+- Hero section with introduction and portrait
+- Tech overview
+- Featured projects with links to GitHub and live demos
+- Skills section (Code, Toolbox, Upcoming, More)
+- My Words / thoughts about code
+- Contact section with social links
+- Accessible and responsive across all screen sizes from 320-1600px
+- Skip link and focus states for improved accessibility
+
+## Tech Stack
+
+- React
+- Vite
+- JavaScript (ES6)
+- styled-components
+- JSON data for dynamic content
+
+## Getting Started
+
+```bash
+npm install
+npm run dev
+```
diff --git a/index.html b/index.html
@@ -1,10 +1,43 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/jj-favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <meta
+      name="description"
+      content="Jennifer Jansson — Frontend Developer & Digital Analytics Specialist portfolio"
+    />
+    <meta property="og:title" content="Jennifer Jansson — Frontend Developer" />
+    <meta
+      property="og:description"
+      content="Projects in React, JavaScript, accessibility, and data-driven UX."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="/portrait.png" />
+    <meta property="og:url" content="https://jeffies-portfolio.netlify.app/" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      rel="preload"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
+      media="print"
+      onload="this.media='all'"
+    />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
+      />
+    </noscript>
+
+    <title>Jennifer Jansson — Frontend Developer Portfolio</title>
   </head>
   <body>
     <div id="root"></div>

diff --git 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/accessibility.png b/public/accessibility.png
diff --git a/public/arts.png b/public/arts.png
diff --git a/public/business.png b/public/business.png
diff --git a/public/footer.png b/public/footer.png
diff --git a/public/happy.png b/public/happy.png
diff --git a/public/jj-favicon.svg b/public/jj-favicon.svg
diff --git a/public/mic.png b/public/mic.png
diff --git a/public/pitch.png b/public/pitch.png
diff --git a/public/portrait.png b/public/portrait.png
diff --git a/public/post2.png b/public/post2.png
diff --git a/public/react-icon.png b/public/react-icon.png
diff --git a/public/recipe.jpg b/public/recipe.jpg
diff --git a/public/weather.png b/public/weather.png
diff --git a/public/web-accessibility.png b/public/web-accessibility.png
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1 +1,5 @@
-Please include a link to your Figma design and a Netlify link.
+Please include a link to your Figma design and a Netlify link.
+
+https://jeffies-portfolio.netlify.app/
+
+https://www.figma.com/design/QV6stSlcpaPdDl2fojewHc/Figma-designs-for-students--Copy-?node-id=1791-1386&m=dev
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,43 @@
+// src/App.jsx
+import { GlobalStyle } from "./components/GlobalStyles";
+import { Hero } from "./sections/Hero";
+import { Tech } from "./sections/Tech";
+import { Projects } from "./sections/Projects";
+import { Skills } from "./sections/Skills";
+import { Journey } from "./sections/Journey";
+import { Contact } from "./sections/Contact";
+import styled from "styled-components";
+
+const SkipLink = styled.a`
+  position: absolute;
+  left: -999px;
+  top: 16px;
+  padding: 8px 16px;
+  background: #000;
+  color: #fff;
+  border-radius: 8px;
+  z-index: 1000;
+
+  &:focus-visible {
+    left: 16px;
+  }
+`;
+
 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>
+      <GlobalStyle />
+      <SkipLink href="#main-content">Skip to main content</SkipLink>
+      <div className="app">
+        <Hero />
+        <main id="main-content">
+          <Tech />
+          <Projects />
+          <Skills />
+          <Journey />
+          <Contact />
+        </main>
+      </div>
     </>
-  )
-}
+  );
+};
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,29 @@
+// src/components/Button.jsx
+import styled from "styled-components";
+
+// Styled button component for links
+const Button = styled.a`
+  display: flex;
+  width: 303px;
+  height: 48px;
+  gap: 16px;
+  padding: 0 16px;
+  align-items: center;
+  border-radius: 12px;
+  text-decoration: none;
+  font-weight: 500;
+  color: #fff;
+  background: #000;
+  font-size: 18px;
+  cursor: pointer;            
+  transition: background 0.2s, transform 0.1s;
+
+  &:hover {
+    background: #fff;
+    color: #000;   
+    outline: 2px solid #000;       
+  }
+
+`;
+
+export default Button;
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+// (HTML, CSS, API…)
+export const TagsRow = styled.div`
+display: flex;
+align-items: flex-start;
+gap: 4px;
+align-self: stretch;
+`;
+
+// single tag
+export const Tag = styled.span`
+display: flex;
+width: 142px;
+padding: 2px 6px;
+justify-content: center;
+align-items: flex-start;
+border-radius: 4px;
+border: 1px solid #000;
+background: #FFF;
+`;
diff --git a/src/components/GlobalStyles.jsx b/src/components/GlobalStyles.jsx
@@ -0,0 +1,89 @@
+// src/styles/GlobalStyle.jsx
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+ *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    min-height: 100vh;
+    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background-color: #ffffff;
+    color: #000000;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
+
+  }
+
+  #root {
+    min-height: 100vh;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  a:focus-visible,
+  button:focus-visible {
+    outline: 3px solid #e6229bff; 
+    outline-offset: 4px;
+  }
+
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  button {
+    font-family: inherit;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+  }
+
+  h1 {
+    font-size: clamp(3rem, 6vw, 4.5rem);
+  }
+
+  h2 {
+    font-size: clamp(2rem, 4vw, 3rem);
+  }
+
+  h3 {
+    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
+  }
+
+  p {
+    margin: 0;
+  }
+
+`;