Technigo · marinalendt-png · Nov 21, 2025 · Nov 25, 2025 · Nov 27, 2025 · Nov 27, 2025
diff --git a/README.md b/README.md
@@ -1 +1,34 @@
 # Portfolio
+https://project-portfolio-ml.netlify.app/
+
+Marina Lendt – Frontend Developer Portfolio
+
+Project Overview
+This is a personal portfolio website showcasing my projects, skills, and background as a frontend developer. The goal of the project is to demonstrate:
+
+- Responsive, mobile-first design
+- Accessible and user-friendly interfaces
+- Clean, reusable React components
+- Integration of images, icons, and external links
+
+Features
+
+# Header Section
+Introduction with name, profession, and a short bio
+
+# Tech Section
+Showing different tech that I have learnt 
+
+# Projects Section
+Cards displaying featured projects with live demo and GitHub links 
+
+# Skills Section
+Showing different skills in code, toolbox, and other skills
+
+# Articles Section
+Article cards with image, title, date, excerpt, and link to read more
+
+# Accessibility
+Proper use of semantic HTML (<section>, <article>, <time>)
+Focus-visible styles for keyboard navigation
+Alt attributes for all images
diff --git a/index.html b/index.html
@@ -1,13 +1,35 @@
 <!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" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <!-- Open Graph -->
+  <meta property="og:title" content="Marina Lendt - Frontend Developer">
+  <meta property="og:description" content="From healthcare to frontend development - my portfolio">
+  <meta property="og:image" content="https://project-portfolio-ml.netlify.app/ML-og-image.png">
+  <meta property="og:url" content="https://project-portfolio-ml.netlify.app/">
+  <meta property="og:type" content="website">
+
+  <!-- Favicon for browser -->
+  <link rel="icon" href="/ML-og-image.png" type="image/png">
+
+  <!-- Apple Touch Icon for iOS -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/ML-og-image.png">
+
+  <!-- Google fonts -->
+  <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=Dosis:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&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=Roboto: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.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.7.0",
+    "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/ML-og-image.png b/public/ML-og-image.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,29 @@
+import React from "react";
+
+import { GlobalStyles } from "./styles/GlobalStyles";
+import { HeaderSection } from "./sections/HeaderSection";
+import { TechSection } from "./sections/TechSection";
+import { ProjectsSection } from "./sections/ProjectsSection";
+import { SkillsSection } from "./sections/SkillsSection";
+import { ArticleSection } from "./sections/ArticleSection";
+import { ContactSection } from "./sections/ContactSection";
+// import { Buttons } from "./components/Buttons";
+
+
+
 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>
+      <GlobalStyles />
+      <HeaderSection />
+      <TechSection />
+      <ProjectsSection />
+      <SkillsSection />
+      <ArticleSection />
+      <ContactSection />
     </>
-  )
+  );
 }
+
+
+
diff --git a/src/assets/btn-github.svg b/src/assets/btn-github.svg
diff --git a/src/assets/btn-instagram.svg b/src/assets/btn-instagram.svg
diff --git a/src/assets/btn-linkedin.svg b/src/assets/btn-linkedin.svg
diff --git a/src/assets/business-site.png b/src/assets/business-site.png
diff --git a/src/assets/data-img.jpg b/src/assets/data-img.jpg
diff --git a/src/assets/floorball-img.jpg b/src/assets/floorball-img.jpg
diff --git a/src/assets/icon-arrow-down.svg b/src/assets/icon-arrow-down.svg
diff --git a/src/assets/icon-github.svg b/src/assets/icon-github.svg
diff --git a/src/assets/icon-web.svg b/src/assets/icon-web.svg
diff --git a/src/assets/picture1.jpg b/src/assets/picture1.jpg
diff --git a/src/assets/picture2.jpg b/src/assets/picture2.jpg
diff --git a/src/assets/picture3.jpg b/src/assets/picture3.jpg
diff --git a/src/assets/profile-img.jpg b/src/assets/profile-img.jpg
diff --git a/src/assets/quiz-app.png b/src/assets/quiz-app.png
diff --git a/src/assets/recipe-library.png b/src/assets/recipe-library.png
diff --git a/src/assets/stethoscope-img.jpg b/src/assets/stethoscope-img.jpg
diff --git a/src/assets/weather-app.png b/src/assets/weather-app.png
diff --git a/src/components/ArticleCard.jsx b/src/components/ArticleCard.jsx
@@ -0,0 +1,143 @@
+import React from "react";
+import styled from "styled-components";
+import IconWebSVG from "../assets/icon-web.svg";
+
+export const ArticleCard = ({ data }) => {
+  return (
+    <CardWrapper>
+      <ImageBox>
+        <Image src={data.image} alt={data.title} />
+      </ImageBox>
+      <TextBox>
+        <DateTag dateTime={data.date}>{data.date}</DateTag>
+        <CardTitle>{data.title}</CardTitle>
+        <CardText>{data.text}</CardText>
+        <ReadButton href={data.link} aria-label={`Read full article: ${data.title}`}>
+          <ButtonIcon src={IconWebSVG} alt="" /> Read article
+        </ReadButton>
+      </TextBox>
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.article`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+  margin-top: 64px;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: flex-start; 
+    gap: 32px;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    gap: 125px;
+  }
+`;
+
+const ImageBox = styled.div`
+  width: 327px;
+  height: 200px; 
+  flex-shrink: 0;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    width: 200px;
+    height: 338px;
+    flex-shrink: 0;
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    width: 479px;
+    height: 311px;
+  }
+`;
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  object-fit: cover;
+`;
+
+const TextBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  text-align: left;
+  font-size: 16px;
+
+  /* Tablet */
+  @media (min-width: 768px) {
+    padding-left:0;
+    max-width: calc(100% - 200px);
+  }
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    max-width: calc(100% - 379px);
+  }
+`;
+
+const DateTag = styled.time`
+  display: flex;
+  align-items: center;
+  width: 130px;
+  height: 24px;
+  padding: 2px 6px;
+  background: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
+  border: 1px solid rgba(0, 0, 0, 1);
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 500;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 24px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 1);
+  line-height: 24px;
+
+  /* Desktop */
+  @media (min-width: 1024px) {
+    font-size: 30px;
+  }
+`;
+
+const CardText = styled.p`
+  font-size: 16px;
+  color: rgba(0, 0, 0, 1);
+  line-height: 22px;
+`;
+
+const ReadButton = styled.a`
+  width: 271px;
+  height: 48px;
+  display: inline-flex;
+  text-align: center;
+  padding: 12px 16px;
+  background: rgba(0, 0, 0, 1);
+  color: rgba(255, 255, 255, 1) ;
+  border-radius: 12px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 3px solid #f39c12;
+    outline-offset: 2px;
+  }
+`;
+
+const ButtonIcon = styled.img`
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;