Technigo · UlrikaRakkaBrant · Apr 24, 2025 · Apr 26, 2025 · Apr 28, 2025 · Sep 27, 2025
diff --git a/README.md b/README.md
@@ -1 +1,64 @@
 # Portfolio
+https://ulrikasportfolio.netlify.app/
+
+# 🌟 Ulrika Einebrant – Portfolio
+
+This is my personal developer portfolio built with **React**, designed to showcase my web projects, skills, and creative work — including my theatre group, [Kompani Error](https://kompanierror.se/#/).  
+
+It’s built mobile-first and fully responsive across devices, following my custom design in Figma.
+
+---
+
+## 🚀 Features
+
+- 💻 **Responsive Design** – Optimized for mobile, tablet, and desktop  
+- ⚛️ **Built with React** – Component-based structure for reusability and clarity  
+- 💅 **Styled-components** – Modern CSS-in-JS styling with theme and global styles  
+- 🧩 **Dynamic Content** – Projects and articles loaded from JSON data  
+- 🖼️ **Accessible & Inclusive** – Semantic HTML, ARIA labels, and alt text  
+- 🌐 **Deployed on Netlify** – Continuous deployment via GitHub  
+- 🎭 **Personal Touch** – Integrates creative work such as Kompani Error
+
+---
+
+## 🧱 Tech Stack
+
+| Category | Technology |
+|-----------|-------------|
+| Frontend | React (Vite), JavaScript (ES6+), JSX |
+| Styling | Styled-components, CSS Grid/Flexbox |
+| Design | Figma (custom responsive design) |
+| Deployment | Netlify, GitHub |
+| Tools | npm, Git, VS Code |
+
+---
+
+## 🧠 Key Learnings
+
+- Building and structuring a scalable React project  
+- Creating reusable, accessible components  
+- Handling responsive layouts based on Figma designs  
+- Using styled-components for modular styling  
+- Working with version control (Git) and CI/CD (Netlify)
+
+---
+
+## 🔗 Live Demo
+
+👉 [View Portfolio on Netlify](https://ulrikasportfolio.netlify.app) 
+👉 [GitHub Repository](https://github.com/UlrikaRakkaBrant/js-project-portfolio)
+
+---
+
+## 🪄 Future Improvements
+
+- Add light/dark mode toggle  
+- Animate transitions (Framer Motion)  
+- Write more articles  
+- Add unit tests with React Testing Library
+
+---
+
+
+
+
diff --git a/declarations.d.ts b/declarations.d.ts
@@ -0,0 +1,5 @@
+// declarations.d.ts
+declare module '*.svg' { const src: string; export default src; }
+declare module '*.png' { const src: string; export default src; }
+declare module '*.jpg' { const src: string; export default src; }
+declare module '*.jpeg' { const src: string; export default src; }
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="/sun.png"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>Ulrikas Portfolio</title>
+  <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=Poppins:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet"
+  />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script
+    type="module"
+    src="/src/main.jsx"
+  ></script>
+</body>
+
+</html>
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "checkJs": true,
+    "baseUrl": "./",
+    "lib": [
+      "ES2020",
+      "DOM"
+    ]
+  },
+  "include": [
+    "src",
+    "styled.d.ts",
+    "declarations.d.ts"
+  ]
+}
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,9 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
+# Uncomment this later if you add React Router
+# [[redirects]]
+#   from = "/*"
+#   to = "/index.html"
+#   status = 200
diff --git a/package.json b/package.json
@@ -10,18 +10,27 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource/poppins": "^5.2.5",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.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.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",
     "globals": "^15.15.0",
+    "typescript": "^5.9.3",
     "vite": "^6.2.0"
   }
 }
diff --git a/public/articles/first.jpg b/public/articles/first.jpg
diff --git a/public/articles/second.jpg b/public/articles/second.jpg
diff --git a/public/articles/third.jpg b/public/articles/third.jpg
diff --git a/public/projects/accessibility-quiz.jpg b/public/projects/accessibility-quiz.jpg
diff --git a/public/projects/ecommerce-demo.jpg b/public/projects/ecommerce-demo.jpg
diff --git a/public/projects/portfolio.jpg b/public/projects/portfolio.jpg
diff --git a/public/projects/recipe-app.jpg b/public/projects/recipe-app.jpg
diff --git a/public/projects/weather-app.jpg b/public/projects/weather-app.jpg
diff --git a/public/sun.png b/public/sun.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,44 @@
-export const App = () => {
+import React from 'react';
+import GlobalStyle from './styles/GlobalStyles.jsx';
+import { ThemeProvider } from 'styled-components';
+import { theme } from './styles/theme.jsx';
+import Header from './components/Header.jsx';
+import Title from './components/Title.jsx';
+import Hero from './components/Hero.jsx';
+import About from './components/About.jsx';
+import Tech from './components/Tech.jsx';
+import Projects from './components/Projects/Projects.jsx';
+import Skills from './components/Skills.jsx';
+import Articles from './components/Articles.jsx';
+import Contact from './components/Contact.jsx';
+import styled from "styled-components"
+
+const TitleHeroContainer = styled.div`  
+  display: flex;  
+  flex-direction: column;  
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    flex-direction: column-reverse;
+  }
+`;
+
+function 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>
-    </>
-  )
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Header />
+      <TitleHeroContainer >
+        <Title />
+        <Hero />
+      </TitleHeroContainer>
+      <About />
+      <Tech />
+      <Projects />
+      <Skills />
+      <Articles />
+      <Contact />
+    </ThemeProvider>
+  );
 }
+
+export default App;
diff --git a/src/assets/Btn - linkedin.svg b/src/assets/Btn - linkedin.svg
diff --git a/src/assets/github-icon.svg b/src/assets/github-icon.svg
diff --git a/src/assets/kompani-error.png b/src/assets/kompani-error.png
diff --git a/src/assets/link-icon.svg b/src/assets/link-icon.svg
diff --git a/src/assets/ulrika.jpg b/src/assets/ulrika.jpg
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const AboutWrapper = styled.section`
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    padding: 4rem 2rem;
+    text-align: center;
+
+  }
+`;
+
+const Bio = styled.p`
+  max-width: 600px;
+  font-size: 1rem;
+  line-height: 1.6;
+`;
+
+const About = () => {
+  return (
+    <AboutWrapper>
+      <Bio>
+        I'm a web developer with a passion for blending creativity and technology. I create
+        engaging, user-friendly websites that focus on both functionality and design. My
+        background in theatre gives me a unique perspective, bringing storytelling and
+        visual creativity into every project. I’m driven by the idea of making digital
+        experiences that are as immersive and impactful as a great performance.
+      </Bio>
+    </AboutWrapper>
+  );
+};
+
+export default About;