diff --git a/Week-1/Task-1/r3f/.gitignore b/Week-1/Task-1/r3f/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/Week-1/Task-1/r3f/.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/Week-1/Task-1/r3f/README.md b/Week-1/Task-1/r3f/README.md new file mode 100644 index 0000000..a36934d --- /dev/null +++ b/Week-1/Task-1/r3f/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/Week-1/Task-1/r3f/eslint.config.js b/Week-1/Task-1/r3f/eslint.config.js new file mode 100644 index 0000000..4fa125d --- /dev/null +++ b/Week-1/Task-1/r3f/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/Week-1/Task-1/r3f/index.html b/Week-1/Task-1/r3f/index.html new file mode 100644 index 0000000..5771362 --- /dev/null +++ b/Week-1/Task-1/r3f/index.html @@ -0,0 +1,13 @@ + + + + + + + r3f + + +
+ + + diff --git a/Week-1/Task-1/r3f/package.json b/Week-1/Task-1/r3f/package.json new file mode 100644 index 0000000..eddbff7 --- /dev/null +++ b/Week-1/Task-1/r3f/package.json @@ -0,0 +1,30 @@ +{ + "name": "r3f", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint .", + "preview": "vite preview" + }, + "dependencies": { + "@react-three/drei": "9.105.6", + "@react-three/fiber": "^9.5.0", + "react": "^19.2.4", + "react-dom": "^19.2.4", + "three": "^0.183.2" + }, + "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.1" + } +} diff --git a/Week-1/Task-1/r3f/public/favicon.svg b/Week-1/Task-1/r3f/public/favicon.svg new file mode 100644 index 0000000..6893eb1 --- /dev/null +++ b/Week-1/Task-1/r3f/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Week-1/Task-1/r3f/public/icons.svg b/Week-1/Task-1/r3f/public/icons.svg new file mode 100644 index 0000000..e952219 --- /dev/null +++ b/Week-1/Task-1/r3f/public/icons.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Week-1/Task-1/r3f/src/App.css b/Week-1/Task-1/r3f/src/App.css new file mode 100644 index 0000000..e9ab603 --- /dev/null +++ b/Week-1/Task-1/r3f/src/App.css @@ -0,0 +1,16 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + overflow: hidden; + background-color: #111; + font-family: sans-serif; +} + +#canvas-container { + width: 100vw; + height: 100vh; +} diff --git a/Week-1/Task-1/r3f/src/App.jsx b/Week-1/Task-1/r3f/src/App.jsx new file mode 100644 index 0000000..e69de29 diff --git a/Week-1/Task-1/r3f/src/assets/hero.png b/Week-1/Task-1/r3f/src/assets/hero.png new file mode 100644 index 0000000..cc51a3d Binary files /dev/null and b/Week-1/Task-1/r3f/src/assets/hero.png differ diff --git a/Week-1/Task-1/r3f/src/assets/react.svg b/Week-1/Task-1/r3f/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/Week-1/Task-1/r3f/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Week-1/Task-1/r3f/src/assets/vite.svg b/Week-1/Task-1/r3f/src/assets/vite.svg new file mode 100644 index 0000000..5101b67 --- /dev/null +++ b/Week-1/Task-1/r3f/src/assets/vite.svg @@ -0,0 +1 @@ +Vite diff --git a/Week-1/Task-1/r3f/src/index.css b/Week-1/Task-1/r3f/src/index.css new file mode 100644 index 0000000..2c84af0 --- /dev/null +++ b/Week-1/Task-1/r3f/src/index.css @@ -0,0 +1,111 @@ +:root { + --text: #6b6375; + --text-h: #08060d; + --bg: #fff; + --border: #e5e4e7; + --code-bg: #f4f3ec; + --accent: #aa3bff; + --accent-bg: rgba(170, 59, 255, 0.1); + --accent-border: rgba(170, 59, 255, 0.5); + --social-bg: rgba(244, 243, 236, 0.5); + --shadow: + rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; + + --sans: system-ui, 'Segoe UI', Roboto, sans-serif; + --heading: system-ui, 'Segoe UI', Roboto, sans-serif; + --mono: ui-monospace, Consolas, monospace; + + font: 18px/145% var(--sans); + letter-spacing: 0.18px; + color-scheme: light dark; + color: var(--text); + background: var(--bg); + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + @media (max-width: 1024px) { + font-size: 16px; + } +} + +@media (prefers-color-scheme: dark) { + :root { + --text: #9ca3af; + --text-h: #f3f4f6; + --bg: #16171d; + --border: #2e303a; + --code-bg: #1f2028; + --accent: #c084fc; + --accent-bg: rgba(192, 132, 252, 0.15); + --accent-border: rgba(192, 132, 252, 0.5); + --social-bg: rgba(47, 48, 58, 0.5); + --shadow: + rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; + } + + #social .button-icon { + filter: invert(1) brightness(2); + } +} + +body { + margin: 0; +} + +#root { + width: 1126px; + max-width: 100%; + margin: 0 auto; + text-align: center; + border-inline: 1px solid var(--border); + min-height: 100svh; + display: flex; + flex-direction: column; + box-sizing: border-box; +} + +h1, +h2 { + font-family: var(--heading); + font-weight: 500; + color: var(--text-h); +} + +h1 { + font-size: 56px; + letter-spacing: -1.68px; + margin: 32px 0; + @media (max-width: 1024px) { + font-size: 36px; + margin: 20px 0; + } +} +h2 { + font-size: 24px; + line-height: 118%; + letter-spacing: -0.24px; + margin: 0 0 8px; + @media (max-width: 1024px) { + font-size: 20px; + } +} +p { + margin: 0; +} + +code, +.counter { + font-family: var(--mono); + display: inline-flex; + border-radius: 4px; + color: var(--text-h); +} + +code { + font-size: 15px; + line-height: 135%; + padding: 4px 8px; + background: var(--code-bg); +} diff --git a/Week-1/Task-1/r3f/src/main.jsx b/Week-1/Task-1/r3f/src/main.jsx new file mode 100644 index 0000000..b9a1a6d --- /dev/null +++ b/Week-1/Task-1/r3f/src/main.jsx @@ -0,0 +1,10 @@ +import { StrictMode } from 'react' +import { createRoot } from 'react-dom/client' +import './index.css' +import App from './App.jsx' + +createRoot(document.getElementById('root')).render( + + + , +) diff --git a/Week-1/Task-1/r3f/vite.config.js b/Week-1/Task-1/r3f/vite.config.js new file mode 100644 index 0000000..8b0f57b --- /dev/null +++ b/Week-1/Task-1/r3f/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()], +}) diff --git a/Week-1/Task-1/vanilla/index.html b/Week-1/Task-1/vanilla/index.html new file mode 100644 index 0000000..9655b18 --- /dev/null +++ b/Week-1/Task-1/vanilla/index.html @@ -0,0 +1,13 @@ + + + + + + Vanilla Three.js + + + +
+ + + diff --git a/Week-1/Task-1/vanilla/main.js b/Week-1/Task-1/vanilla/main.js new file mode 100644 index 0000000..e69de29 diff --git a/Week-1/Task-1/vanilla/package.json b/Week-1/Task-1/vanilla/package.json new file mode 100644 index 0000000..21e1867 --- /dev/null +++ b/Week-1/Task-1/vanilla/package.json @@ -0,0 +1,17 @@ +{ + "name": "vanilla", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^8.0.1" + }, + "dependencies": { + "three": "^0.183.2" + } +}