experiment with React and Spline 3D to build a simple landing page
One of my so-called beneficial hobbies is learning. The reason for this is that when i was younger, I didn't have the resources and money to access much education, except for attending school to learn the basics.
Now, as big, medium tech companies and even startups like Spline 3D are in the process of making education accessible more than ever, I'm like a child with great curiosity again.
This is my experiment with Spline and React. Without any prior knowledge of React and a handful of experience with Spline, well, I mostly followed whatever the instructor in the Youtube tutorial told me to code 😂. Some React syntaxes resemble that of CSS and HTML, which are more familiar to me; the rest... never mind.
For the Spline part, I've heard someone say that Spline 3D is like Figma of UI Design. Even though Spline still has its own limits and bugs, the unique point about this web/app 3d program is that the UX/UI design is so intuitive to use which can inspire users to just pick up the tool and learn along the way. I have more than enough experience with other 3D programs like Autodesk or Maya from my university time, and to be honest, I'm still terrified to talk about learning and using those programs 🤕.
The link to the live website, thanks to Codesandbox.
![testing site screenshot.png](https://static.wixstatic.com/media/48d306_a006ebfdd955411c97c2fbef66aed8c7~mv2.png/v1/fill/w_961,h_609,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/testing%20site%20screenshot.png)
architecture work & hand-rendered drawing
These are some of my work from architecture school. Though i no longer work in housing construction, I have learned a great deal of how to do teamwork and handle excessive stress, exhaustion & a broken work-life balance (*laugh in pain*).
However, from this 5 years, I learned how to work well with 3D rendering programs, namely 3DMax, Lumion, Rhino & Revit. From using Rhino, I started learning how to code & created some cool patterns for my architecture projects. I keep my continuous code learning path until now and it leads me to CSS3, HTML5 & JavaScript.
![Drawing3.jpg](https://static.wixstatic.com/media/48d306_d15020a4b79b4e9eb2173546c7541aa7~mv2.jpg/v1/fill/w_480,h_480,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Drawing3.jpg)
![Drawing1.jpg](https://static.wixstatic.com/media/48d306_61b04e78c0b14168ba9a7278b5ab0434~mv2.jpg/v1/fill/w_480,h_234,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Drawing1.jpg)
![drawing4.jpg](https://static.wixstatic.com/media/48d306_eaa5b591167f41ff9224207c49d96efc~mv2.jpg/v1/fill/w_480,h_480,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/drawing4.jpg)
![drawing5.jpg](https://static.wixstatic.com/media/48d306_53c42373ba754c36a28de47ab6c22f6c~mv2.jpg/v1/fill/w_480,h_480,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/drawing5.jpg)
![Drawing7.jpg](https://static.wixstatic.com/media/48d306_c693ba3116094a968684f204a3deb2ae~mv2.jpg/v1/crop/x_0,y_494,w_3024,h_3311/fill/w_480,h_526,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Drawing7.jpg)
![Drawing8.jpg](https://static.wixstatic.com/media/48d306_f1c73ee0554a4167bdb5419b0da1d8e4~mv2.jpg/v1/fill/w_480,h_640,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Drawing8.jpg)
Hand-rendered sketch might have been out of date with the technology advancement, but I always take it as the simplest way to persuade other people about my ideas and how I visualise them.
With my water-colored and pencil sketching skill, I believe that pitching ideas to stakeholders would be quite exciting and full of visual for me.
![Drawing2.jpg](https://static.wixstatic.com/media/48d306_f9b43e2e40f64e0c9a23c1c782485077~mv2.jpg/v1/fill/w_480,h_325,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Drawing2.jpg)
![8.jpg](https://static.wixstatic.com/media/48d306_331747ffb27d4a2d87e014f189f7c935~mv2.jpg/v1/fill/w_789,h_558,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/8.jpg)
![14.jpg](https://static.wixstatic.com/media/48d306_61a3a009772c401db26cc0f052156a33~mv2.jpg/v1/crop/x_129,y_676,w_3953,h_2110/fill/w_978,h_522,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/14.jpg)
![Tờ 2 new copy.JPG](https://static.wixstatic.com/media/48d306_723b0c7a75b042e4901f2506b43b4875~mv2.jpg/v1/crop/x_91,y_888,w_9737,h_5226/fill/w_973,h_522,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/T%E1%BB%9D%202%20new%20copy_JPG.jpg)
![tờ 1.jpg](https://static.wixstatic.com/media/48d306_044230783b7e40c58818839c88e8d32a~mv2.jpg/v1/fill/w_716,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/t%E1%BB%9D%201.jpg)
![Tờ 5 copy.JPG](https://static.wixstatic.com/media/48d306_8f0072f43e094a72a62fe3d487e8b979~mv2.jpg/v1/crop/x_0,y_0,w_9933,h_4338/fill/w_980,h_428,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/T%E1%BB%9D%205%20copy_JPG.jpg)
![Tờ 5 copy.JPG](https://static.wixstatic.com/media/48d306_8f0072f43e094a72a62fe3d487e8b979~mv2.jpg/v1/crop/x_0,y_4259,w_9933,h_2757/fill/w_980,h_272,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/T%E1%BB%9D%205%20copy_JPG.jpg)
![IMG_2564_edited.png](https://static.wixstatic.com/media/48d306_8463e06d0c7d4cd3a0742ed71af9fa05~mv2.png/v1/fill/w_717,h_538,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_2564_edited.png)
![IMG_2566 2.JPG](https://static.wixstatic.com/media/48d306_0c2130e55dd0476e9a3522ed7348aa40~mv2.jpg/v1/fill/w_701,h_526,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_2566%202_JPG.jpg)
![Tờ 2 new copy.JPG](https://static.wixstatic.com/media/48d306_723b0c7a75b042e4901f2506b43b4875~mv2.jpg/v1/crop/x_111,y_1044,w_9690,h_5221/fill/w_956,h_515,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/T%E1%BB%9D%202%20new%20copy_JPG.jpg)
![IMG_2570.JPG](https://static.wixstatic.com/media/48d306_50883d52d843486c86fe4b9b2e6dc927~mv2.jpg/v1/fill/w_746,h_515,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_2570_JPG.jpg)