Technigo · carro-barro · Nov 25, 2025 · Nov 26, 2025 · Nov 27, 2025 · Nov 28, 2025
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
 # Portfolio
+
+netlify link: https://carolina-oldertz-portfolio.netlify.app/
diff --git a/index.html b/index.html
@@ -1,13 +1,88 @@
 <!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="/favicon/favicon.ico"
+  >
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="/favicon/favicon-32x32.png"
+  >
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="/favicon/favicon-16x16.png"
+  >
+
+  <link
+    rel="manifest"
+    href="/favicon/site.webmanifest"
+  >
+
+  <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="/favicon/apple-touch-icon.png"
+  >
+
+  <meta
+    name="theme-color"
+    content="#ffffff"
+  >
+  <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
+    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&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&display=swap"
+    rel="stylesheet"
+  >
+  <title>Portfolio</title>
+  <meta
+    property="og:title"
+    content="Carolina Oldertz | Front-End Developer Portfolio"
+  />
+  <meta
+    property="og:description"
+    content="Check out my portfolio! I'm a Web Developer with a background in Content Creation and Marketing."
+  />
+  <meta
+    property="og:image"
+    content="https://www.carolina-oldertz-portfolio.com/images/hero/Headshot-heroImg-1.png"
+  />
+  <meta
+    property="og:url"
+    content="https://www.carolina-oldertz-portfolio.com"
+  />
+  <meta
+    property="og:type"
+    content="website"
+  />
+
+</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,8 @@
   },
   "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",

diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
diff --git a/public/favicon/site.webmanifest b/public/favicon/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
diff --git a/public/icons/ArrowDown.svg b/public/icons/ArrowDown.svg
diff --git a/public/icons/Btn - github.svg b/public/icons/Btn - github.svg
diff --git a/public/icons/Btn - instagram.svg b/public/icons/Btn - instagram.svg
diff --git a/public/icons/Btn - linkedin.svg b/public/icons/Btn - linkedin.svg
diff --git a/public/icons/Btn - stackoverflow.svg b/public/icons/Btn - stackoverflow.svg
diff --git a/public/icons/Btn - twitter.svg b/public/icons/Btn - twitter.svg
diff --git a/public/icons/Github.svg b/public/icons/Github.svg
diff --git a/public/icons/Netlify.svg b/public/icons/Netlify.svg
diff --git a/public/images/articles/Article-carerr-change.png b/public/images/articles/Article-carerr-change.png
diff --git a/public/images/articles/Article-imposter.jpg b/public/images/articles/Article-imposter.jpg
diff --git a/public/images/articles/Article-newbie.jpg b/public/images/articles/Article-newbie.jpg
diff --git a/public/images/hero/Headshot-heroImg-1.png b/public/images/hero/Headshot-heroImg-1.png
diff --git a/public/images/hero/Painting-heroImg-3.jpg b/public/images/hero/Painting-heroImg-3.jpg
diff --git a/public/images/hero/SideProfile-heroImg-2.jpg b/public/images/hero/SideProfile-heroImg-2.jpg
diff --git a/public/images/projects/Accesibility-site.png b/public/images/projects/Accesibility-site.png
diff --git a/public/images/projects/Recipe-library.png b/public/images/projects/Recipe-library.png
diff --git a/public/images/projects/Weather-app.png b/public/images/projects/Weather-app.png
diff --git a/public/images/projects/business-site.png b/public/images/projects/business-site.png
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1 +1,3 @@
-Please include a link to your Figma design and a Netlify link.
+Please include a link to your Figma design and a Netlify link.
+
+figma design: https://www.figma.com/design/YFJswIB708jYUoHg3swht2/Portfolio-designs--Copy-?node-id=0-1&p=f&t=lRVOFqJdJeShs1sk-0
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,33 @@
+import styled, { createGlobalStyle } from "styled-components"
+import { HeroSection } from "./components/hero/HeroSection"
+import { TechSection } from "./components/Tech/TechSection"
+import { ProjectSection } from "./components/projects/ProjectSection"
+import { SkillSection } from "./components/Skills/SkillSection"
+import { ArticleSection } from "./components/articles/ArticleSection"
+import { FooterSection } from "./components/footer/FooterSection"
+
+const GlobalStyles = createGlobalStyle`
+* {
+box-sizing: border-box;
+}
+
+
+body {
+font-family: "Poppins", sans-serif;
+margin: 0;
+}
+`
+
 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></GlobalStyles>
+      <HeroSection></HeroSection>
+      <TechSection></TechSection>
+      <ProjectSection></ProjectSection>
+      <SkillSection></SkillSection>
+      <ArticleSection></ArticleSection>
+      <FooterSection></FooterSection>
     </>
   )
 }
diff --git a/src/components/Skills/SkillHeading.jsx b/src/components/Skills/SkillHeading.jsx
@@ -0,0 +1,10 @@
+import styled from "styled-components"
+import { H2 } from "../typography/H2"
+
+const StyledHeading = styled(H2)`
+color: ${({ theme }) => theme.color.secondary};
+`
+
+export const SkillHeading = () => {
+  return <StyledHeading>Skills</StyledHeading>
+}
diff --git a/src/components/Skills/SkillInfo.jsx b/src/components/Skills/SkillInfo.jsx
@@ -0,0 +1,30 @@
+import styled from "styled-components"
+import { P } from "../typography/P"
+
+const StyledInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    align-items: center;
+  }
+  @media (min-width: ${({ theme }) => theme.breakpoints.desktop}) {
+    align-items: flex-start;
+  }
+`
+
+export const SkillInfo = ({ info }) => {
+  const skillItems = info.split('\n')
+
+  return (
+    <StyledInfoContainer>
+      {skillItems.map((item, index) => (
+        <P key={index} style={{ color: 'white' }}>
+          {item.trim()}
+        </P>
+      ))}
+    </StyledInfoContainer>
+  )
+}
diff --git a/src/components/Skills/SkillInfoCard.jsx b/src/components/Skills/SkillInfoCard.jsx
@@ -0,0 +1,29 @@
+import styled from "styled-components"
+import { SkillInfo } from "./SkillInfo"
+import { SkillTags } from "./SkillTags"
+
+const StyledInfoCard = styled.div`
+display: flex;
+width: 250px;
+flex-direction: column;
+align-items: flex-start;
+gap: 16px;
+flex-shrink: 0;
+
+@media (min-width: ${({ theme }) => theme.breakpoints.tablet}) {
+    align-items: center;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.desktop}) {
+    align-items: flex-start;
+  }
+`
+
+export const SkillInfoCard = ({ tag, info }) => {
+  return (
+    <StyledInfoCard>
+      <SkillTags tag={tag} />
+      <SkillInfo info={info} />
+    </StyledInfoCard>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		# Portfolio

		netlify link: https://carolina-oldertz-portfolio.netlify.app/
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}