Technigo · julialindstrand · Nov 21, 2025 · Nov 21, 2025 · Nov 22, 2025 · Nov 25, 2025
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
 # Portfolio
+
+Netlify-link:
+
+Figma-link: https://www.figma.com/design/jOlPicmO7AGtZLrZOpgZ44/Portfolio?node-id=1791-1877&t=CGhZrNLZ8wEjnYxZ-0
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>
+  <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: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 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>
diff --git a/package.json b/package.json
@@ -4,20 +4,23 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.19",
+    "swiper": "^12.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
+    "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/images/cake.png b/public/images/cake.png
diff --git a/public/images/cupcakes.png b/public/images/cupcakes.png
diff --git a/public/images/discoball.png b/public/images/discoball.png
diff --git a/public/images/gold.png b/public/images/gold.png
diff --git a/public/images/profilepicture.png b/public/images/profilepicture.png
diff --git a/public/images/quiz.png b/public/images/quiz.png
diff --git a/public/images/recipelibrary.png b/public/images/recipelibrary.png
diff --git a/public/images/tailtales.png b/public/images/tailtales.png
diff --git a/public/images/weatherapp.png b/public/images/weatherapp.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,31 @@
+import { GlobalStyle } from "./components/Styling/GlobalStyle"
+import { Header } from "./components/1.Header"
+import { Skills } from "./components/2.Skills"
+import { Project } from "./components/3.Projects"
+import { Tech } from "./components/4.Tech"
+import { Articles } from "./components/5.Articles"
+import { Contact } from "./components/6.Contact"
+
+
+
 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 />
+
+      <Header />
+
+      <Skills />
+
+      <Project />
+
+      <Tech />
+
+      <Articles />
+
+      <Contact />
+
     </>
   )
-}
+}
diff --git a/src/components/1.Header.jsx b/src/components/1.Header.jsx
@@ -0,0 +1,43 @@
+import styled from "styled-components"
+import { Icons } from "./Reusables/icons"
+import { H1, H3, P } from "./Styling/Typography"
+
+export const Header = () => {
+  return (
+    <HeaderSection>
+      <TextSection>
+        <H3>I am Julia Lindstrand</H3>
+        <H1>Junior Frontend Developer</H1>
+        <P>I am a developer with a passion for everything technology. For my whole life technology played a big part and I've always found much joy in learning about everything tech. What I bring to a new team is the same relentless curiosity that helped me debug code late into the night for school-projects, the discipline to learn independently, and the proven ability to thrive under pressure. I’m eager to apply these strengths to build robust, user‑focused products at  my next job.</P>
+        <Icons /></TextSection>
+      <Picture src="/images/profilepicture.png" alt="Picture of Julia" />
+    </HeaderSection>
+  )
+}
+
+
+// Styling
+const HeaderSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @media(max-width: 1440px) {
+  flex-direction: column;
+  align-items: center;
+}`
+
+const TextSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 128px 128px 0 128px;
+  max-width: 580px;
+`
+
+const Picture = styled.img`
+  width: 526px;
+  height: auto;
+  object-fit: contain;
+`
diff --git a/src/components/2.Skills.jsx b/src/components/2.Skills.jsx
@@ -0,0 +1,59 @@
+import skills from "../data/skills.json"
+import styled from "styled-components"
+import { H2, H4, P, UL } from "./Styling/Typography"
+import {
+  theme
+} from "./Styling/Theme"
+
+export const Skills = () => {
+  return (
+    <SkillSection>
+      <H2>Skills</H2>
+      <SkillSectionSkills className="skills">
+        {skills.skills.map((skill) => (
+          <SkillColumn $color={theme.color}>
+            <ol className="skill"
+              key={skill.name}>
+              <H4>
+                {skill.group}</H4> <br></br>
+              {skill.items.map(skilling => <UL key={skilling}>{skilling}</UL>)}
+            </ol></SkillColumn>))}
+      </SkillSectionSkills>
+    </SkillSection>
+  )
+}
+
+// Styling
+const SkillSection = styled.div`
+  text-align: center;
+  margin-top: 80px;
+  `
+
+const SkillSectionSkills = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 15px;
+
+@media(max-width: 1440px) {
+  flex-direction: column;
+  align-items: center;
+}`
+
+const SkillColumn = styled.div`
+    text-align: center;
+    width: 180px;
+    padding-right: 30px;
+    &:not(:last-child) {
+    border-right: 2px solid ${(props) => props.$color};
+    }
+
+    @media (max-width: 1440px) {
+        &:not(:last-child) {
+            border-right: none;
+            border-bottom: 2px solid ${(props) => props.$color};
+            padding-bottom: 20px;
+            margin-bottom: 20px;
+        }}`
diff --git a/src/components/3.Projects.jsx b/src/components/3.Projects.jsx
@@ -0,0 +1,42 @@
+import projectsData from "../data/projects.json"
+import { ProjectCard } from "./Reusables/card"
+import styled from "styled-components"
+import { H2 } from "./Styling/Typography"
+import { Carousel } from "./Styling/Carousel"
+
+export const Project = () => {
+  return (
+    <ProjectSection>
+      <H2>Featured Projects</H2>
+      <Carousel
+        data={projectsData.projects}
+        renderItem={(project) => (
+          <ProjectCard
+            key={project.name}
+            image={project.image}
+            name={project.name}
+            description={project.description}
+            netlify={project.netlify}
+            github={project.github}
+          />
+        )}
+      />
+    </ProjectSection>
+  )
+}
+
+
+// Styling
+const ProjectSection = styled.div`
+  margin-top: 80px;
+`
+
+const Projects = styled.div`
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: flex-start;
+padding: 0px;
+gap: 64px;
+width: 1440px;
+height: 625px;`
diff --git a/src/components/4.Tech.jsx b/src/components/4.Tech.jsx
@@ -0,0 +1,26 @@
+import styled from "styled-components"
+import { H2, H3 } from "./Styling/Typography"
+
+
+export const Tech = () => {
+  return (
+    <TechSection>
+      <H2>Tech</H2>
+      <TechContainer>
+        <H3>HTML, CSS, Flexbox, JavaScript, ES6, JSX, React, React Hooks, Node.js, Mongo DB, Web Accessibility, APIs, Mob-programming, Pair-programming, GitHub</H3>
+      </TechContainer>
+    </TechSection>
+  )
+}
+
+
+// Styling
+const TechSection = styled.div`
+  margin-top: 120px;
+`
+
+const TechContainer = styled.div`
+  justify-self: center;
+  text-align: center;
+  max-width: 782px;
+`
diff --git a/src/components/5.Articles.jsx b/src/components/5.Articles.jsx
@@ -0,0 +1,40 @@
+import articlesData from "../data/articles.json"
+import { ArticleCard } from "./Reusables/card"
+import styled from "styled-components"
+import { H2 } from "./Styling/Typography"
+import { Carousel } from "./Styling/Carousel"
+
+export const Articles = () => {
+  return (
+    <ArticlesSection>
+      <H2>My Journey</H2>
+      <Carousel
+        data={articlesData.articles}
+        renderItem={(article) => (
+          <ArticleCard
+            key={article.title}
+            image={article.image}
+            title={article.title}
+            description={article.description}
+          />
+        )}
+      />
+    </ArticlesSection>
+  )
+}
+
+
+// Styling
+const ArticlesSection = styled.div`
+  margin-top: 100px;
+`
+
+const ArticlesContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex - start;
+  padding: 0px;
+  gap: 64px;
+  width: 1440px;
+  height: 625px;`
diff --git a/src/components/6.Contact.jsx b/src/components/6.Contact.jsx
@@ -0,0 +1,36 @@
+import { Icons } from "./Reusables/icons"
+import styled from "styled-components"
+import { H2, H3 } from "./Styling/Typography"
+
+export const Contact = () => {
+  return (
+    <ContactSection>
+      <Picture src="/images/profilepicture.png" alt="Picture of Julia" />
+      <ContactInfo>
+        <H2>Let's talk</H2>
+        <H3>Julia Lindstrand</H3>
+        <H3>+46 (0) 768 28 97 94</H3>
+        <H3>julia.lindstrand@pm.me</H3>
+        <Icons /></ContactInfo>
+    </ContactSection>
+  )
+}
+
+// Styling
+const ContactSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  @media (max-width: 667px) {
+    flex-direction: column;
+  }
+`
+const Picture = styled.img`
+  width: 476px;
+`
+const ContactInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+`