diff --git a/README.md b/README.md
index 200f4282..e5ca4404 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,4 @@
 # Portfolio
+
+Netlify link: https://portfolio-kasia.netlify.app/
+
diff --git a/package.json b/package.json
index 48911600..a7c1bffd 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "project",
+  "name": "js-project-portfolio",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/src/App.jsx b/src/App.jsx
index a161d8d3..8d65fd85 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,8 +1,29 @@
+import { Introduction } from "./components/about/Introduction";
+import { Tech } from "./components/Tech";
+import { Projects } from "./components/projects/Projects";
+import { Skills } from "./components/Skills";
+import { Contact } from "./components/about/Contact";
+import { Footer } from "./components/Footer";
+
+import { styled } from "styled-components";
+
+const StyledDiv = styled.div`
+  body {
+    margin: 0;
+  }
+`;
+
 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>
-    </>
-  )
-}
+    <StyledDiv>
+      <main>
+        <Introduction />
+        <Tech />
+        <Projects />
+        <Skills />
+        <Contact />
+      </main>
+      <Footer />
+    </StyledDiv>
+  );
+};
diff --git a/src/assets/arrowdown.svg b/src/assets/arrowdown.svg
new file mode 100644
index 00000000..2d0660ba
--- /dev/null
+++ b/src/assets/arrowdown.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="68" viewBox="0 0 29 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 55.5L14.5 65M14.5 65L5 55.5M14.5 65L14.5 35" stroke="#E33C12" stroke-width="6" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/profilePhoto.jpg b/src/assets/profilePhoto.jpg
new file mode 100644
index 00000000..546d01d2
Binary files /dev/null and b/src/assets/profilePhoto.jpg differ
diff --git a/src/assets/projects/accessibility_site.png b/src/assets/projects/accessibility_site.png
new file mode 100644
index 00000000..e184a4b4
Binary files /dev/null and b/src/assets/projects/accessibility_site.png differ
diff --git a/src/assets/projects/business_site.png b/src/assets/projects/business_site.png
new file mode 100644
index 00000000..1dda8267
Binary files /dev/null and b/src/assets/projects/business_site.png differ
diff --git a/src/assets/projects/happy_thoughts.png b/src/assets/projects/happy_thoughts.png
new file mode 100644
index 00000000..9d2815bb
Binary files /dev/null and b/src/assets/projects/happy_thoughts.png differ
diff --git a/src/assets/projects/movie_browser.png b/src/assets/projects/movie_browser.png
new file mode 100644
index 00000000..b6104f95
Binary files /dev/null and b/src/assets/projects/movie_browser.png differ
diff --git a/src/assets/projects/recipe_library.png b/src/assets/projects/recipe_library.png
new file mode 100644
index 00000000..5274c5af
Binary files /dev/null and b/src/assets/projects/recipe_library.png differ
diff --git a/src/assets/projects/weather_app.png b/src/assets/projects/weather_app.png
new file mode 100644
index 00000000..42361983
Binary files /dev/null and b/src/assets/projects/weather_app.png differ
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 00000000..d8f36f28
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,80 @@
+//import "./Footer.css"
+import { styled } from "styled-components";
+
+const StyledFooter = styled.footer`
+  .ticker-wrap {
+    width: 100%;
+    height: 80px;
+    margin: 0 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    bottom: 0;
+    height: 114px;
+    background-color: var(--color-foreground);
+  }
+
+  .ticker {
+    display: inline-block;
+    margin-top: 5px;
+    animation: marquee 40s linear infinite;
+  }
+  .item-collection-1 {
+    position: relative;
+    left: 0%;
+    animation: swap 40s linear infinite;
+  }
+
+  .item {
+    display: inline-block;
+    color: var(--color-white);
+    font-family: "Montserrat", sans-serif;
+    font-size: 26.038px;
+    font-weight: 600;
+    padding-top: 41px;
+    padding-bottom: 35px;
+  }
+
+  /* Transition */
+  @keyframes marquee {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes swap {
+    0%,
+    50% {
+      left: 0%;
+    }
+    50.01%,
+    100% {
+      left: 100%;
+    }
+  }
+`;
+
+export const Footer = () => {
+  return (
+    <StyledFooter>
+      <div className="ticker-wrap">
+        <div className="ticker">
+          <span className="item-collection-1">
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Devełoper ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+          </span>
+          <span className="item-collection-2">
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+            <span className="item">Kasia Wolkowicz · Frontend Developer ·</span>
+          </span>
+        </div>
+      </div>
+    </StyledFooter>
+  );
+};
diff --git a/src/components/PageTopic.jsx b/src/components/PageTopic.jsx
new file mode 100644
index 00000000..4345d5b4
--- /dev/null
+++ b/src/components/PageTopic.jsx
@@ -0,0 +1,5 @@
+export const PageTopic = ({pageTopic, className})=>{
+    return (
+        <h2 className={className}>{pageTopic}</h2>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx
new file mode 100644
index 00000000..7a1b1b9c
--- /dev/null
+++ b/src/components/Skills.jsx
@@ -0,0 +1,187 @@
+import { PageTopic } from "./PageTopic";
+import { styled } from "styled-components";
+
+const StyledSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  background-color: var(--color-background);
+  padding: 128px 16px 157px 16px;
+  gap: 64px;
+
+  .skills {
+    font-size: 56px;
+    font-weight: 700;
+    color: var(--color-white);
+  }
+
+  .skill-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 64px;
+  }
+
+  .skillbox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .listbox p {
+    font-size: 18px;
+    color: var(--color-white);
+    font-weight: 400;
+    font-family: "Hind", sans-serif;
+    line-height: normal;
+    text-align: center;
+    padding: 2px;
+  }
+
+  .listbox p:hover {
+    background-color: var(--color-foreground);
+    cursor: default;
+  }
+
+  .skill-container h3 {
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  .code-head {
+    color: var(--color-white);
+    background-color: var(--color-code);
+  }
+
+  .toolbox-head {
+    color: var(--color-white);
+    background-color: var(--color-background);
+  }
+
+  .upcoming-head {
+    color: var(--color-white);
+    background-color: var(--color-upcoming);
+  }
+
+  .more-head {
+    color: var(--color-foreground);
+    background-color: var(--color-more);
+  }
+
+  .skill-container h3:hover {
+    background-color: var(--color-test);
+    color: var(--color-code);
+    cursor: default;
+  }
+
+  @media (min-width: 667px) and (max-width: 1024px) {
+    padding: 128px 32px 148px 32px;
+    width: auto;
+
+    .skill-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      align-items: flex-start;
+      gap: 64px;
+    }
+
+    .skillbox {
+      align-items: flex-start;
+    }
+
+    .listbox p {
+      text-align: left;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 128px 161px;
+    gap: 128px;
+
+    .skill-container {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    .skills {
+      font-size: 80px;
+    }
+
+    .listbox p {
+      text-align: left;
+    }
+
+    .skill-container h3 {
+      font-size: 32px;
+    }
+
+    .skillbox {
+      align-items: flex-start;
+      gap: 8px;
+    }
+  }
+`;
+
+export const Skills = () => {
+  return (
+    <StyledSection className="skill-wrapper">
+      <PageTopic className={"skills"} pageTopic={"Skills"} />
+      <div className="skill-container" aria-label="Tech skills">
+        <div className="skillbox">
+          <h3 className="code-head">Code</h3>
+          <div className="listbox">
+            <p>React</p>
+            <p>Global State Management</p>
+            <p>DOM Manipulation</p>
+            <p>Javascript ES6</p>
+            <p>HTML5</p>
+            <p>CSS3</p>
+            <p>Tailwind CSS</p>
+            <p>Styled Components</p>
+            <p>Node</p>
+            <p>REST API</p>
+            <p>Authentication</p>
+          </div>
+        </div>
+        <div className="skillbox">
+          <h3 className="toolbox-head">Toolbox</h3>
+          <div className="listbox">
+            <p>GitHub</p>
+            <p>Git</p>
+            <p>Postman</p>
+            <p>VS code</p>
+            <p>Netlify</p>
+            <p>Figma</p>
+            <p>Chrome dev tools</p>
+          </div>
+        </div>
+        <div className="skillbox">
+          <h3 className="upcoming-head">Upcoming</h3>
+          <div className="listbox">
+            <p>TypeScript</p>
+            <p>Python</p>
+          </div>
+        </div>
+        <div className="skillbox">
+          <h3 className="more-head">More</h3>
+          <div className="listbox">
+            <p>Problem-Solving</p>
+            <p>Agile methodology</p>
+            <p>Accessibility</p>
+            <p>Responsive Design</p>
+            <p>Team work</p>
+            <p>Mob programming</p>
+            <p>Pair programming</p>
+            <p>Remote working</p>
+            <p>Design hand-off</p>
+          </div>
+        </div>
+      </div>
+    </StyledSection>
+  );
+};
diff --git a/src/components/Tech.jsx b/src/components/Tech.jsx
new file mode 100644
index 00000000..2c979b80
--- /dev/null
+++ b/src/components/Tech.jsx
@@ -0,0 +1,75 @@
+import { PageTopic } from "./PageTopic";
+import { styled } from "styled-components";
+
+const StyledSection = styled.section`
+  padding: 128px 16px;
+  background-color: var(--color-background);
+  width: 100%;
+
+  .tech-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 64px;
+  }
+
+  .tech {
+    color: var(--color-white);
+    font-size: 80px;
+    font-weight: 700;
+    font-family: "Montserrat", sans-serif;
+    text-align: center;
+  }
+
+  .tech-details {
+    color: var(--color-white);
+    font-size: 32px;
+    font-weight: 600;
+    font-family: "Hind", sans-serif;
+    text-align: left;
+  }
+
+  @media (min-width: 667px) and (max-width: 1024px) {
+    padding: 256px 32px;
+
+    .tech-details {
+      text-align: center;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 0px 161px;
+    height: 980px;
+    display: flex;
+
+    .tech-container {
+      flex-direction: row;
+      gap: 124px;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .tech {
+      font-size: 80px;
+    }
+
+    .tech-details {
+      font-size: 32px;
+    }
+  }
+`;
+
+export const Tech = () => {
+  return (
+    <StyledSection>
+      <div className="tech-container">
+        <PageTopic className={"tech"} pageTopic={"Tech"} />
+        <p className="tech-details">
+          HTML, CSS, Flexbox, JavaScript, ES6, JSX, React, React Hooks, Node.js,
+          Web Accessibility, APIs, mob-programming, pair-programming, GitHub.
+        </p>
+      </div>
+    </StyledSection>
+  );
+};
diff --git a/src/components/about/Contact.jsx b/src/components/about/Contact.jsx
new file mode 100644
index 00000000..dd31b92f
--- /dev/null
+++ b/src/components/about/Contact.jsx
@@ -0,0 +1,127 @@
+import { PageTopic } from '../PageTopic'
+import { Linkedin } from '../icons/Linkedin'
+import { Github } from '../icons/Github'
+import { Instagram } from '../icons/Instagram'
+import { ProfilePhoto } from './ProfilePhoto'
+import { styled } from 'styled-components'
+
+
+const StyledContact = styled.section`
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+padding: 128px 16px;
+gap: 64px;
+background-color: var(--color-white);
+
+.contact {
+    color: var(--color-foreground);
+    font-family: "Montserrat", sans-serif;
+    font-size: 56px;
+    font-weight: 700;
+}
+
+.contactContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+}
+.info{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.name{
+    font-size: 30px;
+    color: var(--color-foreground);
+    font-family: "Montserrat", sans-serif;
+    font-weight: 600;
+}
+
+.location,
+.email{
+    color: var(--color-foreground);
+    font-family: "Montserrat", sans-serif;
+    font-size: 24px;
+    font-weight: 600;
+}
+
+.contactIcons {
+    display: flex;
+    justify-content: center;
+    align-items: space-around;
+    gap: 45px;
+}
+
+.contactIcons a:hover {
+    svg path {
+        fill: var(--color-foreground)
+    }
+}
+
+@media (min-width:667px) and (max-width:1024px) {
+    .contact-wrapper {
+        padding: 128px 32px;
+    }
+    .location,
+    .email{
+      font-size: 20px;
+    }
+}
+
+@media (min-width: 1025px) {
+    .contact-wrapper {
+        padding: 100px 162px 100px 161px;
+        gap: 80px;
+    }
+
+    .contact {
+        font-size: 80px;
+    }
+
+    .name {
+        font-size: 35px;
+    }
+
+    .location,
+    .email{
+        font-size: 20px;
+    }
+}
+`
+
+export const Contact = () => {
+    const linkedin = "https://www.linkedin.com/in/kasiawolko/"
+    const github = "https://github.com/Kasssiiii"
+    const instagram = "https://www.instagram.com/kasia_wolko/"
+
+    return (
+      <StyledContact>
+        <PageTopic pageTopic="Let's Talk" className="contact" />
+        <div className="contactContent">
+          <ProfilePhoto className={"profilePhoto"} />
+          <div className="info">
+            <p className="name">Kasia Wolkowicz</p>
+            <p className='location'>🖈Based in Stockholm, Sweden</p>
+            <p className='email'>✉ kasia.gru@gmail.com</p>
+          </div>
+        </div>
+        <div className="contactIcons">
+          <a href={linkedin} alt="Linkedin button" aria-label="Link to Linkedin profile page">
+            <Linkedin />
+          </a>
+          <a href={github} alt="Github button" aria-label="Link to Github page">
+            <Github />
+          </a>
+          <a href={instagram} alt="Instagram button" aria-label="Link to instagram page">
+            <Instagram />
+          </a>
+        </div>
+      </StyledContact>
+    );
+}
\ No newline at end of file
diff --git a/src/components/about/Introduction.jsx b/src/components/about/Introduction.jsx
new file mode 100644
index 00000000..b97b39f7
--- /dev/null
+++ b/src/components/about/Introduction.jsx
@@ -0,0 +1,147 @@
+//import './Introduction.css'
+import arrow from "/arrowdown.svg";
+import { ProfilePhoto } from "./ProfilePhoto";
+import { styled } from "styled-components";
+
+const StyledSection = styled.section`
+  display: flex;
+  padding: 64px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  width: 100%;
+  background-color: var(--color-white);
+
+  .intro-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .dev-name {
+    color: var(--color-foreground);
+    font-size: 32px;
+    font-weight: 600;
+    font-family: "Montserrat", sans-serif;
+    align-self: flex-start;
+  }
+
+  .dev-title {
+    color: var(--color-foreground);
+    font-size: 80px;
+    font-weight: 700;
+    font-family: "Montserrat", sans-serif;
+    align-self: flex-start;
+  }
+
+  .dev-intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 22px;
+    align-self: stretch;
+    text-align: left;
+    word-wrap: break-word;
+    color: var(--color-black);
+    font-size: 18px;
+    font-weight: 400;
+    font-family: "Hind", sans-serif;
+  }
+
+  .arrow {
+    animation: move 2s linear infinite;
+  }
+
+  @keyframes move {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+
+    25%,
+    75% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @media (min-width: 667px) and (max-width: 1024px) {
+    padding: 128px 32px 30px 32px;
+
+    .dev-name {
+      font-size: 28px;
+    }
+
+    .dev-title {
+      font-size: 52px;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 332px 161px 100px 161px;
+
+    .dev-name {
+      font-size: 36px;
+    }
+
+    .dev-title {
+      font-size: 70px;
+    }
+  }
+
+  @media (min-width: 667px) {
+    display: grid;
+    grid-template-columns: repeat(7, auto);
+    grid-template-rows: repeat(3, auto);
+
+    .intro-box {
+      grid-area: 1/1/2/8;
+    }
+
+    .dev-photo {
+      grid-area: 2/1/3/3;
+    }
+
+    .dev-intro {
+      grid-area: 2/3/3/9;
+      font-size: 20px;
+    }
+
+    .arrow {
+      grid-area: 3/5/4/6;
+      align-items: center;
+    }
+  }
+`;
+
+export const Introduction = () => {
+  return (
+    <StyledSection aria-label="A page of introduction">
+      <div className="intro-box">
+        <h1 className="dev-name">Hi, I&apos;m Kasia Wolkowicz</h1>
+        <h2 className="dev-title">Frontend Developer</h2>
+      </div>
+
+      <ProfilePhoto className={"dev-photo"} />
+      <div className="dev-intro">
+        <article>
+          I'm a Front-End Developer with a strong focus on accessibility, clean
+          code, and creating user-friendly digital experiences. With a
+          background in payroll, financial services, and office administration,
+          I bring a unique mix of technical skill and business insight to every
+          project I work on.
+        </article>
+        <article>
+          Whether I’m coding a responsive layout, improving performance, or
+          making sure a site works for users with assistive tech, I care deeply
+          about the details. Currently levelling up my JavaScript and React
+          skills while contributing to projects that make a difference.
+        </article>
+      </div>
+
+      <img src={arrow} alt="an arrow to show the next page" className="arrow" />
+    </StyledSection>
+  );
+};
diff --git a/src/components/about/ProfilePhoto.jsx b/src/components/about/ProfilePhoto.jsx
new file mode 100644
index 00000000..c926000d
--- /dev/null
+++ b/src/components/about/ProfilePhoto.jsx
@@ -0,0 +1,17 @@
+import profilePhotoFile from "/profilePhoto.jpg"
+import { styled } from 'styled-components'
+
+const StyledImg = styled.img`
+  width: 164px;
+  height: 164px;
+  border-radius: 50%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+`;
+
+// retain className for layout of intro section
+export const ProfilePhoto = ({className} ) => {
+  return (
+    <StyledImg className={className} src={profilePhotoFile} alt="Kasia's photo" />
+  );
+};
\ No newline at end of file
diff --git a/src/components/icons/Code.jsx b/src/components/icons/Code.jsx
new file mode 100644
index 00000000..84f4032b
--- /dev/null
+++ b/src/components/icons/Code.jsx
@@ -0,0 +1,19 @@
+export const Code = ({fill= "#000000"}) => {
+    return(
+        <svg 
+        width="48" 
+        height="48" 
+        viewBox="0 0 48 48" 
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        >
+            <g id="Live demo">
+                <path 
+                id="globle"
+                d="M18.6452 33.7684C18.6452 33.6363 18.5161 33.5042 18.3226 33.5042C18.129 33.5042 18 33.6363 18 33.7684C18 33.9006 18.129 34.0327 18.3226 33.9667C18.5161 33.9667 18.6452 33.9006 18.6452 33.7684ZM16.6452 33.4381C16.6452 33.5702 16.7742 33.7684 16.9677 33.7684C17.0968 33.8345 17.2903 33.7684 17.3548 33.6363C17.3548 33.5042 17.2903 33.372 17.0968 33.3059C16.9032 33.2399 16.7097 33.3059 16.6452 33.4381ZM19.5484 33.372C19.3548 33.372 19.2258 33.5042 19.2258 33.7024C19.2258 33.8345 19.4194 33.9006 19.6129 33.8345C19.8065 33.7684 19.9355 33.7024 19.871 33.5702C19.871 33.4381 19.6774 33.3059 19.5484 33.372ZM23.7419 8C14.8387 8 8 15.0037 8 24.1218C8 31.4559 12.4516 37.7328 18.9032 39.9793C19.7419 40.1115 20 39.5829 20 39.1864C20 38.7239 20 36.4774 20 35.0899C20 35.0899 15.4839 36.081 14.5161 33.1077C14.5161 33.1077 13.8065 31.1916 12.7742 30.7291C12.7742 30.7291 11.2903 29.6719 12.8387 29.6719C12.8387 29.6719 14.4516 29.8041 15.3548 31.3898C16.7742 33.9667 19.0968 33.2399 20.0645 32.7774C20.1935 31.7202 20.5806 30.9934 21.0968 30.5309C17.4839 30.1344 13.8065 29.6059 13.8065 23.2628C13.8065 21.4128 14.3226 20.5539 15.3548 19.3645C15.1613 18.902 14.6452 17.1841 15.5484 14.8716C16.8387 14.4751 20 16.6556 20 16.6556C21.2903 16.2591 22.6452 16.127 24 16.127C25.4194 16.127 26.7742 16.2591 28.0645 16.6556C28.0645 16.6556 31.1613 14.4091 32.5161 14.8716C33.4194 17.1841 32.8387 18.902 32.7097 19.3645C33.7419 20.5539 34.3871 21.4128 34.3871 23.2628C34.3871 29.6059 30.5806 30.1344 26.9677 30.5309C27.5484 31.0595 28.0645 32.0506 28.0645 33.6363C28.0645 35.8167 28 38.5918 28 39.1204C28 39.5829 28.3226 40.1115 29.1613 39.9132C35.6129 37.7328 40 31.4559 40 24.1218C40 15.0037 32.7097 8 23.7419 8ZM14.2581 30.7952C14.129 30.8612 14.1935 31.0595 14.2581 31.1916C14.3871 31.2577 14.5161 31.3237 14.6452 31.2577C14.7097 31.1916 14.7097 30.9934 14.5806 30.8612C14.4516 30.7952 14.3226 30.7291 14.2581 30.7952ZM13.5484 30.2666C13.4839 30.3987 13.5484 30.4648 13.6774 30.5309C13.8065 30.5969 13.9355 30.5969 14 30.4648C14 30.3987 13.9355 30.3327 13.8065 30.2666C13.6774 30.2005 13.6129 30.2005 13.5484 30.2666ZM15.6129 32.6452C15.5484 32.7113 15.5484 32.9095 15.7419 33.0416C15.871 33.1738 16.0645 33.2399 16.129 33.1077C16.1935 33.0416 16.1935 32.8434 16.0645 32.7113C15.9355 32.5791 15.7419 32.5131 15.6129 32.6452ZM14.9032 31.6541C14.7742 31.7202 14.7742 31.9184 14.9032 32.0506C15.0323 32.1827 15.1613 32.2488 15.2903 32.1827C15.3548 32.1166 15.3548 31.9184 15.2903 31.7863C15.1613 31.6541 15.0323 31.588 14.9032 31.6541Z"
+                fill = {fill}
+                />
+            </g>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/src/components/icons/Demo.jsx b/src/components/icons/Demo.jsx
new file mode 100644
index 00000000..6a7410d5
--- /dev/null
+++ b/src/components/icons/Demo.jsx
@@ -0,0 +1,19 @@
+export const Demo = ({fill= "#000000"}) => {
+    return(
+        <svg 
+        width="48" 
+        height="48" 
+        viewBox="0 0 48 48" 
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        >
+            <g id="Live demo">
+                <path 
+                id="globle"
+                d="M24.495 39.99C32.97 39.99 39.99 32.985 39.99 24.495C39.99 16.02 32.97 9 24.48 9C16.005 9 9 16.02 9 24.495C9 32.985 16.02 39.99 24.495 39.99ZM15.465 15.06C16.965 13.635 18.78 12.54 20.805 11.94C19.74 13.005 18.84 14.505 18.165 16.335C17.115 16.005 16.215 15.57 15.465 15.06ZM28.2001 11.955C30.21 12.555 32.025 13.635 33.51 15.06C32.775 15.585 31.8751 16.005 30.825 16.35C30.15 14.505 29.25 13.005 28.2001 11.955ZM25.545 12.435C26.79 13.035 27.93 14.655 28.74 16.86C27.75 17.04 26.685 17.145 25.545 17.19V12.435ZM20.25 16.86C21.075 14.655 22.2001 13.035 23.445 12.435V17.19C22.305 17.145 21.24 17.04 20.25 16.86ZM11.445 23.4451C11.655 20.895 12.615 18.54 14.085 16.605C15 17.28 16.185 17.865 17.565 18.3C17.175 19.86 16.92 21.5999 16.845 23.4451H11.445ZM32.145 23.4451C32.07 21.5999 31.815 19.86 31.425 18.3C32.805 17.865 33.99 17.295 34.89 16.605C36.375 18.54 37.335 20.895 37.545 23.4451H32.145ZM18.99 23.4451C19.065 21.81 19.29 20.25 19.635 18.84C20.835 19.08 22.1099 19.23 23.445 19.29V23.4451H18.99ZM25.545 23.4451V19.29C26.88 19.23 28.155 19.08 29.355 18.84C29.7 20.25 29.925 21.81 30 23.4451H25.545ZM11.445 25.545H16.845C16.92 27.42 17.175 29.175 17.565 30.75C16.2 31.185 15.03 31.755 14.13 32.43C12.63 30.4799 11.655 28.11 11.445 25.545ZM18.99 25.545H23.445V29.775C22.125 29.835 20.835 29.985 19.65 30.21C19.29 28.785 19.05 27.195 18.99 25.545ZM25.545 29.775V25.545H30C29.94 27.195 29.7 28.785 29.34 30.21C28.155 29.985 26.88 29.835 25.545 29.775ZM31.425 30.75C31.83 29.175 32.07 27.42 32.145 25.545H37.545C37.335 28.11 36.3601 30.4799 34.86 32.43C33.9601 31.755 32.79 31.185 31.425 30.75ZM25.545 31.875C26.6699 31.9199 27.735 32.025 28.71 32.205C27.9 34.365 26.775 35.97 25.545 36.555V31.875ZM20.28 32.205C21.255 32.025 22.32 31.9199 23.445 31.875V36.555C22.215 35.97 21.09 34.365 20.28 32.205ZM15.51 33.975C16.245 33.465 17.145 33.0451 18.18 32.715C18.855 34.515 19.74 35.985 20.775 37.035C18.795 36.435 16.995 35.3701 15.51 33.975ZM30.81 32.715C31.845 33.0451 32.745 33.465 33.4801 33.975C31.995 35.3701 30.1949 36.435 28.215 37.035C29.25 35.985 30.135 34.515 30.81 32.715Z"
+                fill = {fill}
+                />
+            </g>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/src/components/icons/Github.jsx b/src/components/icons/Github.jsx
new file mode 100644
index 00000000..3e6cba64
--- /dev/null
+++ b/src/components/icons/Github.jsx
@@ -0,0 +1,23 @@
+export const Github = ({fill="#D0D0D0"}) => {
+    return(
+        <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        width="45" 
+        height="45" 
+        viewBox="0 0 32 32" 
+        fill="none"
+        >
+            <g id="github">
+                <path 
+                id="globle"
+                d="M12.1094 22.6562C12.1094 22.5625 12.0156 22.4688 11.875 22.4688C11.7344 22.4688 11.6406 22.5625 11.6406 22.6562C11.6406 22.75 11.7344 22.8438 11.875 22.7969C12.0156 22.7969 12.1094 22.75 12.1094 22.6562ZM10.6562 22.4219C10.6562 22.5156 10.75 22.6562 10.8906 22.6562C10.9844 22.7031 11.125 22.6562 11.1719 22.5625C11.1719 22.4688 11.125 22.375 10.9844 22.3281C10.8438 22.2812 10.7031 22.3281 10.6562 22.4219ZM12.7656 22.375C12.625 22.375 12.5312 22.4688 12.5312 22.6094C12.5312 22.7031 12.6719 22.75 12.8125 22.7031C12.9531 22.6562 13.0469 22.6094 13 22.5156C13 22.4219 12.8594 22.3281 12.7656 22.375ZM15.8125 4.375C9.34375 4.375 4.375 9.34375 4.375 15.8125C4.375 21.0156 7.60938 25.4688 12.2969 27.0625C12.9062 27.1562 13.0938 26.7812 13.0938 26.5C13.0938 26.1719 13.0938 24.5781 13.0938 23.5938C13.0938 23.5938 9.8125 24.2969 9.10938 22.1875C9.10938 22.1875 8.59375 20.8281 7.84375 20.5C7.84375 20.5 6.76562 19.75 7.89062 19.75C7.89062 19.75 9.0625 19.8438 9.71875 20.9688C10.75 22.7969 12.4375 22.2812 13.1406 21.9531C13.2344 21.2031 13.5156 20.6875 13.8906 20.3594C11.2656 20.0781 8.59375 19.7031 8.59375 15.2031C8.59375 13.8906 8.96875 13.2812 9.71875 12.4375C9.57812 12.1094 9.20312 10.8906 9.85938 9.25C10.7969 8.96875 13.0938 10.5156 13.0938 10.5156C14.0312 10.2344 15.0156 10.1406 16 10.1406C17.0312 10.1406 18.0156 10.2344 18.9531 10.5156C18.9531 10.5156 21.2031 8.92188 22.1875 9.25C22.8438 10.8906 22.4219 12.1094 22.3281 12.4375C23.0781 13.2812 23.5469 13.8906 23.5469 15.2031C23.5469 19.7031 20.7812 20.0781 18.1562 20.3594C18.5781 20.7344 18.9531 21.4375 18.9531 22.5625C18.9531 24.1094 18.9062 26.0781 18.9062 26.4531C18.9062 26.7812 19.1406 27.1562 19.75 27.0156C24.4375 25.4688 27.625 21.0156 27.625 15.8125C27.625 9.34375 22.3281 4.375 15.8125 4.375ZM8.92188 20.5469C8.82812 20.5938 8.875 20.7344 8.92188 20.8281C9.01562 20.875 9.10938 20.9219 9.20312 20.875C9.25 20.8281 9.25 20.6875 9.15625 20.5938C9.0625 20.5469 8.96875 20.5 8.92188 20.5469ZM8.40625 20.1719C8.35938 20.2656 8.40625 20.3125 8.5 20.3594C8.59375 20.4062 8.6875 20.4062 8.73438 20.3125C8.73438 20.2656 8.6875 20.2188 8.59375 20.1719C8.5 20.125 8.45312 20.125 8.40625 20.1719ZM9.90625 21.8594C9.85938 21.9062 9.85938 22.0469 10 22.1406C10.0938 22.2344 10.2344 22.2812 10.2812 22.1875C10.3281 22.1406 10.3281 22 10.2344 21.9062C10.1406 21.8125 10 21.7656 9.90625 21.8594ZM9.39062 21.1562C9.29688 21.2031 9.29688 21.3438 9.39062 21.4375C9.48438 21.5312 9.57812 21.5781 9.67188 21.5312C9.71875 21.4844 9.71875 21.3438 9.67188 21.25C9.57812 21.1562 9.48438 21.1094 9.39062 21.1562Z"
+                fill = {fill}
+                />
+            </g>
+        </svg>
+    )
+
+}
+
+
+
diff --git a/src/components/icons/Instagram.jsx b/src/components/icons/Instagram.jsx
new file mode 100644
index 00000000..8561498b
--- /dev/null
+++ b/src/components/icons/Instagram.jsx
@@ -0,0 +1,16 @@
+export const Instagram =({fill="#D0D0D0"})=>{
+    return(
+        <svg 
+        xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 32 32" fill="none"
+        >
+            <g id="instagram">
+                <path 
+                id="globle"
+                d="M16 10.6094C13 10.6094 10.6094 13.0469 10.6094 16C10.6094 19 13 21.3906 16 21.3906C18.9531 21.3906 21.3906 19 21.3906 16C21.3906 13.0469 18.9531 10.6094 16 10.6094ZM16 19.5156C14.0781 19.5156 12.4844 17.9688 12.4844 16C12.4844 14.0781 14.0312 12.5312 16 12.5312C17.9219 12.5312 19.4688 14.0781 19.4688 16C19.4688 17.9688 17.9219 19.5156 16 19.5156ZM22.8438 10.4219C22.8438 9.71875 22.2812 9.15625 21.5781 9.15625C20.875 9.15625 20.3125 9.71875 20.3125 10.4219C20.3125 11.125 20.875 11.6875 21.5781 11.6875C22.2812 11.6875 22.8438 11.125 22.8438 10.4219ZM26.4062 11.6875C26.3125 10 25.9375 8.5 24.7188 7.28125C23.5 6.0625 22 5.6875 20.3125 5.59375C18.5781 5.5 13.375 5.5 11.6406 5.59375C9.95312 5.6875 8.5 6.0625 7.23438 7.28125C6.01562 8.5 5.64062 10 5.54688 11.6875C5.45312 13.4219 5.45312 18.625 5.54688 20.3594C5.64062 22.0469 6.01562 23.5 7.23438 24.7656C8.5 25.9844 9.95312 26.3594 11.6406 26.4531C13.375 26.5469 18.5781 26.5469 20.3125 26.4531C22 26.3594 23.5 25.9844 24.7188 24.7656C25.9375 23.5 26.3125 22.0469 26.4062 20.3594C26.5 18.625 26.5 13.4219 26.4062 11.6875ZM24.1562 22.1875C23.8281 23.125 23.0781 23.8281 22.1875 24.2031C20.7812 24.7656 17.5 24.625 16 24.625C14.4531 24.625 11.1719 24.7656 9.8125 24.2031C8.875 23.8281 8.17188 23.125 7.79688 22.1875C7.23438 20.8281 7.375 17.5469 7.375 16C7.375 14.5 7.23438 11.2188 7.79688 9.8125C8.17188 8.92188 8.875 8.21875 9.8125 7.84375C11.1719 7.28125 14.4531 7.42188 16 7.42188C17.5 7.42188 20.7812 7.28125 22.1875 7.84375C23.0781 8.17188 23.7812 8.92188 24.1562 9.8125C24.7188 11.2188 24.5781 14.5 24.5781 16C24.5781 17.5469 24.7188 20.8281 24.1562 22.1875Z"
+                fill = {fill}
+                />
+            </g>
+        </svg>
+    )
+
+}
diff --git a/src/components/icons/Linkedin.jsx b/src/components/icons/Linkedin.jsx
new file mode 100644
index 00000000..e00ed0cd
--- /dev/null
+++ b/src/components/icons/Linkedin.jsx
@@ -0,0 +1,16 @@
+export const Linkedin = ({fill="#D0D0D0"}) => {
+    return(
+        <svg 
+        width="45" height="45" viewBox="0 0 32 32" fill="none"
+        xmlns="http://www.w3.org/2000/svg" 
+        >
+            <g id="linkedin">
+                <path 
+                id="globle"
+                d="M10.1875 25V10.9844H5.82812V25H10.1875ZM7.98438 9.10938C9.39062 9.10938 10.5156 7.9375 10.5156 6.53125C10.5156 5.17188 9.39062 4.04688 7.98438 4.04688C6.625 4.04688 5.5 5.17188 5.5 6.53125C5.5 7.9375 6.625 9.10938 7.98438 9.10938ZM26.4531 25H26.5V17.3125C26.5 13.5625 25.6562 10.6562 21.25 10.6562C19.1406 10.6562 17.7344 11.8281 17.125 12.9062H17.0781V10.9844H12.9062V25H17.2656V18.0625C17.2656 16.2344 17.5938 14.5 19.8438 14.5C22.0938 14.5 22.1406 16.5625 22.1406 18.2031V25H26.4531Z"
+                fill = {fill}
+                />
+            </g>
+        </svg>
+    )
+}
diff --git a/src/components/projects/Project.jsx b/src/components/projects/Project.jsx
new file mode 100644
index 00000000..739425f4
--- /dev/null
+++ b/src/components/projects/Project.jsx
@@ -0,0 +1,223 @@
+import { ProjectTitle } from "./ProjectTitle";
+import { Tag } from "./Tag";
+import { Demo } from "../icons/Demo";
+import { Code } from "../icons/Code";
+import { styled } from "styled-components";
+
+const StyledDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+
+  .projectSnippet {
+    width: 343px;
+    height: 200px;
+    object-fit: contain;
+    object-position: top;
+    border-radius: 13px;
+  }
+
+  .detail-box {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    align-self: stretch;
+    overflow: visible;
+  }
+
+  .detail {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .description {
+    font-size: 18px;
+    font-weight: 400;
+    font-family: "Hind", sans-serif;
+    color: var(--color-black);
+    text-align: left;
+    word-wrap: break-word;
+  }
+
+  .tag {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  .btn {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    width: 430px;
+    gap: 32px;
+  }
+
+  .btn a {
+    display: flex;
+    flex-direction: row;
+    padding-right: 16px;
+    align-items: center;
+    gap: 7px;
+    color: var(--color-dark);
+    font-family: "Montserrat", sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    text-decoration: none;
+  }
+
+  #liveDemoBtn,
+  #viewCodeBtn {
+    :hover {
+      background-color: var(--color-foreground);
+      border-radius: 40px;
+      color: var(--color-light);
+      svg path {
+        fill: var(--color-light);
+      }
+    }
+  }
+
+  #liveDemoBtn,
+  #viewCodeBtn {
+    border-radius: 40px;
+    background-color: var(--color-light);
+    svg path {
+      fill: var(--color-dark);
+    }
+  }
+
+  @media (max-width: 666px) {
+    .btn {
+      display: flex;
+      padding-right: 16px;
+      align-items: center;
+      gap: 7px;
+    }
+
+    .btn a {
+      font-size: 15px;
+    }
+  }
+
+  @media (min-width: 667px) {
+    .btn a {
+      font-size: 15px;
+    }
+  }
+
+  @media (min-width: 667px) and (max-width: 1024px) {
+    .project-wrapper {
+      padding: 128px 32px;
+    }
+
+    .projectSnippet {
+      width: 200px;
+      height: 280px;
+    }
+
+    flex-direction: row;
+
+    .detail-box {
+      justify-content: space-between;
+    }
+
+    .btn {
+      flex-direction: row;
+      gap: 32px;
+    }
+
+    .project {
+      align-self: self-start;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    .project-wrapper {
+      padding: 128px 161px 124px 161px;
+    }
+
+    .project {
+      font-size: 80px;
+    }
+
+    .projectSnippet {
+      width: 408px;
+      height: 280px;
+    }
+
+    .project-container {
+      gap: 128px;
+    }
+
+    flex-direction: row;
+
+    .detail-box {
+      justify-content: space-between;
+    }
+
+    .btn {
+      flex-direction: row;
+      gap: 32px;
+    }
+
+    .project {
+      align-self: self-start;
+    }
+  }
+`;
+
+export const Project = ({
+  projectName,
+  projectIntro,
+  topics,
+  demoLink,
+  codeLink,
+  image,
+  alt,
+}) => {
+  const title = projectName.replaceAll("-", " ");
+  return (
+    <StyledDiv aria-label="Previous projects' information">
+      <div aria-label="Project image">
+        <img src={image} alt={alt} className="projectSnippet" />
+      </div>
+      <div className="detail-box">
+        <div className="detail" aria-label="Previous projects' information">
+          <ProjectTitle title={title} />
+          <p className="description" aria-label="About the project">
+            {projectIntro}{" "}
+          </p>
+          <div className="tag">
+            {topics.map(
+              (topic) =>
+                topic !== "portfolio" && <Tag key={topic} topic={topic} />
+            )}
+          </div>
+        </div>
+        <div className="btn">
+          <div id="liveDemoBtn" aria-label="Button of live demo">
+            <a href={demoLink} aria-label="Link to project">
+              <Demo />
+              Live Demo
+            </a>
+          </div>
+          <div id="viewCodeBtn" aria-label="Button of veiwing code">
+            <a href={codeLink} aria-label="Link to Github">
+              <Code />
+              View the code
+            </a>
+          </div>
+        </div>
+      </div>
+    </StyledDiv>
+  );
+};
diff --git a/src/components/projects/ProjectTitle.jsx b/src/components/projects/ProjectTitle.jsx
new file mode 100644
index 00000000..f1a662fd
--- /dev/null
+++ b/src/components/projects/ProjectTitle.jsx
@@ -0,0 +1,16 @@
+import { styled } from "styled-components";
+
+const StyledHeader = styled.h3`
+  font-size: 24px;
+  font-weight: 600;
+  font-family: "Montserrat", sans-serif;
+  color: var(--color-black);
+
+  @media (min-width: 1025px) {
+    font-size: 32px;
+  }
+`;
+
+export const ProjectTitle = ({ title }) => {
+  return <StyledHeader>{title}</StyledHeader>;
+};
diff --git a/src/components/projects/Projects.jsx b/src/components/projects/Projects.jsx
new file mode 100644
index 00000000..fc0aad08
--- /dev/null
+++ b/src/components/projects/Projects.jsx
@@ -0,0 +1,76 @@
+import { Project } from "./Project";
+import { PageTopic } from "../PageTopic";
+import { styled } from "styled-components";
+
+import projects from "../../data/projects.json";
+
+const StyledSection = styled.section`
+  display: flex;
+  padding: 128px 16px 208px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 64px;
+  background-color: var(--color-white);
+  width: 100%;
+  overflow: scroll;
+
+  .project {
+    color: var(--color-black);
+    font-size: 56px;
+    font-family: "Montserrat", sans-serif;
+    align-self: center;
+  }
+
+  .project-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 64px;
+    align-self: stretch;
+  }
+
+  @media (min-width: 667px) and (max-width: 1024px) {
+    padding: 128px 32px;
+
+    .project {
+      align-self: self-start;
+    }
+  }
+
+  @media (min-width: 1025px) {
+    padding: 128px 161px 124px 161px;
+
+    .project {
+      font-size: 80px;
+      align-self: self-start;
+    }
+
+    .project-container {
+      gap: 128px;
+    }
+  }
+`;
+
+export const Projects = () => {
+  return (
+    <StyledSection>
+      <PageTopic pageTopic={"Featured Projects"} className={"project"} />
+      <div className="project-container">
+        {projects.projects.map((project) => {
+          return (
+            <Project
+              key={project.id}
+              projectName={project.name}
+              topics={project.tags}
+              codeLink={project.github}
+              demoLink={project.netlify}
+              projectIntro={project.about}
+              image={project.image}
+              alt={project.alt}
+            />
+          );
+        })}
+      </div>
+    </StyledSection>
+  );
+};
diff --git a/src/components/projects/Tag.jsx b/src/components/projects/Tag.jsx
new file mode 100644
index 00000000..06bea570
--- /dev/null
+++ b/src/components/projects/Tag.jsx
@@ -0,0 +1,18 @@
+import { styled } from "styled-components";
+
+const StyledP = styled.p`
+  list-style: none;
+  color: var(--color-white);
+  background-color: var(--color-black);
+  width: fit-content;
+  align-items: center;
+  text-align: left;
+  padding: 2px 6px;
+  font-family: "Hind", sans-serif;
+  font-size: 16px;
+  border-radius: 5px;
+`;
+
+export const Tag = ({ topic }) => {
+  return <StyledP>{topic}</StyledP>;
+};
diff --git a/src/data/projects.json b/src/data/projects.json
index 7c426028..3c05bfb4 100644
--- a/src/data/projects.json
+++ b/src/data/projects.json
@@ -1,28 +1,95 @@
 {
   "projects": [
     {
+      "key": 1,
       "name": "Business site",
-      "image": "https://images.unsplash.com/photo-1557008075-7f2c5efa4cfd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2497&q=80",
+      "image": "/projects/business_site.png",
+      "alt": "project's business site screenshot",
       "tags": [
         "HTML5",
         "CSS3",
         "JavaScript"
       ],
-      "netlify": "link",
-      "github": "link"
+      "netlify": "https://js-buss-site-2025.netlify.app/",
+      "github": "https://github.com/Kasssiiii/js-project-business-site",
+      "about": "A static website listing properties for rent. Built with vanilla HTML, CSS, and JavaScript, this project showcases rental listings and provides basic interactivity for browsing."
     },
     {
-      "name": "Weather app",
-      "image": "https://images.unsplash.com/photo-1520792532857-293bd046307a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2370&q=80",
+      "key": 2,
+      "name": "Recipe Library",
+      "image": "/projects/recipe_library.png",
+      "alt": "project's recipe library screenshot",
       "tags": [
         "HTML5",
         "CSS3",
         "JavaScript",
-        "TypeScript",
         "APIs"
       ],
-      "netlify": "link",
-      "github": "link"
+      "netlify": "https://js-recipe-libr.netlify.app/",
+      "github": "https://github.com/Kasssiiii/js-project-recipe-library",
+      "about": "A browser for cooking recipes using data from Spoonacular API. The app allows users to filter, sort, and explore sample recipes using vanilla HTML, CSS, and JavaScript."
+    },
+    {
+      "key": 3,
+      "name": "Weather App",
+      "image": "/projects/weather_app.png",
+      "alt": "weather app screenshot",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "APIs",
+        "Team Project"
+      ],
+      "netlify": "https://nordicweatherapp.netlify.app/",
+      "github": "https://github.com/JasminHed/newjs-project-weather-app",
+      "about": "A modern weather application that provides current conditions and a 4-day forecast for cities worldwide. Built using OpenWeatherMap API and JavaScript, this group project helped me learn how to work with external APIs, handle JSON data, manage loading/error states, and create a clean responsive layout."
+    },
+    {
+      "key": 4,
+      "name": "Accessibility Site",
+      "image": "/projects/accessibility_site.png",
+      "alt": "accessibility site screenshot",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "Accessibility",
+        "Team Project"
+      ],
+      "netlify": "https://teamwind1.netlify.app/",
+      "github": "https://github.com/Bianka2112/js-project-accessibility",
+      "about": "A website focused on demonstrating best practices in web accessibility. This group project includes semantic HTML, keyboard navigation, proper contrast ratios, and ARIA roles to ensure inclusive user experience. Also features a quiz about web accessibility."
+    },
+    {
+      "key": 5,
+      "name": "Movie Browser",
+      "image": "/projects/movie_browser.png",
+      "alt": "movie browser screenshot",
+      "tags": [
+        "React",
+        "JavaScript",
+        "APIs",
+        "CSS3"
+      ],
+      "netlify": "https://movies-js-kasia.netlify.app//",
+      "github": "https://github.com/Kasssiiii/js-project-movies",
+      "about": "A movie browsing app using data from The Movie Database (TMDb) API. Built with React, the app displays currently playing movies in cinemas and allows users to explore popular titles with a responsive, modern UI."
+    },
+    {
+      "key": 6,
+      "name": "Happy Thoughts",
+      "image": "/projects/happy_thoughts.png",
+      "alt": "happy thoughts screenshot",
+      "tags": [
+        "React",
+        "JavaScript",
+        "CSS3",
+        "APIs"
+      ],
+      "netlify": "https://happy-thoughts-js.netlify.app/",
+      "github": "https://github.com/Kasssiiii/js-project-happy-thoughts",
+      "about": "A Twitter-style web app for posting positive messages. Users can sign in and share happy thoughts publicly. Built with React and a custom API, the project focuses on state management, forms, and real-time updates."
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/index.css b/src/index.css
index 61010be6..e4e6b4a3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,28 @@
 body {
   background: pink;
   color: hotpink;
+}
+
+:root{
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  --color-foreground: #2B4B27;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-background: #2B4B27;
+  --color-light: #f5f5f5;
+  --color-dark: #333333;
+  --color-test: pink;
+  --color-code: #eb5577;
+  --color-upcoming: #426d51;
+  --color-more: #FFDE30;
+
+  text-align: center;
+  font-family: "Montserrat", sans-serif, "Hind", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b9..d3a3108d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  publicDir: 'src/assets',
 })