69 |
}>
73 |
31 |
52 |
53 | )
54 | }
55 |
56 | export default Model
--------------------------------------------------------------------------------
/src/components/pages/Contact.jsx:
--------------------------------------------------------------------------------
1 |
2 | import React, { useRef, useState } from 'react'
3 | import { Typography, Card, CardContent } from '@material-ui/core'
4 | import useStyles from '../styles'
5 | import { motion } from "framer-motion"
6 | import { Button, Grid, TextField } from '@material-ui/core'
7 | import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form'
8 | import emailjs from '@emailjs/browser'
9 |
10 |
11 | const FormInput = ({ name, label, required, value, onChange }) => {
12 | const { control } = useFormContext()
13 | return (
14 |
68 |
69 |
70 |
75 |
76 |
77 | Contactez-moi
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
141 |
142 |
143 |
144 |
145 | )
146 | }
147 |
148 | export default Contact
--------------------------------------------------------------------------------
/src/components/pages/Home.jsx:
--------------------------------------------------------------------------------
1 | import { Typography, Card, CardContent, Link } from '@material-ui/core'
2 | import useStyles from '../styles'
3 | import { motion } from "framer-motion"
4 |
5 |
6 | const Home = () => {
7 | const classes = useStyles()
8 |
9 | return (
10 |
11 |
12 |
13 |
18 |
19 |
20 | Bonjour, je suis développeur front-end à Grenoble
21 |
22 |
23 |
24 | Bienvenue sur mon portfolio!
25 |
26 |
27 |
28 |
29 |
30 |
35 |
36 |
37 | James Hall
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | )
52 | }
53 |
54 | export default Home
--------------------------------------------------------------------------------
/src/components/pages/Maze.jsx:
--------------------------------------------------------------------------------
1 | import { Typography, Card, CardContent, Grid, Link } from '@material-ui/core'
2 | import useStyles from '../styles'
3 | import { motion } from "framer-motion"
4 |
5 |
6 |
7 | const Maze = () => {
8 | const classes = useStyles()
9 |
10 | return (
11 |
12 |
13 |
14 |
19 |
20 |
21 | Maze Solver
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
34 |
35 |
36 |
37 | Un site fait avec React qui permet de visualiser deux algorithmes: un
38 | algorithme de division récursive afin de générer un labyrinthe,
39 | et l'algorithme A*, qui permet de le résoudre en trouvant le chemin de plus court.
40 |
41 |
42 |
43 |
44 |
45 |
46 |
51 |
57 |
58 |
59 | )
60 | }
61 |
62 | export default Maze
--------------------------------------------------------------------------------
/src/components/pages/Sushi.jsx:
--------------------------------------------------------------------------------
1 | import { Typography, Card, CardContent, Grid, Link } from '@material-ui/core'
2 | import useStyles from '../styles'
3 | import { motion } from "framer-motion"
4 |
5 |
6 | const Sushi = () => {
7 | const classes = useStyles()
8 |
9 | return (
10 | <>
11 | 36 |
52 |
53 | Visiter
54 |
55 |
56 |
12 |
13 |
14 |
15 |
20 |
21 |
22 | Sushi Shop
23 |
24 |
25 |
26 |
27 |
28 |
29 |
34 |
35 |
36 |
37 |
38 | Un site d'e-commmerce qui présente les produits en 3D et utilise l'API de commerce.js pour traîter les commandes.
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | React
47 |
48 |
49 |
50 |
51 |
52 |
53 | three.js
54 |
55 |
56 |
57 |
58 |
59 |
60 | MUI
61 |
62 |
63 |
64 |
65 | 
66 |
67 | Stripe
68 |
69 |
70 |
71 |
72 | 
73 |
74 | commerce
75 |
76 |
77 |
78 |
79 | 
80 |
81 | Vercel
82 |
83 |
84 |
85 |
86 |
87 |
88 |
93 |
99 |
100 |
101 |
102 | )
103 | }
104 |
105 |
106 | export default Sushi
--------------------------------------------------------------------------------
/src/components/shaders/BoxContent.jsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import { useTexture } from '@react-three/drei'
3 |
4 |
5 | const BoxContent = ({ face, faceName, nodes, screen }) => {
6 | const texture = useTexture(`BackedFace${face}.jpg`)
7 | const screenTexture = useTexture(`Screen.jpg`)
8 |
9 | texture.flipY = false
10 |
11 | const vertexShader = `
12 | out vec3 worldPosition;
13 | varying vec2 vUv;
14 | void main()
15 | {
16 | worldPosition = vec3(modelMatrix * vec4(position, 1.0));
17 | vec4 modelPosition = modelMatrix * vec4(position, 1.0);
18 | vec4 viewPosition = viewMatrix * modelPosition;
19 | vec4 projectedPosition = projectionMatrix * viewPosition;
20 | gl_Position = projectedPosition;
21 | vUv = uv;
22 | }`
23 | const fragmentShader = `
24 | in vec3 worldPosition;
25 | uniform sampler2D uTexture;
26 | varying vec2 vUv;
27 | uniform int face;
28 | const vec2 corners[4] = vec2[](vec2(0.5, 0.5), vec2(-0.5, 0.5), vec2(-0.5, -0.5), vec2(0.5, -0.5));
29 | bool order(vec2 A, vec2 B, vec2 C) {
30 | return (C.y-A.y) * (B.x-A.x) > (B.y-A.y) * (C.x-A.x);
31 | }
32 | bool intersect(vec2 A, vec2 B, vec2 C, vec2 D) {
33 | return order(A,C,D) != order(B,C,D) && order(A,B,C) != order(A,B,D);
34 | }
35 | void main() {
36 | vec2 a = worldPosition.xz;
37 | vec2 b = cameraPosition.xz;
38 | vec2 aa ;
39 | vec2 bb ;
40 | if (bool(mod(float(face),2.0))){
41 | aa = worldPosition.xy;
42 | bb = cameraPosition.xy;
43 | }
44 | else{
45 | aa = worldPosition.yz;
46 | bb = cameraPosition.yz;
47 | }
48 | int next = int(mod(float(face + 1), 4.0));
49 | vec2 c = corners[face];
50 | vec2 d = corners[next];
51 | if (!(intersect(a, b, c, d) && intersect(aa, bb, c, d))) {
52 | discard;
53 | }
54 | vec4 textureColor = texture2D(uTexture, vUv);
55 | gl_FragColor = textureColor;
56 | }`
57 |
58 | const data = useMemo(
59 | () => ({
60 | uniforms: {
61 | face: { value: face },
62 | uTexture: { value: screen ? screenTexture : texture }
63 | },
64 | fragmentShader,
65 | vertexShader
66 | }),
67 | [face, fragmentShader, vertexShader, texture, screen, screenTexture]
68 | )
69 |
70 | if (screen) {
71 | return (
66 |
73 |
80 |
94 |
95 | Visiter
96 |
97 |
98 |