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,24 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preload" as="image" href="SelinProfilePic.png" />
     <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/AIRobots.jpg b/src/assets/AIRobots.jpg
diff --git a/src/assets/AccessibilityQuiz.png b/src/assets/AccessibilityQuiz.png
diff --git a/src/assets/Portfoliopage.png b/src/assets/Portfoliopage.png
diff --git a/src/assets/Recipelibrarypage.png b/src/assets/Recipelibrarypage.png
diff --git a/src/assets/SelinProfilePic.png b/src/assets/SelinProfilePic.png
diff --git a/src/assets/WeatherApp.png b/src/assets/WeatherApp.png
diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -0,0 +1,94 @@
+import styled from "styled-components";
+import Content from "./Content";
+
+const ContactContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80px 20px;
+  background-color: white;
+  width: 100%;
+  text-align: center;
+
+  @media (max-width: 480px) {
+    padding: 60px 10px;
+  }
+`;
+
+const Icons = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+`;
+
+const IconLink = styled.a`
+  display: inline-block;
+`;
+
+const Text = styled.p`
+  font-size: 20px;
+  line-height: 1.5;
+  max-width: 600px;
+
+  @media (max-width: 480px) {
+    font-size: 16px;
+  }
+`;
+
+const ContactInfo = styled.div`
+  font-size: 20px;
+  margin: 15px 0;
+
+  @media (max-width: 480px) {
+    font-size: 16px;
+  }
+`;
+
+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. Just drop me a message or email me directly!
+        </Text>
+
+        <ContactInfo>Selin Carbone</ContactInfo>
+        <ContactInfo>+46 760 370 606</ContactInfo>
+        <ContactInfo>[email protected]</ContactInfo>
+
+        <Icons>
+          <IconLink
+            href="https://www.linkedin.com/in/selincarbone"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              width="48"
+              height="48"
+              src="https://img.icons8.com/fluency/48/linkedin.png"
+              alt="LinkedIn"
+            />
+          </IconLink>
+          <IconLink
+            href="https://github.com/selincarbone"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              width="48"
+              height="48"
+              src="https://img.icons8.com/fluency/48/github.png"
+              alt="GitHub"
+            />
+          </IconLink>
+        </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,82 @@
+import styled from "styled-components";
+import Navlinks from "./Navlinks";
+import selin from "../assets/SelinProfilePic.png";
+
+const HomeContainer = styled.div`
+  text-align: center;
+  padding: 100px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Presentation = styled.h3`
+  font-size: 30px;
+  color: black;
+  font-weight: 500;
+  margin-bottom: 10px;
+
+  @media (max-width: 480px) {
+    font-size: 20px;
+  }
+`;
+
+const Name = styled.h1`
+  font-size: 70px;
+  color: #c57763;
+  margin: 0 0 10px;
+
+  @media (max-width: 480px) {
+    font-size: 40px;
+  }
+`;
+
+const ImageContainer = styled.div`
+  margin-top: 20px;
+
+  img {
+    width: 300px;
+    height: 400px;
+    object-fit: cover;
+    border-radius: 50%;
+
+    @media (max-width: 480px) {
+      width: 200px;
+      height: 200px;
+    }
+  }
+`;
+
+const Info = styled.p`
+  margin-top: 20px;
+  font-weight: 400;
+  font-size: 25px;
+  text-align: center;
+
+  @media (max-width: 480px) {
+    font-size: 16px;
+  }
+`;
+
+const Home = () => {
+  return (
+    <>
+      <Navlinks />
+      <HomeContainer>
+        <Presentation>Hi there, I’m</Presentation>
+        <Name>Selin Carbone</Name>
+        <ImageContainer>
+          <img src={selin} alt="Selin Carbone" />
+        </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,119 @@
+import { useState } from "react";
+import styled from "styled-components";
+
+const NavigationContainer = styled.nav`
+  width: 100%;
+  background-color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+
+  @media (max-width: 768px) {
+    padding: 15px 16px;
+  }
+`;
+
+const Logo = styled.div`
+  font-weight: bold;
+  font-size: 20px;
+`;
+
+const Menu = styled.div`
+  display: flex;
+  gap: 16px;
+  padding-right: 8px;
+  max-width: 50%;
+  flex-wrap: nowrap;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const A = styled.a`
+  text-decoration: none;
+  color: black;
+  font-weight: 400;
+  white-space: nowrap;
+  font-size: 16px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+const MobileMenuIcon = styled.div`
+  display: none;
+  font-size: 26px;
+  cursor: pointer;
+
+  @media (max-width: 768px) {
+    display: block;
+  }
+`;
+
+const MobileMenu = styled.div`
+  display: none;
+  flex-direction: column;
+  gap: 20px;
+  background-color: white;
+  padding: 20px;
+  position: absolute;
+  top: 70px;
+  right: 20px;
+  border: 1px solid black;
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+
+  @media (max-width: 768px) {
+    display: ${(props) => (props.open ? "flex" : "none")};
+  }
+`;
+
+const Navlinks = () => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const toggleMenu = () => setMenuOpen((prev) => !prev);
+  const closeMenu = () => setMenuOpen(false);
+
+  return (
+    <NavigationContainer>
+      <Logo>Selin</Logo>
+
+      <Menu>
+        <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>
+      </Menu>
+
+      <MobileMenuIcon onClick={toggleMenu}>☰</MobileMenuIcon>
+
+      <MobileMenu open={menuOpen}>
+        <A href="#home" onClick={closeMenu}>
+          Home
+        </A>
+        <A href="#tech" onClick={closeMenu}>
+          Tech
+        </A>
+        <A href="#skills" onClick={closeMenu}>
+          Skills
+        </A>
+        <A href="#projects" onClick={closeMenu}>
+          Projects
+        </A>
+        <A href="#contact" onClick={closeMenu}>
+          Contact
+        </A>
+      </MobileMenu>
+    </NavigationContainer>
+  );
+};
+
+export default Navlinks;