From 0b387af815eb17809e62504a0ba2afc8934351d2 Mon Sep 17 00:00:00 2001 From: Yuuto <55290516+JustYuuto@users.noreply.github.com> Date: Fri, 25 Oct 2024 15:29:09 +0200 Subject: [PATCH] some changes --- eslint.config.js | 19 ++++++--- index.html | 5 ++- package.json | 1 + public/vite.svg | 1 - src/App.css | 42 ------------------ src/App.tsx | 45 ++++++++------------ src/assets/react.svg | 1 - src/components/Header.tsx | 38 +++++++++++++++++ src/components/Loading.tsx | 29 +++++++++++++ src/components/MainSection.tsx | 17 ++++++++ src/index.css | 78 ++++++---------------------------- src/main.tsx | 10 ++--- src/vite-env.d.ts | 10 +++++ tailwind.config.js | 23 ++++++++-- vite.config.ts | 10 +++-- yarn.lock | 12 +++++- 16 files changed, 181 insertions(+), 160 deletions(-) delete mode 100644 public/vite.svg delete mode 100644 src/App.css delete mode 100644 src/assets/react.svg create mode 100644 src/components/Header.tsx create mode 100644 src/components/Loading.tsx create mode 100644 src/components/MainSection.tsx diff --git a/eslint.config.js b/eslint.config.js index 092408a..2e21fe2 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,14 +1,15 @@ -import js from '@eslint/js' -import globals from 'globals' -import reactHooks from 'eslint-plugin-react-hooks' -import reactRefresh from 'eslint-plugin-react-refresh' -import tseslint from 'typescript-eslint' +import js from '@eslint/js'; +import globals from 'globals'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import tseslint from 'typescript-eslint'; +import tailwind from 'eslint-plugin-tailwindcss'; export default tseslint.config( { ignores: ['dist'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], - files: ['**/*.{ts,tsx}'], + files: ['**/*.{js,ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, @@ -23,6 +24,10 @@ export default tseslint.config( 'warn', { allowConstantExport: true }, ], + quotes: ['error', 'single'], + semi: ['error', 'always'], + indent: ['error', 2, { SwitchCase: 1 }], }, }, -) + ...tailwind.configs['flat/recommended'] +); diff --git a/index.html b/index.html index e4b78ea..82b7230 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,10 @@ - - Vite + React + TS + Yuuto + +
diff --git a/package.json b/package.json index 7f24315..8769a27 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "eslint-plugin-tailwindcss": "^3.17.5", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index 3d7ded3..d94f738 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,35 +1,26 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' +import Header from './components/Header.tsx'; +import MainSection from './components/MainSection.tsx'; +import {useEffect, useState} from 'react'; +import Loading from './components/Loading.tsx'; function App() { - const [count, setCount] = useState(0) + const [user, setUser] = useState(null); + useEffect(() => { + fetch('https://api.lanyard.rest/v1/users/269415459735076864') + .then(res => res.json()) + .then(data => { + setUser(data.data); + }); + }, []); return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ {!user ? : <> +
+ + } - ) + ); } -export default App +export default App; diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..43e2af8 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,38 @@ +export default function Header() { + const links = [ + { + name: 'Projects', + url: '#projects' + }, + { + name: 'Contact', + url: '#contact' + } + ]; + + return ( +
+
+ { + scroll(0, 0); + }}> + Yuuto + .dev + +
+
+ +
+
+ ); +} diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx new file mode 100644 index 0000000..770fb37 --- /dev/null +++ b/src/components/Loading.tsx @@ -0,0 +1,29 @@ +import {useEffect, useState} from 'react'; + +export default function Loading() { + const [dots, setDots] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setDots(prev => { + if (prev === 3) { + return 1; + } else { + return prev + 1; + } + }); + }, 500); + + return () => clearInterval(interval); + }, []); + + return ( +
+
+
+ {'.'.repeat(dots)} +
+
+
+ ); +} diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx new file mode 100644 index 0000000..17f21b6 --- /dev/null +++ b/src/components/MainSection.tsx @@ -0,0 +1,17 @@ +export default function MainSection({ user }: { user: LanyardUser }) { + return ( +
+
+
+ Avatar +

Hi! I'm Yuuto

+

+ I'm a 17 yo developer from France. +

+
+
+
+ ); +} diff --git a/src/index.css b/src/index.css index 6119ad9..0f0f87e 100644 --- a/src/index.css +++ b/src/index.css @@ -1,68 +1,16 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; +@tailwind base; +@tailwind components; +@tailwind utilities; - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; +@layer base { + *, ::before, ::after { + scroll-behavior: smooth; + } - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } + body { + background-image: linear-gradient(45deg, #0A0F29 0%, #1B2A41 100%); + background-repeat: no-repeat; + background-attachment: fixed; + color: theme(colors.white); + } } diff --git a/src/main.tsx b/src/main.tsx index bef5202..2239905 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,10 +1,10 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; +import './index.css'; +import App from './App.tsx'; createRoot(document.getElementById('root')!).render( , -) +); diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..8e79105 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,11 @@ /// + +interface LanyardUser { + discord_user: { + username: string; + public_flags: number; + id: string; + discriminator: string; + avatar: string; + }; +} diff --git a/tailwind.config.js b/tailwind.config.js index c189a4a..8c3936c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,24 @@ /** @type {import('tailwindcss').Config} */ export default { - content: [], + content: [ + './index.html', + './src/**/*.{js,ts,jsx,tsx}', + ], theme: { - extend: {}, + extend: { + fontFamily: { + sans: '"Fira Code", sans-serif', + }, + animation: { + blink: 'blink 1s linear infinite', + }, + keyframes: { + blink: { + '0%, 100%': { opacity: 1 }, + '50%': { opacity: 0 }, + }, + }, + }, }, plugins: [], -} - +}; diff --git a/vite.config.ts b/vite.config.ts index 2328e17..b69c851 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,9 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react-swc'; // https://vite.dev/config/ export default defineConfig({ - plugins: [react()], -}) + plugins: [ + react(), + ], +}); diff --git a/yarn.lock b/yarn.lock index 9e91b86..27b61a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -841,6 +841,14 @@ eslint-plugin-react-refresh@^0.4.13: resolved "https://registry.yarnpkg.com/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.14.tgz#e3c611ead69bbf7436d01295c853d4abb8c59f68" integrity sha512-aXvzCTK7ZBv1e7fahFuR3Z/fyQQSIQ711yPgYRj+Oj64tyTgO4iQIDmYXDBqvSWQ/FA4OSCsXOStlF+noU0/NA== +eslint-plugin-tailwindcss@^3.17.5: + version "3.17.5" + resolved "https://registry.yarnpkg.com/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.17.5.tgz#6bf9403e77a5f3f930fb3444a3e22b29cd0fee07" + integrity sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow== + dependencies: + fast-glob "^3.2.5" + postcss "^8.4.4" + eslint-scope@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.1.0.tgz#70214a174d4cbffbc3e8a26911d8bf51b9ae9d30" @@ -938,7 +946,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-glob@^3.3.0, fast-glob@^3.3.2: +fast-glob@^3.2.5, fast-glob@^3.3.0, fast-glob@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129" integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow== @@ -1437,7 +1445,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== -postcss@^8.4.23, postcss@^8.4.43, postcss@^8.4.47: +postcss@^8.4.23, postcss@^8.4.4, postcss@^8.4.43, postcss@^8.4.47: version "8.4.47" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==