added components

Technigo · Heleneabrahamsson · Nov 3, 2024 · Nov 4, 2024 · Nov 23, 2024 · Dec 6, 2024
commit 1afb9a47b3671038049182dfaa8982e17748d1cf
diff --git a/project-portfolio/.gitignore b/project-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/project-portfolio/README.md b/project-portfolio/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/project-portfolio/eslint.config.js b/project-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/project-portfolio/index.html b/project-portfolio/index.html
@@ -0,0 +1,13 @@
+<!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" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/project-portfolio/package-lock.json b/project-portfolio/package-lock.json
diff --git a/project-portfolio/package.json b/project-portfolio/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "project-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/project-portfolio/public/vite.svg b/project-portfolio/public/vite.svg
diff --git a/project-portfolio/src/App.css b/project-portfolio/src/App.css
@@ -0,0 +1,4 @@
+* {
+  box-sizing: border-box;
+
+}
diff --git a/project-portfolio/src/App.jsx b/project-portfolio/src/App.jsx
@@ -0,0 +1,27 @@
+import "./App.css";
+import { Header } from "./components/Header"
+import { ImagesComponent } from "./components/Image";
+import { Bio } from "./components/Bio";
+import { FeaturedProjects } from "./components/FeaturedProjects";
+import { Tech } from "./components/Tech";
+import { Skills } from "./components/Skills";
+import { MyWords } from "./components/MyWords";
+import { LetsTalk } from "./components/LetsTalk";
+
+
+const App = () => {
+  return (
+    <>
+      <Header />
+      <ImagesComponent />
+      <Bio />
+      <FeaturedProjects />
+      <Tech />
+      <Skills />
+      <MyWords />
+      <LetsTalk />
+    </>
+  );
+};
+
+export default App;
diff --git a/project-portfolio/src/assets/Icons/Btn - github.svg b/project-portfolio/src/assets/Icons/Btn - github.svg
diff --git a/project-portfolio/src/assets/Icons/Btn - linkedin.svg b/project-portfolio/src/assets/Icons/Btn - linkedin.svg
diff --git a/project-portfolio/src/assets/Icons/Btn - stackoverflow.svg b/project-portfolio/src/assets/Icons/Btn - stackoverflow.svg
diff --git a/project-portfolio/src/assets/Icons/arrow_circle_down.svg b/project-portfolio/src/assets/Icons/arrow_circle_down.svg
diff --git a/project-portfolio/src/assets/Icons/github.svg b/project-portfolio/src/assets/Icons/github.svg
diff --git a/project-portfolio/src/assets/Icons/netlify.svg b/project-portfolio/src/assets/Icons/netlify.svg
diff --git a/project-portfolio/src/assets/img-left.png b/project-portfolio/src/assets/img-left.png
diff --git a/project-portfolio/src/assets/img-middle.png b/project-portfolio/src/assets/img-middle.png
diff --git a/project-portfolio/src/assets/img-right.png b/project-portfolio/src/assets/img-right.png
diff --git a/project-portfolio/src/assets/project-images/img-one.png b/project-portfolio/src/assets/project-images/img-one.png
diff --git a/project-portfolio/src/assets/project-images/img-three.png b/project-portfolio/src/assets/project-images/img-three.png
diff --git a/project-portfolio/src/assets/project-images/img-two.png b/project-portfolio/src/assets/project-images/img-two.png
diff --git a/project-portfolio/src/assets/react.svg b/project-portfolio/src/assets/react.svg
diff --git a/project-portfolio/src/components/Bio.css b/project-portfolio/src/components/Bio.css
@@ -0,0 +1,30 @@
+.bio-section {
+    display: flex;
+    padding: 64px 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    background-color: #000000;
+    margin-top: -64px;
+}
+
+.bio-heading {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 60px;
+    font-weight: 700;
+    margin: 0;
+
+}
+
+.bio-text {
+    color: #FFF;
+    font-family: Poppins;
+    font-size: 16px;
+    font-weight: 400;
+    align-self: stretch;
+    padding: 16px;
+
+}
diff --git a/project-portfolio/src/components/Bio.jsx b/project-portfolio/src/components/Bio.jsx
@@ -0,0 +1,10 @@
+import "./Bio.css";
+
+export const Bio = () => {
+    return (
+        <div className="bio-section">
+            <h2 className="bio-heading">Bio</h2>
+            <p className="bio-text">Sara 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.</p>
+        </div>
+    )
+}
diff --git a/project-portfolio/src/components/Buttons.css b/project-portfolio/src/components/Buttons.css
@@ -0,0 +1,28 @@
+.button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 32px;
+    padding-left: 16px;
+    margin-bottom: 64px;
+}
+
+.button {
+    display: flex;
+    width: 303px;
+    height: 48px;
+    padding: 0 16px;
+    align-items: center;
+    border-radius: 12px;
+    background: #000;
+    color: #FFFFFF;
+    cursor: pointer;
+    text-align: left;
+}
+
+/* Styles for the icon */
+.icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+}
diff --git a/project-portfolio/src/components/Buttons.jsx b/project-portfolio/src/components/Buttons.jsx
@@ -0,0 +1,29 @@
+// src/components/Buttons.jsx
+import "./Buttons.css";
+import netlifyIcon from "../assets/icons/netlify.svg"; // Import the Netlify icon
+import githubIcon from "../assets/icons/github.svg"; // Import the GitHub icon
+
+export const Buttons = ({ buttons }) => {
+    const handleButtonClick = (url) => {
+        window.open(url, "_blank", "noopener,noreferrer");
+    };
+
+    return (
+        <div className="button-container">
+            {buttons.map((button, index) => (
+                <button
+                    key={index}
+                    onClick={() => handleButtonClick(button.url)}
+                    className="button"
+                >
+                    <img
+                        src={button.icon} // Use the icon from the button object
+                        alt={`${button.text} Icon`}
+                        className="icon"
+                    />
+                    {button.text}
+                </button>
+            ))}
+        </div>
+    );
+};
diff --git a/project-portfolio/src/components/FeaturedProjects.css b/project-portfolio/src/components/FeaturedProjects.css
@@ -0,0 +1,9 @@
+h2 {
+    color: #000;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 60px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 80px;
+}
diff --git a/project-portfolio/src/components/FeaturedProjects.jsx b/project-portfolio/src/components/FeaturedProjects.jsx
@@ -0,0 +1,27 @@
+import "./FeaturedProjects.css";
+import { ProjectCard } from "./ProjectCard";
+import projectData from "../projects.json";
+import { SeeMoreButton } from "./SeeMoreButton";
+
+
+export const FeaturedProjects = () => {
+    return (
+        <section className="featured-projects">
+            <div className="featured-projects-box">
+                <h2>Featured Projects</h2>
+                {projectData.projects.map((project, index) => (
+                    <ProjectCard
+                        key={index}
+                        title={project.name}
+                        image={project.image}
+                        description={project.description}
+                        tags={project.tags}
+                        netlifyUrl={project.netlify}
+                        githubUrl={project.github}
+                    />
+                ))}
+                <SeeMoreButton text="See More Projects" url="#" variant="projects" />
+            </div>
+        </section>
+    );
+};
diff --git a/project-portfolio/src/components/Header.css b/project-portfolio/src/components/Header.css
@@ -0,0 +1,36 @@
+@import url('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');
+
+
+
+.Header {
+    display: flex;
+    padding: 64px 16px;
+    flex-direction: column;
+    text-align: center;
+    gap: 16px;
+    align-self: stretch;
+    background: #000000;
+    color: #FFFFFF;
+    text-align: center;
+    margin-bottom: 0;
+
+}
+
+h1 {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 60px;
+    font-weight: 700;
+    line-height: 80px;
+    margin: 0;
+}
+
+h3 {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 24px;
+    font-weight: 500;
+
+}
diff --git a/project-portfolio/src/components/Header.jsx b/project-portfolio/src/components/Header.jsx
@@ -0,0 +1,11 @@
+import "./Header.css";
+
+export const Header = () => {
+    return (
+        <section className="Header">
+            <h3>Hi there, I'm</h3>
+            <h1>Heléne Abrahamsson</h1>
+            <h3>Creative Frontend Developer with a Background in Architecture & Teaching</h3>
+        </section>
+    )
+}
diff --git a/project-portfolio/src/components/Image.css b/project-portfolio/src/components/Image.css
@@ -0,0 +1,44 @@
+.image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 400px;
+    width: 100%;
+    background-color: #000000;
+    position: relative;
+    margin-top: -64px;
+    ;
+}
+
+.image {
+    border-radius: 12px;
+    position: absolute;
+}
+
+.image-left {
+    left: 50px;
+    width: 157.303px;
+    height: 167.57px;
+    transform: rotate(-4.695deg);
+    flex-shrink: 0;
+    z-index: 1;
+
+}
+
+.image-middle {
+    z-index: 3;
+    width: 158px;
+    height: 168px;
+    flex-shrink: 0;
+    top: -10px;
+    position: relative;
+}
+
+.image-right {
+    right: 50px;
+    width: 157.303px;
+    height: 167.57px;
+    transform: rotate(4.695deg);
+    flex-shrink: 0;
+    z-index: 2;
+}
diff --git a/project-portfolio/src/components/Image.jsx b/project-portfolio/src/components/Image.jsx
@@ -0,0 +1,15 @@
+import "./Image.css";
+import imgLeft from "../assets/img-left.png";
+import imgMiddle from "../assets/img-middle.png";
+import imgRight from "../assets/img-right.png";
+
+export const ImagesComponent = () => {
+    return (
+        <div className="image-container">
+            <img src={imgLeft} alt="Left Image" className="image image-left" />
+            <img src={imgMiddle} alt="Middle Image" className=" image image-middle" />
+            <img src={imgRight} alt="Right Image" className="image image-right" />
+
+        </div>
+    );
+};
diff --git a/project-portfolio/src/components/LetsTalk.css b/project-portfolio/src/components/LetsTalk.css
@@ -0,0 +1,24 @@
+.lets-talk {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    background-color: #FFFFFF;
+}
+
+.contact-h2 {
+    color: #000;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 60px;
+    font-weight: 700;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-self: stretch;
+}
diff --git a/project-portfolio/src/components/LetsTalk.jsx b/project-portfolio/src/components/LetsTalk.jsx
@@ -0,0 +1,17 @@
+import "./LetsTalk.css";
+
+
+export const LetsTalk = () => {
+    return (
+        <section className="lets-talk">
+            <h2 className="contact-h2">Let's Talk</h2>
+            <div className="info">
+                <p>Heléne Abrahamsson</p>
+                <p>+46(0)763 12 33 45</p>
+                <p>sara.svensson@mail.com</p>
+            </div>
+
+        </section>
+    )
+
+}
diff --git a/project-portfolio/src/components/MyWords.css b/project-portfolio/src/components/MyWords.css
@@ -0,0 +1,54 @@
+.MyWords {
+    background-color: #000000;
+    padding-top: 1px;
+}
+
+.MyWords-heading {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 60px;
+    font-weight: 700;
+    margin-top: 128px;
+    margin-bottom: 128px;
+}
+
+.article-heading {
+    color: #FFF;
+    font-family: Poppins;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+time {
+    color: #FFF;
+    font-family: Poppins;
+    font-size: 16px;
+    font-weight: 500;
+    border-radius: 4px;
+    border: 1px solid #FFF;
+    padding: 2px 32px;
+    margin-left: 24px;
+}
+
+
+.article-intro {
+    color: #FFF;
+    font-family: Poppins;
+    font-size: 18px;
+    font-weight: 400;
+    padding: 24px;
+
+}
+
+.article-image {
+    height: 200px;
+    width: 327px;
+    align-self: stretch;
+    display: block;
+    margin: 0 auto;
+    margin-bottom: 64px;
+
+}
diff --git a/project-portfolio/src/components/MyWords.jsx b/project-portfolio/src/components/MyWords.jsx
@@ -0,0 +1,47 @@
+// src/components/MyWords.jsx
+import "./MyWords.css";
+import { Buttons } from "./Buttons";
+import imgOne from "../assets/project-images/img-one.png";
+import imgTwo from "../assets/project-images/img-two.png";
+import imgThree from "../assets/project-images/img-three.png";
+import netlifyIcon from "../assets/icons/netlify.svg"; // Import the Netlify icon
+import { SeeMoreButton } from "./SeeMoreButton";
+
+
+export const MyWords = () => {
+	// Button configuration for "Read Article" with the Netlify icon
+	const readArticleButton = [
+		{
+			url: "#",
+			icon: netlifyIcon, // Use the Netlify icon
+			text: "Read Article",
+		},
+	];
+
+	return (
+		<section className="MyWords">
+			<h2 className="MyWords-heading">My Words</h2>
+
+			{/* Article one */}
+			<img className="article-image" src={imgOne} alt="Description of the image" />
+			<time>July 14th</time>
+			<h3 className="article-heading">How to stop being scared: Learning to love code</h3>
+			<p className="article-intro">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.</p>
+			<Buttons className="read-article-button" buttons={readArticleButton} className="read-article-button" />
+
+			{/* Article two */}
+			<img className="article-image" src={imgTwo} alt="Description of the image" />
+			<time>July 14th</time>
+			<h3 className="article-heading">How to stop being scared: Learning to love code</h3>
+			<p className="article-intro">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.</p>
+			<Buttons buttons={readArticleButton} className="read-article-button" />
+
+			{/* Article three */}
+			<img className="article-image" src={imgThree} alt="Description of the image" />
+			<time>July 14th</time>
+			<h3 className="article-heading">How to stop being scared: Learning to love code</h3>
+			<p className="article-intro">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.</p>
+			<Buttons buttons={readArticleButton} className="read-article-button" />
+			<SeeMoreButton text="See More Articles" url="#" variant="articles" />		</section>
+	);
+};
diff --git a/project-portfolio/src/components/ProjectCard.css b/project-portfolio/src/components/ProjectCard.css
@@ -0,0 +1,36 @@
+.project-title {
+    color: #000;
+    font-family: Poppins;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+p {
+    color: #000;
+    font-family: Poppins;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 16px;
+}
+
+.tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 0 16px;
+}
+
+.tag {
+    padding: 2px 6px;
+    justify-content: center;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border-radius: 4px;
+    border: 1px solid #000;
+    background: #FFF;
+    text-align: center;
+}
diff --git a/project-portfolio/src/components/ProjectCard.jsx b/project-portfolio/src/components/ProjectCard.jsx
@@ -0,0 +1,48 @@
+// src/components/ProjectCard.jsx
+import React from "react";
+import "./ProjectCard.css";
+import { Buttons } from "./Buttons";
+import imgLeft from "../assets/project-images/img-one.png";
+import imgMiddle from "../assets/project-images/img-two.png";
+import imgRight from "../assets/project-images/img-three.png";
+import netlifyIcon from "../assets/icons/netlify.svg";
+import githubIcon from "../assets/icons/github.svg";
+
+export const ProjectCard = ({ title, image, description, tags, netlifyUrl, githubUrl }) => {
+	// Create an array of button objects with their respective icons
+	const projectButtons = [
+		{
+			url: netlifyUrl,
+			icon: netlifyIcon,
+			text: "Live Demo",
+		},
+		{
+			url: githubUrl,
+			icon: githubIcon,
+			text: "View Code",
+		},
+	];
+
+	// Mapping images based on the `image` prop
+	let displayedImage;
+	if (image === "img-one.png") displayedImage = imgLeft;
+	if (image === "img-two.png") displayedImage = imgMiddle;
+	if (image === "img-three.png") displayedImage = imgRight;
+
+	return (
+		<div className="project-card">
+			{/* Wrap the image in a container for centering */}
+			<div className="project-image-wrapper">
+				<img src={displayedImage} alt={`${title} screenshot`} className="project-image" />
+			</div>
+			<h3 className="project-title">{title}</h3>
+			<p>{description}</p>
+			<div className="tags-container">
+				{tags.map((tag, index) => (
+					<span key={index} className="tag">{tag}</span>
+				))}
+			</div>
+			<Buttons buttons={projectButtons} />
+		</div>
+	);
+};
diff --git a/project-portfolio/src/components/ProjectImages.css b/project-portfolio/src/components/ProjectImages.css
@@ -0,0 +1,16 @@
+.project-image-wrapper {
+    text-align: center;
+    /* Center the image horizontally */
+    padding: 0 16px;
+    /* Add 16px padding on both sides */
+    margin-top: 64px;
+    margin-bottom: 32px;
+}
+
+.project-image {
+    height: 479px;
+    width: 343px;
+    border-radius: 12px;
+    display: inline-block;
+    /* Use inline-block to work with text-align */
+}
diff --git a/project-portfolio/src/components/ProjectImages.jsx b/project-portfolio/src/components/ProjectImages.jsx
@@ -0,0 +1,28 @@
+import "./ProjectImages.css";
+
+import imgOne from "../assets/project-images/img-one.png";
+import imgTwo from "../assets/project-images/img-two.png";
+import imgThree from "../assets/project-images/img-three.png";
+
+const imageMap = {
+    "img-one.png": imgOne,
+    "img-two.png": imgTwo,
+    "img-three.png": imgThree,
+};
+
+export const ProjectImages = ({ image }) => {
+    const imageSrc = imageMap[image];
+
+    if (!imageSrc) {
+        console.error(`Image not found: ${image}`);
+        return null;
+    }
+
+    return (
+        <div className="outer-image-wrapper">
+            <div className="project-image-wrapper">
+                <img src={imageSrc} className="project-image" alt="Project image" />
+            </div>
+        </div>
+    );
+};
diff --git a/project-portfolio/src/components/SeeMoreButton.css b/project-portfolio/src/components/SeeMoreButton.css
@@ -0,0 +1,33 @@
+.see-more-btn-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 64px;
+    margin-top: 64px;
+}
+
+.see-more-button.projects {
+    display: flex;
+    width: 303px;
+    height: 48px;
+    padding: 0px 16px;
+    align-items: center;
+    gap: 16px;
+    border-radius: 12px;
+    border: 2px solid #000;
+    background: #FFF;
+    color: #000000;
+    text-align: center;
+}
+
+
+
+/*"See More Articles" button */
+.see-more-button.articles {
+    background-color: #28a745;
+    /* Example color */
+    color: #ffffff;
+}
+
+.articles-icon {
+    filter: brightness(10);
+}
diff --git a/project-portfolio/src/components/SeeMoreButton.jsx b/project-portfolio/src/components/SeeMoreButton.jsx
@@ -0,0 +1,19 @@
+
+import "./SeeMoreButton.css";
+import icon from "../assets/icons/arrow_circle_down.svg";
+
+export const SeeMoreButton = ({ text, url, variant }) => {
+  return (
+    <div className="see-more-btn-container">
+      <a
+        href={url || "#"}
+        className={`see-more-button ${variant}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img src={icon} alt="Icon" className={`button-icon ${variant}-icon`} /> {/* Add the icon */}
+        {text}
+      </a>
+    </div>
+  );
+};
diff --git a/project-portfolio/src/components/Skills.css b/project-portfolio/src/components/Skills.css
@@ -0,0 +1,54 @@
+.skills-header {
+    color: #000;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 80px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    margin-top: 64px;
+}
+
+.skills {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    gap: 16px;
+    align-self: stretch;
+
+}
+
+.skills-list {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    margin-bottom: 64px;
+
+}
+
+.skills-tag {
+    display: inline-flex;
+    padding: 2px 32px;
+    height: auto;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid #000;
+    color: #000;
+    font-family: Poppins;
+    font-size: 16px;
+    font-weight: 500;
+
+}
+
+
+ul {
+    list-style-type: none;
+    padding-left: 16px;
+    font-family: Poppins;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+
+
+}
diff --git a/project-portfolio/src/components/Skills.jsx b/project-portfolio/src/components/Skills.jsx
@@ -0,0 +1,45 @@
+import "./Skills.css";
+
+export const Skills = () => {
+	return (
+		<section>
+			<div className="skills">
+				<h2 className="skills-header">Skills</h2>
+				<div className="skills-list">
+					<p className="skills-tag">Code</p>
+					<ul>
+						<li>HTML5</li>
+						<li>CSS3</li>
+						<li>Javascript ES6</li>
+						<li>React</li>
+						<li>Styled Components</li>
+						<li>GitHub</li>
+					</ul>
+					<p className="skills-tag">Toolbox </p>
+					<ul>
+						<li>Atom</li>
+						<li>Postman</li>
+						<li>Adobe Photoshop</li>
+						<li>Adobe Illustrator</li>
+						<li>Figma</li>
+						<li>Keynote</li>
+						<li>Slack</li>
+					</ul>
+					<p className="skills-tag">Upcoming</p>
+					<ul>
+						<li>Node.js</li>
+					</ul>
+					<p className="skills-tag"> More</p>
+					<ul>
+						<li>Branding</li>
+						<li>Strategy</li>
+						<li>Process Design</li>
+						<li>Concept</li>
+						<li>Developement</li>
+						<li>Agile methodology</li>
+					</ul>
+				</div>
+			</div>
+		</section >
+	);
+};
diff --git a/project-portfolio/src/components/Tech.css b/project-portfolio/src/components/Tech.css
@@ -0,0 +1,29 @@
+.tech-heading {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 60px;
+    font-weight: 700;
+    margin-top: 64px;
+}
+
+.tech {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    align-self: stretch;
+    background-color: #000000;
+}
+
+.tech-skills {
+    color: #FFF;
+    text-align: center;
+    font-family: Poppins;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 16px;
+}
diff --git a/project-portfolio/src/components/Tech.jsx b/project-portfolio/src/components/Tech.jsx
@@ -0,0 +1,14 @@
+import "./Tech.css";
+
+export const Tech = () => {
+    return (
+        <section className="tech">
+            <h1 className="tech-heading">Tech</h1>
+            <h2 className="tech-skills">
+                HTML, CSS, Flexbox, JavaScript, ES6, JSX, React, React Hooks, Node.js,
+                Mongo DB, Web Accessibility, APIs, mob-programming, pair-programming,
+                GitHub.
+            </h2>
+        </section>
+    );
+};
diff --git a/project-portfolio/src/index.css b/project-portfolio/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/project-portfolio/src/main.jsx b/project-portfolio/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/project-portfolio/src/projects.json b/project-portfolio/src/projects.json
@@ -0,0 +1,53 @@
+{
+  "projects": [
+    {
+      "name": "Happy Thoughts App",
+      "image": "img-one.png",
+      "description": "A React project focused on state management, API interactions for fetching and posting data. ",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript"
+      ],
+      "netlify": "https://aesthetic-kleicha-b1ac7e.netlify.app/",
+      "github": "https://github.com/Heleneabrahamsson/project-happy-thoughts-vite"
+    },
+    {
+      "name": "Music Realeses",
+      "image": "img-two.png",
+      "description": "A React app template to display albums. Features include a structured component hierarchy, design fidelity, hover effects, and responsive layouts. ",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript",
+        "APIs"
+      ],
+      "netlify": "link",
+      "github": "link"
+    },
+    {
+      "name": "Weather app",
+      "image": "img-three.png",
+      "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.",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript"
+      ],
+      "netlify": "https://zippy-haupia-4b1a8a.netlify.app/",
+      "github": "https://github.com/Heleneabrahamsson/project-weather-app"
+    },
+    {
+      "name": "Project Accessability",
+      "image": "img-one.png",
+      "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.",
+      "tags": [
+        "HTML5",
+        "CSS3",
+        "JavaScript"
+      ],
+      "netlify": "https://incredible-faloodeh-378c15.netlify.app/",
+      "github": "https://github.com/Heleneabrahamsson/project-accessibility"
+    }
+  ]
+}
diff --git a/project-portfolio/vite.config.js b/project-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/projects.json b/projects.json