Technigo · LeonEkelund · Nov 25, 2025 · Nov 28, 2025 · Nov 30, 2025 · Nov 30, 2025
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# Portfolio
+My custom link: https://leonekelund.dev/
diff --git a/index.html b/index.html
@@ -1,13 +1,33 @@
 <!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="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+  <link rel="preload" as="style"
+    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
+    onload="this.onload=null;this.rel='stylesheet'" />
+
+  <noscript>
+    <link rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" />
+  </noscript>
+
+  <link rel="icon" type="image/x-icon" href="/src/assets/favicon.svg" />
+
+
+  <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,7 +11,9 @@
   },
   "dependencies": {
     "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",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,31 @@
+import HeaderSection from './sections/HeaderSection';
+import TechSection from './sections/TechSection';
+import ProjectsSection from './sections/ProjectsSection';
+// import ThoughtsSection from './sections/ThoughtsSection';
+import SkillsSection from './sections/SkillsSection';
+import ContactSection from './sections/ContactSection';
+
+import GlobalStyle from './styles/GlobalStyle';
+
 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>
+        <HeaderSection />
+      </header>
+
+      <main>
+        <TechSection />
+        <ProjectsSection />
+        {/* <ThoughtsSection /> */}
+        <SkillsSection />
+      </main>
+
+      <footer>
+        <ContactSection />
+      </footer>
     </>
-  )
-}
+  );
+};
diff --git a/src/assets/HeaderImage2.jpg b/src/assets/HeaderImage2.jpg
diff --git a/src/assets/HeaderImage3.jpg b/src/assets/HeaderImage3.jpg
diff --git a/src/assets/favicon.svg b/src/assets/favicon.svg
diff --git a/src/assets/leonimage.jpg b/src/assets/leonimage.jpg
diff --git a/src/assets/project1.jpg b/src/assets/project1.jpg
diff --git a/src/assets/project2.jpg b/src/assets/project2.jpg
diff --git a/src/assets/project3.jpg b/src/assets/project3.jpg
diff --git a/src/components/ProjectButton.jsx b/src/components/ProjectButton.jsx
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+const ProjectButton = ({ icon, text, link }) => {
+  return (
+    <Button href={link} target="_blank">
+      {icon && <IconWrapper>{icon}</IconWrapper>}
+      <span>{text}</span>
+    </Button>
+  );
+};
+
+export default ProjectButton;
+
+/* STYLING */
+
+const Button = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  width: 250px;
+  height: 48px;
+  padding: 0 16px;
+  box-sizing: border-box;
+
+  background: #000000;
+  color: #ffffff;
+  border-radius: 12px;
+
+  text-decoration: none;
+  font-size: 0.875rem; /* 14px */
+  font-weight: 500;
+
+  transition: opacity 0.2s ease;
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    color: #ffffff; 
+  }
+`;
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
@@ -0,0 +1,154 @@
+
+import styled from "styled-components";
+import ProjectButton from "./ProjectButton";
+import { FaGlobe, FaGithub } from "react-icons/fa";
+
+const ProjectCard = ({
+  image,
+  tech,
+  title,
+  description,
+  liveLink,
+  codeLink,
+  reverse
+}) => {
+  return (
+    <Card reverse={reverse}>
+      <ImageWrapper>
+        <img src={image} alt={title} />
+      </ImageWrapper>
+
+      <Content>
+        <TechList>
+          {tech.map((item) => (
+            <span key={item}>{item}</span>
+          ))}
+        </TechList>
+
+        <h3>{title}</h3>
+        <p>{description}</p>
+
+        <Buttons>
+          <ProjectButton
+            icon={<FaGlobe />}
+            text="Live demo"
+            link={liveLink}
+          />
+          <ProjectButton
+            icon={<FaGithub />}
+            text="View Code"
+            link={codeLink}
+          />
+        </Buttons>
+      </Content>
+    </Card>
+  );
+};
+
+
+export default ProjectCard;
+
+/* STYLING */
+
+const Card = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4.5rem;         
+  margin: 4rem auto; 
+  width: 100%;
+  max-width: 1000px;  
+
+  flex-direction: ${({ reverse }) => (reverse ? "row-reverse" : "row")};
+
+  /* IPAD */
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.75rem;
+    margin: 3rem auto;
+    padding: 0 1.5rem;  
+  }
+
+  /* MOBILE */
+  @media (max-width: 600px) {
+    gap: 1.5rem;
+    margin: 2.5rem auto;
+    padding: 0 1.25rem;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  /* DESKTOP */
+  flex: 0 0 479px;
+  height: 479px;
+  border-radius: 16px;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 16px;
+    display: block;
+  }
+
+  /* IPAD:
+  @media (max-width: 1024px) {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: none;
+    height: auto;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  /* MOBILE:
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+`;
+
+const Content = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;     
+  text-align: left;
+
+    /* IPAD:
+  @media (max-width: 1024px) {
+    width: 100%;
+    max-width: 650px;
+  }
+  /* MOBILE:
+  @media (max-width: 600px) {
+    max-width: none;
+  }
+`;
+
+const TechList = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  span {
+    border: 1px solid #000;
+    padding: 0.2rem 0.6rem;
+    font-size: 0.75rem;
+    border-radius: 4px;
+  }
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+`;
diff --git a/src/index.css b/src/index.css
@@ -1,4 +0,0 @@
-body {
-  background: pink;
-  color: hotpink;
-}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		# Portfolio
		My custom link: https://leonekelund.dev/