Technigo · Tejpex · Mar 25, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
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/Preview-PortfolioWebDev-Technigo.png b/Preview-PortfolioWebDev-Technigo.png
diff --git a/README.md b/README.md
@@ -1,50 +1,13 @@
-<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
+This is my portfolio.
 
-```bash
-  npm i
-```
+For the list of featured projects and the articles I've used json-files because I felt that it would give me more control over the content. Right now I only have one article, but I left some space for more to come and then I could use a similar layout-structure as the one I have for the skills-section, to make it responsive as well.
 
-Open the project in a separate VS Code editor
+For this project, I also wanted to practise using different css-files for each component, so I did. But I have also tried to keep the code as clean as possible, which meant going through all the different files and gather things with the same css-rules under the same class-name. The css for these elements can be found in App.css.
 
-```bash
-  code .
-```
+If I were to do it all over again, I would analyze the Figma-design more thoroughly in the beginning, since that would help me with the layouting. Now it took a long time to style things that I added at the end of the process, and it was also really hard to debug the code when it was repeated in several different files.
 
-Open up a terminal inside VS code and lets run the project in a local environment
+# View it live
 
-```bash
-  npm run dev
-```
+https://tejpex.netlify.app/
diff --git a/articles.json b/articles.json
@@ -0,0 +1,12 @@
+{
+  "articles": [
+    {
+      "title": "{error message} — How to rise back to the top",
+      "writtenAt": "March 2024",
+      "description": "Sometimes you get completely wrapped up in a project. And even though you know you need to take a break, you’re just going to finish this one thing. You imagine it will take ten minutes. Then...",
+      "image": "https://miro.medium.com/v2/resize:fit:1400/format:webp/1*v7ebRGwaIIQSnDbSKW73Vg.jpeg",
+      "altText": "Sunrise by the water",
+      "link": "https://medium.com/@erikaellerekki/error-message-how-to-rise-back-to-the-top-19ee8e6a4ecc"
+    }
+  ]
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/ico" href="/favicon.ico" />
+    <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=Hind:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <title>Tejpex portfolio</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
@@ -4,8 +4,6 @@
 
 The portfolio will be a great test of your React, HTML and CSS skills but we will also take the opportunity to get started with accessibility and build websites for everyone -- something every frontend developer should know. Don't save until the last day to do the testing -- it's very much the task of this project and will take some time.
 
-<img src="https://github.com/Technigo/project-portfolio/blob/main/Preview-PortfolioWebDev-Technigo.png" alt="" />
-
 We've created a [portfolio design](https://www.figma.com/file/ZMIWBimuoSDHXp7CdtkrA3/Web-Dev-Portfolio-%7C-new-version?type=design&node-id=1862-60&mode=design&t=clNc4tmMHa8uA3GO-0) for you that you should follow. You are free to change:
 
 - the colours (find inspiration on [ColorHunt](https://colorhunt.co/) or [Adobe](https://color.adobe.com/create/color-wheel/))
@@ -48,7 +46,7 @@ Make it super clear how a person can contact you. Again, add the social media li
 
 ## Tips on how to work with this project
 
-- Begin with forking and cloning the repo as usual. Since there is no starter code this week, you must create it by utilising [Vite](https://www.notion.so/Vite-15cd27c673d14033a1aae2d63dd37b04?pvs=21) → `npm create vite@latest my-portfolio --template`
+✅- Begin with forking and cloning the repo as usual. Since there is no starter code this week, you must create it by utilising [Vite](https://www.notion.so/Vite-15cd27c673d14033a1aae2d63dd37b04?pvs=21) → `npm create vite@latest my-portfolio --template`
 - Before starting the coding, consider what components you need and break the design into reusable and manageable pieces. Has your team already created some components during the team session? Great—use them!
 - Consider how you will get the data, e.g. the projects and articles. Do you want to go with JSON files all the way (see `projects.json` as an example), or do you want to go with the stretch goal that uses the GitHub API to get all projects?
 - When picking colours, remember to consider accessibility so that the contrast is sufficient.
@@ -58,16 +56,14 @@ Make it super clear how a person can contact you. Again, add the social media li
 
 To use the icons from the design, simply mark the icon you want to export and save it as an SVG or copy the code and make it into a component.
 
-<img src="https://file.notion.so/f/f/5fa017c8-3fef-4115-8b2f-0177cad64ebc/454c9efe-8e85-4d1e-82d6-9e0192ddf7cb/ezgif.com-video-to-gif.gif?id=254d5f1b-7b4d-4be4-9b6c-5b4c58e34311&table=block&spaceId=5fa017c8-3fef-4115-8b2f-0177cad64ebc&expirationTimestamp=1711029600000&signature=oMN5Aa34q-2H8bPHYUxLiyG0ox4AwdT0bDz_hHoyjyg&downloadName=ezgif.com-video-to-gif.gif" alt="" />
-
 ## Requirements
 
-- Your portfolio should have components and props
+✅- Your portfolio should have components and props
 - Your portfolio should contain:
-    - A picture of 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 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)