Technigo · Fannyhenriques · Nov 2, 2024 · Nov 4, 2024 · Nov 4, 2024 · Nov 11, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/my-portfolio/.gitignore b/my-portfolio/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/my-portfolio/README.md b/my-portfolio/README.md
@@ -0,0 +1,46 @@
+<h1 align="center">
+  <a href="">
+    <img src="/react-p.svg" alt="Project Banner Image">
+  </a>
+</h1>
+
+# Technigo - React Portfolio Project
+
+This project is a portfolio built using React, following a design provided by a UX designer on Figma. The goal was to replicate the design as closely as possible while using reusable components for scalability and maintainability.
+
+Overall Layout
+I structured the project using reusable components, such as Typography, Buttons, and Grid. These components were then passed into various section components to construct the layout. To ensure the design matched the Figma prototype as closely as possible, I utilized media queries for adjusting spacing and layouts across different screen sizes.
+
+# Challanges:
+
+- Structure:
+  The structure of the app was one of the main challenges. Initially, I aimed to use as many reusable components as possible to keep the larger components clean and maintainable. However, as the project evolved, it became more challenging to keep the parent components dry. This led to the need for adding additional logic and styles directly into those parent components to achieve the desired layout.
+
+- Spacing Issues:
+  I initially tried passing different sectionTypes as props into the Grid component to style all sections using display: grid. However, some sectionTypes were being overridden by styles in the Grid.css, leading to unexpected layout issues.
+  Using gap in display: grid didn’t work as expected either, causing layout inconsistencies.
+
+- Solution:
+  I first addressed this by using inline styling within the Grid component. However, it became harder to add media queries while keeping the code clean. Instead I solved this by using the backgroundColor prop for the article and project sections to add padding, and I used Flexbox in the card components to manage spacing. The other sections were styled manually. However, with more time, I would refactor the Grid.jsx to use styled-components for better flexibility in spacing and more maintainable code.
+
+- Image Sizing:
+  I had to adjust the width and height of the images to ensure they matched the Figma design, this was done by tweaking the CSS for image containers and testing across different screen sizes.
+
+- Media Queries:
+  The media queries required several adjustments to ensure that the layout remained responsive and close to the Figma design.
+
+If I had more time I would:
+
+- Use styled.components for better code organization and flexibility.
+- Simplify the structure to avoid unnecessary components.
+- Replace px with rem for better scalability and accessibility.
+- Clean up the code to remove redundancy.
+- Improve media queries for a more user-friendly layout
+
+# View it live:
+
+https://fannys-portfolio.netlify.app/
+
+## Instructions
+
+[Check this projects instructions here](https://github.com/Technigo/project-portfolio/blob/main/instructions.md)
diff --git a/my-portfolio/eslint.config.js b/my-portfolio/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/my-portfolio/index.html b/my-portfolio/index.html
@@ -0,0 +1,21 @@
+<!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" />
+  <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">
+  <title>Portfolio</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
diff --git a/my-portfolio/package-lock.json b/my-portfolio/package-lock.json
diff --git a/my-portfolio/package.json b/my-portfolio/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "my-portfolio",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "vite": "^5.4.10"
+  }
+}
diff --git a/my-portfolio/src/App.css b/my-portfolio/src/App.css
@@ -0,0 +1,18 @@
+:root {
+  font-family: "Poppins", sans-serif;
+  margin: 0 auto;
+
+  /* Colors */
+  --primary-color: #000000;
+  --secondary-color: #FFFFFF;
+  --accent-color: #7e7070;
+}
+
+body {
+  margin: 0 auto;
+}
+
+img {
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/my-portfolio/src/App.jsx b/my-portfolio/src/App.jsx
@@ -0,0 +1,21 @@
+import './App.css';
+import { Header } from "./components/sections/HeaderSection/Header.jsx";
+import { FeaturedProjects } from "./components/sections/ProjectsSection/FeaturedProjects.jsx";
+import { Tech } from "./components/sections/TechSection/Tech.jsx";
+import { Skills } from "./components/sections/SkillsSection/Skills.jsx";
+import { FeaturedArticles } from "./components/sections/ArticlesSection/FeaturedArticles.jsx";
+import { LetsTalk } from "./components/sections/LetsTalkSection/LetsTalk.jsx";
+
+export const App = () => {
+
+  return (
+    <>
+    <Header />
+    <FeaturedProjects />
+    <Tech />
+    <Skills />
+    <FeaturedArticles />
+    <LetsTalk />
+    </>
+  );
+};
diff --git a/my-portfolio/src/assets/iconArrow.svg b/my-portfolio/src/assets/iconArrow.svg
diff --git a/my-portfolio/src/assets/iconArrowWhite.svg b/my-portfolio/src/assets/iconArrowWhite.svg
diff --git a/my-portfolio/src/assets/iconGithub.svg b/my-portfolio/src/assets/iconGithub.svg
diff --git a/my-portfolio/src/assets/iconGithubWhite.svg b/my-portfolio/src/assets/iconGithubWhite.svg
diff --git a/my-portfolio/src/assets/iconInstagram.svg b/my-portfolio/src/assets/iconInstagram.svg
diff --git a/my-portfolio/src/assets/iconLinkedin.svg b/my-portfolio/src/assets/iconLinkedin.svg
diff --git a/my-portfolio/src/assets/iconStackOverflow.svg b/my-portfolio/src/assets/iconStackOverflow.svg
diff --git a/my-portfolio/src/assets/iconTwitter.svg b/my-portfolio/src/assets/iconTwitter.svg
diff --git a/my-portfolio/src/assets/iconWeb.svg b/my-portfolio/src/assets/iconWeb.svg
diff --git a/my-portfolio/src/assets/iconWebWhite.svg b/my-portfolio/src/assets/iconWebWhite.svg
diff --git a/my-portfolio/src/assets/img1.jpeg b/my-portfolio/src/assets/img1.jpeg
diff --git a/my-portfolio/src/assets/img2.jpeg b/my-portfolio/src/assets/img2.jpeg
diff --git a/my-portfolio/src/assets/img3.jpeg b/my-portfolio/src/assets/img3.jpeg
diff --git a/my-portfolio/src/assets/profile-img.jpg b/my-portfolio/src/assets/profile-img.jpg
diff --git a/my-portfolio/src/components/sections/ArticlesSection/FeaturedArticles.css b/my-portfolio/src/components/sections/ArticlesSection/FeaturedArticles.css
@@ -0,0 +1,68 @@
+/* default styling */
+.articles-container {
+  grid-column: span 4;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  color: var(--secondary-color);
+  padding-bottom: 128px;
+}
+
+.article-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 64px;
+}
+
+.view-more-container {
+  display: flex;
+  justify-content: center;
+}
+
+/* added media queries for default styling so the site deployed to netlify will work below 480px */
+@media (max-width: 479px) {
+  .articles-container {
+    grid-column: span 4;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    color: var(--secondary-color);
+    padding-bottom: 128px;
+  }
+
+  .article-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 64px;
+  }
+
+  .view-more-container {
+    display: flex;
+    justify-content: center;
+  }
+}
+
+/* Breakpoint for tablet */
+@media (min-width: 480px) and (max-width: 768px) {
+  .articles-container {
+    grid-column: span 8;
+
+  }
+}
+/* breakpoint for small desktop */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .articles-container {
+    grid-column: span 12;
+
+  }
+}
+@media (min-width: 1024px) {
+  .articles-container { 
+    grid-column: span 12;
+
+  }
+}
diff --git a/my-portfolio/src/components/sections/ArticlesSection/FeaturedArticles.jsx b/my-portfolio/src/components/sections/ArticlesSection/FeaturedArticles.jsx
@@ -0,0 +1,44 @@
+import articlesData from "../../../data/articles.json";
+import { H2 } from "../../ui/Typography/Typography.jsx";
+import { Card } from "../Cards/Card.jsx";
+import { Grid } from "../../ui/GridLayout/Grid.jsx";
+import { images } from "../../ui/Images/Images.jsx";
+import { Button } from "../../ui/Buttons/Button.jsx";
+import iconArrowWhite from "../../../assets/iconArrowWhite.svg";
+import "./FeaturedArticles.css";
+
+export const FeaturedArticles = () => {
+  console.log(articlesData);
+  return (
+    <Grid background="black">
+      <div className="articles-container">
+        <div className="title">
+          <H2> My words</H2>
+        </div>
+        <div className="article-wrapper">
+          {articlesData.articles.map((article) => (
+            <Card
+              key={article.name}
+              imageSource={images[article.image] || article.image}
+              cardTag={article.tags}
+              cardTitle={article.name}
+              cardDescription={article.description}
+              sectionType="article"
+              link={article.link}
+            />
+          ))}
+        </div>
+        <div className="view-more-container">
+          <Button
+            text="Read More Articles"
+            isViewMore={true}
+            sectionType="article"
+            icon={iconArrowWhite}
+            href="https://www.linkedin.com"
+            target="_blank"
+          />
+        </div>
+      </div>
+    </Grid>
+  );
+};
diff --git a/my-portfolio/src/components/sections/BioSection/Bio.css b/my-portfolio/src/components/sections/BioSection/Bio.css
@@ -0,0 +1,39 @@
+.bio-section {
+  width: 100%;
+}
+
+.content-section {
+  color: var(--secondary-color);
+  padding: 64px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+@media (min-width: 375px) {
+  .content-section { 
+  text-align: center;
+  }
+}
+@media (min-width: 375px) and (max-width: 1024px) {
+  .content-section p {
+    max-width: 669px;
+  }
+  .content-section {
+    padding-top: 64px;
+    padding-bottom: 128px;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+@media (min-width: 1025px) {
+  .content-section p {
+    max-width: 782px;
+  }
+  .content-section {
+    padding-top: 64px;
+    padding-bottom: 128px;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
diff --git a/my-portfolio/src/components/sections/BioSection/Bio.jsx b/my-portfolio/src/components/sections/BioSection/Bio.jsx
@@ -0,0 +1,15 @@
+import "./Bio.css";
+import { H2, BodyText } from "../../ui/Typography/Typography";
+
+export const Bio = () => {
+  return (
+    <section className="bio-section">
+      <div className="content-section">
+        <H2>Bio</H2>
+        <BodyText>
+          Fanny is an exceptional developer known for her innovative solutions and exceptional coding abilities. She creates user-friendly applications and solves complex issues with ease. Her drive for excellence makes her a valuable asset to any project and a standout in the technology field.
+        </BodyText>
+      </div>
+    </section>
+  );
+};
diff --git a/my-portfolio/src/components/sections/Cards/Card.css b/my-portfolio/src/components/sections/Cards/Card.css
@@ -0,0 +1,185 @@
+.project-card,
+.article-card {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.project-card {
+  width: 100%;
+}
+
+.article-card {
+  width: 100%;
+  color: var(--secondary-color);
+}
+
+.card-heading {
+  text-align: center;
+}
+
+.project-img {
+  width: 100%;
+  height: 479px;
+  border-radius: 12px;
+  object-fit: cover;
+}
+
+.article-img {
+  width: 100%;
+  height: 200px;
+  border-radius: 12px;
+  object-fit: cover;
+}
+
+.project-info-box,
+.article-info-box {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 580px;
+}
+
+.tags-container {
+  display: flex;
+  flex-direction: row; 
+  justify-content: flex-start;
+  align-items: center; 
+  gap: 4px;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.description-box{
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Custom-breakpoint for tablet */
+@media (min-width: 530px) and (max-width: 589px) {
+  .article-img {
+    width: 170px;
+    height: 390px;
+  }
+  .article-card {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   flex-direction: row;
+   width: 100%;
+  }
+}
+/* Custom-breakpoint for tablet */
+@media (min-width: 590px) and (max-width: 768px) {
+  .article-img {
+    width: 200px;
+    height: 338px;
+  }
+  .article-card {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   flex-direction: row;
+   width: 100%;
+  }
+  .project-card {
+  gap: 64px;
+  }
+}
+
+/* breakpoint for small desktop */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .article-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 auto;
+    gap: 45px;
+    max-width: 900px;
+   }
+   .article-img {
+    height: 300px;
+    overflow: hidden;
+  }
+  .project-img {
+    max-width: 379px;
+    max-height: 379px;
+    overflow: hidden;
+  }
+  .project-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+  }
+  .project-info-box {
+    max-width: 500px;
+  }
+
+}
+
+@media (min-width: 1025px) and (max-width: 1200px) {
+  .article-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 auto;
+    gap: 125px;
+    max-width: 1100px;
+   }
+   .article-img {
+    height: 311px;
+    overflow: hidden;
+  }
+  .project-img {
+    width: 379px;
+    height: 379px;
+  }
+  .project-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 64px;
+  }
+  .project-info-box {
+    max-width: 500px;
+  }
+}
+@media (min-width: 1201px) {
+  .article-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0 auto;
+    gap: 125px;
+    max-width: 1100px;
+   }
+   .article-img {
+    height: 311px;
+    overflow: hidden;
+  }
+  .project-img {
+    max-width: 479px;
+    max-height: 479px;
+    overflow: hidden;
+  }
+  .project-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 128px;
+  }
+  .project-info-box {
+    max-width: 580px;
+  }
+}
diff --git a/my-portfolio/src/components/sections/Cards/Card.jsx b/my-portfolio/src/components/sections/Cards/Card.jsx
@@ -0,0 +1,65 @@
+/* eslint-disable react/prop-types */
+import "./Card.css";
+import { BodyText, H3 } from "../../ui/Typography/Typography.jsx";
+import { Button } from "../../ui/Buttons/Button.jsx";
+import iconWeb from "../../../assets/iconWeb.svg";
+import iconGithubWhite from "../../../assets/iconGithubWhite.svg";
+import iconWebWhite from "../../../assets/iconWebWhite.svg";
+import { Tag } from "../../ui/Tags/Tags.jsx";
+
+export const Card = ({
+  imageSource,
+  sectionType,
+  cardTag,
+  cardTitle,
+  cardDescription,
+  netlify,
+  github,
+  link,
+}) => {
+  return (
+    <article className={`${sectionType}-card`}>
+      <img
+        src={imageSource}
+        className={`${sectionType}-img`}
+        alt="portfolio-img"
+      />
+      <div className={`${sectionType}-info-box`}>
+        <div className="tags-container">
+          {Array.isArray(cardTag)
+            ? cardTag.map((tag, index) => <Tag key={index} sectionType={sectionType} text={tag} />)
+            : <Tag sectionType={sectionType} text={cardTag} />}
+        </div>
+        <H3>{cardTitle}</H3>
+        <div className="description-box">
+          <BodyText>{cardDescription}</BodyText>
+          <div className="button-container">
+            {sectionType === "project" ? (
+              <>
+                <Button text="Live Demo"
+                  icon={iconWeb}
+                  sectionType={sectionType}
+                  href={netlify}
+                  target="_blank"
+                />
+                <Button text="View Code"
+                  icon={iconGithubWhite}
+                  sectionType={sectionType}
+                  href={github}
+                  target="_blank"
+                />
+              </>
+            ) : (
+              <Button text="Read Article"
+                icon={iconWebWhite}
+                sectionType={sectionType}
+                href={link}
+                target="_blank"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};
diff --git a/my-portfolio/src/components/sections/GallerySection/Gallery.css b/my-portfolio/src/components/sections/GallerySection/Gallery.css
@@ -0,0 +1,152 @@
+.gallery-container {
+  display: flex; 
+  justify-content: center;
+  height: 100%;
+}
+
+.image-container {
+  margin: 0px 16px;
+  position: relative;
+  min-height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 280px;
+  width: 100%;
+}
+
+.image-wrapper {
+  position: relative; 
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.img1,
+.img2,
+.img3 {
+  width: 130px;
+  height: 140px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  position: absolute;
+}
+
+.img1 {
+  transform: rotate(-4.695deg);
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  left: 5px;
+}
+
+.img2 {
+  position: relative;
+  z-index: 2;
+}
+
+.img3 {
+  transform: rotate(4.695deg);
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  left: 145px;
+}
+
+@media (min-width: 375px) and (max-width: 480px){
+  .img1,
+  .img2,
+  .img3 {
+    width: 158px;
+    height: 168px;
+} 
+  .img1 {
+    top: 10px;
+    left: -30px;
+}
+  .img3 {
+    top: 10px;
+    left: 155px;
+}
+}
+/* breakpoint tablet */
+@media (min-width: 481px) and (max-width:668px) {
+  .image-container {
+    max-width: 400px;
+    padding-bottom: 64px;
+  }
+  .img1,
+  .img2,
+  .img3 {
+    width: 198px;
+    height: 208px;
+  }
+  .img1 {
+    top: 10px;
+    left: -5px;
+  }
+  .img3 {
+    top: 10px;
+    left: 210px;
+  }
+}
+@media (min-width:669px) and (max-width:744px) {
+  .image-container {
+    max-width: 630px;
+    padding-bottom: 64px;
+  }
+  .img1,
+  .img2,
+  .img3 {
+    width: 270px;
+    height: 290px;
+  }
+  .img1 {
+    top: 15px;
+    left: 15px;
+  }
+  .img3 {
+    top: 15px;
+    left: 350px;
+  }
+}
+@media (min-width:745px) and (max-width:1024px) {
+  .image-container {
+    max-width: 700px;
+    padding-bottom: 64px;
+  }
+  .img1,
+  .img2,
+  .img3 {
+    width: 320px;
+    height: 340px;
+  }
+  .img1 {
+    top: 17px;
+    left: 16px;
+  }
+  .img3 {
+    top: 17px;
+    left: 365px;
+  }
+}
+@media (min-width:1025px) {
+  .image-container {
+    max-width: 810px;
+    padding-bottom: 64px;
+  }
+  .img1,
+  .img2,
+  .img3 {
+    width: 358px;
+    height: 382px;
+  }
+  .img1 {
+    top: 20px;
+    left: 17px;
+  }
+  .img3 {
+    top: 20px;
+    left: 440px;
+  }
+}
diff --git a/my-portfolio/src/components/sections/GallerySection/Gallery.jsx b/my-portfolio/src/components/sections/GallerySection/Gallery.jsx
@@ -0,0 +1,16 @@
+import { images } from "../../ui/Images/Images";
+import "./Gallery.css";
+
+export const Gallery = () => {
+  return (
+    <div className="gallery-container">
+      <div className="image-container">
+        <div className="image-wrapper"> 
+        <img className="img1" src={images.img1} alt="Image 1" />
+        <img className="img2" src={images.img2} alt="Image 2" />
+        <img className="img3" src={images.img3} alt="Image 3" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/my-portfolio/src/components/sections/HeaderSection/Header.css b/my-portfolio/src/components/sections/HeaderSection/Header.css
@@ -0,0 +1,31 @@
+.header {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  width: 100%;
+
+}
+
+.header-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 64px 16px;
+  text-align: center;
+}
+
+.header-section h3 {
+  max-width: 782px;
+}
+
+@media (min-width: 481px) {
+  .header-section {
+  padding: 64px 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .header-section {
+    padding: 128px 24px;
+    }
+}
diff --git a/my-portfolio/src/components/sections/HeaderSection/Header.jsx b/my-portfolio/src/components/sections/HeaderSection/Header.jsx
@@ -0,0 +1,22 @@
+import { H1, H3 } from "../../ui/Typography/Typography";
+import { Gallery } from "../GallerySection/Gallery";
+import { Bio } from "../BioSection/Bio";
+import "./Header.css";
+
+export const Header = () => {
+  return (
+  <div className="header"> 
+    <section className="header-container">
+      <div className="header-section">
+        <H3> Hi there, I’m</H3>
+        <H1>Fanny Henriques</H1>
+        <H3>
+          Creative Front-End Developer with a background in social science and social work
+        </H3>
+      </div>
+    </section>
+    <Gallery/>
+    <Bio/>
+  </div>
+  );
+};
diff --git a/my-portfolio/src/components/sections/LetsTalkSection/LetsTalk.css b/my-portfolio/src/components/sections/LetsTalkSection/LetsTalk.css
@@ -0,0 +1,48 @@
+.talk-card {
+  width: 100%;
+  background-color: var(--secondary-color);
+}
+
+.talk-card h2 {
+  align-self: center;
+}
+
+.profile-img {
+  height: 164px;
+  border-radius: 164px;
+  margin-top: 16px;
+  align-self: center;
+}
+
+.content-card {
+  color: var(--primary-color);
+  padding: 64px 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.contact-section {
+  margin: 64px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.icons-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  gap: 32px;
+}
+
+@media (min-width: 481px) {
+  .content-card {
+   padding: 128px 24px;
+ }
+ .contact-section {
+   align-items: center;
+   justify-content: center;
+   gap: 8px;
+ }
+}
diff --git a/my-portfolio/src/components/sections/LetsTalkSection/LetsTalk.jsx b/my-portfolio/src/components/sections/LetsTalkSection/LetsTalk.jsx
@@ -0,0 +1,39 @@
+import "./LetsTalk.css";
+import profileImg from "../../../assets/profile-img.jpg";
+import { H2, BodyTextLarge } from "../../ui/Typography/Typography";
+import { IconButton } from "../../ui/Buttons/IconButtons";
+
+export const LetsTalk = () => {
+
+  const iconData = [
+    { id: 1, iconName: "linkedin", onClick: () => window.open("https://www.linkedin.com", "_blank")
+    },
+    { id: 2, iconName: "github", onClick: () => window.open("https://github.com", "_blank")
+    },
+    { id: 3, iconName: "stackOverflow", onClick: () => window.open("https://stackoverflow.com", "_blank")
+    },
+    { id: 4, iconName: "twitter", onClick: () => window.open("https://twitter.com", "_blank")
+    },
+    { id: 5, iconName: "instagram", onClick: () => window.open("https://www.instagram.com", "_blank")
+    },
+  ];
+
+return (
+  <section className="talk-card">
+    <div className="content-card">
+      <H2>Lets talk</H2>
+      <img className="profile-img" src={profileImg} alt="profile picture" />
+      <div className="contact-section">
+        <BodyTextLarge>Fanny Henriques</BodyTextLarge>
+        <BodyTextLarge>+46(0)763 12 33 45</BodyTextLarge>
+        <BodyTextLarge>sara.svensson@mail.com</BodyTextLarge>
+      </div>
+      <div className="icons-container">
+        {iconData.map(({ id, iconName, onClick }) => (
+        <IconButton key={id} iconName={iconName} onClick={onClick} />
+        ))}
+      </div>
+    </div>
+  </section>
+  );
+};
diff --git a/my-portfolio/src/components/sections/ProjectsSection/FeaturedProjects.css b/my-portfolio/src/components/sections/ProjectsSection/FeaturedProjects.css
@@ -0,0 +1,39 @@
+.projects-container {
+  grid-column: span 4;
+  gap: 64px;
+}
+
+.projects-container h2 {
+  margin-bottom: 64px;
+}
+
+.project-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 64px;
+}
+
+.view-more-container {
+  display: flex;
+  justify-content: center;
+}
+
+/* Breakpoint for tablet */
+@media (min-width: 480px) and (max-width: 768px) {
+  .projects-container {
+    grid-column: span 8;
+    gap: 64px;
+  }
+}
+
+/* breakpoint for small desktop */
+@media (min-width: 769px) {
+  .projects-container {
+    grid-column: span 12;
+    gap: 64px;
+  }
+
+  .project-wrapper>.project-card:nth-child(even) {
+    flex-direction: row-reverse;
+  }
+}
diff --git a/my-portfolio/src/components/sections/ProjectsSection/FeaturedProjects.jsx b/my-portfolio/src/components/sections/ProjectsSection/FeaturedProjects.jsx
@@ -0,0 +1,62 @@
+import { useState, useEffect } from "react";
+import { H2 } from "../../ui/Typography/Typography";
+import { Card } from "../Cards/Card.jsx";
+import { Grid } from "../../ui/GridLayout/Grid.jsx";
+import { images } from "../../ui/Images/Images.jsx";
+import { Button } from "../../ui/Buttons/Button.jsx";
+import { Tag } from "../../ui/Tags/Tags.jsx";
+import projectsData from "../../../data/projects.json";
+import iconArrow from "../../../assets/iconArrow.svg";
+import "./FeaturedProjects.css";
+
+export const FeaturedProjects = () => {
+  // display every other card in reversed row on desktop
+  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 1024);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsDesktop(window.innerWidth >= 1024);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return (
+    <Grid background="white">
+      <div className="projects-container">
+        <H2>Featured Projects</H2>
+        <div className="project-wrapper">
+          {projectsData.projects.map((project, index) => (
+            <Card
+              key={project.name}
+              imageSource={images[project.image] || project.image}
+              cardTag={project.tags}
+              cardTitle={project.name}
+              cardDescription={project.description}
+              sectionType="project"
+              netlify={project.netlify}
+              github={project.github}
+              isReversed={isDesktop && index % 2 === 1}
+            >
+              <div className="tag-container">
+                {project.tags.map((tag, index) => (
+                  <Tag key={index} sectionType="project" text={tag} />
+                ))}
+              </div>
+            </Card>
+          ))}
+        </div>
+        <div className="view-more-container">
+          <Button
+            text="View More Projects"
+            isViewMore={true}
+            sectionType="project"
+            icon={iconArrow}
+            href="https://github.com/Fannyhenriques?tab=repositories"
+            target="_blank"
+          />
+        </div>
+      </div>
+    </Grid>
+  );
+};
diff --git a/my-portfolio/src/components/sections/SkillsSection/Skills.css b/my-portfolio/src/components/sections/SkillsSection/Skills.css
@@ -0,0 +1,60 @@
+.skill-section {
+  display: flex;
+  flex-direction: column;
+  margin: 64px 16px;
+  gap: 24px;
+}
+
+.skill-category {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skill-category ul{
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.skill-category li { 
+  list-style-type: none;
+  font-size: 18px;
+  margin: 0;
+  padding: 0;
+}
+
+.skill-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap:24px;
+}
+
+
+@media (min-width: 481px) {
+  .skill-section {
+    margin: 128px 24px;
+  }
+  .skill-category {  
+    justify-content: center;
+    align-items: center;
+  }
+  .skill-category li {
+    text-align: center;
+    list-style-type: none;
+  }
+}
+@media (min-width: 1024px) {
+  .skill-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 24px;
+  }
+.skill-category li {
+  display: flex;
+  justify-content: flex-start !important;
+  align-items: center;
+  }
+}
diff --git a/my-portfolio/src/components/sections/SkillsSection/Skills.jsx b/my-portfolio/src/components/sections/SkillsSection/Skills.jsx
@@ -0,0 +1,28 @@
+import skillsData from "../../../data/skills.json"; 
+import { H2 } from "../../ui/Typography/Typography.jsx"; 
+import { Tag } from "../../ui/Tags/Tags.jsx";
+import "./Skills.css";
+
+export const Skills = () => {
+return (
+  <section className="skill-section">
+    <H2>Skills</H2>
+    <div className="skill-wrapper"> 
+      {skillsData.skills.map((skill) => (
+      <div key={skill.name} className="skill-category">
+      <Tag sectionType="skill" text={skill.name} />
+        <ul>
+          {typeof skill.tags === "string" ? (
+            <li>{skill.tags}</li>
+          ) : (
+            skill.tags.map((tag, index) => (
+              <li key={index}>{tag}</li>
+            ))
+          )}
+        </ul>
+      </div>
+    ))}
+    </div>
+  </section>
+);
+};
diff --git a/my-portfolio/src/components/sections/TechSection/Tech.css b/my-portfolio/src/components/sections/TechSection/Tech.css
@@ -0,0 +1,32 @@
+.tech-section {
+  text-align: center;
+  width: 100%;
+  background-color: var(--primary-color);
+}
+
+.tech-content-section {
+  color: var(--secondary-color);
+  padding: 64px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+.tech-content-section p {
+  max-width: 343px;
+}
+
+@media (min-width: 481px) {
+  .tech-content-section {
+    padding: 128px 24px;
+}
+  .tech-content-section p {
+    max-width: 400px;
+  }
+}
+@media (min-width: 1024px) {
+  .tech-content-section p{ 
+    max-width: 782px;
+  }
+}
diff --git a/my-portfolio/src/components/sections/TechSection/Tech.jsx b/my-portfolio/src/components/sections/TechSection/Tech.jsx
@@ -0,0 +1,18 @@
+import "./Tech.css";
+import { H2, BodyText } from "../../ui/Typography/Typography";
+
+export const Tech = () => {
+  return (
+    <section className="tech-section">
+      <div className="tech-content-section">
+        <H2>Tech</H2>
+        <BodyText>
+          HTML, CSS, Flexbox, JavaScript, ES6,
+          JSX, React, React Hooks, Node.js,
+          Mongo DB, Web Accessibility, APIs,
+          mob-programming, pair-programming, GitHub.
+        </BodyText>
+      </div>
+    </section>
+  );
+};
diff --git a/my-portfolio/src/components/ui/Buttons/Button.css b/my-portfolio/src/components/ui/Buttons/Button.css
@@ -0,0 +1,99 @@
+.project-button,
+.article-button {
+  display: flex;
+  width: 250px;
+  height: 48px;
+  padding: 0px 16px;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  font-size: 18px;
+  border-radius: 12px;
+  gap: 16px;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.project-button {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+
+.project-button:hover {
+  background-color: var(--accent-color);
+}
+
+.article-button {
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
+}
+
+.article-button:hover {
+  background-color: var(--accent-color);
+  color: var(--secondary-color);
+}
+
+.project-view-more-button,
+.article-view-more-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 280px;
+  height: 48px;
+  padding: 0px 16px;
+  gap: 16px;
+  border-radius: 12px;
+  font-size: 18px;
+  margin-top: 64px;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.project-view-more-button {
+  background: var(--secondary-color);
+  color: var(--primary-color);
+  border: 2px solid #000;
+}
+
+.project-view-more-button:hover {
+  background-color: var(--accent-color);
+  color: var(--secondary-color);
+}
+
+.article-view-more-button {
+  background: var(--primary-color);
+  color: var(--secondary-color);
+  border: 2px solid #FFF;
+}
+
+.article-view-more-button:hover {
+  background-color: var(--accent-color);
+}
+
+.article-button-icon,
+.project-button-icon {
+  width: 32px;
+  height: 32px;
+}
+
+@media (min-width: 375px) {
+
+  .project-button,
+  .article-button {
+    width: 303px;
+  }
+
+  .project-view-more-button,
+  .article-view-more-button {
+    width: 303px;
+  }
+}
+
+@media (min-width: 1024px) {
+
+  .project-view-more-button,
+  .article-view-more-button {
+    margin-top: 128px;
+  }
+}
diff --git a/my-portfolio/src/components/ui/Buttons/Button.jsx b/my-portfolio/src/components/ui/Buttons/Button.jsx
@@ -0,0 +1,20 @@
+/* eslint-disable react/prop-types */
+import "./Button.css";
+
+export const Button = ({ text, icon, href, target, sectionType = "default", isViewMore }) => {
+  const buttonClass = isViewMore
+    ? `${sectionType}-view-more-button`
+    : `${sectionType}-button`;
+
+  return (
+    <a
+      className={`button ${buttonClass}`}
+      href={href}
+      target={target}
+      rel={target === "_blank" ? "noopener noreferrer" : undefined}
+    >
+      {icon && <img src={icon} alt="icon" className={`${sectionType}-button-icon`} />}
+      {text}
+    </a>
+  );
+};
diff --git a/my-portfolio/src/components/ui/Buttons/IconButtons.css b/my-portfolio/src/components/ui/Buttons/IconButtons.css
@@ -0,0 +1,9 @@
+.icon-button {
+  all: unset;  
+  cursor: pointer;
+}
+
+.icon-only {
+  width: 32px;
+  height: 32px;
+}
diff --git a/my-portfolio/src/components/ui/Buttons/IconButtons.jsx b/my-portfolio/src/components/ui/Buttons/IconButtons.jsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/prop-types */
+import "./IconButtons.css";
+import iconLinkedin from "../../../assets/iconLinkedin.svg";
+import iconTwitter from "../../../assets/iconTwitter.svg";
+import iconStackOverflow from "../../../assets/iconStackOverflow.svg"
+import iconInstagram from "../../../assets/iconInstagram.svg";
+import iconGithub from "../../../assets/iconGithub.svg";
+
+const iconMap = {
+  linkedin: iconLinkedin,
+  github: iconGithub,
+  stackOverflow: iconStackOverflow,
+  twitter: iconTwitter,
+  instagram: iconInstagram,
+};
+
+export const IconButton = ({ iconName, onClick }) => {
+  const icon = iconMap[iconName]; 
+
+  return (
+    <button className="icon-button" onClick={onClick}>
+      <img src={icon} alt={`${iconName} icon`} className="icon-only" />
+    </button>
+  );
+};
diff --git a/my-portfolio/src/components/ui/GridLayout/Grid.css b/my-portfolio/src/components/ui/GridLayout/Grid.css
@@ -0,0 +1,53 @@
+.grid-section {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.white-background {
+  background: var(--secondary-color);
+  padding: 64px 16px;
+}
+
+.black-background {
+  background: var(--primary-color);
+  padding: 128px 24px;
+}
+
+/* Breakpoint for tablet */
+@media (min-width: 480px) and (max-width: 768px) {
+  .grid-section {
+    grid-template-columns: repeat(8, 1fr);
+  }
+  .white-background {
+    padding: 128px 24px;
+  }
+}
+/* breakpoint for small desktop */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .grid-section {
+    grid-template-columns: repeat(12, 1fr);
+  }
+}
+
+@media (min-width: 1025px) and (max-width: 1200px) {
+  .grid-section { 
+    grid-template-columns: repeat(12, 1fr);
+  }
+  .white-background {
+    padding: 128px 64px;
+  }
+  .black-background {
+    padding: 128px 128px;
+  }
+}
+@media (min-width: 1200px) {
+  .grid-section { 
+    grid-template-columns: repeat(12, 1fr);
+  }
+  .white-background {
+    padding: 128px 128px;
+  }
+  .black-background {
+    padding: 128px 128px;
+  }
+}
diff --git a/my-portfolio/src/components/ui/GridLayout/Grid.jsx b/my-portfolio/src/components/ui/GridLayout/Grid.jsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import "./Grid.css";
+
+export const Grid = ({ 
+  background, 
+  children 
+}) => {
+  const backgroundClass = background === "black" ? "black-background" : "white-background";
+
+  return (
+    <div className={`${backgroundClass} grid-section`}>
+      {children}
+    </div>
+  );
+};
diff --git a/my-portfolio/src/components/ui/Images/Images.jsx b/my-portfolio/src/components/ui/Images/Images.jsx
@@ -0,0 +1,9 @@
+import img1 from "../../../assets/img1.jpeg";
+import img2 from "../../../assets/img2.jpeg";
+import img3 from "../../../assets/img3.jpeg";
+
+export const images = {
+  img1,
+  img2,
+  img3
+};
diff --git a/my-portfolio/src/components/ui/Tags/Tags.css b/my-portfolio/src/components/ui/Tags/Tags.css
@@ -0,0 +1,36 @@
+.project-tag, 
+.article-tag,
+.skill-tag {
+  border-radius: 4px;
+  margin: 0;
+  font-size: 16px;
+  text-align: center;
+  max-width: 100%;
+}
+
+.project-tag {
+  padding: 1px 4px;
+  border: 1px solid #000;
+  min-width: 82px;
+}
+
+.article-tag {
+  border: 1px solid #fff;
+  padding: 2px 6px;
+  width: 142px;
+  height: 28px;
+}
+
+.skill-tag {
+  width: 180px;
+  border: 1px solid #000;
+  height: 24px;
+  padding: 1px 4px;
+}
+
+/* breakpoint tablet and up */
+@media (min-width: 481px) {
+  .project-tag {
+    width: 142px;
+  }
+}
diff --git a/my-portfolio/src/components/ui/Tags/Tags.jsx b/my-portfolio/src/components/ui/Tags/Tags.jsx
@@ -0,0 +1,8 @@
+/* eslint-disable react/prop-types */
+import "./Tags.css";
+
+export const Tag = ({ sectionType, text }) => {
+  return (
+    <p className={`${sectionType}-tag`}>{text}</p>
+  );
+};
diff --git a/my-portfolio/src/components/ui/Typography/Typography.css b/my-portfolio/src/components/ui/Typography/Typography.css
@@ -0,0 +1,104 @@
+/* default styling (moible 375px - figmadesign-mobile) */
+.heading1 {
+  font-size: 60px;
+  font-weight: 700;
+  line-height: 133.333%;
+  margin: 0;
+}
+
+.heading2 {
+  font-size: 60px;
+  font-weight: 700;
+  margin: 0;
+  text-align: center;
+}
+
+.heading3 {
+  font-size: 24px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.bodytext {
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+}
+
+.bodytext-medium {
+  margin: 0;
+  font-size: 18px;
+}
+
+.bodytext-large {
+  font-size: 24px;
+  font-weight: 500;
+  margin: 0;
+}
+
+/* breakpoint for small mobile */
+@media (max-width: 375px){
+  .heading1 {
+    font-size: 50px;
+  }
+  .heading2 {
+    font-size: 55px;
+    text-align: center;
+  }
+  .heading3 {
+    font-size: 20px;
+  }
+  .bodytext-large {
+    font-size: 20px;
+  }
+}
+
+/* Breakpoint for tablet */
+@media (min-width: 480px) and (max-width: 768px) {
+  .heading1 {
+    font-size: 80px;
+    line-height: 125%;
+  }
+}
+
+/* breakpoint for small desktop */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .heading1 {
+    font-size: 100px;
+    line-height: normal;
+  }
+  .heading2 {
+    font-size: 80px;
+    text-align: center;
+  }
+  .heading3 {
+    font-size: 30px;
+  }
+  .bodytext {
+    font-size: 18px;
+  }
+  .bodytext-large {
+    font-size: 30px;
+    font-weight: 600;
+  }
+}
+@media (min-width: 1024px) {
+  .heading1 {
+    font-size: 100px;
+    line-height: normal;
+  }
+  .heading2 {
+    font-size: 80px;
+    text-align: center;
+  }
+  .heading3 {
+    font-size: 30px;
+  }
+  .bodytext {
+    font-size: 18px;
+  }
+  .bodytext-large {
+    font-size: 30px;
+    font-weight: 600;
+  }
+}
diff --git a/my-portfolio/src/components/ui/Typography/Typography.jsx b/my-portfolio/src/components/ui/Typography/Typography.jsx
@@ -0,0 +1,14 @@
+/* eslint-disable react/prop-types */
+import "./Typography.css";
+
+export const H1 = ({ children }) => <h1 className="heading1">{children}</h1>;
+
+export const H2 = ({ children }) => <h2 className="heading2">{children}</h2>;
+
+export const H3 = ({ children }) => <h3 className="heading3">{children}</h3>;
+
+export const BodyText = ({ children }) => <p className="bodytext">{children}</p>;
+
+export const BodyTextMedium = ({children}) => <p className="bodytext-medium">{children}</p>
+
+export const BodyTextLarge = ({ children }) => <p className="bodytext-large">{children}</p> 
diff --git a/my-portfolio/src/data/articles.json b/my-portfolio/src/data/articles.json
@@ -0,0 +1,25 @@
+{
+  "articles": [
+    {
+      "name": "How to stop being scared: Learning to love code",
+      "image": "img2",
+      "tags": "July 14th",
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "link": "https://www.metaltoad.com/blog/how-i-learned-stop-worrying-and-love-code"
+    },
+    {
+      "name": "How to stop being scared and learn to love code",
+      "image": "img1",
+      "tags": "July 14th",
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "link": "https://www.metaltoad.com/blog/how-i-learned-stop-worrying-and-love-code"
+    },
+    {
+      "name": "How to learn to love code",
+      "image": "img3",
+      "tags": "July 14th",
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "link": "https://www.metaltoad.com/blog/how-i-learned-stop-worrying-and-love-code"
+    }
+  ]
+}
diff --git a/my-portfolio/src/data/projects.json b/my-portfolio/src/data/projects.json
@@ -0,0 +1,56 @@
+{
+  "projects": [
+    {
+      "name": "Chatbot",
+      "image": "img2",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript"
+      ],
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "netlify": "https://moviechatbot.netlify.app/",
+      "github": "https://github.com/Fannyhenriques/project-chatbot"
+    },
+    {
+      "name": "Weather app",
+      "image": "img1",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "APIs"
+      ],
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "netlify": "https://master--weathertheweatherapp.netlify.app",
+      "github": "https://github.com/Fannyhenriques/project-weather-app"
+    },
+    {
+      "name": "Project Survey",
+      "image": "img3",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "React"
+      ],
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "netlify": "https://project-joy-boost-survey.netlify.app/",
+      "github": "https://github.com/joheri1/project-survey-vite"
+    },
+    {
+      "name": "Happy-thoughts",
+      "image": "img2",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "APIs",
+        "React"
+      ],
+      "description": "The chat bot app is a conversational AI-powered tool designed to enhance user experience by providing instant, personalized, and automated responses to user inquiries.",
+      "netlify": "https://fh-happythoughtsapp.netlify.app/",
+      "github": "https://github.com/Fannyhenriques/project-happy-thoughts-vite"
+    }
+  ]
+}
diff --git a/my-portfolio/src/data/skills.json b/my-portfolio/src/data/skills.json
@@ -0,0 +1,43 @@
+{
+  "skills": [
+    {
+      "name": "Code",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "Javascript ES6",
+        "React",
+        "Styled Components",
+        "GitHub"
+      ]
+    },
+    {
+      "name": "Toolbox",
+      "tags": [
+        "Atom",
+        "Postman",
+        "Adobe Photoshop",
+        "Adobe Illustrator",
+        "Figma",
+        "Keynote",
+        "Slack"
+      ]
+    },
+    {
+      "name": "Upcoming",
+      "tags": [
+        "Node.js"
+      ]
+    },
+    {
+      "name": "More",
+      "tags": [
+        "Branding",
+        "Strategy",
+        "Process Design",
+        "Concept Development",
+        "Agile methodology"
+      ]
+    }
+  ]
+}
diff --git a/my-portfolio/src/index.css b/my-portfolio/src/index.css
diff --git a/my-portfolio/src/main.jsx b/my-portfolio/src/main.jsx
@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import React from 'react';
+import './index.css'
+import { App } from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/my-portfolio/vite.config.js b/my-portfolio/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects.json b/projects.json