leonardomussatto / connecting Goto Github PK

They won't be definitive, but al least we'll be working on a fac-simile

Add page where "U." considerations will appear

Briefly explain why connecting is not a status but the title of the project ; )
In the future, a more satisfying explanation will be added in The Meaning section.

Consider changing the text displayed on Landing and U. history in relation to the user time.
(if it's late in the afternoon, it might be better not to say "maybe you've just woke up" ; )
Also change some words like click when on devices

As issue #17.
The sidebar has to be hidden and the stories' styling has to be adapted.

Consider using free illustration such as those on Ouch!

• Alarm clock
• Shower
• Podcast
• Beard
• Mug
• Clock
• Campfire
• Spinning Clock
• Upload
• Book
• Moon
• Sun rising

When the user starts the experience should be greeted by an aimated loading screen (perhaps an animated svg icon) which then fades into the Interface view.

See if the solutions applied to Story.js and Landing.js might help

For now it might be reasonable to just work on a static scrollable page.
Read this article on CSS Grid Layout

Target
at the moment the wireframe presents

• the tite in the middle of the screen
• texts on the left
• the button on the right, vertically centered

Add text content

• Charatcter 1
• Charatcter 2

It might be interesting to add some affects as on this websites, probably in a semplified version.
I'll search for other examples in the future...I'm sure I already have many in my bookmarks.

Complete landng page with text

There might be a simple way to deploy each successful merge to a specific branch

Set initial state of the react app using Create-React-App. Then setup support for React Router and Context API.

• Create-React-App
• React Router

Update infos
Learn More about progressive apps and how to buil them. Consider whether to keep this feature or to remove it

Test both using and actual video players.
mp4 as Gif
React-Video
More info about video players
Stackoverflow on autoPlay not working

Create the basic structure of the website, including draft styling. Start thinking about component structure.
Sort of low-fi wireframe

Target
see the wireframe. Shortly: the icons should "float" in the page

Add links to navigate the prototype

• Landing.js button ==> Interface.js
• Interface.js icons ==> Story.js
• Story.js icons ==> other characters' stories

Ignore the logic aspect for now and work instead on the layout.
It will definitely be worth go through the Mozilla CSS Grid guide and ref and refer to the article cited on issue #11.

Target
al the moment the wireframe has

• a column on the side with the icons aka link to the other stories - evenly spread vertically
• a main column with the story - centred
• a sticky header - on top of the main column - with Time, Location and Weather - classic navbar style

• link to GitHub wiki

It would be great to have some music playing back. Autoplay is probably unavailable. I have to either find a workaround or let the user actually press play...

Create U.story/page.
It might be interesting to use the history from the hooks to show what the user has been doing.

Implement :hover, :focus and :active state handling and relative transitions both in the common and the specifics themes.
Consider using Framer animations

It woud be great to reproduce the daily podcast. Probably the user is going to have to play it manually since chrome seems to block autoplay with audio. And I haven't actually figured out how to subscribe to podcast RSS...

At the moment I just inserted the icons in the main page, however I also need to handle the route and the notification system. More component are needed and since the logic is the same it would be great to have a reusable component.

• Check out 3D icons from instagram reel

The journal is now three weeks old... I should update it

All images are missing. I have to figure out how to upload them.

Consider offloading texts and media to an external source as Firebase if necessary

NOTE it seems to me that the content is too case-related to be actually managed by a component, however I also have to find a way to conditionally display section of content based on timing...

Related to issue #6

Learn More on how to deploy a React App for free.
At the moment the possible options seem to be GitHub Pages and Firecode.
Create-React-App Official Documentation
Guide for Router support in GitHub Pages

It might be useful tu create a "distraction"/notification system that takes user's attention to another story.

Add U. text/guide to the experience

Create timing logic
Stories should "keep unfolding" and the user should be able navigate through them, but not scroll. The whole experience should be related to the user's real time.

Related to issue #34

add support for mobile devices

Use media queries and/or programmating testing to make the page responsive and support mobile devices.

• Alarm Clock
• Inspiring Quote
• Interactive Mirror Sketch
• Interactive Mirror Schematics
• Tasks
• New Feature Time-lapse
• References
• GitHub
• Food
• Matrix Scene
• Bug Notification
• 3d Library
• More coding
• Lumio lamp reference
• SketchUp Project Time-lapse
• Eagle Schematics Time-lapse
• Research, Arduino Library, etc
• Recipe
• Gru meme
• light meme

Work on the clock shown on the stories' UI.
Sync it to the real time of the user, but it should be significantly faster. The whole experience shouldn't be too long.