Merge pull request #42 from henrynoowah/feature/spline-look-at-bot

Added new Spline 3D bot with `look at` animation

CHANGELOG.md

@@ -1,3 +1,12 @@
+# [0.20.0](https://github.com/henrynoowah/blog/compare/v0.19.4...v0.20.0) (2024-05-06)
+
+
+### Features
+
+* added new spline 3d bot with look at animation ([6e80d06](https://github.com/henrynoowah/blog/commit/6e80d064f487a5431609fe7d75f7f8fd2438480d))
+
+
+
 ## [0.19.4](https://github.com/henrynoowah/blog/compare/v0.19.3...v0.19.4) (2024-02-11)
 
 
@@ -34,12 +43,3 @@
 
 
 
-# [0.19.0](https://github.com/henrynoowah/blog/compare/v0.18.7...v0.19.0) (2024-02-10)
-
-
-### Features
-
-* new main page UX ([de17078](https://github.com/henrynoowah/blog/commit/de17078a969b6769750082c3d96d75b8b02df104))
-
-
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "noowah-next-v13",
-  "version": "0.19.4",
+  "version": "0.20.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/(routes)/page.tsx

@@ -77,14 +77,24 @@ const Home = () => {
       <div className="w-full h-[100vh] flex justify-center relative overflow-hidden">
         {/* Background Component */}
         <div className="relative flex justify-center w-full h-full bg-gradient-to-tl bg-primary/80">
-          <div
+          {/* <div
             className="absolute w-full h-full
           flex justify-center items-center z-30"
           >
             <h1 className="text-[42px] font-semibold opacity whitespace-nowrap z-20 text-light">NoowaH</h1>
-          </div>
+          </div> */}
         </div>
 
+        <div
+          className="absolute w-full h-full
+          flex justify-center items-center z-30 top-[120px]"
+        >
+          <script async type="module" src="https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js"></script>
+          <spline-viewer
+            loading-anim-type="spinner-small-dark"
+            url="https://prod.spline.design/rcSs4mw7jnwh5xZG/scene.splinecode"
+          />
+        </div>
         {navList.map((nav, i) => (
           <NavModal selected={selected === nav.name} {...nav} key={`nav-modal-${nav}-${i}`} />
         ))}

types/spline.d.ts

@@ -0,0 +1,5 @@
+declare namespace JSX {
+  interface IntrinsicElements {
+    'spline-viewer': any
+  }
+}