dominguesgm / dominguesgm.github.io Goto Github PK

As the 3D models are perhaps heavy for mobile devices, and since the experience itself wouldnt be the best, we can design simpler versions of each 'section' which lend themselves better to portrait mode.

Think, design and implement a mobile version of the relevant sections. Probably the whole page will be different components, but sharing the same language.

Place some element to indicate to the user that there is scrolling to be done.

Basic idea would be an arrow pointing down that would disappear when the user start's scrolling. This arrow could be clickable (smooth scroll to 200vh), it could bounce occasionally to instigate the user to scroll/click.

Change header links hover animation to transition up and grow a white bottom border from left to right.

This includes Camera, Scene, Objects, and especially everything regarding animations.

This is probably top priority once v1 is rolled out.

Bring attention to header links.

An idea would be to have a custom cursor which is an arrow, constantly pointing to the link array, as a compass.

Think about implementing a /work tab.

This tab could use the laptop model and each project name around it, like if they were orbiting. Laptop can rotate to point at where the mouse is, showing the thumbnail of the hovered project on the display.

Originally this was thought out to be in the landing page. I reconsidered this as I had no elements to justify a good scrollable section. This probably still needs to be worked on with design elements (aesthetic and not exactly 100% functional, think threejs shaders or others). This rethinking will probably be in v2

Build a bio component.

Probably aligned right. So far I have no ideas for any stylistic details on how to improve it, but that may change.

In the current state, the zindex is updated, but the position of the font is not, so it will appear smaller/bigger than it was before.

As a transition between presentation component and bio, the following must happen in the Presentation component:

• Normal text: zoom in and opacity out. Zoom in should probably have transform-origin: bottom center.
• Text geometry: block positions and camera moves in to text original Z position (move past the text).

Also, this transition should be accompanied by a translate of the component in the page's y axis, so it doesn't look like it moves on scroll.