Technigo · mimmi-eriksson · Apr 15, 2025 · Apr 16, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
 # Portfolio
+
+Link: https://mimmi-eriksson.netlify.app/
diff --git a/index.html b/index.html
@@ -1,13 +1,59 @@
 <!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/x-icon"
+    href="/assets/favicon.ico"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <meta
+    property="og:title"
+    content="Mimmi Eriksson Developer Portfolio"
+  />
+  <meta
+    property="og:type"
+    content="website"
+  />
+  <meta
+    property="og:url"
+    content="https://mimmi-eriksson.netlify.app/"
+  />
+  <meta
+    property="og:image"
+    content="./assets/profile-picture.jpg"
+  />
+  <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&display=swap"
+    rel="stylesheet"
+  >
+  <link
+    href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
+    rel="stylesheet"
+  >
+  <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
@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "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/assets/accessibility-quiz.png b/public/assets/accessibility-quiz.png
diff --git a/public/assets/arrow-small.svg b/public/assets/arrow-small.svg
diff --git a/public/assets/arrow.svg b/public/assets/arrow.svg
diff --git a/public/assets/article-icon.svg b/public/assets/article-icon.svg
diff --git a/public/assets/business-site.png b/public/assets/business-site.png
diff --git a/public/assets/favicon.ico b/public/assets/favicon.ico
diff --git a/public/assets/github-btn.svg b/public/assets/github-btn.svg
diff --git a/public/assets/github-icon.svg b/public/assets/github-icon.svg
diff --git a/public/assets/globe-icon.svg b/public/assets/globe-icon.svg
diff --git a/public/assets/happy-thoughts.png b/public/assets/happy-thoughts.png
diff --git a/public/assets/linkedin-btn.svg b/public/assets/linkedin-btn.svg
diff --git a/public/assets/movies.png b/public/assets/movies.png
diff --git a/public/assets/portfolio.png b/public/assets/portfolio.png
diff --git a/public/assets/profile-picture.jpg b/public/assets/profile-picture.jpg
diff --git a/public/assets/recipe-app.png b/public/assets/recipe-app.png
diff --git a/public/assets/todo.png b/public/assets/todo.png
diff --git a/public/assets/weather-app.png b/public/assets/weather-app.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,38 @@
-export const App = () => {
+import SkipLink from "./components/SkipLink"
+import Header from "./sections/Header"
+import IntroSection from "./sections/IntroSection"
+import TechSection from "./sections/TechSection"
+import ProjectsSection from "./sections/ProjectsSection"
+import SkillsSection from "./sections/SkillsSection"
+import ArticlesSection from "./sections/ArticlesSection"
+import ContactSection from "./sections/ContactSection"
+
+import tech from "./data/tech.json"
+import projects from "./data/projects.json"
+import skills from "./data/skills.json"
+import articles from "./data/articles.json"
+
+import GlobalStyle from "./styles/GlobalStyle"
+import { ThemeProvider } from "styled-components"
+import theme from "./styles/theme.js"
+
+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>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <SkipLink />
+        <Header />
+        <IntroSection />
+        <TechSection tech={tech.tech} />
+        <ProjectsSection
+          projects={projects.projects}
+        />
+        <SkillsSection skills={skills.skills} />
+        <ContactSection />
+      </ThemeProvider>
     </>
   )
 }
+
+export default App
diff --git a/src/components/ArrowLink.jsx b/src/components/ArrowLink.jsx
@@ -0,0 +1,42 @@
+import styled from "styled-components"
+
+const Link = styled.a`
+  display: block;
+  text-align: center;
+
+  &:focus-visible {
+    outline: 2px solid;
+    outline-offset: 5px;
+    border-radius: 2px;
+  }
+
+  &:focus-visible>img {
+    animation: scrollAnimation 1s ease-out infinite alternate;
+  }
+`
+const Arrow = styled.img`
+  filter: ${({ $mode }) => $mode === "dark" ? "brightness(0) invert(1)" : "none"};
+  position: relative;
+  top: 0; 
+
+  &:hover {
+    animation: scrollAnimation 1s ease-out infinite alternate;
+  }
+
+  @keyframes scrollAnimation {
+    0% {top: 0;}
+    25% {top: 0;}
+    75% {top: 16px;}
+    100% {top: 16px;}
+  }
+`
+
+const ArrowLink = ({ link, mode }) => {
+  return (
+    <Link href={link}>
+      <Arrow $mode={mode} src="assets/arrow.svg" alt="go to next section" />
+    </Link>
+  )
+}
+
+export default ArrowLink
diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard.jsx
@@ -0,0 +1,56 @@
+import ButtonLink from "./ButtonLink"
+import CardHeading from "../typhography/CardHeading.jsx"
+import BodyText from "../typhography/BodyText.jsx"
+import Tag from "./Tag"
+import styled from "styled-components"
+import media from "../styles/media.js"
+
+
+const Card = styled.article`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacings.medium};
+  align-items: flex-start;
+
+  @media ${media.tablet} {
+    gap: 2rem;
+  }
+`
+
+const ArticleImage = styled.img`
+  height: 200px;
+  width: 100%;
+  object-fit: cover;
+  box-shadow: 2px 2px 5px rgba(31, 0, 124, 0.25);
+
+  @media ${media.tablet} {
+    height: 340px;
+  }
+  @media ${media.desktop} {
+    height: 340px;
+  }
+`
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacings.xSmall};
+  align-items: flex-start;
+`
+
+const ArticleCard = ({ article }) => {
+  return (
+    <Card>
+      <ArticleImage src={article.image} alt={article.altText} />
+      <TitleWrapper>
+        <ul>
+          <Tag tag={article.date} />
+        </ul>
+        <CardHeading title={article.title} />
+      </TitleWrapper>
+      <BodyText text={article.text} />
+      <ButtonLink text="Read article" link={article.link} icon="../assets/article-icon.svg" />
+    </Card>
+  )
+}
+
+export default ArticleCard
diff --git a/src/components/ButtonLink.jsx b/src/components/ButtonLink.jsx
@@ -0,0 +1,48 @@
+import styled from "styled-components"
+import media from "../styles/media.js"
+
+const StyledButton = styled.a`
+  background-color: ${({ theme }) => theme.colors.ternary};
+  color: ${({ theme }) => theme.colors.neutral};
+  border-radius: 40px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding-right: 16px;
+  font-size: 1em;
+  font-weight: 500;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: ${({ theme }) => theme.colors.secondary};
+  }
+
+  &:hover>img {
+    filter: invert(1);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.colors.primary};
+    outline-offset: 5px;
+  }
+
+  @media ${media.desktop} {
+    font-size: 1.125em;
+  }
+`
+
+const ButtonIcon = styled.img`
+  height: 32px;
+  width: 32px;
+  margin: 8px;
+`
+
+const ButtonLink = ({ text, link, icon }) => {
+  return (
+    <StyledButton href={link} target="_blank">
+      <ButtonIcon src={icon} alt="" />{text}
+    </StyledButton>
+  )
+}
+
+export default ButtonLink
diff --git a/src/components/ButtonSocial.jsx b/src/components/ButtonSocial.jsx
@@ -0,0 +1,37 @@
+import styled from "styled-components"
+
+const Link = styled.a`
+  &:focus-visible {
+    outline: 2px solid;
+    outline-offset: 5px;
+    border-radius: 2px;
+  }
+`
+
+const ButtonIcon = styled.img`
+  width: 32px;
+  height: 32px;
+  filter: invert(1);
+
+  &:hover {
+    filter: invert(0.3)
+  }
+
+  &:focus-visible {
+    outline: 2px solid;
+    outline-offset: 5px;
+    border-radius: 2px;
+  }
+`
+
+const ButtonSocial = ({ link, icon, text }) => {
+  return (
+    <li>
+      <Link href={link} target="_blank">
+        <ButtonIcon src={icon} alt={text} />
+      </Link>
+    </li>
+  )
+}
+
+export default ButtonSocial
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		# Portfolio

		Link: https://mimmi-eriksson.netlify.app/