More stuff

src/app/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
         id="about"
         curve={SphereCurve}
         className="relative w-full h-full px-4 md:px-8 max-w-screen-2xl"
-        curveClassname="w-full h-[calc(100vh-3.5rem)]"
+        curveClassname="w-[38rem] h-[52rem] -right-32 md:right-8 overflow-hidden"
       >
         <h1 className="text-2xl">Hello, I am a </h1>
       </RenderedSection>

src/components/3d/curves/sphere.ts

@@ -67,7 +67,7 @@ const update = (pc: THREE.Points<THREE.BufferGeometry>, group: THREE.Group) => {
 const SphereCurve = {
   func: { init: init, update: update },
   cam: {
-    pos: new THREE.Vector3(0, 0, 18).multiplyScalar(2),
+    pos: new THREE.Vector3(0, 0, 18).multiplyScalar(1.7),
     rotation: new THREE.Vector3(0, 0, 180),
   },
   particles: {

src/components/3d/renderer.tsx

@@ -104,7 +104,7 @@ const Renderer: React.FC<
 > = ({ cam = { pos: new THREE.Vector3(0, 0, 0) }, ...props }) => {
   return (
     <Canvas gl={{ alpha: true }} className="transform">
-      <pointLight position={[0, 0, 0]} color="#9BC995" />
+      <pointLight position={[0, 0, 0]} color="#fff" />
       <perspectiveCamera position={cam.pos} />
       <FuncRenderer cam={cam} {...props} />
     </Canvas>

src/components/layout/index.tsx

@@ -5,7 +5,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Header />
-      <main className="w-full flex justify-center">
+      <main className="w-full flex justify-center overflow-x-clip">
         {children}
       </main>
       <NavBinds />