Technigo · Nicolinabl · Nov 18, 2025 · Nov 19, 2025 · Nov 19, 2025 · Nov 20, 2025
diff --git a/README.md b/README.md
@@ -1 +1,20 @@
-# Portfolio
+# Nicolina Bäcklin Löwenberg – Portfolio
+
+A personal portfolio website showcasing my skills, projects, and thoughts as a web developer.  
+Live site: https://nicolina-portfolio.netlify.app/
+
+## 📌 Overview
+
+This portfolio was built as part of a React course to demonstrate component-based architecture and styling, while maintaining clean code and accessibility standards.
+The site includes information about me, my tech stack, my projects, and a way to get in touch.
+
+## 💻 Tech Stack used
+
+- **React** (Vite)
+- **JavaScript (ES6+)**
+- **CSS / Responsive Design**
+- **HTML5** (semantic markup, accessibility)
+
+## 🤯 Learnings
+
+Number one lesson during this project: realizing GitHub doesn't always recognize changes to lower/uppercase in file-, and folder-names. This caused a lot of trouble when deploying to Netlify -> Netlify couldn't build site because import pathways were "wrong". Looking at my local copy everything looked good, but on GitHub it didn't match. After many hours researching i found the problem and had to change my local copy to match the GitHub version (in case sensitivity) to make it work. Lesson learned: make sure to name files and folders correctly from scratch, to avoid renaming issues later on.
diff --git a/index.html b/index.html
@@ -2,12 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=Urbanist' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <meta property="og:title" content="Nicolina Bäcklin Löwenberg" /> 
+    <meta property="og:description" content="Portfolio website of Nicolina Bäcklin Löwenberg, web developer." />
+    <meta property="og:url" content="https://nicolina-portfolio.netlify.app/" />
+    <title>Nicolinas Portfolio</title>
+    <link rel="icon" href="/favicon.ico">
   </head>
   <body>
-    <div id="root"></div>
+    <!-- Container of application -->
+    <div id="root"></div> 
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -11,7 +11,10 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-slick": "^0.31.0",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^6.1.19"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,15 @@
+import { Header } from './Components/layout/Header'
+import { Main } from './Components/layout/Main'
+import { Footer } from './Components/layout/Footer'
+import GlobalStyle from './globalStyles'
+
 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 />
+      <Header />
+      <Main />
+      <Footer />
     </>
   )
 }
diff --git a/src/Assets/beach.png b/src/Assets/beach.png
diff --git a/src/Assets/businessSite.png b/src/Assets/businessSite.png
diff --git a/src/Assets/cat.png b/src/Assets/cat.png
diff --git a/src/Assets/eventFinder.png b/src/Assets/eventFinder.png
diff --git a/src/Assets/family.png b/src/Assets/family.png
diff --git a/src/Assets/gitHubIcon.png b/src/Assets/gitHubIcon.png
diff --git a/src/Assets/gitHubIcon.svg b/src/Assets/gitHubIcon.svg
diff --git a/src/Assets/instagramIcon.png b/src/Assets/instagramIcon.png
diff --git a/src/Assets/instagramIcon.svg b/src/Assets/instagramIcon.svg
diff --git a/src/Assets/linkedinIcon.png b/src/Assets/linkedinIcon.png
diff --git a/src/Assets/linkedinIcon.svg b/src/Assets/linkedinIcon.svg
diff --git a/src/Assets/me.JPG b/src/Assets/me.JPG
diff --git a/src/Assets/recipeLibrary.png b/src/Assets/recipeLibrary.png
diff --git a/src/Assets/weatherApp.png b/src/Assets/weatherApp.png
diff --git a/src/Assets/workMe.jpg b/src/Assets/workMe.jpg
diff --git a/src/Components/Buttons/ClearButton.jsx b/src/Components/Buttons/ClearButton.jsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components'
+
+const Button = styled.a`
+  display: flex;
+  width: 192px;
+  height: 48px;
+  padding: 0 16px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  border: 2px solid #505b4d;
+  background: #FFF;
+
+  font-family: Poppins;
+  color: #505b4d;
+  font-size: 18px;
+  font-weight: 500;
+  text-decoration: none;
+
+  &:hover {
+    background-color: black;
+    color: white;
+  }
+`
+
+export const ClearButton = (props) => {
+  return (
+  <Button href={props.href} target="_blank">{props.label}</Button>
+  )
+}
+
+
diff --git a/src/Components/Buttons/FilledButton.jsx b/src/Components/Buttons/FilledButton.jsx
@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+const Button = styled.a`
+  display: flex;
+  width: 192px;
+  height: 48px;
+  padding: 0 16px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 12px;
+  gap: 16px;
+  background: #505b4d;
+  border: none;
+  text-decoration: none;
+
+  font-family: Poppins;
+  font-style: normal;
+  line-height: normal;
+  font-size: 18px;
+  font-weight: 500;
+  color: #FFFFFF;
+
+  &:hover {
+    background-color: black;
+    color: white;
+  }
+`
+
+export const FilledButton = (props) => {
+  return (
+  <Button href={props.href} target="_blank">{props.label}</Button>
+  )
+}
+
diff --git a/src/Components/Icons/GitHubIcon.jsx b/src/Components/Icons/GitHubIcon.jsx
@@ -0,0 +1,11 @@
+import gitHubIcon from '../../Assets/gitHubIcon.png'
+
+export const GitHubIcon = () => {
+  return (
+    <a href='https://github.com/Nicolinabl'>
+      { <img src={gitHubIcon} alt="github icon" />}
+    </a>
+  )
+}
+
+
diff --git a/src/Components/Icons/IconCollection.jsx b/src/Components/Icons/IconCollection.jsx
@@ -0,0 +1,21 @@
+import { LinkedinIcon } from './LinkedinIcon'
+import { GitHubIcon } from './GitHubIcon'
+import { InstagramIcon } from './InstagramIcon'
+import styled from 'styled-components'
+
+const IconsContainer = styled.div`
+  display: flex;
+  align-items: flex-end;
+  gap: 32px;
+  margin-top: 64px;
+`
+
+export const IconCollection = () => {
+  return (
+    <IconsContainer>
+      <LinkedinIcon />
+      <GitHubIcon />
+      <InstagramIcon />
+    </IconsContainer>
+  )
+}
diff --git a/src/Components/Icons/InstagramIcon.jsx b/src/Components/Icons/InstagramIcon.jsx
@@ -0,0 +1,10 @@
+
+import instagramIcon from '../../Assets/instagramIcon.png'
+
+export const InstagramIcon = () => {
+  return (
+    <a href='https://www.instagram.com/'>
+      { <img src={instagramIcon} alt="instagram icon" /> }
+      </a>
+  )
+}
diff --git a/src/Components/Icons/LinkedinIcon.jsx b/src/Components/Icons/LinkedinIcon.jsx
@@ -0,0 +1,7 @@
+import linkedinIcon from '../../Assets/linkedinIcon.png'
+
+export const LinkedinIcon = () => {
+  return (
+    <a href='https://www.linkedin.com/in/nicolina-b%C3%A4cklin-l%C3%B6wenberg/'><img src={linkedinIcon} alt="linkedin icon" /></a>
+  )
+}
diff --git a/src/Components/Sections/ContactSection.jsx b/src/Components/Sections/ContactSection.jsx
@@ -0,0 +1,41 @@
+import { IconCollection } from "../Icons/IconCollection"
+import { ProfileImage } from '../cards/ProfileImage'
+import { H2 } from '../typography/h2'
+import { Body } from '../typography/body'
+import styled from 'styled-components'
+
+const ContactContainer = styled.div`
+  display: flex;
+  padding: 64px 0;
+  align-items: center;
+  gap: 64px;
+  align-self: stretch;
+  justify-content: center;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+`
+const ContactHeading = styled.div`
+  margin-bottom: 32px;
+`
+
+export const ContactSection = () => {
+  return (
+    <ContactContainer>
+      <div>
+        <ProfileImage />
+      </div>
+
+      <div>
+        <ContactHeading>
+          <H2>Lets talk!</H2>
+        </ContactHeading>
+        <Body>Nicolina Bäcklin Löwenberg</Body>
+        <Body>+46 72 220 87 00</Body>
+        <Body>[email protected]</Body>
+        <IconCollection />
+      </div>
+    </ContactContainer>
+  )
+}
diff --git a/src/Components/Sections/IntroSection.jsx b/src/Components/Sections/IntroSection.jsx
@@ -0,0 +1,74 @@
+import { IconCollection } from '../Icons/IconCollection'
+import { ProfileImage } from '../cards/ProfileImage'
+import { H1 } from '../typography/h1'
+import { Body } from '../typography/body'
+import styled from 'styled-components'
+
+const Hero = styled.header`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  text-align: left;
+  padding: 128px 128px 64px 128px;
+  justify-content: space-evenly;
+  align-items: center;
+  align-self: stretch;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+    padding: 64px 32px 32px 32px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 32px 16px 16px;
+    text-align: center;
+  }
+`
+
+const TextContainer = styled.div`
+  display: flex;
+  max-width: 580px;
+  flex-direction: column;
+  align-items: flex-start;
+
+  @media (max-width: 768px) {
+    align-items: center;
+}
+`
+
+const ImageContainer = styled.div`
+  display: flex;
+  padding: 128px 128px 64px 128px;
+  align-items: center;
+
+    @media (max-width: 1024px) {
+    padding: 64px 32px 32px 32px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 32px 16px 16px;
+  }
+`
+const InfoText = styled.div`
+  margin-top: 32px;
+`
+
+export const IntroSection = () => {
+  return (
+    <Hero>
+    <TextContainer>
+      <Body size='30px'>I am Nicolina Bäcklin Löwenberg</Body>
+      <H1>Web developer</H1>
+      <InfoText>
+        <Body>Web developer and licensed veterinary nurse. Super excited to make ideas come to life and build projects with impact. I believe in constant learning and showing up fully prepared. Combining my skillsets as a developer and veterinary nurse to bridge the gap between tech and human.</Body>
+      </InfoText>
+      <IconCollection />
+    </TextContainer>
+    <ImageContainer>
+      <ProfileImage />
+    </ImageContainer>
+    </Hero>
+  )
+}
+