It is a dynamic web app which purpose is to enhance an optimal user experience while navigating and exploring the different parts.
The first step is to push the limits of animation and interactivity, creating a lively environment and after that implement a personalized experience based on their preferences.
My very first concern as a very junior developer is to learn and apply different concepts, both technical or structural and lay the foundations of a vast knowledge and understanding of the web development process.
I have a webcomic idea already set, with characters, context and a first story. In this project I would like to create an immersive experience in that world. Creating a website around the story and from the story, including a simple 2D game which will extend into that concept. Speaking of that concept properly, I'll let you discover it on the app, as this part is focusing on the technical side and the process involved.
-
React : I will use React to build all the UI components and the whole interface, the challenge will be to maintain a clear and logical structure throughout the whole process. Also to dive in more depth in React's functioning, eg. hooks, routes, ...
-
CSS/JS : Implement dynamic and animated features in the app, starting with a Parallax scroll animation and further button actions, the purpose is to push the CSS boundaries and explore the multiple uses of it.
-
Tailwind : I will implement a Tailwind methodology for a responsive design. I am already familiar with css and sass and enjoy the workflow as it keeps everything organized and separated. I still do believe that Tailwind can bring great value for responsive design and everything position-related, while the more specific styling could be kept using sass and its _mixins and _variables.
-
HTML5 : Use proper syntax in Html, keep a logical structure and implement at its best all the accessibility features.
- To Determine
I had already a global idea on the static design of the layout, which I believe will be pretty simple and straightforward. I want to push the boundaries and explore the css animations and interactions.
I started the construction with the navigation bar component. Menu bar that will be hidden and will reveal once we hover on the logo. The challenge was to understand how and where to define the different animations and effects, also how to extend the hover effect, launched when hovering the logo but it need to stay accessible once you switch and move on the menu elements.
I initially created a Button component which would be generated and modified dynamically. This was great to learn how to integrate and display multiple iterations of one component at the same time. The reality of the project, where I actually only need these buttons in that said Navigation Component made me realise that, except the skills learning, this was useless in this project and made the code cluttered for no reason.
I did create that menu appearing when the logo is hovered. I found a way to animate it completely (100%) CSS as I want to grasp all the principles of animation in CSS. Again, I'm not sure it is the most straightforward method for an animated menu, we'll see that in the future.
I've been trying to do parallax effect with Framer Motion, kind of succeeded even if it does lag a bit on the scroll ... I do feel I need to practice especially on the many options and possibilities you can achieve with Framer Motion, I'll play around a bit before trying something more precise, like here... I might give Tailwind a try again.