Noorverse

• 

  full landing page

• 

  pop up

Inspiration

The inspiration behind Noorverse came from a desire to merge sleek UI design with interactive user experiences, reflecting my identity as both a developer and designer. I wanted to create a dynamic portfolio that not only showcases my skills but also engages visitors through smooth animations and creative transitions—particularly in the About section using Swiper.js cube effects.

What it does

Noorverse is a personal portfolio website with four main sections: Home, About, Projects, and Contact. The About page stands out with a Swiper.js cube rotation that responds to user clicks on different skill buttons. Each section is crafted with attention to responsiveness, clarity, and visual appeal. The site highlights my frontend skills, project work, and provides a direct way to contact me.

How we built it

The website was built using HTML, CSS, JavaScript, and Swiper.js. The cube rotation effect in the About section uses Swiper’s 3D cube transition feature, dynamically changing slides based on skill category clicks. The layout is clean and responsive, with customized styling and modular organization to keep code maintainable and scalable.

Challenges we ran into

One major challenge was implementing the Swiper.js cube effect dynamically through button clicks rather than default navigation. It required handling state changes, timing, and integrating it with DOM events without breaking the flow. Ensuring full responsiveness across devices while preserving the animations was another hurdle.

Accomplishments that we're proud of

I’m proud of the smooth and visually appealing Swiper cube transition that adds an interactive twist to the usual About section. Additionally, the overall structure, from navigation to responsiveness, aligns well with professional standards. Every part of the website is custom-built to reflect both functionality and creativity.

What we learned

This project taught me how to work more effectively with third-party libraries like Swiper.js beyond their default behavior. I also deepened my understanding of event handling, responsive design, and creating engaging user experiences using transitions and modern UI techniques.

What's next for Noorverse

Next, I plan to enhance Noorverse with a dark/light theme toggle, a blog section powered by a headless CMS, and subtle micro-animations to make the experience even more immersive. I'm also exploring backend integration to turn this static portfolio into a more dynamic, personalized space.

Built With

• css
• html
• javascript
• swiper