Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project Portfolio by Joyce Kuo #392

Open
wants to merge 45 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
f2fbd95
Set up Vite and initial project structure
JoyceKuode Oct 31, 2024
f66db0c
Create basic structure for main content
JoyceKuode Oct 31, 2024
6595a65
Make changes to App.css
JoyceKuode Oct 31, 2024
3b3bea5
Add styling to Grid and HeaderSection
JoyceKuode Nov 1, 2024
4584555
Add ImageSection with styling
JoyceKuode Nov 1, 2024
2b50d40
Adjust spacing in header
JoyceKuode Nov 1, 2024
450dc93
Add text to README
JoyceKuode Nov 2, 2024
6325dd3
Add content and style BioSection
JoyceKuode Nov 2, 2024
6128d72
Set up ProjectSection and data mapping
JoyceKuode Nov 2, 2024
ce1473f
Add default styling for project cards, tags, and buttons
JoyceKuode Nov 2, 2024
7a4cae5
Fix typo in card component
JoyceKuode Nov 2, 2024
47f014d
Add responsive design to project sections for tablet and desktop
JoyceKuode Nov 2, 2024
3ebbd86
Add tech section and styling
JoyceKuode Nov 2, 2024
2b563a2
Add arrow button component
JoyceKuode Nov 2, 2024
38bb340
Add reverse layout to alternating cards in project section on larger …
JoyceKuode Nov 2, 2024
7e128b1
Add skill section with skill card component and styling
JoyceKuode Nov 2, 2024
d165e11
Edit skills section for closer match to design
JoyceKuode Nov 2, 2024
b493104
Add article placeholder data and start design for article section
JoyceKuode Nov 2, 2024
9f93d50
Replace placeholder images
JoyceKuode Nov 2, 2024
d538453
Change images in project data
JoyceKuode Nov 3, 2024
f4afb6c
Add logic to invert color on button and icon based on section backgro…
JoyceKuode Nov 3, 2024
9059263
Complete article section styling for mobile
JoyceKuode Nov 3, 2024
32c128b
Add article section styling for desktop
JoyceKuode Nov 3, 2024
41b8b9b
Fix height issue on tablet view of article section
JoyceKuode Nov 3, 2024
af2558b
Add contact section with styling and social media component
JoyceKuode Nov 3, 2024
676195a
Add hover effects to social icons and edit data in json files
JoyceKuode Nov 3, 2024
9b17418
Edit README file
JoyceKuode Nov 3, 2024
761e87e
Clean up files and organize imports
JoyceKuode Nov 3, 2024
9786293
Edit skills data
JoyceKuode Nov 3, 2024
a68657f
Update bio section with new bio
JoyceKuode Nov 3, 2024
c08468f
Fix button height and top margin
JoyceKuode Nov 7, 2024
63216d7
Fix arrow button styling
JoyceKuode Nov 7, 2024
248fe23
Adjust padding in contact section
JoyceKuode Nov 7, 2024
220b499
Fix spacing and styling for tablet
JoyceKuode Nov 8, 2024
9239b82
Fix spacing on some elements to match design
JoyceKuode Nov 11, 2024
6328774
Remove node_modules from Git tracking
JoyceKuode Nov 11, 2024
ea42c45
Delete nested folder and fix layout issues
JoyceKuode Nov 11, 2024
3c5356f
Create functionality for See More buttons and add data
JoyceKuode Nov 11, 2024
f634d8d
Update images path and fix overflow issue
JoyceKuode Nov 11, 2024
7ee6155
Change some data including images and adjust line heights
JoyceKuode Nov 12, 2024
47e149e
Change line height to fix vertical scroll issue
JoyceKuode Nov 14, 2024
201152f
Fix vertical scrolling issue
JoyceKuode Nov 15, 2024
5bfa301
Edit skills
JoyceKuode Nov 17, 2024
b7237ee
Edit link for article
JoyceKuode Mar 12, 2025
97162be
Adjust width of skills container
JoyceKuode Mar 13, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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?
52 changes: 5 additions & 47 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
11 changes: 11 additions & 0 deletions articles.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"articles": [
{
"title": "From Musician to Developer: My Journey Through Technigo's Web Dev Bootcamp",
"description": "Discover how a music career shaped the mindset needed to navigate coding bootcamp, from embracing challenges to celebrating breakthroughs. From debugging with a newborn in one arm to finding rhythm in React, this is a reflection on growth, resilience, and the surprising parallels between music and programming.",
"image": "/images/bootcamp-article.jpg",
"date": "March 12th, 2025",
"link": "https://www.linkedin.com/pulse/from-musician-developer-my-journey-through-technigos-web-joyce-kuo-ahayf/?trackingId=K2IFU6NJTRqk4Ze%2BGe8N7Q%3D%3D"
}
]
}
39 changes: 39 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -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"
},
},
]
16 changes: 16 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
Loading