Helene Westrin – Portfolio

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,50 +1,29 @@
-<h1 align="center">
-  <a href="">
-    <img src="/react-p.svg" alt="Project Banner Image">
-  </a>
-</h1>
+# Helene Westrin - React Portfolio Project
 
-# Technigo - React Portfolio Project
+## 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
+This portfolio is built using Vite as a framework, with React as the core library for creating reusable components. The project follows a modular structure, organizing all assets, components, and layout files in a way that promotes reusability and maintainability. The goal was to follow a design in Figma as closely as possible. Being a designer I opted for designing my own portfolio and implementing that design.
 
-## Instructions
-[Check this projects instructions here](https://github.com/Technigo/project-portfolio/blob/main/instructions.md)
+### Folder Structure
 
-## Set up your own version of your portfolio
+- assets: Contains fonts, icons, and images used across the site to keep the design cohesive.
+- components: Holds the individual, reusable components such as buttons, headers, tags, and typography elements that I created for different parts of the portfolio.
+- layout: Contains the layout-specific components like Hero, Footer, and sections for projects and articles.
+- data: JSON files that store data for articles, projects, skills, and tech stack, allowing for easy updates and scalability.
+- styles: Global CSS styles to ensure consistency across the site.
 
-We will use [Vite](https://vitejs.dev/guide/) to setup our project 😉
+## Solutions
 
-```bash
-  npm create vite@latest my-react-portfolio --template
-```
+**Component-Based Structure:** I broke the design into reusable components (e.g., Button, Tag, Header, Footer) for better maintainability. Each component is isolated, allowing me to adjust or reuse them across different sections without duplicating code.
 
-#### Follow this GIF to setup your project
+**Modular Layouts:** I separated layout-specific components (e.g., Hero, Projects, Articles) into a layout folder, keeping the structure clear and making it easy to locate each section of the site.
 
-![Alt Text](https://res.cloudinary.com/dfkxydgqg/image/upload/v1691073155/WEB/Sprint-2/week-8/vite-react_vjp0ep.gif)
+**Data:** Stored project and skill data in JSON files to easily add or update content without hardcoding it in the components.
 
-## Installation
+## Future improvements
 
-Use the `cd` command to move into the folder
+In the future I would like to blend my design projects and development projects in a nice way, maybe with a option to filter. I would also like to add pages like About me and Contact. If I decide to actually write articles I would also link to the actual articles in some way, preferably they would have individual pages as well.
 
-```bash
-  cd my-react-portfolio
-```
+## View it live
 
-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
-```
+[https://helene-westrin.netlify.app](https://helene-westrin.netlify.app/)

helene-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?

helene-portfolio/README.md

@@ -0,0 +1,29 @@
+# Helene Westrin - React Portfolio Project
+
+## Project Overview
+
+This portfolio is built using Vite as a framework, with React as the core library for creating reusable components. The project follows a modular structure, organizing all assets, components, and layout files in a way that promotes reusability and maintainability. The goal was to follow a design in Figma as closely as possible. Being a designer I opted for designing my own portfolio and implementing that design.
+
+### Folder Structure
+
+- assets: Contains fonts, icons, and images used across the site to keep the design cohesive.
+- components: Holds the individual, reusable components such as buttons, headers, tags, and typography elements that I created for different parts of the portfolio.
+- layout: Contains the layout-specific components like Hero, Footer, and sections for projects and articles.
+- data: JSON files that store data for articles, projects, skills, and tech stack, allowing for easy updates and scalability.
+- styles: Global CSS styles to ensure consistency across the site.
+
+## Solutions
+
+**Component-Based Structure:** I broke the design into reusable components (e.g., Button, Tag, Header, Footer) for better maintainability. Each component is isolated, allowing me to adjust or reuse them across different sections without duplicating code.
+
+**Modular Layouts:** I separated layout-specific components (e.g., Hero, Projects, Articles) into a layout folder, keeping the structure clear and making it easy to locate each section of the site.
+
+**Data:** Stored project and skill data in JSON files to easily add or update content without hardcoding it in the components.
+
+## Future improvements
+
+In the future I would like to blend my design projects and development projects in a nice way, maybe with a option to filter. I would also like to add pages like About me and Contact. If I decide to actually write articles I would also link to the actual articles in some way, preferably they would have individual pages as well.
+
+## View it live
+
+[https://helene-westrin.netlify.app](https://helene-westrin.netlify.app/)

helene-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 },
+      ],
+    },
+  },
+]

helene-portfolio/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Product Designer and Frontend Developer based in Stockholm, specializing in Product Design, Frontend Development and accessibility. Proficient in HTML, CSS, JavaScript, React, and Node.js. Explore some of my latest projects »"
+    />
+
+    <!-- Open Graph Meta Tags -->
+    <meta
+      property="og:title"
+      content="Helene Westrin - Designer & Frontend Developer"
+    />
+    <meta
+      property="og:description"
+      content="Based in Stockholm, specializing in Product Design, Frontend Development and accessibility. Proficient in HTML, CSS, Figma, JavaScript, React, and Node.js. Explore some of my latest projects »"
+    />
+    <meta property="og:url" content="https://helene-westrin.netlify.app/" />
+    <meta property="og:type" content="website" />
+    <link
+      href="favicon-light.png"
+      type="image/svg+xml"
+      rel="icon"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      href="favicon-dark.png"
+      type="image/svg+xml"
+      rel="icon"
+      media="(prefers-color-scheme: dark)"
+    />
+    <title>Helene Westrin — Designer & Frontend Developer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>