WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit f703846

Browse files
teimurjanteimurjan
committed
Replace image with 3d model
1 parent 9c56344 commit f703846

File tree

15 files changed

+4604
-3862
lines changed

15 files changed

+4604
-3862
lines changed

‎.node-version‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.14.0

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@
4040
"start-server-and-test": "^1.14.0",
4141
"typescript": "^4.4.4"
4242
},
43+
"resolutions": {
44+
"graphql": "^15.8.0"
45+
},
4346
"workspaces": [
4447
"workspaces/*"
4548
]

‎workspaces/landing/package.json‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"gatsby"
99
],
1010
"scripts": {
11-
"develop": "gatsby develop",
12-
"start": "gatsby develop",
11+
"develop": "gatsby develop -p 2525",
12+
"start": "gatsby develop -p 2525",
1313
"build": "gatsby build",
1414
"serve": "gatsby serve",
1515
"clean": "gatsby clean",
@@ -22,39 +22,42 @@
2222
"@mdx-js/react": "^1.6.22",
2323
"@popperjs/core": "^2.10.2",
2424
"@react-css/flex": "^1.5.0",
25+
"@react-three/drei": "^9.34.0",
26+
"@react-three/fiber": "^8.8.9",
2527
"@teimurjan/gql-types": "1.0.0",
2628
"@teimurjan/resume": "1.0.0",
2729
"@teimurjan/utils": "1.0.0",
2830
"assert": "^2.0.0",
2931
"browserify-zlib": "^0.2.0",
30-
"gatsby": "^3.14.2",
31-
"gatsby-plugin-emotion": "^6.14.0",
32-
"gatsby-plugin-google-analytics": "^3.14.0",
32+
"gatsby": "^4.24.0",
33+
"gatsby-plugin-emotion": "^7.24.0",
34+
"gatsby-plugin-google-analytics": "^4.24.0",
3335
"gatsby-plugin-google-fonts": "^1.0.1",
34-
"gatsby-plugin-image": "^1.14.1",
35-
"gatsby-plugin-manifest": "^3.14.0",
36-
"gatsby-plugin-mdx": "^2.14.0",
37-
"gatsby-plugin-react-helmet": "^4.14.0",
38-
"gatsby-plugin-sharp": "^3.14.1",
39-
"gatsby-plugin-sitemap": "^4.10.0",
36+
"gatsby-plugin-image": "^2.24.0",
37+
"gatsby-plugin-manifest": "^4.24.0",
38+
"gatsby-plugin-mdx": "^4.3.0",
39+
"gatsby-plugin-react-helmet": "^5.24.0",
40+
"gatsby-plugin-sharp": "^4.24.0",
41+
"gatsby-plugin-sitemap": "^5.24.0",
4042
"gatsby-plugin-smoothscroll": "^1.2.0",
41-
"gatsby-plugin-typescript": "^3.14.0",
42-
"gatsby-source-filesystem": "^3.14.0",
43-
"gatsby-source-graphql": "^3.14.0",
44-
"gatsby-transformer-remark": "^4.11.0",
45-
"gatsby-transformer-sharp": "^3.14.0",
46-
"graphql": "^15.6.1",
43+
"gatsby-plugin-typescript": "^4.24.0",
44+
"gatsby-source-filesystem": "^4.24.0",
45+
"gatsby-source-graphql": "^4.24.0",
46+
"gatsby-transformer-remark": "^5.24.0",
47+
"gatsby-transformer-sharp": "^4.24.0",
48+
"graphql": "^15.8.0",
4749
"path-browserify": "^1.0.1",
4850
"process": "^0.11.10",
4951
"rc-tooltip": "^5.1.1",
50-
"react": "^17.0.1",
51-
"react-dom": "^17.0.1",
52+
"react": "^18.2.0",
53+
"react-dom": "^18.2.0",
5254
"react-helmet": "^6.1.0",
53-
"react-pdf-html": "^1.1.4",
55+
"react-pdf-html": "^1.1.10",
5456
"react-popper": "^2.2.5",
5557
"react-transition-group": "^4.4.2",
5658
"stream-browserify": "^3.0.0",
5759
"swiper": "^7.0.8",
60+
"three": "^0.145.0",
5861
"util": "^0.12.4"
5962
},
6063
"devDependencies": {
@@ -63,6 +66,7 @@
6366
"@babel/preset-typescript": "^7.15.0",
6467
"@babel/register": "^7.15.3",
6568
"@types/react-helmet": "^6.1.4",
66-
"@types/react-transition-group": "^4.4.4"
69+
"@types/react-transition-group": "^4.4.4",
70+
"@types/three": "^0.144.0"
6771
}
6872
}

‎workspaces/landing/src/assets/images/me.png‎

-2.39 MB
Binary file not shown.

‎workspaces/landing/src/components/atoms/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ export { default as ScrollToArea } from './scroll-to-area'
2626
export type { Props as ScrollToAreaProps } from './scroll-to-area'
2727
export { default as Tag } from './tag'
2828
export type { Props as TagProps } from './tag'
29+
export { default as Persona } from './persona'
30+
export type { Props as PersonaProps } from './persona'

‎workspaces/landing/src/components/atoms/persona/Persona.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
2+
/*
3+
Auto-generated by: https://github.com/pmndrs/gltfjsx
4+
*/
5+
6+
import { useRef } from 'react'
7+
import { useGLTF } from '@react-three/drei'
8+
import { useEffect } from 'react'
9+
import * as THREE from 'three'
10+
import { GroupProps, useFrame } from '@react-three/fiber'
11+
12+
export type { GroupProps as Props }
13+
14+
const Persona = (props: GroupProps) => {
15+
const group = useRef<THREE.Group>(null)
16+
const mixer = useRef<THREE.AnimationMixer>()
17+
const { nodes, materials, animations } = useGLTF('/dancing.glb')
18+
19+
useEffect(() => {
20+
if (group.current && animations.length) {
21+
mixer.current = new THREE.AnimationMixer(group.current)
22+
animations.forEach((clip) => {
23+
const action = mixer.current?.clipAction?.(clip)
24+
action?.play?.()
25+
})
26+
}
27+
})
28+
29+
useFrame((_state, delta) => {
30+
mixer.current?.update?.(delta)
31+
})
32+
33+
return (
34+
<group ref={group} {...props} dispose={null}>
35+
<group name="Scene">
36+
<group name="Armature">
37+
<primitive object={nodes.Hips} />
38+
<skinnedMesh
39+
name="Wolf3D_Body"
40+
// @ts-ignore
41+
geometry={nodes.Wolf3D_Body.geometry}
42+
material={materials.Wolf3D_Body}
43+
// @ts-ignore
44+
skeleton={nodes.Wolf3D_Body.skeleton}
45+
/>
46+
<skinnedMesh
47+
name="Wolf3D_Glasses"
48+
// @ts-ignore
49+
geometry={nodes.Wolf3D_Glasses.geometry}
50+
material={materials.Wolf3D_Glasses}
51+
// @ts-ignore
52+
skeleton={nodes.Wolf3D_Glasses.skeleton}
53+
/>
54+
<skinnedMesh
55+
name="Wolf3D_Hair"
56+
// @ts-ignore
57+
geometry={nodes.Wolf3D_Hair.geometry}
58+
material={materials.Wolf3D_Hair}
59+
// @ts-ignore
60+
skeleton={nodes.Wolf3D_Hair.skeleton}
61+
/>
62+
<skinnedMesh
63+
name="Wolf3D_Outfit_Bottom"
64+
// @ts-ignore
65+
geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
66+
material={materials.Wolf3D_Outfit_Bottom}
67+
// @ts-ignore
68+
skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
69+
/>
70+
<skinnedMesh
71+
name="Wolf3D_Outfit_Footwear"
72+
// @ts-ignore
73+
geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
74+
material={materials.Wolf3D_Outfit_Footwear}
75+
// @ts-ignore
76+
skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
77+
/>
78+
<skinnedMesh
79+
name="Wolf3D_Outfit_Top"
80+
// @ts-ignore
81+
geometry={nodes.Wolf3D_Outfit_Top.geometry}
82+
material={materials.Wolf3D_Outfit_Top}
83+
// @ts-ignore
84+
skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
85+
/>
86+
<skinnedMesh
87+
name="EyeLeft"
88+
// @ts-ignore
89+
geometry={nodes.EyeLeft.geometry}
90+
material={materials.Wolf3D_Eye}
91+
// @ts-ignore
92+
skeleton={nodes.EyeLeft.skeleton}
93+
// @ts-ignore
94+
morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
95+
// @ts-ignore
96+
morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
97+
/>
98+
<skinnedMesh
99+
name="EyeRight"
100+
// @ts-ignore
101+
geometry={nodes.EyeRight.geometry}
102+
material={materials.Wolf3D_Eye}
103+
// @ts-ignore
104+
skeleton={nodes.EyeRight.skeleton}
105+
// @ts-ignore
106+
morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
107+
// @ts-ignore
108+
morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
109+
/>
110+
<skinnedMesh
111+
name="Wolf3D_Head"
112+
// @ts-ignore
113+
geometry={nodes.Wolf3D_Head.geometry}
114+
material={materials.Wolf3D_Skin}
115+
// @ts-ignore
116+
skeleton={nodes.Wolf3D_Head.skeleton}
117+
// @ts-ignore
118+
morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
119+
// @ts-ignore
120+
morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
121+
/>
122+
<skinnedMesh
123+
name="Wolf3D_Teeth"
124+
// @ts-ignore
125+
geometry={nodes.Wolf3D_Teeth.geometry}
126+
material={materials.Wolf3D_Teeth}
127+
// @ts-ignore
128+
skeleton={nodes.Wolf3D_Teeth.skeleton}
129+
// @ts-ignore
130+
morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
131+
// @ts-ignore
132+
morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
133+
/>
134+
</group>
135+
</group>
136+
</group>
137+
)
138+
}
139+
140+
useGLTF.preload('/dancing.glb')
141+
142+
export default Persona

‎workspaces/landing/src/components/atoms/persona/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export { default } from './Persona'
2+
export type { Props } from './Persona'

‎workspaces/landing/src/components/organisms/index-banner/IndexBanner.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { StaticImage } from 'gatsby-plugin-image'
21
import { css, keyframes } from '@emotion/react'
3-
import { Fragment } from 'react'
2+
import { Fragment, Suspense } from 'react'
43
import { graphql, useStaticQuery } from 'gatsby'
4+
import { PerspectiveCamera } from '@react-three/drei'
5+
import { Canvas } from '@react-three/fiber'
56
import { IndexBannerQuery } from '@teimurjan/gql-types'
67
import Resume, { PDFDownloadLink } from '@teimurjan/resume'
78
import { theme } from '@teimurjan/utils'
89
import { Banner } from '../../molecules'
9-
import { Button, Square } from '../../atoms'
10+
import { Button, Persona, Square } from '../../atoms'
1011
import { useLazyInitialization } from '../../../hooks'
1112

1213
const roll = (rotation: number) => keyframes`
@@ -122,19 +123,20 @@ const IndexBanner = () => {
122123
}
123124
image={
124125
<Fragment>
125-
<StaticImage
126-
css={css`
127-
img {
128-
max-height: 100%;
129-
width: auto;
130-
}
131-
`}
132-
src="../../../assets/images/me.png"
133-
alt="profile"
134-
placeholder="tracedSVG"
135-
tracedSVGOptions={{ color: '#05386b' }}
136-
layout="fullWidth"
137-
/>
126+
<Canvas
127+
style={{
128+
height: 600,
129+
width: '100%',
130+
}}
131+
>
132+
<ambientLight intensity={1.25} />
133+
<ambientLight intensity={0.1} />
134+
<directionalLight intensity={0.4} />
135+
<PerspectiveCamera makeDefault fov={40} position={[0, 1, 3]} />
136+
<Suspense fallback={null}>
137+
<Persona />
138+
</Suspense>
139+
</Canvas>
138140
<Square
139141
size="100%"
140142
color="blue"

‎workspaces/landing/static/dancing.glb‎

5.75 MB
Binary file not shown.

‎workspaces/landing/static/standing.glb‎

5.81 MB
Binary file not shown.

0 commit comments

Comments
 (0)