Project Portfolio by Joyce Kuo

README.md

@@ -4,47 +4,21 @@
   </a>
 </h1>
 
-# Technigo - React Portfolio Project
+# Joyce Kuo - 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
+In this project, I use React to build a portfolio website with a responsive Figma design to follow. 
 
-## Instructions
-[Check this projects instructions here](https://github.com/Technigo/project-portfolio/blob/main/instructions.md)
+## The Process
 
-## Set up your own version of your portfolio
+Throughout the development of this project, I adopted a component-driven approach. I began by outlining the overall structure and making sure I knew how all the elements were related. 
 
-We will use [Vite](https://vitejs.dev/guide/) to setup our project 😉
+As I created each component, I focused on maintaining the design and referring back to Figma frequently, and paying special attention to responsive layouts. All of my section files had a corresponding CSS file so that I could apply styling unique to each section. Incorporating data from JSON files made it easy to update and edit data without disrupting the design.
 
-```bash
-  npm create vite@latest my-react-portfolio --template
-```
+I stumbled on some design issues. For instance, manipulating the images in the hero section so that they were layered correctly and looked good in all layouts was especially tricky. I used mostly rubber ducking, trial and error, and ChatGPT to help me resolve design issues. 
 
-#### Follow this GIF to setup your project
+## Next Steps
 
-![Alt Text](https://res.cloudinary.com/dfkxydgqg/image/upload/v1691073155/WEB/Sprint-2/week-8/vite-react_vjp0ep.gif)
+I would love to tackle some of the stretch goals, like adding a favicon and creating a custom domain name. I would also create functionality for the "See more projects" button to display more than 4 projects. Creating placeholder articles also got me inspired to write the articles for real 😅
 
-## 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
-```
+## View it Live
+https://joyce-kuo-portfolio.netlify.app/

articles.json

@@ -0,0 +1,25 @@
+{
+  "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, discipline, 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"
+    }
+  ]
+}

my-react-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?

my-react-portfolio/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@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

my-react-portfolio/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"
+    },
+  },
+]

my-react-portfolio/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>