-
-
-
-
-
-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/))
-- the images
-- and, of course, all the content
-
-If you have any written articles or blog posts that you consider relevant, there's a section for that in the portfolio. If you don't have that (yet), feel free to leave that part out.
-
-We want you to practise following a design strictly. This is normally how the workflow is for a Frontend Developer: to work together with a designer who provides a design file (in Figma) for you to translate into code.
-
-If you work as a designer and really hate our design, you could pitch to us why you would do a better job and hand in your own design file for us to evaluate. But otherwise, this design comes from an experienced designer in collaboration with the expertise of a recruiter who knows what recruiters look at.
-
-## Content guide
-
-### **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.
-
-### **Tech section**
-
-Give a short summary/name-dropping of all the technologies, tools, libraries and things you know and will learn during this course.
-
-### **Featured projects**
-
-Mention the projects you are most proud of here; feel free to add all of them! The more, the merrier at the beginning of your developer career. Make sure to mention all technologies, libraries or APIs you have used. Don't feel like you are repeating yourself. As a recruiter looking for a React developer – the more React is mentioned – the better. If you have other code projects unrelated to this course, feel free to add them, too. For every project, add a link to the GitHub repo and a link to the deployed page, where the project can be viewed live. Add a thumbnail image that shows your project and a short summary of what the project is about.
-
-### **My words**
-
-Presenting yourself and your thoughts about programming, career change, remote work, and bootcamping can be extremely helpful for recruiters to gain insight into what you're up to. It can be a great way to show off your knowledge and skills - and that you reflect on it.
-
-During the career coaching program, you will be asked to post reflections on LinkedIn connected to the different topics covered in the bootcamp, this is an excellent opportunity to showcase your reflections to future employers. You can leave this empty for now and return to it when you have progressed further in the career coaching program. You can also include reflections that you have posted on social media in this section if you have done so.
-
-### **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.
-
-### **Time to talk**
-
-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
-
-- 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.
-- Remember that your portfolio will continue to evolve and grow as you progress in your coding journey. Happy coding!
-
-### A tip about the icons
-
-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.
-
-
-
-## Requirements
-
-- 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.
-- 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
-- Follow the guidelines on [how to write good code](https://www.notion.so/Guidelines-for-how-to-write-good-code-59abdd4307a24f5ca7914d566326f4df?pvs=21)
-
-## Stretch goals
-
-### Intermediate stretch goals
-
-- Optimise your website for sharing on social media using og:tags.
-- Implement animation on scroll as present in the design for enhanced user experience.
-- Add a favicon
-
-### Advanced stretch goals
-
-- 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)
diff --git a/my-portfolio/.eslintrc.cjs b/my-portfolio/.eslintrc.cjs
new file mode 100644
index 0000000000..3e212e1d43
--- /dev/null
+++ b/my-portfolio/.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/my-portfolio/.gitignore b/my-portfolio/.gitignore
new file mode 100644
index 0000000000..a547bf36d8
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..e8c46e3d62
--- /dev/null
+++ b/my-portfolio/README.md
@@ -0,0 +1,8 @@
+# Portfolio Project
+### The Problem
+The problem was to build a portfolio site for myself, following the provided design as close as possible.
+
+I started by making the components I thought I needed for the project. Tried to keep everything seperate to make it easier to slot in an out modules if I want to change things in the future. This means especially the CSS isn't as DRY as it could be, but that's a sacrifice I'm willing to make at this time.
+
+### View it live
+https://martin-joensson-portfolio.netlify.app/
\ No newline at end of file
diff --git a/my-portfolio/index.html b/my-portfolio/index.html
new file mode 100644
index 0000000000..53ff79a927
--- /dev/null
+++ b/my-portfolio/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
+
+ Loading...
+
+ + With a strong foundation in research and teaching, I bring a unique + perspective to solving complex problems and communicating technical + concepts clearly. My analytical skills and passion for education now + fuel my journey into crafting intuitive and accessible web + experiences. +
+HTML5
+CSS3
+Javascript ES6
+React
+Tailwind CSS
+GitHub
+Postman
+GIMP
+Figma
+Slack
+Keynote
+Angular
+MongoDB
+Agile methodology
+Concept development
+Pair/mob-programming
+Data analysis
+
+ Martin Jönsson
++46(0)73-909 11 99
+martin.t.joensson@gmail.com
+ ++ HTML, CSS, Javascript, ES6, JSX, React, React Hooks, Node.js, Mongo + DB, Web Accessability, APIs, mob-programming, pair-programming, GitHub +
+{text}
+{description}
++ {tag} +
+ ))} +
+ 
+ 
+ 
+