Technigo · SelinCoder · May 7, 2025 · May 15, 2025 · May 22, 2025 · May 22, 2025
diff --git a/index.html b/index.html
@@ -1,11 +1,23 @@
-<!doctype html>
+<!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" />
+    <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=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"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=captive_portal"
+    />
     <title>Portfolio</title>
   </head>
+
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>

diff --git a/package.json b/package.json
@@ -4,14 +4,15 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "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",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,27 @@
+import Contact from "./components/Contact";
+import Home from "./components/Home";
+import Projects from "./components/Projects";
+import Skills from "./components/Skills";
+import Tech from "./components/Tech";
+
 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>
-    </>
-  )
-}
+    <div className="app">
+      <section id="home">
+        <Home />
+      </section>
+      <section id="tech">
+        <Tech />
+      </section>
+      <section id="skills">
+        <Skills />
+      </section>
+      <section id="projects">
+        <Projects />
+      </section>
+      <section id="contact">
+        <Contact />
+      </section>
+    </div>
+  );
+};
diff --git a/src/assets/Recipe.png b/src/assets/Recipe.png
diff --git a/src/assets/image1.png b/src/assets/image1.png
diff --git a/src/assets/image3.png b/src/assets/image3.png
diff --git a/src/assets/image4.png b/src/assets/image4.png
diff --git a/src/assets/portfolio.png b/src/assets/portfolio.png
diff --git a/src/assets/selin.jpg b/src/assets/selin.jpg
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import Content from "./Content";
+
+const ContactContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100px;
+  background-color: white;
+  width: 100%;
+`;
+
+const Icons = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100px;
+`;
+
+const Text = styled.div`
+  display: flex;
+  font-size: 20px;
+`;
+
+const ContactInfo = styled.div`
+  font-size: 20px;
+  margin: 15px 0;
+`;
+
+const Contact = () => {
+  return (
+    <Content>
+      <ContactContainer>
+        <h1>Contact</h1>
+        <Text>
+          Let’s Work Together! Have a project or opportunity in mind? I’d love
+          to hear from you.<br></br>Just drop me a message using the form below
+          or email me directly.!
+        </Text>
+
+        <ContactInfo>Selin Carbone</ContactInfo>
+        <ContactInfo>+46 760370606</ContactInfo>
+        <ContactInfo>[email protected]</ContactInfo>
+        <Icons>
+          <img
+            width="48"
+            height="48"
+            src="https://img.icons8.com/fluency/48/linkedin.png"
+            alt="linkedin"
+          />
+          <img
+            width="48"
+            height="48"
+            src="https://img.icons8.com/fluency/48/github.png"
+            alt="github"
+          />
+        </Icons>
+      </ContactContainer>
+    </Content>
+  );
+};
+
+export default Contact;
diff --git a/src/components/Content.jsx b/src/components/Content.jsx
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Content = ({ children }) => {
+  return <Container>{children}</Container>;
+};
+export default Content;
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
@@ -0,0 +1,64 @@
+import Navlinks from "./Navlinks";
+import styled from "styled-components";
+import selin from "../assets/selin.jpg";
+
+const HomeContainer = styled.div`
+  text-align: center;
+  height: 1000px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; /* important for horizontal centering */
+`;
+
+const Presentation = styled.h3`
+  font-size: 30px;
+  color: black;
+  font-weight: 500;
+  margin-bottom: 10px;
+`;
+
+const Name = styled.h1`
+  font-size: 70px;
+  color: #c57763;
+  margin: 0px;
+  margin-bottom: 10px;
+`;
+
+const ImageContainer = styled.div`
+  margin-top: 20px;
+`;
+
+const Info = styled.p`
+  margin-top: 20px;
+  font-weight: 400;
+  font-size: 25px;
+`;
+
+const Home = () => {
+  return (
+    <>
+      <Navlinks />
+      <HomeContainer>
+        <Presentation>Hi there, I´m </Presentation>
+        <Name>Selin Carbone</Name>
+        <ImageContainer>
+          <img
+            src={selin}
+            style={{
+              height: "500px",
+              borderRadius: "500px",
+            }}
+          />
+        </ImageContainer>
+        <Info>
+          Creative Fullstack Web Developer with a background in
+          <br />
+          Visual Marketing and Sales
+        </Info>
+      </HomeContainer>
+    </>
+  );
+};
+
+export default Home;
diff --git a/src/components/Navlinks.jsx b/src/components/Navlinks.jsx
@@ -0,0 +1,41 @@
+import styled from "styled-components";
+
+const NavigationContainer = styled.div`
+  width: 100%;
+  background-color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+`;
+
+const Atags = styled.div`
+  width: 900px;
+  padding: 20px 80px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const A = styled.a`
+  text-decoration: none;
+  color: black;
+  font-weight: 400;
+`;
+
+const Navlinks = () => {
+  return (
+    <NavigationContainer>
+      <Atags>
+        <A href="#home">Home</A>
+        <A href="#tech">Tech</A>
+        <A href="#skills">Skills</A>
+        <A href="#projects">Projects</A>
+        <A href="#contact">Contact</A>
+      </Atags>
+    </NavigationContainer>
+  );
+};
+
+export default Navlinks;