Technigo · ssofiejohansson · Apr 22, 2025 · Apr 27, 2025 · Apr 27, 2025 · Apr 27, 2025
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# Portfolio
+This is my personal portfolio built with React. It’s fully responsive, accessible, and styled with styled-components. It highlights my tech skills and projects, with links to GitHub and Netlify. The design follows a Figma layout provided by Technigo to keep everything clean and consistent.
+
+https://ssofiejohansson.netlify.app/
diff --git a/index.html b/index.html
@@ -1,13 +1,39 @@
 <!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" />
+  <link
+    rel="icon"
+    type="image/svg+xml"
+    href="/disco.png"
+  />
+  <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=Montserrat:ital,wght@0,100..900;1,100..900&family=Mynerve&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=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet"
+  >
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Sofie Johansson</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script
+    type="module"
+    src="/src/main.jsx"
+  ></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -4,20 +4,28 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "framer-motion": "^12.9.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.17"
   },
   "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.4.1",
+    "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/img/disco.png b/public/img/disco.png
diff --git a/public/img/happyhooks.webp b/public/img/happyhooks.webp
diff --git a/public/img/happythoughts.webp b/public/img/happythoughts.webp
diff --git a/public/img/heatherweather.webp b/public/img/heatherweather.webp
diff --git a/public/img/portfolio.webp b/public/img/portfolio.webp
diff --git a/public/img/quiz.webp b/public/img/quiz.webp
diff --git a/public/img/recipe.webp b/public/img/recipe.webp
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,23 @@
+import { Nav } from "./sections/Nav"
+import { Header } from "./sections/Header"
+import { Projects } from "./sections/Projects"
+import { Skills } from "./sections/Skills"
+import { Footer } from "./sections/Footer"
+import { Blog } from "./sections/Blog"
+
 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>
+      <Nav />
+      <Header />
+      <main>
+
+        <Projects />
+        <Skills />
+        <Blog />
+
+      </main>
+      <Footer />
     </>
   )
 }
diff --git a/src/assets/CV.pdf b/src/assets/CV.pdf
diff --git a/src/assets/data/projects.json b/src/assets/data/projects.json
@@ -0,0 +1,98 @@
+{
+  "projects": [
+    {
+      "name": "Happy Thoughts",
+      "info": "Happy Thoughts is a simple messaging app built with React that lets users share short, uplifting messages with the world. It connects to a shared public API, allowing anyone to post and read happy thoughts in real time. Messages appear in reverse chronological order, with the newest thoughts at the top. Each thought displays the message content and a like count, which can be increased by clicking the heart button. The app updates automatically after new thoughts are posted or liked, creating a smooth and interactive user experience.",
+      "image": "./img/happythoughts.webp",
+      "alt": "Happy Thoughts App",
+      "collab": "Team project",
+      "tags": [
+        "JavaScript",
+        "React",
+        "useState",
+        "useEffect",
+        "Styled-components",
+        "JSON"
+      ],
+      "netlify": "https://reliable-truffle-5d0fac.netlify.app/",
+      "github": "https://github.com/ssofiejohansson/js-project-happy-thoughts"
+    },
+    {
+      "name": "Weather app",
+      "info": "A sleek weather application built with TypeScript, designed to deliver real-time weather updates and a 4-day forecast. It fetches data from the OpenWeather API and presents it through a clean, animated user interface. The app adapts seamlessly to all screen sizes and includes smooth CSS animations that enhance the overall experience without distraction.",
+      "image": "./img/heatherweather.webp",
+      "alt": "Weather App",
+      "collab": "Team project",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "TypeScript",
+        "APIs"
+      ],
+      "netlify": "https://heatherweather.netlify.app/",
+      "github": "https://github.com/ssofiejohansson/js-project-weather-app"
+    },
+    {
+      "name": "Online Quiz",
+      "info": "An accessible online quiz about web accessibility, built with semantic HTML, CSS, and JavaScript. The interface supports full keyboard navigation, and all elements were tested for color contrast and ARIA compliance using different tools. The app includes a high contrast mode toggle and an optional reduced motion setting to support a wider range of user needs and preferences.",
+      "image": "./img/quiz.webp",
+      "alt": "Online Quiz App",
+      "collab": "Team project",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "TypeScript"
+      ],
+      "netlify": "https://accessibility-simon-sofie.netlify.app/",
+      "github": "https://github.com/ssofiejohansson/accessibility-sofie-simon"
+    },
+    {
+      "name": "Portfolio",
+      "info": "A responsive portfolio website designed to showcase my skills and projects. Built with React components and props, featuring a clean, accessible design based on Figma guidelines. Key features include a tech skills section, project links to GitHub and Netlify and styled-components for modular styling.",
+      "image": "./img/portfolio.webp",
+      "alt": "Portfolio Project",
+      "collab": "Solo project",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "React",
+        "Styled-components",
+        "JavaScript",
+        "JSON"
+      ],
+      "netlify": "https://ssofiejohansson.netlify.app/",
+      "github": "https://github.com/ssofiejohansson/js-project-portfolio"
+    },
+    {
+      "name": "Recipe Library",
+      "info": "A  web application that helps users discover recipes using dynamic filters and sorting options. Using the Spoonacular API, the app updates in real time as users refine their search, offering a seamless and interactive browsing experience. Key features include multi-filter functionality, a random recipe generator, user feedback when no results are found and interactive step-by-step instructions. To enhance performance and usability, local storage caching, a loading state, and a responsive design were implemented to ensure smooth functionality across all devices.",
+      "image": "./img/recipe.webp",
+      "alt": "Recipe Library App",
+      "collab": "Solo project",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "APIs"
+      ],
+      "netlify": "https://stirring-yeot-236514.netlify.app/",
+      "github": "https://github.com/ssofiejohansson/js-project-recipe-library"
+    },
+    {
+      "name": "Business site",
+      "info": "The website is designed to be fully responsive, ensuring a great user experience for all devices. It features a navigation bar that adjusts based on the screen size, with a fully functional hamburger menu for mobile and tablet devices. The layout is built using CSS Grid for the main structure and Flexbox for smaller components like the cards and articles. The site includes a responsive header with a video, along with a signup form that supports multiple input types.",
+      "image": "./img/happyhooks.webp",
+      "alt": "Business site",
+      "collab": "Solo project",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript"
+      ],
+      "netlify": "https://happyhooks.netlify.app/",
+      "github": "https://github.com/ssofiejohansson/js-project-business-site"
+    }
+  ]
+}
diff --git a/src/assets/img/footer-img.png b/src/assets/img/footer-img.png
diff --git a/src/assets/img/header-img.png b/src/assets/img/header-img.png
diff --git a/src/data/projects.json b/src/data/projects.json
diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,108 @@
+:root {
+  --primary: #C35132;
+  --secondary: #FFFFFF;
+  --complementary: #E48162;
+  --font-primary: #C35132;
+  --font-secondary: #222222;
+  --font-family-headings: 'Urbanist', sans-serif;
+  --font-family-text: 'Poppins', sans-serif;
+  --font-family-code: 'Courier New', monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  background: pink;
-  color: hotpink;
+  font-family: sans-serif;
+  margin: 0;
+  font-family: var(--font-family-text);
+  color: var(--font-secondary);
+}
+
+main {
+  padding: 20px;
+}
+
+@media (min-width: 768px) {
+  main {
+    padding: 0px;
+  }
+}
+
+/* Typography styling */
+
+h1 {
+  font-family: var(--font-family-code);
+  color: var(--font-primary);
+  font-size: 50px;
+}
+
+header h2 {
+  font-family: var(--font-family-headings);
+  color: var(--font-primary);
+  font-weight: 200;
+  text-align: left;
+  font-size: 25px;
+}
+
+h2 {
+  font-family: var(--font-family-headings);
+  color: var(--font-primary);
+  text-align: center;
+  font-size: 45px;
+  font-weight: 600;
+}
+
+h3 {
+  font-family: var(--font-family-headings);
+  color: var(--font-primary);
+  padding-bottom: 5px;
+  font-size: 25px;
+  font-weight: 500;
+}
+
+h4 {
+  font-family: var(--font-family-headings);
+  color: var(--font-primary);
+  text-align: center;
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.techStack {
+  font-family: var(--font-family-code);
+  color: var(--font-primary);
+  font-size: 20px;
+  font-weight: 600;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}
+
+@media screen and (max-width: 768px) {
+  h1 {
+    font-size: 35px;
+  }
+
+  h2 {
+    font-size: 35px;
+  }
+
+  h3 {
+    font-size: 20px;
+  }
+
+  h4 {
+    font-size: 20px;
+  }
 }