diff --git a/projects/0-Project/.gitignore b/projects/0-Project/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/projects/0-Project/.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? diff --git a/projects/0-Project/README.md b/projects/0-Project/README.md new file mode 100644 index 0000000..a36934d --- /dev/null +++ b/projects/0-Project/README.md @@ -0,0 +1,16 @@ +# 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) uses [Oxc](https://oxc.rs) +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) + +## React Compiler + +The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). + +## Expanding the ESLint configuration + +If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. diff --git a/projects/0-Project/eslint.config.js b/projects/0-Project/eslint.config.js new file mode 100644 index 0000000..4fa125d --- /dev/null +++ b/projects/0-Project/eslint.config.js @@ -0,0 +1,29 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import { defineConfig, globalIgnores } from 'eslint/config' + +export default defineConfig([ + globalIgnores(['dist']), + { + files: ['**/*.{js,jsx}'], + extends: [ + js.configs.recommended, + reactHooks.configs.flat.recommended, + reactRefresh.configs.vite, + ], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + parserOptions: { + ecmaVersion: 'latest', + ecmaFeatures: { jsx: true }, + sourceType: 'module', + }, + }, + rules: { + 'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }], + }, + }, +]) diff --git a/projects/0-Project/index.html b/projects/0-Project/index.html new file mode 100644 index 0000000..c3bf5d2 --- /dev/null +++ b/projects/0-Project/index.html @@ -0,0 +1,13 @@ + + + + + + + 0-project + + +
+ + + diff --git a/projects/0-Project/package.json b/projects/0-Project/package.json new file mode 100644 index 0000000..417f591 --- /dev/null +++ b/projects/0-Project/package.json @@ -0,0 +1,27 @@ +{ + "name": "0-project", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "react": "^19.2.4", + "react-dom": "^19.2.4" + }, + "devDependencies": { + "@eslint/js": "^9.39.4", + "@types/react": "^19.2.14", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "^6.0.1", + "eslint": "^9.39.4", + "eslint-plugin-react-hooks": "^7.0.1", + "eslint-plugin-react-refresh": "^0.5.2", + "globals": "^17.4.0", + "vite": "^8.0.4" + } +} diff --git a/projects/0-Project/public/favicon.svg b/projects/0-Project/public/favicon.svg new file mode 100644 index 0000000..6893eb1 --- /dev/null +++ b/projects/0-Project/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/projects/0-Project/public/icons.svg b/projects/0-Project/public/icons.svg new file mode 100644 index 0000000..e952219 --- /dev/null +++ b/projects/0-Project/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/0-Project/src/App.css b/projects/0-Project/src/App.css new file mode 100644 index 0000000..b120372 --- /dev/null +++ b/projects/0-Project/src/App.css @@ -0,0 +1,152 @@ +@import url('https://fonts.googleapis.com/css2?family=Chiron+Hei+HK:ital,wght@0,200..900;1,200..900&family=Noto+Sans+KR:wght@100..900&display=swap'); + +body { + margin: 0; + padding: 0; + background-color: #fafafa; + color: #161616; + font-family: "Chiron Hei HK", "Noto Sans KR", sans-serif; + -webkit-font-smoothing: antialiased; +} + +.container { + max-width: 1200px; + min-height: 90vh; + margin: 0 auto; + padding: 60px 40px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.header { + display: flex; + justify-content: space-between; + align-items: flex-start; + border-bottom: 2px solid #161616; + padding-bottom: 20px; + margin-bottom: 60px; +} + +.header-left { + font-size: 80px; + font-weight: 900; + line-height: 1; + visibility: hidden; +} + +.header-right { + font-size: 40px; + font-weight: 800; + line-height: 1.1; + text-align: right; + text-transform: uppercase; +} + +.card { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 80px; + align-items: flex-start; +} + +.profile-section { + flex: 1; + display: flex; + flex-direction: column; + gap: 40px; +} + +.section-title { + font-size: 16px; + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + border-bottom: 1px solid #e0e0e0; + padding-bottom: 10px; +} + +.info-list { + display: flex; + flex-direction: column; + gap: 32px; +} + +.info-item { + display: flex; + align-items: flex-start; + gap: 24px; + border-bottom: 1px solid #e0e0e0; + padding-bottom: 24px; +} + +.info-number { + font-size: 18px; + font-weight: 800; + line-height: 1; +} + +.info-content h3 { + font-size: 24px; + font-weight: 800; + margin: 0 0 8px 0; +} + +.info-content p { + font-size: 15px; + color: #555; + margin: 0; + line-height: 1.5; +} + +.visual-section { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 40px; +} + +.mainimage { + width: 100%; + display: flex; + justify-content: flex-end; +} + +.mainimage img { + width: 85%; + max-width: 450px; + height: auto; + border-radius: 5px; + object-fit: cover; +} + +.deliverables { + width: 85%; + max-width: 450px; + display: flex; + flex-direction: column; + gap: 16px; + text-align: left; +} + +.deliverables-label { + font-size: 14px; + font-weight: 700; + color: #ff007a; + text-transform: uppercase; +} + +.deliverables-title { + font-size: 28px; + font-weight: 800; + line-height: 1.3; +} + +.deliverables-sub { + font-size: 16px; + font-style: italic; + color: #555; +} \ No newline at end of file diff --git a/projects/0-Project/src/assets/mainimage.JPG b/projects/0-Project/src/assets/mainimage.JPG new file mode 100644 index 0000000..d3e9aa6 Binary files /dev/null and b/projects/0-Project/src/assets/mainimage.JPG differ diff --git a/projects/0-Project/src/main.jsx b/projects/0-Project/src/main.jsx new file mode 100644 index 0000000..848fb15 --- /dev/null +++ b/projects/0-Project/src/main.jsx @@ -0,0 +1,66 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './App.css' +import img1 from './assets/mainimage.JPG' + +createRoot(document.getElementById('root')).render( + +
+ +
+
01:
+
+ APPTIVE 24
NAJIN KWON +
+
+ +
+ +
+
자기소개
+ +
+
+ 01. +
+

ABOUT ME

+

안녕하세요! 대기환경과학과 23학번 권나진입니다.

+
+
+ +
+ 02. +
+

PNU APPTIVE

+

웹/앱 개발 동아리 APPTIVE에서 24기 FE로 활동하고 있습니다.

+
+
+ +
+ 03. +
+

WHAT I LOVE

+

아기자기한 것들을 좋아해서 좋아하는 것들을 수집하고 배치할 때 느끼는 즐거움을 웹에서도 구현하고 싶어요.

+
+
+
+
+ +
+
+ mainimage +
+ +
+ NOW PLAYING: +
+ Just a Feeling +
+
-S.E.S
+
+
+ +
+
+ , +) \ No newline at end of file diff --git a/projects/0-Project/vite.config.js b/projects/0-Project/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/projects/0-Project/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [react()], +})