Technigo · solen80a · Apr 15, 2025 · Apr 15, 2025 · Apr 16, 2025 · Apr 16, 2025
diff --git a/README.md b/README.md
@@ -1 +1,24 @@
-# Portfolio
+# Portfolio project
+
+Netlify link: https://sofialennbom.netlify.app/
+
+Portfolio project in react using components and props, styled components.
+It follows the guidelines on how to write clean code and accessibility guidelines to ensure your website is usable by a diverse range of users:
+[] Lighthouse score of at least 95
+[] Images have alt attributes and proper sizes
+[] All contrasts should be OK
+[] Responsive for devices from 320px width up to at least 1600px.
+
+The portfolio contains:
+[] A picture of me
+[] A presentation of my tech skills
+[] A presentation of my projects linking to GitHub and Netlify. 
+[] A presentation of some thoughts that I have around code.
+[] A clear way to get in contact with me
+
+Follows figma design: https://www.figma.com/design/RsWkRToMb9XaYPNpNNDdo6/Sofia%C2%B4s-Figma-designs-for-students?node-id=1078-2289&m=dev
+
+
+
+
+
diff --git a/index.html b/index.html
@@ -4,7 +4,10 @@
     <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>
+    <title>Portfolio Sofia Lennbom</title>
+    <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">
   </head>
   <body>
     <div id="root"></div>

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.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
@@ -22,6 +23,6 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "vite": "^6.2.0"
+    "vite": "^6.2.6"
   }
 }
diff --git a/public/assets/Btn - github.svg b/public/assets/Btn - github.svg
diff --git a/public/assets/Btn - instagram.svg b/public/assets/Btn - instagram.svg
diff --git a/public/assets/Btn - linkedin.svg b/public/assets/Btn - linkedin.svg
diff --git a/public/assets/Btn - stackoverflow.svg b/public/assets/Btn - stackoverflow.svg
diff --git a/public/assets/Ic-ArrowDown.svg b/public/assets/Ic-ArrowDown.svg
diff --git a/public/assets/Ic-Web.svg b/public/assets/Ic-Web.svg
diff --git a/public/assets/RecLib.svg b/public/assets/RecLib.svg
diff --git a/public/assets/accessibility.svg b/public/assets/accessibility.svg
diff --git a/public/assets/food.jpg b/public/assets/food.jpg
diff --git a/public/assets/green_leaf.svg b/public/assets/green_leaf.svg
diff --git a/public/assets/laptop.svg b/public/assets/laptop.svg
diff --git a/public/assets/movie_app.svg b/public/assets/movie_app.svg
diff --git a/public/assets/screen.svg b/public/assets/screen.svg
diff --git a/public/assets/seed.svg b/public/assets/seed.svg
diff --git a/public/assets/sofia_lennbom_black_white.jpg b/public/assets/sofia_lennbom_black_white.jpg
diff --git a/public/assets/sofia_lennbom_black_white.svg b/public/assets/sofia_lennbom_black_white.svg
diff --git a/public/assets/weather.svg b/public/assets/weather.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,28 @@
+
+import { Profile } from "./sections/Profile"
+import { Tech } from "./sections/Tech"
+import { Proj } from "./sections/Proj"
+import { Footer } from "./sections/Footer"
+import { GlobalStyle } from "./components/GlobalStyle"
+import { SkipToMainContent } from "./sections/SkipToMain"
+import { Skills } from "./sections/Skills"
+import { MyWords } from "./sections/MyWords"
+
+
+
+
 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>
+
+    <GlobalStyle />
+      <SkipToMainContent />
+      <Profile />
+      <Tech />      
+      <Proj />
+      <Skills />
+      <MyWords />    
+      <Footer />
     </>
   )
 }
diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -0,0 +1,41 @@
+import styled from "styled-components"
+
+import { Media } from "./Media"
+
+const ButtonWrapper = styled.a`
+  display: inline-flex; 
+  background-color: #434040;
+  color: white; 
+  width: 303px;
+  height: 48px;
+  padding: 0px 16px;
+  border: 2px solid #434040;
+  border-radius: 12px;
+  align-items: center;    
+  gap: 16px;
+
+  cursor: pointer;  
+
+  img{
+  height: 31px;
+  min-width: 31px;  
+  } 
+
+  /* Desktop Widescreen */
+  @media ${Media.desktop}{   
+    display: inline-flex; 
+    justify-content: flex-start; 
+    padding: 5px 125px 5px 16px;
+    margin-right: auto;
+  }
+`
+
+export const Button = ({  url, icon, alt, title }) => {
+  return (         
+    <ButtonWrapper href={url} target="_blank" >
+      <img src={icon} alt={alt} /> 
+      {title}         
+    </ButtonWrapper>    
+  )
+}
+
diff --git a/src/components/GlobalStyle.jsx b/src/components/GlobalStyle.jsx
@@ -0,0 +1,97 @@
+import { createGlobalStyle } from "styled-components";
+
+import { Media } from "./Media";
+
+export const GlobalStyle = createGlobalStyle`
+  * {
+    box-sizing: border-box;   
+    align-items: center;
+    margin: 0;
+    padding: 0;    
+  }
+
+  body {
+    font-family: poppins, sans-serif;
+    background-color: #F4F4F4;
+    color: #434040;
+    display: flex;    
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;   
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  h1, h2, p {
+    margin: 0;
+    padding: 0;
+  } 
+
+  h3 {
+    text-align: left;
+    margin: 0;
+    padding: 0;
+  }
+
+  img {
+    min-width: 300px;    
+    max-width: 100%;
+    height: auto;
+    margin: 0;
+    border-radius: 12px;    
+  }
+
+  section {
+    display: flex;
+    padding: 64px 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px; 
+    width: 100vw; 
+
+    /* Desktop Tablet */
+    @media ${Media.tablet}{ 
+      padding: 64px 24px;
+    }
+
+    /* Desktop Widescreen */
+    @media ${Media.desktop}{ 
+      padding: 128px 48px;      
+    }
+  }
+
+  div {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;    
+  }
+
+  article {
+    min-width: 300px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;  
+    //padding: 0px 16px;
+
+    /* Desktop Widescreen */
+    @media ${Media.desktop}{ 
+      display: flex;
+      justify-content: center; 
+      align-items: center;     
+      width: 580px;   
+      align-items: center; 
+
+      img {        
+        margin-right: auto;
+    }
+    }
+  }
+`
+;
diff --git a/src/components/Media.jsx b/src/components/Media.jsx
@@ -0,0 +1,7 @@
+
+
+export const Media = {
+  mobile: "(max-width: 500px)",
+  tablet: "(min-width: 501px) and (max-width: 768px)",
+  desktop: "(min-width: 769px) and (max-width: 2000px)",
+}
diff --git a/src/components/MyWordsCard.jsx b/src/components/MyWordsCard.jsx
@@ -0,0 +1,102 @@
+import styled from "styled-components";
+
+import { Media } from "../components/Media";
+import { TagButton } from "../components/TagButton";
+import { Body, H3 } from "../components/Typography";
+import { Button } from "./Button";
+
+const MyWordsCardContainer = styled.section`
+  display: flex;
+  justify-content: center;  
+  align-items: center; 
+
+  /* Tablet */
+ @media ${Media.tablet}{   
+  gap: 32px; 
+}
+
+/* Desktop Widescreen */
+@media ${Media.desktop}{   
+    flex-direction: ${({ $reverse}) => ($reverse ? "row-reverse" : "row")};
+    justify-content: center;  
+    height: 418px;       
+    align-items: center; 
+}
+
+& p {
+  width: 100%;  
+}
+`
+
+const TagWrapper = styled.p`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+  border-radius: 12px;
+
+ & button {
+  width: 142px;
+ } 
+`
+
+const MyWordsImage = styled.img`
+  width: 200px;
+
+
+  /* Tablet */
+ @media ${Media.tablet}{ 
+  min-width: 200px; 
+  width: 300px;
+
+}
+
+/* Desktop Widescreen */
+@media ${Media.desktop}{      
+    width: auto; 
+    max-width: 479px;     
+
+}
+`
+
+const MyWordsCardContent = styled.article`
+  gap: 10px;
+`
+
+
+export const MyWordsCard = ({
+  index, 
+  image, 
+  alt, 
+  tag, 
+  name, 
+  content, 
+  link, 
+  myWordsIcon, 
+  myWordsAlt, 
+  myWordsTitle}) => {
+    const isreversed = index % 2 === 0;
+
+  return (
+    <>  
+      <MyWordsCardContainer $reverse={isreversed}>  
+        <MyWordsImage src={image} alt={alt} />    
+        <MyWordsCardContent>   
+        <TagWrapper>
+          <TagButton $projtag>{tag}</TagButton>
+        </TagWrapper>
+          <H3>{name}</H3>
+          <Body>{content}</Body>
+          <Button 
+            url={link} 
+            icon={myWordsIcon} 
+            alt={myWordsAlt} 
+            title={myWordsTitle} 
+            />
+        </MyWordsCardContent>         
+      </MyWordsCardContainer>
+    </>
+  )
+
+
+};