Technigo · sandrahagevall · Nov 18, 2025 · Nov 18, 2025 · Nov 19, 2025 · Nov 19, 2025
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
-# Portfolio
+# Sandra Hagevall — Portfolio
+
+## 🚀 Live Demo
+https://sandrahagevall.netlify.app/
diff --git a/index.html b/index.html
@@ -1,13 +1,30 @@
 <!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/png"
+    href="/images/favicon.png"
+  />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet"
+  />
+  <title>Sandra Hagevall - 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
@@ -10,14 +10,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "framer-motion": "^12.23.24",
     "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",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.7.0",
+    "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/gitcontact.svg b/public/gitcontact.svg
diff --git a/public/github.svg b/public/github.svg
diff --git a/public/images/arrow.svg b/public/images/arrow.svg
diff --git a/public/images/business2.png b/public/images/business2.png
diff --git a/public/images/careerchange.jpg b/public/images/careerchange.jpg
diff --git a/public/images/contactimg.png b/public/images/contactimg.png
diff --git a/public/images/eventfinder2.png b/public/images/eventfinder2.png
diff --git a/public/images/favicon.png b/public/images/favicon.png
diff --git a/public/images/footerimg.jpg b/public/images/footerimg.jpg
diff --git a/public/images/frontend.jpg b/public/images/frontend.jpg
diff --git a/public/images/kugghjul.png b/public/images/kugghjul.png
diff --git a/public/images/linkedin.svg b/public/images/linkedin.svg
diff --git a/public/images/logistik.jpg b/public/images/logistik.jpg
diff --git a/public/images/placeholder.png b/public/images/placeholder.png
diff --git a/public/images/recipe2.png b/public/images/recipe2.png
diff --git a/public/images/topimg.png b/public/images/topimg.png
diff --git a/public/images/watherapp2.png b/public/images/watherapp2.png
diff --git a/public/instagram.svg b/public/instagram.svg
diff --git a/public/link.svg b/public/link.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,34 @@
+import { Hero } from "./components/Hero"
+import { Tech } from "./components/Tech"
+import { FeaturedProjects } from "./components/FeaturedProjects"
+import { Skills } from "./components/Skills"
+import { MyWords } from "./components/MyWords"
+import { Contact } from "./components/Contact"
+import { GlobalStyle } from "./components/GlobalStyle.jsx"
+import { theme } from "./components/theme.js"
+import { ThemeProvider } from "styled-components"
+
+
 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}>
+        <GlobalStyle />
+        <a href="#main" className="skip-link">Skip to main content</a>
+        <Hero />
+        <main id="main" tabIndex={-1}>
+
+          <Tech />
+
+          <FeaturedProjects />
+
+          <Skills />
+
+          <MyWords />
+
+          <Contact />
+        </main>
+      </ThemeProvider>
     </>
   )
 }
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,75 @@
+import styled from "styled-components"
+
+export const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  width: 303px;
+  height: 48px;
+  padding: ${({ theme }) => `${theme.spacing.sm} ${theme.spacing.md}`};
+  gap: ${({ theme }) => theme.spacing.md};
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 12px;
+
+  background: ${({ theme, $variant }) =>
+    $variant === "secondary" ? "transparent" : theme.colors.primary};
+
+  color: ${({ theme, $variant }) =>
+    $variant === "secondary" ? theme.colors.primary : theme.colors.secondary};
+  border: ${({ theme, $variant }) =>
+    $variant === "secondary" ? `1px solid ${theme.colors.primary}` : "none"};
+
+  transition: 0.2s ease-in-out;
+
+  /* Smooth transition for hover and focus ring */
+  transition: opacity 0.18s ease-in-out, box-shadow 0.12s ease-in-out;
+
+  &:hover {
+    opacity: 0.85;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  /* Use focus-visible so mouse users aren't shown the ring; adapt ring by variant */
+  &:focus-visible {
+    outline: none;
+    box-shadow: ${({ $variant, theme }) =>
+    $variant === "secondary"
+      ? "0 0 0 3px rgba(0,0,0,0.85)"
+      : `0 0 0 3px ${theme.colors.accent}`};
+    outline-offset: 2px;
+  }
+`
+
+const Icon = styled.img`
+  width: 2rem;
+  height: 2rem;
+  object-fit: contain;
+`
+
+export const Button = ({ icon, children, variant = "primary", as: asProp, href, target, rel, ariaLabel, ...rest }) => {
+  // Render as an anchor when 'as="a"' is passed or when 'href' exists.
+  return (asProp === "a" || href) ? (
+    <StyledButton
+      as="a"
+      href={href}
+      target={target}
+      rel={rel}
+      $variant={variant}
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      {icon && <Icon src={icon} alt="" />}
+      {children}
+    </StyledButton>
+  ) : (
+    <StyledButton type="button" $variant={variant} {...rest}>
+      {icon && <Icon src={icon} alt="" />}
+      {children}
+    </StyledButton>
+  )
+}
diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
@@ -0,0 +1,37 @@
+import { Heading } from '../Heading'
+import { ContactInfo } from './ContactInfo.jsx'
+import { SectionContainer } from '../SectionContainer'
+import { IconButton } from '../IconButton'
+import styled from 'styled-components'
+
+export const ContactWrapper = styled.section`
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.secondary};
+`
+export const SocialWrapper = styled.div`
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 2rem;
+
+  justify-content: center;  /* ← centrera ikonerna */
+`
+
+export const Contact = () => {
+  return (
+    <ContactWrapper>
+      <SectionContainer>
+        <Heading>Let's Talk</Heading>
+        <ContactInfo
+          name="Sandra Hagevall"
+          phone="+46(0)703 15 53 85"
+          email="sandrahagevall@hotmail.com"
+          imageSrc="/images/contactimg.png"
+        />
+        <SocialWrapper>
+          <IconButton icon="/images/linkedin.svg" url="https://www.linkedin.com/in/sandra-hagevall-8001b5183/" label="LinkedIn" />
+          <IconButton icon="/gitcontact.svg" url="https://github.com/sandrahagevall" label="GitHub" />
+        </SocialWrapper>
+      </SectionContainer>
+    </ContactWrapper>
+  )
+}
diff --git a/src/components/Contact/ContactInfo.jsx b/src/components/Contact/ContactInfo.jsx
@@ -0,0 +1,66 @@
+import styled from "styled-components"
+
+export const ContactInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  `
+
+export const ContactImage = styled.img`
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  object-fit: cover;
+
+
+  @media ${({ theme }) => theme.breakpoints.desktop} {
+    width: 150px;
+    height: 150px;
+}
+`
+
+export const TextContainer = styled.div`
+  width: 100%;
+  text-align: left;
+
+  p {
+    margin: 0.25rem 0;
+    padding: 0 12px;
+}
+
+.contact-link {
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.secondary};
+  transition: 0.2s ease;
+  }
+
+  .contact-link:hover {
+    text-decoration: underline;
+    opacity: 0.7;
+  }
+
+  @media ${({ theme }) => theme.breakpoints.tablet} {
+    text-align: center;
+}
+`
+
+
+export const ContactInfo = ({ name, phone, email, imageSrc }) => {
+  return (
+    <ContactInfoWrapper>
+
+      <ContactImage src={imageSrc} alt={`Contact ${name}`} />
+
+      <TextContainer>
+        <p>{name}</p>
+        <p>
+          <a href={`tel:${phone}`} className="contact-link">{phone}</a>
+        </p>
+        <p>
+          <a href={`mailto:${email}`} className="contact-link">{email}</a>
+        </p>
+      </TextContainer>
+    </ContactInfoWrapper>
+  )
+}
diff --git a/src/components/Contact/index.js b/src/components/Contact/index.js
@@ -0,0 +1 @@
+export { Contact } from "./Contact"
diff --git a/src/components/FeaturedProjects/FeaturedProjects.jsx b/src/components/FeaturedProjects/FeaturedProjects.jsx
@@ -0,0 +1,32 @@
+import { ProjectCard } from "./ProjectCard.jsx"
+import projectsData from "../../data/projects.json"
+import { Heading } from "../Heading"
+import { Button } from "../Button"
+import { SectionContainer } from "../SectionContainer"
+import { FeaturedWrapper, FeaturedInner } from "./FeaturedProjects.styled.js"
+
+export const FeaturedProjects = () => {
+  return (
+    <FeaturedWrapper>
+      <SectionContainer>
+        <FeaturedInner>
+          <Heading>Featured Projects</Heading>
+
+          {projectsData.projects.map((project) => (
+            <ProjectCard
+              key={project.name}
+              tags={project.tags}
+              title={project.name}
+              description={project.description}
+              image={project.image}
+              liveUrl={project.netlify}
+              codeUrl={project.github}
+              position={project.position}
+            />
+          ))}
+          <Button variant="secondary" icon="/images/arrow.svg">See more projects</Button>
+        </FeaturedInner>
+      </SectionContainer>
+    </FeaturedWrapper>
+  )
+}
diff --git a/src/components/FeaturedProjects/FeaturedProjects.styled.js b/src/components/FeaturedProjects/FeaturedProjects.styled.js
@@ -0,0 +1,15 @@
+import styled from "styled-components"
+
+export const FeaturedWrapper = styled.section`
+background-color: ${({ theme }) => theme.colors.secondary};
+ color: ${({ theme }) => theme.colors.primary};
+`
+export const FeaturedInner = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4rem;
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+`