-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a0c1c69
commit 9cd55fb
Showing
1 changed file
with
98 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,50 +1,100 @@ | ||
# React + TypeScript + 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 | ||
|
||
## Expanding the ESLint configuration | ||
|
||
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: | ||
|
||
- Configure the top-level `parserOptions` property like this: | ||
|
||
```js | ||
export default tseslint.config({ | ||
languageOptions: { | ||
// other options... | ||
parserOptions: { | ||
project: ['./tsconfig.node.json', './tsconfig.app.json'], | ||
tsconfigRootDir: import.meta.dirname, | ||
}, | ||
}, | ||
}); | ||
``` | ||
|
||
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` | ||
- Optionally add `...tseslint.configs.stylisticTypeChecked` | ||
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: | ||
|
||
```js | ||
// eslint.config.js | ||
import react from 'eslint-plugin-react'; | ||
|
||
export default tseslint.config({ | ||
// Set the react version | ||
settings: { react: { version: '18.3' } }, | ||
plugins: { | ||
// Add the react plugin | ||
react, | ||
}, | ||
rules: { | ||
// other rules... | ||
// Enable its recommended rules | ||
...react.configs.recommended.rules, | ||
...react.configs['jsx-runtime'].rules, | ||
}, | ||
}); | ||
``` | ||
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) | ||
|
||
This is the portfolio website for **Ji Yun Pahk**, a talented brand designer. The website showcases her work, vision, and creativity. | ||
|
||
## 🚀 Live Preview | ||
|
||
The portfolio is live at: [https://mariamarinescu.github.io/ji-yun/](https://mariamarinescu.github.io/ji-yun/) | ||
|
||
## 🛠️ Technologies Used | ||
|
||
### Frontend | ||
|
||
- **React**: For building the UI. | ||
- **React Router DOM**: For routing and navigation. | ||
- **TypeScript**: Provides static typing for JavaScript. | ||
|
||
### Styling | ||
|
||
- **TailwindCSS**: Utility-first CSS framework. | ||
- **Tailwind Plugins**: Aspect Ratio, Forms, and Typography. | ||
|
||
### Development | ||
|
||
- **Vite**: Fast build tool. | ||
- **ESLint & Prettier**: Ensures code quality and style consistency. | ||
- **Jest & Testing Library**: For unit and integration testing. | ||
|
||
## 🌐 Deployment | ||
|
||
The project is deployed using **GitHub Pages**. The deployment workflow uses the `gh-pages` branch. | ||
|
||
## 🚨 Known Issues | ||
|
||
- The website is still a work in progress. Features and sections may be incomplete or under development. | ||
|
||
## 🛠️ Features | ||
|
||
- **React + Vite + TypeScript**: A modern stack for fast and efficient development. | ||
- **TailwindCSS**: Fully responsive and styled using TailwindCSS with plugins for forms, typography, and aspect ratios. | ||
- **GitHub Pages Deployment**: Hosted and deployed via GitHub Pages. | ||
- **React Router**: Smooth navigation between pages. | ||
- **Accessibility**: Ensures good practices with `eslint-plugin-jsx-a11y`. | ||
|
||
## 📦 Installation | ||
|
||
To set up the project locally, follow these steps: | ||
|
||
1. Clone the repository: | ||
|
||
```bash | ||
git clone https://github.com/mariamarinescu/ji-yun.git | ||
cd ji-yun | ||
``` | ||
|
||
2. Install dependencies: | ||
|
||
```bash | ||
npm install | ||
``` | ||
|
||
3. Start the development server: | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
4. Build the project: | ||
|
||
```bash | ||
npm run build | ||
``` | ||
|
||
5. Preview the production build: | ||
|
||
```bash | ||
npm run preview | ||
``` | ||
|
||
## 🧩 Scripts | ||
|
||
- `npm run dev`: Starts the development server. | ||
- `npm run build`: Builds the project for production. | ||
- `npm run preview`: Previews the production build. | ||
- `npm run lint`: Runs ESLint to analyze the code for issues. | ||
|
||
## 📜 License | ||
|
||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. | ||
|
||
## 📧 Contact | ||
|
||
For inquiries, reach out at [[email protected]](mailto:[email protected]). | ||
|
||
--- | ||
|
||
### Contributions | ||
|
||
Feel free to open issues or submit pull requests if you'd like to contribute to the project. |