Technigo · gabriellaberko · Nov 14, 2025 · Nov 18, 2025 · Nov 19, 2025 · Nov 19, 2025
diff --git a/README.md b/README.md
@@ -1 +1,11 @@
 # Portfolio
+A portfolio showcasing projects, built with React.
+
+# Netlify link: 
+https://gabriellaberkowicz.netlify.app/
+
+# Tech
+- JavaScript
+- React & Styled components
+- CSS + HTML
+
diff --git a/index.html b/index.html
@@ -2,9 +2,18 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Portfolio</title>
+    <title>Portfolio - Gabriella Berkowicz</title>
+    <!-- OG:tags -->
+    <meta property="og:title" content="Portfolio - Gabriella Berkowicz">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://gabriellaberkowicz.netlify.app/">
+    <meta property="og:image" content="/og.image">    
+    <meta property="og:description" content="Frontend Developer skilled in JavaScript, TypeScript, React, and Node.js. With a background in web analytics, I combine data-driven thinking with modern web development.">
+    <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,13 +11,16 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.19",
+    "swiper": "^12.0.3"
   },
   "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/cross-white.svg b/public/cross-white.svg
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/happy-thoughts.png b/public/happy-thoughts.png
diff --git a/public/og.image.2.png b/public/og.image.2.png
diff --git a/public/og.image.png b/public/og.image.png
diff --git a/public/profile-filled.png b/public/profile-filled.png
diff --git a/public/profile.png b/public/profile.png
diff --git a/public/quiz-game.png b/public/quiz-game.png
diff --git a/public/recipe-library.png b/public/recipe-library.png
diff --git a/public/weather-app.png b/public/weather-app.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,29 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { theme } from './style/Theme.styled';
+import { GlobalStyle } from './style/GlobalStyle';
+import { IntroSection } from './components/sections/IntroSection';
+import { ProjectSection } from './components/sections/ProjectSection';
+import { SkillsSection } from './components/sections/SkillsSection';
+import { ContactSection } from './components/sections/ContactSection';
+import { TechSection } from './components/sections/TechSection';
+import { ArticleSection } from './components/sections/ArticleSection';
+
+
 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 />
+        <IntroSection />
+        <main>
+          <SkillsSection />
+          <ProjectSection />
+          <TechSection />
+          <ArticleSection />
+        </main>
+        <ContactSection />
+    </ThemeProvider>
     </>
   )
 }
diff --git a/src/components/animations/AnimatedProjectSection.jsx b/src/components/animations/AnimatedProjectSection.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { AnimatedSection } from "./AnimatedSection";
+import { theme } from "../../style/Theme.styled";
+
+export const AnimatedProjectSection = ({ children }) => {
+
+  const isBigScreen = window.matchMedia(theme.media.desktop).matches;
+
+  return (
+    !isBigScreen 
+    ? (<AnimatedSection direction="up">{children}</AnimatedSection>) 
+    : (children)
+  );
+}
diff --git a/src/components/animations/AnimatedSection.jsx b/src/components/animations/AnimatedSection.jsx
@@ -0,0 +1,38 @@
+import React, { useRef, useEffect, useState } from "react";
+import { StyledAnimatedSection } from "./AnimatedSection.styled";
+import { theme } from "../../style/Theme.styled";
+
+
+export const AnimatedSection = ({ children, direction = "up" }) => {
+
+  // create a reference to a DOM element. Becomes the actual DOM node so the IntersectionObserver can observe it.
+  const ref = useRef();
+
+  // the visibility control (defaulting to false), making the component dynamic. When we update the value of visible by calling setVisible, React will re-render the component
+  const [visible, setVisible] = useState(false);
+
+  // to change threshold value depending on screen size
+  const isBigScreen = window.matchMedia(theme.media.tablet).matches;
+  const threshold = isBigScreen ? 0.3 : 0.1;
+
+
+  // observes if the referenced element comes into view (becomes visible) - then call setVisible(true);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) setVisible(true);
+      },
+      { threshold }
+    );
+    if (ref.current) observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+
+  return (
+    <StyledAnimatedSection ref={ref} visible={visible} direction={direction}>
+      {children}
+    </StyledAnimatedSection>
+  );
+};
diff --git a/src/components/animations/AnimatedSection.styled.js b/src/components/animations/AnimatedSection.styled.js
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const slideDirections = {
+  up: 'translateY(50px)',
+  down: 'translateY(-50px)',
+  left: 'translateX(-50px)',
+  right: 'translateX(50px)',
+};
+
+export const StyledAnimatedSection = styled.div`
+  opacity: ${({ visible }) => (visible ? 1 : 0)};
+  transform: ${({ direction, visible }) => visible ? 'translate(0, 0)' : slideDirections[direction] || 'translateY(50px)'};
+  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
+`;
diff --git a/src/components/buttons/Button.jsx b/src/components/buttons/Button.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyledButton, StyledLinkButton } from './Button.styled';
+
+
+export const LinkButton = ({ variant="primaryBtn", link, children, ...props }) => {
+  return (
+    <StyledLinkButton 
+      variant={variant}
+      href={link}
+      target="_blank"
+      {...props}
+    >
+      {children}
+    </StyledLinkButton>
+  );
+}
+
+export const Button = ({ variant="secondaryBtn", children, ...props} ) => {
+  return (
+    <StyledButton 
+      variant="secondaryBtn" 
+      {...props}
+    >
+      {children}
+    </StyledButton>
+  );
+}
diff --git a/src/components/buttons/Button.styled.js b/src/components/buttons/Button.styled.js
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+export const StyledLinkButton = styled.a`
+  color: ${(props) => props.theme.colors[props.variant]?.text};
+  background-color: ${(props) => props.theme.colors[props.variant]?.bg};
+  outline: 2px solid ${(props) => props.theme.colors[props.variant]?.outline};
+  border-radius: 12px;
+  padding: 8px 16px;
+  text-decoration: none;
+  display: flex; 
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: transform 0.25s cubic-bezier(.2,.8,.2,1),
+  box-shadow 0.25s cubic-bezier(.2,.8,.2,1);
+
+  &:hover{
+  transform: translateY(-3px) scale(1.03);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.12);
+  }
+
+  @media ${(props) => props.theme.media.desktop} {
+      flex: 1; 
+  }
+`;
+
+
+export const StyledButton = styled.button`
+  color: ${(props) => props.theme.colors[props.variant]?.text};
+  background-color: ${(props) => props.theme.colors[props.variant]?.bg};
+  outline: 2px solid ${(props) => props.theme.colors[props.variant]?.outline};
+  border:none;
+  border-radius: 12px;
+  padding: 8px 16px;
+  transition: transform 0.25s cubic-bezier(.2,.8,.2,1),
+  box-shadow 0.25s cubic-bezier(.2,.8,.2,1);
+  cursor: pointer;
+
+  &:hover{
+  transform: translateY(-3px) scale(1.03);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.12);
+  }
+`;
diff --git a/src/components/cards/Article.jsx b/src/components/cards/Article.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Typography } from '../typography/CustomTypography';
+import { Button } from '../buttons/Button';
+import { Img } from '../images/Img';
+import { StyledCardDiv, StyledTextDivFaded } from './Card.styled';
+
+
+export const Article = ({ article, onOpen }) => {
+      return (
+        <StyledCardDiv>
+          <Img src={article.image} alt="article image" />
+          <div className="tags">
+              <Typography>{article.tag}</Typography>
+          </div>
+          <StyledTextDivFaded>
+            <Typography as="h3">{article.title}</Typography>
+            {article.sections.map((section, index) => (
+              <Typography key={index}>{section}</Typography>
+            ))}
+          </StyledTextDivFaded>
+          <Button onClick={onOpen}>
+            View article 
+          </Button>
+        </StyledCardDiv>
+    );
+}
diff --git a/src/components/cards/Card.styled.js b/src/components/cards/Card.styled.js
@@ -0,0 +1,94 @@
+import styled from "styled-components";
+
+export const StyledCardDiv = styled.div`
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 24px;
+  transition: transform 0.25s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  max-width: 400px;
+  /* width: 100%; */
+
+  @media ${(props) => props.theme.media.desktop} {
+    width: initial;
+  }
+
+  &:hover {
+    transform: scale(1.02);
+    box-shadow:
+      0 0 6px rgba(253, 111, 0, 0.15), 
+      0 8px 20px rgba(0, 0, 0, 0.10);   
+  }
+`;
+
+export const StyledProjectCardDiv = styled(StyledCardDiv)`
+  max-width: initial;
+  width: initial;
+
+  @media ${(props) => props.theme.media.desktop} {
+    flex-direction: row;
+    justify-content: space-around;
+    gap: 12px;
+    box-shadow: none;
+    padding: 32px 12px;
+    flex-direction: ${({ reverse }) => (reverse ? "row-reverse" : "row")}; //reverse the content for every second project
+  }
+`;
+
+
+export const StyledContentDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  flex: 1;
+`;
+
+export const StyledTextDiv = styled.div `
+  overflow: hidden;
+  padding-bottom: 1em; 
+  position: relative;
+`;
+
+export const StyledTextDivFaded = styled(StyledTextDiv)`
+  max-height: 270px;
+
+  // fade end of text content
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3em; 
+    pointer-events: none;
+    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+  }
+`;
+
+export const StyledButtonDiv = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: column;
+  gap: 16px;
+
+  @media ${(props) => props.theme.media.desktop} {
+    flex-direction: row;
+    width: 70%;
+  }
+`;
+
+export const StyledProjectContentWrapper = styled.div`
+  display:flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
+  @media ${(props) => props.theme.media.desktop} {
+    max-width: 50%;
+    margin: 12px 0;
+  }
+`;
diff --git a/src/components/cards/CardContainer.styled.js b/src/components/cards/CardContainer.styled.js
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const StyledCardContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  grid-gap: 16px;
+`;
+
+export const StyledProjectCardContainer = styled(StyledCardContainer)`
+  @media ${(props) => props.theme.media.desktop} {
+    display: flex;
+    flex-direction: column;
+    gap: 42px;
+    margin-top: 24px;
+  }
+`;