This web application is not just a profile, but a vibrant testament to my growth, learning, and self-taught expertise in software development. It artfully illustrates my professional background and personal interests through intricate animations—most of which are powered by the versatile anime.js library, with some crafted entirely from scratch. Incorporating dynamic layouts accentuated by vibrant colors, this project not only showcases my commitment to pushing boundaries and embracing challenges but also enhances the narrative of my professional and personal journey. I warmly invite you to explore its features, provide feedback, and discuss potential collaborations, as we journey through the realms of creativity and technology together. Your engagement, in any form, is deeply valued and appreciated. Check it out!
Profile Website- Languages: JavaScript, CSS, HTML - The trinity of web development that animates, styles, and structures the application.
- Libraries: Anime.js - A powerful library for JavaScript animations, enabling complex, synchronized animations with ease.
This repo provides the code for the Web Development page of my profile website. It showcases a user-centric design, featuring interactive containers that effortlessly expand and contract in response to mouse movements. Users can navigate and dynamically adjust content areas for an enhanced viewing experience, making the exploration of the site both intuitive and visually engaging.
The expansion mechanism of these containers is ingeniously crafted without relying on the `anime.js` library, which is otherwise utilized extensively across the site. The webpage reacts to mouseover events by recalculating container dimensions and positions, creating an experience that is both fluid and responsive. This approach facilitates seamless transitions between the site's different sections, inviting users to delve deeper into the narrative of my development journey and technical acumen.
Upon selecting a container for more detailed viewing, the site utilizes the `anime.js` library to animate the content within. A notable exception is the custom landscape section, which is brought to life through a blend of JavaScript and CSS for real-time animation of elements like birds and trees, without reliance on anime.js.
An essential aspect of the site's design is the strategic use of overlays. These subtly dim the background, concentrating the user's attention on the active container. Combined with the site's interactive and animated features, the overlays are part of a deliberate design philosophy aimed at maximizing user engagement and content visibility, thereby enriching the overall user experience.
Take a look!
Web Development PageI embarked on this journey from a foundation in biology, driven by a curiosity for technology and its applications. Teaching myself programming for mobile applications opened a new world of possibilities, eventually steering me towards web development. Alongside coding, my life is enriched by music, showcasing my belief in continuous learning and creativity.This project serves as a milestone, reflecting the diverse paths of innovation and exploration that have shaped my journey thus far.
