Portfolio

.anima/.gitignore

@@ -0,0 +1 @@
+cache

.anima/workspace.json

@@ -0,0 +1 @@
+{"workspaceId":"9f90e6c8-4ac8-4f6d-b667-45aafc93c167"}

README.md

@@ -1,50 +1,96 @@
-<h1 align="center">
-  <a href="">
-    <img src="/react-p.svg" alt="Project Banner Image">
-  </a>
-</h1>
+# React Portfolio Project
 
-# Technigo - React Portfolio Project
+## Overview
 
-Congratulations on completing Sprint 2 of the boot camp! For the final phase, we will now take your skills in React to the next level by building your very own portfolio website using the concepts learned in class
+Welcome to my React Portfolio! This project is a showcase of my skills, projects, and experiences as a frontend developer. It follows a structured design to ensure accessibility and responsiveness while providing an engaging experience for potential employers and collaborators. You can view the live version of the site [here](https://johannabillingskognyberg.netlify.app/).
 
-## Instructions
-[Check this projects instructions here](https://github.com/Technigo/project-portfolio/blob/main/instructions.md)
+## Table of Contents
 
-## Set up your own version of your portfolio
+- [Getting Started](#getting-started)
+- [Project Structure](#project-structure)
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Content Sections](#content-sections)
+- [Accessibility](#accessibility)
+- [Contact](#contact)
 
-We will use [Vite](https://vitejs.dev/guide/) to setup our project 😉
+## Getting Started
 
-```bash
-  npm create vite@latest my-react-portfolio --template
-```
+To get a local copy up and running, follow these steps:
 
-#### Follow this GIF to setup your project
+1. **Install Dependencies**:
 
-![Alt Text](https://res.cloudinary.com/dfkxydgqg/image/upload/v1691073155/WEB/Sprint-2/week-8/vite-react_vjp0ep.gif)
+   ```bash
+   npm install
+   ```
 
-## Installation
+2. **Start the Development Server**:
+   ```bash
+   npm run dev
+   ```
 
-Use the `cd` command to move into the folder
+## Project Structure
 
-```bash
-  cd my-react-portfolio
-```
+The project is organized into several key components:
 
-Install the dependencies
+- `src/components`: Contains reusable components such as Header, Footer, ProjectCard, etc.
+- `src/assets`: Stores images and other static assets.
 
-```bash
-  npm i
-```
+## Features
 
-Open the project in a separate VS Code editor
+- **Responsive Design**: The portfolio is designed to be responsive and looks great on devices of all sizes, from 320px to 1600px width.
+- **Accessibility**: Ensures a Lighthouse score of at least 95 with proper alt attributes for images, appropriate contrast ratios, and accessible navigation.
+- **Dynamic Content**: Projects and skills are dynamically rendered from GitHub API and matched with Json data.
 
-```bash
-  code .
-```
+## Technologies Used
 
-Open up a terminal inside VS code and lets run the project in a local environment
+- **React**: JavaScript library for building user interfaces.
+- **Vite**: Build tool that provides a faster and leaner development experience for modern web projects.
+- **CSS**: Styling the components and layout.
+- **Lighthouse**: Tool for improving the quality of web pages.
+- **Netlify**: For deploying the project live.
+- **API**: GitHub API is used for fetching and displaying projects.
 
-```bash
-  npm run dev
-```
+## Content Sections
+
+### Top Section
+
+This section includes a brief introduction about myself, a professional photo, and a summary of my previous experiences and future goals.
+
+### Tech Section
+
+A summary of the technologies, tools, and libraries I have worked with, including those I will learn during the course.
+
+### Featured Projects
+
+Showcases the projects I am most proud of, with details on the technologies used, GitHub repository links, and live demo links. Each project includes a thumbnail image and a brief description.
+
+### My Words
+
+A section for my thoughts on programming, career changes, remote work, and bootcamp experiences. This can include reflections posted on social media or LinkedIn.
+
+### Skills
+
+Lists all my technical skills, including those learned outside the course, as well as other relevant skills such as software knowledge and methodologies.
+
+### Time to Talk
+
+Provides clear information on how to contact me, including links to my social media profiles.
+
+## Accessibility
+
+Ensuring accessibility was a key goal for this project. Measures taken include:
+
+- High contrast ratios for readability.
+- Alt attributes for all images.
+- Keyboard navigable components.
+- Adhering to ARIA guidelines.
+
+## Contact
+
+Feel free to reach out to me through the following channels:
+
+- **Email**: [[email protected]](mailto:[email protected])
+- **LinkedIn**: [Johanna Billingskog Nyberg](www.linkedin.com/in/johanna-billingskog-nyberg-b28b4738)
+- **GitHub**: [JohannaBN](https://github.com/JohannaBN)
+- **View it live**: [Portfolio] (https://johannabillingskognyberg.netlify.app/)

index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👩‍💻
+      </text></svg>"
+    />
+    <title>Johanna Billingskog Nyberg - Portfolio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>