Skip to content

Commit f9f9d50

Browse files
ThantHtetAung101lwinmoepaing
ThantHtetAung101
and
lwinmoepaing
authored
🔥 build(profile): add thanthetaung profile (#160)
Co-authored-by: Lwin Moe Paing <49163775+lwinmoepaing@users.noreply.github.com>
1 parent 80b2abe commit f9f9d50

10 files changed

Lines changed: 445 additions & 1 deletion

File tree

‎content/profile/thanthtetaung.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
name: Thant Htet Aung
3+
description: I'm a creator more of a developer. Creating something out of nothing is something only God can do!
4+
image: "https://avatars.githubusercontent.com/u/114596700?v=4"
5+
tags:
6+
- Fullstack
7+
- Backend
8+
- Laravel
9+
- JavaScripts
10+
- ReactJS
11+
- Vue
12+
- Bun
13+
---
14+
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
15+
import App from '@/components/Contributors/Thant/App.jsx';
16+
17+
<App />

‎package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@
2727
}
2828
},
2929
"dependencies": {
30+
"@react-three/drei": "^9.88.7",
31+
"@react-three/fiber": "^8.15.8",
32+
"@react-three/postprocessing": "^2.15.8",
33+
"@types/three": "^0.158.0",
3034
"@formkit/auto-animate": "^0.8.0",
3135
"@splinetool/react-spline": "^2.2.6",
3236
"@splinetool/runtime": "^0.9.488",
@@ -51,8 +55,9 @@
5155
"remark-gfm": "^4.0.0",
5256
"sass": "^1.69.4",
5357
"shiki": "^0.14.5",
58+
"suspend-react": "^0.1.3",
5459
"tailwind-merge": "^1.14.0",
55-
"three": "^0.157.0",
60+
"three": "^0.158.0",
5661
"typed.js": "^2.0.16"
5762
},
5863
"devDependencies": {

‎src/components/Contributors/Thant/3d-components/Sphere.jsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import React, { useEffect, useMemo, useRef } from 'react'
2+
import fragmentShader from './fragmentShader.js'
3+
import vertexShader from './vertexShader.js'
4+
import { useFrame } from '@react-three/fiber'
5+
import { MathUtils } from 'three'
6+
import * as THREE from 'three'
7+
8+
const Sphere = ({ sound }) => {
9+
const mesh = useRef()
10+
const analyser = useRef();
11+
useEffect(
12+
() => void (analyser.current = new THREE.AudioAnalyser(sound.current, 32)),
13+
[]
14+
);
15+
const uniforms = useMemo(() => {
16+
return {
17+
u_time: { value: 0 },
18+
u_intensity: { value: 3 }
19+
}
20+
})
21+
useFrame((state, delta) => {
22+
const { clock } = state;
23+
if (mesh.current) {
24+
mesh.current.material.uniforms.u_time.value = 0.4 * clock.getElapsedTime();
25+
mesh.current.material.uniforms.u_intensity.value = MathUtils.lerp(mesh.current.material.uniforms.u_intensity.value, 0.15, 0.02);
26+
}
27+
if (analyser.current) {
28+
const data = analyser.current.getAverageFrequency();
29+
mesh.current.scale.x = mesh.current.scale.y = mesh.current.scale.z =
30+
(data / 100) * 2;
31+
uniforms.u_intensity.value = (data / 100) * 2
32+
}
33+
mesh.current.rotation.x += 0.005 * delta;
34+
mesh.current.rotation.y += 0.005 * delta;
35+
})
36+
37+
38+
return (
39+
<mesh ref={mesh} scale={3}
40+
position={[0, 0, 0]}>
41+
<icosahedronGeometry args={[2, 20]} />
42+
<shaderMaterial fragmentShader={fragmentShader} vertexShader={vertexShader} uniforms={uniforms} />
43+
</mesh>
44+
)
45+
}
46+
47+
48+
49+
export default Sphere

‎src/components/Contributors/Thant/3d-components/fragmentShader.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const fragmentShader = `
2+
uniform float u_intensity;
3+
uniform float u_time;
4+
5+
varying vec2 vUv;
6+
varying float vDisplacement;
7+
8+
void main() {
9+
float distort = 2.0 * vDisplacement * u_intensity * sin(vUv.y * 10.0 + u_time);
10+
vec3 color = vec3(abs(vUv - 0.5) * 2.0 * (1.0 - distort), 1.0);
11+
gl_FragColor = vec4(color, 1.0);
12+
}
13+
14+
`;
15+
16+
export default fragmentShader;

‎src/components/Contributors/Thant/3d-components/vertexShader.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
const vertexShader = `
2+
uniform float u_intensity;
3+
uniform float u_time;
4+
5+
varying vec2 vUv;
6+
varying float vDisplacement;
7+
8+
// Classic Perlin 3D Noise
9+
// by Stefan Gustavson
10+
//
11+
vec4 permute(vec4 x) {
12+
return mod(((x*34.0)+1.0)*x, 289.0);
13+
}
14+
15+
vec4 taylorInvSqrt(vec4 r) {
16+
return 1.79284291400159 - 0.85373472095314 * r;
17+
}
18+
19+
vec3 fade(vec3 t) {
20+
return t*t*t*(t*(t*6.0-15.0)+10.0);
21+
}
22+
23+
float cnoise(vec3 P) {
24+
vec3 Pi0 = floor(P); // Integer part for indexing
25+
vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
26+
Pi0 = mod(Pi0, 289.0);
27+
Pi1 = mod(Pi1, 289.0);
28+
vec3 Pf0 = fract(P); // Fractional part for interpolation
29+
vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
30+
vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
31+
vec4 iy = vec4(Pi0.yy, Pi1.yy);
32+
vec4 iz0 = Pi0.zzzz;
33+
vec4 iz1 = Pi1.zzzz;
34+
35+
vec4 ixy = permute(permute(ix) + iy);
36+
vec4 ixy0 = permute(ixy + iz0);
37+
vec4 ixy1 = permute(ixy + iz1);
38+
39+
vec4 gx0 = ixy0 / 7.0;
40+
vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
41+
gx0 = fract(gx0);
42+
vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
43+
vec4 sz0 = step(gz0, vec4(0.0));
44+
gx0 -= sz0 * (step(0.0, gx0) - 0.5);
45+
gy0 -= sz0 * (step(0.0, gy0) - 0.5);
46+
47+
vec4 gx1 = ixy1 / 7.0;
48+
vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
49+
gx1 = fract(gx1);
50+
vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
51+
vec4 sz1 = step(gz1, vec4(0.0));
52+
gx1 -= sz1 * (step(0.0, gx1) - 0.5);
53+
gy1 -= sz1 * (step(0.0, gy1) - 0.5);
54+
55+
vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
56+
vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
57+
vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
58+
vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
59+
vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
60+
vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
61+
vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
62+
vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
63+
64+
vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
65+
g000 *= norm0.x;
66+
g010 *= norm0.y;
67+
g100 *= norm0.z;
68+
g110 *= norm0.w;
69+
vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
70+
g001 *= norm1.x;
71+
g011 *= norm1.y;
72+
g101 *= norm1.z;
73+
g111 *= norm1.w;
74+
75+
float n000 = dot(g000, Pf0);
76+
float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
77+
float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
78+
float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
79+
float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
80+
float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
81+
float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
82+
float n111 = dot(g111, Pf1);
83+
84+
vec3 fade_xyz = fade(Pf0);
85+
vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
86+
vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
87+
float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
88+
return 2.2 * n_xyz;
89+
}
90+
91+
// End of Perlin Noise Code
92+
93+
94+
void main() {
95+
vUv = uv;
96+
97+
vDisplacement = cnoise(position + vec3(2.0 * u_time));
98+
99+
vec3 newPosition = position + normal * (u_intensity * vDisplacement);
100+
101+
vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);
102+
vec4 viewPosition = viewMatrix * modelPosition;
103+
vec4 projectedPosition = projectionMatrix * viewPosition;
104+
105+
gl_Position = projectedPosition;
106+
}
107+
`;
108+
109+
export default vertexShader;

‎src/components/Contributors/Thant/App.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { useEffect, useState } from 'react'
2+
import VN from './VN'
3+
import Visualizer from './Visualizer'
4+
5+
const App = () => {
6+
const [isClicked, setClick] = useState(false)
7+
const [audioTime, setAudioTime] = useState(0)
8+
return (
9+
<>
10+
{
11+
isClicked ? <Visualizer audioTime={audioTime} /> : <VN setClick={setClick} setAudioTime={setAudioTime} />
12+
}
13+
</>
14+
)
15+
}
16+
17+
export default App

‎src/components/Contributors/Thant/VN.jsx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { useEffect, useState } from 'react'
2+
import dialogArray from './choices.json'
3+
4+
const VN = ({ setClick, setAudioTime }) => {
5+
const start = () => {
6+
document.getElementById('start').classList.add('hidden')
7+
document.getElementById('vn').classList.remove('hidden')
8+
let audio = new Audio('https://drive.google.com/uc?id=1vDo02iqo8lOEUhVouXh5FZNOXZh3FzM9')
9+
audio.preload = 'auto'
10+
audio.volume = 0.5
11+
audio.addEventListener("canplay", () => {
12+
audio.play();
13+
});
14+
audio.load();
15+
song = audio
16+
}
17+
let song = null
18+
let oneClicked = false;
19+
let twoClicked = false;
20+
let data = []
21+
const nextDialog = () => {
22+
if (data.length == 0) {
23+
return;
24+
}
25+
if (data[1] && typeof data[1] != 'string') {
26+
if (!data[1].dialog) {
27+
choiceBox.classList.toggle('hidden')
28+
console.log(data);
29+
questionOne.innerHTML = data[1].question1
30+
questionTwo.innerHTML = data[1].question2
31+
questionOne.addEventListener('click', e => {
32+
if (!oneClicked) {
33+
choiceBox.classList.toggle('hidden')
34+
sprite.src = data[2].answer1.image
35+
let typewriter = new Typewriter(dialog, {
36+
delay: 50
37+
})
38+
typewriter.typeString(data[2].answer1.dialog).start()
39+
data = data.slice(3)
40+
oneClicked = true;
41+
}
42+
})
43+
questionTwo.addEventListener('click', e => {
44+
if (!twoClicked) {
45+
choiceBox.classList.toggle('hidden')
46+
sprite.src = data[2].answer2.image
47+
let typewriter = new Typewriter(dialog, {
48+
delay: 50
49+
})
50+
typewriter.typeString(data[2].answer2.dialog).start()
51+
data = data.slice(3)
52+
twoClicked = true;
53+
}
54+
})
55+
} else {
56+
let typewriter = new Typewriter(dialog, {
57+
delay: 50
58+
})
59+
typewriter.typeString(data[0].dialog).start()
60+
sprite.src = data[0].image
61+
oneClicked = false
62+
twoClicked = false
63+
data = data.slice(1)
64+
}
65+
} else {
66+
if (data[0] == 'done') {
67+
song.volume = 0.3
68+
setTimeout(() => {
69+
song.volume = 0
70+
}, 1000);
71+
setClick(true)
72+
setAudioTime(song.currentTime)
73+
}
74+
let typewriter = new Typewriter(dialog, {
75+
delay: 50
76+
})
77+
typewriter.typeString(data[0].dialog).start()
78+
sprite.src = data[0].image
79+
oneClicked = false
80+
twoClicked = false
81+
data = data.slice(1)
82+
}
83+
}
84+
85+
function lightOff() {
86+
document.getElementsByTagName('body')[0].style.background = 'black';
87+
}
88+
89+
useEffect(() => {
90+
let dialog = document.getElementById('dialog')
91+
data = dialogArray
92+
let typewriter = new Typewriter(dialog, {
93+
delay: 50
94+
})
95+
typewriter.typeString(data[0].dialog).start()
96+
let choiceBox = document.getElementById('choiceBox')
97+
let questionOne = document.getElementById('questionOne')
98+
let questionTwo = document.getElementById('questionTwo')
99+
let sprite = document.getElementById('sprite')
100+
}, [])
101+
return (
102+
<>
103+
<div className='relative h-[500px]' id='start'>
104+
<div onClick={start} className="mb-3 absolute z-[99] rounded-lg w-[150px] border border-white text-center cursor-pointer hover:bg-opacity-70 h-[50px] p-3 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-[30%] bg-black bg-opacity-50">
105+
Start
106+
</div>
107+
</div>
108+
<div onClick={nextDialog} className="flex hidden flex-col relative md:flex-row select-none hover:cursor-pointer" id='vn'>
109+
<div className="flex md:justify-center sm:justify-center lg:justify-end xl:justify-end w-full md:z-[0] z-[0] sm:z-[0] lg:z-[5] xl:z-[5]">
110+
<img src="https://i.imgur.com/YUYwLuE.png" id='sprite' width="500px" />
111+
</div>
112+
<div className="absolute h-[200px] w-[90%] text-white bg-black z-[0] opacity-[50%] rounded-lg top-[399px] lg:bottom-0 xl:bottom-0">
113+
</div>
114+
<div className="absolute text-white bottom-[60px] lg:bottom-[200px] xl:bottom-[200px] z-[1] text-xl">
115+
Thant Htet Aung
116+
</div>
117+
<div className="absolute text-white font-bold bottom-[2px] lg:bottom-[130px] xl:bottom-[130px] left-[30px] z-[1] text-md w-[580px] break-words inline-block" id="dialog">
118+
119+
</div>
120+
</div>
121+
<div id="choiceBox" className='hidden'>
122+
<div id='questionOne' className="mb-3 absolute z-[99] rounded-lg w-[550px] border border-white text-center cursor-pointer hover:bg-opacity-70 h-[50px] p-3 top-[30%] left-1/2 transform -translate-x-1/2 -translate-y-[30%] bg-black bg-opacity-50">
123+
Choice One
124+
</div>
125+
<div id='questionTwo' className="mb-3 absolute z-[99] rounded-lg w-[550px] border border-white text-center cursor-pointer hover:bg-opacity-70 h-[50px] p-3 top-[40%] left-1/2 transform -translate-x-1/2 -translate-y-[40%] bg-black bg-opacity-50">
126+
Choice Two
127+
</div>
128+
</div>
129+
</>
130+
)
131+
}
132+
133+
export default VN

0 commit comments

Comments
 (0)