Technigo · FannyEste · Feb 9, 2025 · Feb 9, 2025 · Feb 9, 2025 · Feb 9, 2025
diff --git a/.gitignore b/.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/README.md b/README.md
@@ -1,50 +1 @@
-<h1 align="center">
-  <a href="">
-    <img src="/react-p.svg" alt="Project Banner Image">
-  </a>
-</h1>
-
-# Technigo - React Portfolio Project
-
-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
-
-## Instructions
-[Check this projects instructions here](https://github.com/Technigo/project-portfolio/blob/main/instructions.md)
-
-## Set up your own version of your portfolio
-
-We will use [Vite](https://vitejs.dev/guide/) to setup our project 😉
-
-```bash
-  npm create vite@latest my-react-portfolio --template
-```
-
-#### Follow this GIF to setup your project
-
-![Alt Text](https://res.cloudinary.com/dfkxydgqg/image/upload/v1691073155/WEB/Sprint-2/week-8/vite-react_vjp0ep.gif)
-
-## Installation
-
-Use the `cd` command to move into the folder
-
-```bash
-  cd my-react-portfolio
-```
-
-Install the dependencies
-
-```bash
-  npm i
-```
-
-Open the project in a separate VS Code editor
-
-```bash
-  code .
-```
-
-Open up a terminal inside VS code and lets run the project in a local environment
-
-```bash
-  npm run dev
-```
+Changing to try to re-commit
diff --git a/custom-images.md b/custom-images.md
@@ -44,7 +44,9 @@ export const GithubRepos = () => {
 useEffect(() => {
   const fetchRepos = async () => {
     try {
-      const response = await fetch("https://api.github.com/users/YourGithubProfile/repos");
+      const response = await fetch(
+        "https://api.github.com/users/YourGithubProfile/repos",
+      );
       if (!response.ok) {
         throw new Error("Network response was not ok" + response.statusText);
       }
@@ -53,7 +55,7 @@ useEffect(() => {
     } catch (error) {
       console.error(
         "There has been a problem with your fetch operation:",
-        error
+        error,
       );
     }
   };

diff --git a/eslint.config.js b/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/index.html b/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/instructions.md b/instructions.md
@@ -18,7 +18,7 @@ If you work as a designer and really dislike our designs, you could pitch to us
 
 ### **Top section**
 
-This is where you sell in your new self. You're happy to combine your previous experience with your new Frontend skills or use this area to describe yourself and how you see your future role. Either you do something like "Web dev + design" or more of a sentence like; "Web developer with a background in communications". Or if you don't see yourself as a Frontend Developer in the future, maybe you want to write something like; "Project manager with coding skills". It's your portfolio. Add a photo of yourself and summarise what you have been doing in the past and what you want to do in the future. This gives the reader an idea of who you are. Keep it short and personal. 
+This is where you sell in your new self. You're happy to combine your previous experience with your new Frontend skills or use this area to describe yourself and how you see your future role. Either you do something like "Web dev + design" or more of a sentence like; "Web developer with a background in communications". Or if you don't see yourself as a Frontend Developer in the future, maybe you want to write something like; "Project manager with coding skills". It's your portfolio. Add a photo of yourself and summarise what you have been doing in the past and what you want to do in the future. This gives the reader an idea of who you are. Keep it short and personal.
 
 ### **Tech section**
 
@@ -36,11 +36,11 @@ During the career program, you will be asked to post reflections on LinkedIn con
 
 ### **Skills**
 
-Place ALL your skills here. Feel free to add tech skills that are not in the course but things you have knowledge of from before. In the other columns, place everything that you think will be useful for a tech job. Softwares that you know, methodologies, leadership frameworks and basically whatever. 
+Place ALL your skills here. Feel free to add tech skills that are not in the course but things you have knowledge of from before. In the other columns, place everything that you think will be useful for a tech job. Softwares that you know, methodologies, leadership frameworks and basically whatever.
 
 ### **Time to talk**
 
-Make it super clear how a person can contact you. Again, add the social media links that *you* are using. 
+Make it super clear how a person can contact you. Again, add the social media links that _you_ are using.
 
 ## Tips on how to work with this project
 
@@ -60,17 +60,17 @@ To use the icons from the design, simply mark the icon you want to export and sa
 
 - Your portfolio should have components and props
 - Your portfolio should contain:
-    - A picture of you.
-    - A presentation of your tech skills.
-    - A presentation of your projects linking to GitHub and Netlify.
-    - A presentation of some thoughts that you have around code.
-    - A clear way to get in contact with you.
+  - A picture of you.
+  - A presentation of your tech skills.
+  - A presentation of your projects linking to GitHub and Netlify.
+  - A presentation of some thoughts that you have around code.
+  - A clear way to get in contact with you.
 - Your portfolio should follow the design as closely as possible
 - Your portfolio should be responsive (it should look good on devices from 320px width up to 1600px)
 - Your portfolio should be following accessibility guidelines to ensure your website is usable by a diverse range of users:
-    - You should have a score of at least 95 in [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)
-    - All images should have alt attributes and proper sizes
-    - All contrasts should be OK
+  - You should have a score of at least 95 in [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview)
+  - All images should have alt attributes and proper sizes
+  - All contrasts should be OK
 - Follow the guidelines on how to write clean code
 
 ## Stretch goals
@@ -85,4 +85,4 @@ To use the icons from the design, simply mark the icon you want to export and sa
 
 - Give your portfolio a custom domain and connect to your deployed site. [Read more](https://docs.netlify.com/domains-https/custom-domains/).
 - Utilise the GitHub API to fetch your public projects from your GitHub account, ensuring your portfolio stays up-to-date with your latest work.
-    - Use the following URL link [**https://api.github.com/users/YourGitHubProfile/repos**] as an example. Replace "YourGitHubProfile" with your actual GitHub profile name to fetch your repository data. Example: [Technigo GitHub profile](https://api.github.com/users/Technigo/repos)
+  - Use the following URL link [**https://api.github.com/users/YourGitHubProfile/repos**] as an example. Replace "YourGitHubProfile" with your actual GitHub profile name to fetch your repository data. Example: [Technigo GitHub profile](https://api.github.com/users/Technigo/repos)