Technigo · alex91-html · Apr 15, 2025 · Apr 15, 2025 · Apr 15, 2025 · Apr 15, 2025
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
 # Portfolio
+- Netfly link: https://alex-codes-portfolio.netlify.app/
+- figma link: https://www.figma.com/design/OrBxZbZNOs23n7gznIQGOX/Alex-U_Portfolio-design?node-id=1078-2177&m=dev
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,4 @@
+## to do / log
+- [x] animations
+- [x] fix gerarchies and type font
+- [x] deploy 
diff --git a/index.html b/index.html
@@ -1,13 +1,34 @@
 <!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="/favicon.svg"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1"
+  />
+  <link
+    rel="stylesheet"
+    href="https://use.typekit.net/zoj7yqa.css"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=YourFontName:wght@400;700&display=swap"
+    rel="stylesheet"
+  >
+  <title>Alexander Übelhör</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
@@ -10,14 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.9.4",
     "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/business-site.png b/public/assets/business-site.png
diff --git a/public/assets/happy.png b/public/assets/happy.png
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/quiz-site.png b/public/assets/quiz-site.png
diff --git a/public/assets/recipe-library.png b/public/assets/recipe-library.png
diff --git a/public/assets/todo-app.png b/public/assets/todo-app.png
diff --git a/public/assets/weather-app.png b/public/assets/weather-app.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/pull_request_template.md b/pull_request_template.md
@@ -1 +1,4 @@
-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 link:** https://www.figma.com/design/OrBxZbZNOs23n7gznIQGOX/Alex-U_Portfolio-design?node-id=1078-906&t=ZSxtzeE0qFNKz3dm-1
+- **Netlify link:** 
+
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,26 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { GlobalStyle } from "./styles/GlobalStyle.jsx";
+import { theme } from "./styles/theme.js";
+
+import ProjectsSection from "./components/section-project/ProjectsSection.jsx";
+import HeroSection from "./components/section-hero/HeroSection.jsx";
+import InfoSection from "./components/section-info/InfoSection.jsx";
+import Navbar from "./components/common/Navbar.jsx";
+import CompanionSubtitle from "./components/common/CompanionSubtitle.jsx";
+
+
+
 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>
-    </>
-  )
-}
+    <ThemeProvider theme={theme}>
+      <CompanionSubtitle />
+      <GlobalStyle />
+      <Navbar />
+      <HeroSection id="hero-section" />
+      <ProjectsSection id="projects-section" />
+      <InfoSection id="info-section" />
+    </ThemeProvider >
+
+  );
+};
diff --git a/src/assets/fonts/.13375.otf b/src/assets/fonts/.13375.otf
diff --git a/src/assets/icons/Btn - github.svg b/src/assets/icons/Btn - github.svg
diff --git a/src/assets/icons/Btn - instagram.svg b/src/assets/icons/Btn - instagram.svg
diff --git a/src/assets/icons/Btn - linkedin.svg b/src/assets/icons/Btn - linkedin.svg
diff --git a/src/assets/icons/Btn - stackoverflow.svg b/src/assets/icons/Btn - stackoverflow.svg
diff --git a/src/assets/icons/Btn - twitter.svg b/src/assets/icons/Btn - twitter.svg
diff --git a/src/assets/icons/arrow_circle_down.svg b/src/assets/icons/arrow_circle_down.svg