Skip to content

Commit 1e08709

Browse files
IntermentalityIntermentality
committed
React19 Update
1 parent d24e2cb commit 1e08709

25 files changed

+266
-89
lines changed

‎eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<!DOCTYPE html>
2-
<!-- Pretty much based off of 0b5vr.github.io -->
32
<html lang="en">
43
<head>
54
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
75
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
86
<title>Intermentality</title>
97
</head>

‎package.json‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,41 @@
22
"name": "intermentality.github.io",
33
"version": "0.0.0",
44
"license": "MIT",
5+
"type": "module",
56
"homepage": "https://intermentality.github.io",
67
"scripts": {
78
"dev": "vite",
8-
"build": "tsc && vite build",
9-
"preview": "vite preview",
10-
"resize-toolbox-images": "node ./bin/resize-toolbox-images.mjs"
9+
"build": "tsc -b && vite build",
10+
"lint": "eslint .",
11+
"preview": "vite preview"
1112
},
1213
"dependencies": {
13-
"@types/node": "^22.10.1",
14-
"react": "^17.0.2",
15-
"react-dom": "^17.0.2",
16-
"react-router-dom": "^6.27.0",
17-
"shadertoy-react": "^1.1.2"
14+
"react": "^19.0.0",
15+
"react-dom": "^19.0.0",
16+
"react-router-dom": "^7.0.2"
1817
},
1918
"devDependencies": {
20-
"@monaco-editor/react": "^4.3.1",
21-
"@types/react": "^17.0.33",
22-
"@types/react-dom": "^17.0.10",
23-
"@vitejs/plugin-react": "^1.0.7",
24-
"autoprefixer": "^10.4.2",
25-
"es-module-shims": "^1.4.5",
26-
"monaco-editor": "0.32.1",
27-
"postcss": "^8.4.5",
28-
"sharp": "^0.33.5",
29-
"tailwindcss": "^3.0.15",
30-
"typescript": "^4.4.4",
31-
"vite": "^6.0.3"
19+
"@eslint/js": "^9.17.0",
20+
"@react-three/drei": "^9.120.4",
21+
"@react-three/fiber": "^9.0.0-rc.1",
22+
"@types/node": "^22.10.2",
23+
"@types/react": "^19.0.1",
24+
"@types/react-dom": "^19.0.2",
25+
"@types/three": "^0.171.0",
26+
"@vitejs/plugin-react": "^4.3.4",
27+
"autoprefixer": "^10.4.20",
28+
"eslint": "^9.17.0",
29+
"eslint-plugin-react-hooks": "^5.0.0",
30+
"eslint-plugin-react-refresh": "^0.4.16",
31+
"globals": "^15.13.0",
32+
"path": "^0.12.7",
33+
"postcss": "^8.4.49",
34+
"tailwindcss": "^3.4.16",
35+
"three": "^0.171.0",
36+
"typescript": "~5.6.2",
37+
"typescript-eslint": "^8.18.1",
38+
"vite": "^6.0.3",
39+
"vite-plugin-glsl": "^1.3.1"
3240
},
3341
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
3442
}

postcss.config.js renamed to postcss.config.cjs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
module.exports = {
2-
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
5-
},
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
66
}

‎src/Components/Background/index.tsx‎

Lines changed: 74 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,74 @@
1-
//@ts-ignore
2-
import ShadertoyReact from "shadertoy-react";
3-
//Above is like only JS, but it works with react.
4-
//@ts-check
5-
6-
const fragmentShader = `
7-
void main(void) {
8-
vec2 uv = gl_FragCoord.xy/iResolution.xy;
9-
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
10-
gl_FragColor = vec4(col*0.25 ,1.0);
11-
}
12-
`;
13-
14-
export function Background(): JSX.Element {
15-
return <>
16-
<div className="-z-1 fixed top-0 left-0 w-full h-full">
17-
<ShadertoyReact fs={fragmentShader} />
18-
</div>
19-
</>;
20-
}
1+
import { useMemo } from 'react'
2+
import { Canvas, useFrame, useThree } from '@react-three/fiber'
3+
import { shaderMaterial } from '@react-three/drei'
4+
import * as THREE from 'three'
5+
6+
// Custom shader material
7+
const BackgroundMaterial = shaderMaterial(
8+
{
9+
iTime: 0,
10+
iResolution: new THREE.Vector2(),
11+
},
12+
/* glsl vertex */ `
13+
varying vec2 vUv;
14+
void main()
15+
{
16+
vUv = uv;
17+
18+
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
19+
gl_Position = projectionMatrix * mvPosition;
20+
}
21+
`,
22+
/* glsl frag */ `
23+
uniform vec3 iResolution; // viewport resolution (in pixels)
24+
uniform float iTime; // shader playback time (in seconds)
25+
varying vec2 vUv;
26+
27+
void main(){
28+
vec2 uv = vUv;
29+
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
30+
gl_FragColor = vec4(col * 0.25,1.0);
31+
}
32+
`
33+
)
34+
35+
function Scene() {
36+
const size = useThree((s) => s.size)
37+
const viewport = useThree((s) => s.viewport)
38+
39+
const backgroundMaterial = useMemo(() => {
40+
return new BackgroundMaterial()
41+
}, [])
42+
43+
useFrame((state) => {
44+
backgroundMaterial.uniforms.iTime.value = state.clock.elapsedTime
45+
})
46+
47+
const scale = Math.max(viewport.width, viewport.height) / 2
48+
49+
return (
50+
<mesh scale={[scale, scale, 1]}>
51+
<planeGeometry args={[2, 2]} />
52+
<primitive
53+
object={backgroundMaterial}
54+
iResolution={[size.width * viewport.dpr, size.height * viewport.dpr]}
55+
/>
56+
</mesh>
57+
)
58+
}
59+
60+
export default function Background() {
61+
return (
62+
<div className="-z-1 fixed top-0 left-0 w-full h-full">
63+
<Canvas
64+
gl={{
65+
antialias: true,
66+
powerPreference: 'high-performance',
67+
outputColorSpace: THREE.SRGBColorSpace,
68+
toneMapping: THREE.NoToneMapping
69+
}}>
70+
<Scene />
71+
</Canvas>
72+
</div>
73+
)
74+
}

‎src/Components/Link.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export const LinkNewWindow: React.FC<{
2+
children: React.ReactNode;
23
href: string;
34
noColorChange?: boolean;
45
}> = ( { children, href, noColorChange } ) => (

‎src/Components/Paragraph.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ interface Props {
22
children?: React.ReactNode;
33
}
44

5-
export function Paragraph( { children }: Props ): JSX.Element {
5+
export function Paragraph( { children }: Props ){
66
return <p className="my-2">{ children }</p>;
77
}

‎src/Pages/Home.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default function Home(){
2020
<h2 className="text-2xl">Websites</h2>
2121
<ul className="list-disc">
2222
<li><Link to="/proj-einty-iweb" className='text-sky-300'>EINTY-IWeb</Link></li>
23+
<li><Link to="/proj-novainorion" className='text-sky-300'>NIO-IWeb</Link></li>
2324
<li><Link to="/proj-portfolio" className='text-sky-300'>Portfolio Log</Link></li>
2425
</ul>
2526

‎src/Pages/Projects.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { LinkNewWindow } from '../Components/Link';
21
import { Link } from 'react-router-dom';
32
import { Paragraph } from '../Components/Paragraph';
43

@@ -18,6 +17,7 @@ export default function Projects(){
1817
<h2 className="text-2xl">Websites</h2>
1918
<ul className="list-disc">
2019
<li><Link to="/proj-einty-iweb" className='text-sky-300'>EINTY-IWeb</Link></li>
20+
<li><Link to="/proj-novainorion" className='text-sky-300'>NIO-IWeb</Link></li>
2121
<li><Link to="/proj-portfolio" className='text-sky-300'>Portfolio Log</Link></li>
2222
</ul>
2323
</article>

‎src/Pages/ProjectsPage/NovaInOrion-IWeb.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { LinkNewWindow } from "../../Components/Link";
2+
import { Paragraph } from "../../Components/Paragraph";
3+
4+
export default function NovaInOrion_IWeb(){
5+
return <div className="relative grid place-items-center">
6+
<article className="my-4 p-2 w-full max-w-sm md:max-w-2xl">
7+
<h1 className="text-4xl">NovaInOrion2019 Interactive Website</h1>
8+
<Paragraph>Website I made for Astronomy with React18 Vite.</Paragraph>
9+
<LinkNewWindow href="https://intermentality.github.io/NovaInOrion-IWEB/">Website.</LinkNewWindow>
10+
<br/>
11+
<LinkNewWindow href="https://github.com/Intermentality/NovaInOrion-IWEB">Github Repo.</LinkNewWindow>
12+
</article>
13+
</div>
14+
}

0 commit comments

Comments
 (0)