MotiWorks

In 2022, Moti has embraced the world of web development and design. Prior to this engagement; the creator did not have any idea on how to build and design for the web.

The first attempt was to set up a minimalist website like the one from Takuya Matsuyama (it also has a video on how it was made). The design is simple yet quirky with a 3D model that you could pan and view. The stack was conveniently NextJs as that was the framework I was studying (even now); Chakra UI, Framer Motion and ThreeJs for handling the 3D model.

Inspired by that site, I decided that I would build something similar with a Rx7(Fc) model. I set out to study a bit of ThreeJs, React-three-fiber and Drei. Canvas, where the setup of the stage from shadows, planes, meshes and post processing effects are, came from React-three-fiber. Also the custom GLTF loader was from them; it made it a lot easier loading these models to a webpage. Drei was used for camera controls and limitations (so you could see the good parts).

Once I got a working prototype with boxes; I tackled on making a car model using MagicaVoxel (used a 3D model by Lexyc16 for measurements) and Blender for baking in the effects like metalness and light as MV did not export the materials natively. Satisfied with how the model came out, I started building out the rest of the site homepage, about, etc. I got to where it was really looks like Takuya's site (without the Blogs) and I'm happy that I was able to do something like that but I felt that it wasn't me. I set on to reimagine the site as I don't have a concrete idea on how it should look.

Looked around the net for peoples portfolios; clicked on awwwards websites that looked good to me; took on inspiration from a few (maybe a lot) creators and web designers. Still do not know how the site should look like (even as I am typing this description :D). I began work on the other pages as I figured that I could think of the design along the way.

I went on to focus on page transitions used Framer-motion for it and along with GSAP for the intro, text reveal and other scrollTrigger based animations. (Q: why use both? A: I felt comfortable using one on a particular task rather than implement one library that does all of it.)
As I build out the rest of the site, I kept ChakraUI for the drawer and colorMode functions to implement dark and light view modes. Typography was mainly Poppins and Merriweather with a few display fonts.

About the design; I want it to be subtly animated and interactive (that's why most if not all links and points-of-interests have some form of animation). Used mostly CSS for the design and few transforms then learned about SASS along the way. For the content; I've tried to use contentful (so far it has been easy to use and to setup) and have Nextjs to fetch its props and paths.

Conclusion:
With all of the things I've learned so far, blending in a sense of personality, I've implemented the site for us to see; to see where we've come, to what we could be.