Technigo · MalLunBar · Apr 15, 2025 · Apr 16, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
 # Portfolio
+
+Link to Project: 
+https://malinlundgren.netlify.app/
diff --git a/index.html b/index.html
@@ -1,13 +1,55 @@
 <!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="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=Poppins:wght@400;500;700&display=swap"
+    rel="stylesheet"
+  >
+  <link
+    rel="icon"
+    type="image/svg+xml"
+    href="./assets/girl.png"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <meta
+    property="og:title"
+    content="Malin Lundgren Frontend Developer Portfolio"
+  />
+  <meta
+    property="og:type"
+    content="website"
+  />
+  <meta
+    property="og:url"
+    content="https://malinlundgren.netlify.app/"
+  />
+  <meta
+    property="og:image"
+    content="https://malinlundgren.netlify.app/assets/og-tag.png"
+  />
+  <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,17 +11,19 @@
   },
   "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",
     "globals": "^15.15.0",
     "vite": "^6.2.0"
   }
-}
+}
diff --git a/public/assets/arrowdown-icon.svg b/public/assets/arrowdown-icon.svg
diff --git a/public/assets/blue.webp b/public/assets/blue.webp
diff --git a/public/assets/bus.webp b/public/assets/bus.webp
diff --git a/public/assets/business1.webp b/public/assets/business1.webp
diff --git a/public/assets/contact-pic.webp b/public/assets/contact-pic.webp
diff --git a/public/assets/food.webp b/public/assets/food.webp
diff --git a/public/assets/girl.png b/public/assets/girl.png
diff --git a/public/assets/github.svg b/public/assets/github.svg
diff --git a/public/assets/globe-icon.svg b/public/assets/globe-icon.svg
diff --git a/public/assets/instagram-icon.svg b/public/assets/instagram-icon.svg
diff --git a/public/assets/it-takes-two.jpg b/public/assets/it-takes-two.jpg
diff --git a/public/assets/it-takes-two.webp b/public/assets/it-takes-two.webp
diff --git a/public/assets/linkedin-icon.svg b/public/assets/linkedin-icon.svg
diff --git a/public/assets/og-tag.png b/public/assets/og-tag.png
diff --git a/public/assets/profile-pic.png b/public/assets/profile-pic.png
diff --git a/public/assets/purple.webp b/public/assets/purple.webp
diff --git a/public/assets/rain.webp b/public/assets/rain.webp
diff --git a/public/assets/towerfall.webp b/public/assets/towerfall.webp
diff --git a/public/assets/towerfall1.webp b/public/assets/towerfall1.webp
diff --git a/public/assets/yellow.webp b/public/assets/yellow.webp
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,25 @@
+import GlobalStyle from "./GlobalStyle"
+import { About } from "./sections/About"
+import TechSection from "./sections/TechSection"
+import ProjectSection from "./sections/ProjectsSection"
+import SkillsSection from "./sections/SkillsSection"
+import Blog from "./sections/BlogSection"
+import ContactSection from "./sections/ContactSection"
+
+
+
 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 />
+      <About />
+      <TechSection />
+      <ProjectSection />
+      <SkillsSection />
+      <Blog />
+      <ContactSection />
     </>
   )
 }
+
+
diff --git a/src/GlobalStyle.jsx b/src/GlobalStyle.jsx
@@ -0,0 +1,12 @@
+import { createGlobalStyle } from "styled-components"
+
+const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;
+    margin: 0; 
+    padding: 0;
+    font-family: "Poppins", sans-serif;
+  }
+`
+
+export default GlobalStyle
diff --git a/src/components/BlogCard.jsx b/src/components/BlogCard.jsx
@@ -0,0 +1,49 @@
+import { Button } from "./Button"
+import styled from "styled-components"
+import { CardTextContent } from "./CardTextContent"
+import { BlogImage } from "./BlogImage"
+import { media } from "../media"
+
+
+const BlogCardStyle = styled.div`
+  display: flex; 
+  flex-direction: column; 
+  gap: 32px;
+  flex: 1 0 0;
+
+
+  @media ${media.tablet} {
+    flex-direction: row;
+  }
+  @media ${media.desktop} {
+    gap: 125px; 
+  }
+`
+const BlogCardTextStyle = styled.div`
+  display: flex; 
+  flex-direction: column; 
+  gap: 32px; 
+
+`
+const BlogCard = ({ image, alt, tags, name, description, link }) => {
+  return (
+    <BlogCardStyle>
+      <BlogImage
+        image={image}
+        alt={alt}
+      />
+      <BlogCardTextStyle>
+        <CardTextContent
+          name={name}
+          tags={tags}
+          description={description} />
+        <Button
+          icon="./assets/globe-icon.svg"
+          label="Watch Trailer"
+          url={link} />
+      </BlogCardTextStyle>
+    </BlogCardStyle>
+  )
+}
+
+export default BlogCard
diff --git a/src/components/BlogImage.jsx b/src/components/BlogImage.jsx
@@ -0,0 +1,26 @@
+import styled from "styled-components";
+import { media } from "../media";
+
+
+const BlogCardImage = styled.img`
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: 12px;
+
+  @media ${media.tablet} {
+    width: 200px;
+    height: 100%;
+  }
+  @media ${media.desktop} {
+    width: 479px;
+  }
+`
+
+
+export const BlogImage = ({ image, alt }) => {
+  return <BlogCardImage src={image} alt={alt} />
+}
+
+
+
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,83 @@
+import styled from "styled-components"
+import IconLink from "./IconLink"
+import { useState } from "react";
+
+
+
+const ButtonStyled = styled.a`
+  background-color: ${(props) => props.$background || "black"};
+  color: ${(props) => props.$text || "white"};
+  border: ${(props) => props.$border || "none"};
+  border-radius: 12px;
+  width: 303px;
+  height: 48px;
+  font-size: 18px;
+  padding: 16px;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  text-decoration: none; 
+`
+
+const CenteredButtonStyled = styled(ButtonStyled)`
+  align-self: center; 
+`
+
+export const Button = ({ icon, label, url, background, text, border }) => {
+
+  return (
+    <ButtonStyled
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      $background={background}
+      $text={text}
+      $border={border}
+
+    >
+      <IconLink
+        icon={icon}
+        url={url}
+        background={background} />
+      {label}
+    </ButtonStyled>
+  )
+}
+
+export const CenteredButton = ({ icon, label, url, background, text, border }) => {
+
+  const [showBox, setShowBox] = useState(false);
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    setShowBox(true);
+  }
+
+  return (
+    <>
+      <CenteredButtonStyled
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        $background={background}
+        $text={text}
+        $border={border}
+        onClick={handleClick}
+      >
+        <IconLink
+          icon={icon}
+          url={url}
+          background={background} />
+        {label}
+      </CenteredButtonStyled>
+
+      {showBox && (
+        <div style={{ padding: "10px", backgroundColor: "#eee", borderRadius: "12px" }}>
+          No more projects to show!
+        </div>
+      )}
+    </>
+
+  )
+}
+
diff --git a/src/components/CardTextContent.jsx b/src/components/CardTextContent.jsx
@@ -0,0 +1,35 @@
+import { Tag } from "./Tag"
+import { HeadingMedium } from "../typography/HeadingsMedium"
+import styled from "styled-components"
+import { Paragraph } from "../typography/Paragraphs"
+
+
+const CardTextStyle = styled.div`
+  display: flex; 
+  flex-direction: column; 
+  gap: 16px; 
+  max-width: 580px;
+
+`
+const TagContainerStyle = styled.div`
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+`
+
+export const CardTextContent = ({ tags, name, description }) => {
+  return (
+    <CardTextStyle>
+      <TagContainerStyle>
+        {tags.map((tag) => (
+          <Tag
+            key={tag}
+            label={tag} />
+        ))}
+      </TagContainerStyle>
+      <HeadingMedium title={name} />
+      <Paragraph align="left">{description}</Paragraph>
+    </CardTextStyle>
+
+  )
+}
diff --git a/src/components/IconLink.jsx b/src/components/IconLink.jsx
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+
+const IconStyled = styled.img`
+  width: 32px;
+  height: 32px;
+  background-color: ${(props) => props.$background || "black"};
+`
+const WhiteIconStyled = styled(IconStyled)`
+  background-color: white;
+`
+
+const IconLink = ({ icon, background }) => {
+  return (
+    <>
+      {icon && <IconStyled
+        src={icon}
+        alt=""
+        aria-hidden="true"
+        $background={background} />}
+    </>
+  )
+}
+
+export default IconLink