Project Portfolio by Joyce Kuo

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules/
+dist/
+dist-ssr/
+.cache/
+parcel-cache/
+*.local
+
+# Environment variables
+.env
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,50 +1,8 @@
-<h1 align="center">
-  <a href="">
-    <img src="/react-p.svg" alt="Project Banner Image">
-  </a>
-</h1>
+# React + Vite
 
-# Technigo - React Portfolio Project
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-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
+Currently, two official plugins are available:
 
-## 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
-```
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

articles.json

@@ -0,0 +1,39 @@
+{
+  "articles": [
+    {
+      "title": "How to stop being scared: Learning to love code",
+      "description": "Uncover the path to transforming fear of coding into a profound appreciation for the process and learn to embrace challenges and celebrate small victories along the way.",
+      "image": "https://images.unsplash.com/photo-1557672172-298e090bd0f1?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "date": "July 20th",
+      "link": "link"
+    },
+    {
+      "title": "Harmonizing skills: Bridging the gap between music and programming",
+      "description": "My observations on the fascinating parallels between studying music and learning to code, revealing how both disciplines nurture creativity, focus, and problem-solving skills while encouraging self-expression through structured frameworks.",
+      "image": "https://images.unsplash.com/photo-1561212044-bac5ef688a07?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "date": "January 2nd",
+      "link": "link"
+    },
+    {
+      "title": "Every day is a school day: Making growth mindset a daily habit",
+      "description": "Learn how embracing a growth mindset transforms the learning process into an exciting pursuit, igniting the dopamine rush that comes with overcoming obstacles and exploring new skills.",
+      "image": "https://images.unsplash.com/photo-1564089957880-517edea1afc5?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "date": "June 11th",
+      "link": "link"
+    },
+    {
+      "title": "From Setlists to Sitemaps: Project Planning Tips for Creatives and Developers",
+      "description": "Lessons learned from planning music performances and redesigning websites, and how to manage creativity, timelines, and user needs effectively.",
+      "image": "https://images.unsplash.com/photo-1551043033-45ef3d1ddeb0?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "date": "June 17th",
+      "link": "link"
+    },
+    {
+      "title": "The Future of Accessible Music Websites: Where Creativity Meets Inclusivity",
+      "description": "A speculation on emerging trends in accessible web design for musicians and performers, and the design practices that connect artistic expression and digital accessibility in an evolving industry.",
+      "image": "https://images.unsplash.com/photo-1611521245004-5acf7d84ea69?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "date": "July 11th",
+      "link": "link"
+    }
+  ]
+}

eslint.config.js

@@ -0,0 +1,39 @@
+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 },
+      ],
+      "react/prop-types": "off"
+    },
+  },
+]

index.html

@@ -0,0 +1,16 @@
+<!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>Joyce Kuo Portfolio</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>