Narriva - A Minimalist Blog for Traditions and Celebrations**

What I Built

Narriva is a minimalist and visually engaging blog website designed to spotlight traditions and celebrations. The goal was to create a blog site with a strong emphasis on modern design principles, responsive layouts, and interactivity using CSS and JavaScript.

I wanted the blog to be simple yet elegant, showcasing its content with a clean interface and intuitive navigation. The main focus was ensuring that it is aesthetically pleasing across devices while maintaining functionality.

Demo

Take a look at my project below:


Project Code Repository


Live Demo

Here’s a quick preview of the blog and post pages:

• The home page features a compelling navigation bar, a dynamic blog header, and a grid of recent posts with a clean, modern card design.
  
  
  
  




• The post page showcases an image based list of contents, large feature images, and engaging section design

Journey

Setting Up

The foundation of this project started with understanding the requirements of the challenge. I began by choosing a theme for the blog—one that would stand out visually and resonate with an audience interested in traditions and celebrations. After some brainstorming, I settled on "Narriva" as the blog's title to evoke a sense of storytelling and cultural richness.

I sketched out the blog’s structure, listing essential components like:

• A fixed navigation bar for seamless browsing.


• A blog header with captivating gradients and a search bar.


• Recent post cards with an interactive layout.


• A cohesive design for the footer to tie the page together.

Crucial Stage

Design and Implementation

The design process centered on creating a polished and visually appealing layout using light colors with touches of purple-pink gradients. I made sure the UI adhered to accessibility standards while maintaining a modern aesthetic. Key design highlights include:

• 
  Navigation Bar: Responsive, fixed-position navigation that works across the blog and post pages, featuring toggle functionality for smaller screens.


• 
  Header Section: A large heading and subheading with gradient text effects for visual impact.


• 
  Blog Post Cards: Unique cards with separated content and images, ensuring they stand out while maintaining a cohesive design.


• 
  Post Page Enhancements: Dynamic features like an accordion-based table of contents, section images, and a focus on readability.

Challenges and Solutions

One of the significant challenges was ensuring responsiveness across devices. While using Chrome DevTools helped in testing, I encountered issues with scaling and alignment, especially with the fixed-position navigation. To address this:

• I utilized CSS media queries to fine-tune the layout for various screen sizes.


• Debugged positioning inconsistencies by refining the structure of the navbar and container elements.

Another challenge was implementing toggle functionality for the mobile navbar. Using event listeners, I dynamically toggled classes to control animations and content visibility effectively.

Technical Highlights

• 
  CSS Animations and Transitions: Used to bring life to the accordion and button interactions.


• 
  JavaScript Manipulation: Querying and dynamically injecting HTML elements for modularity and scalability.


• 
  Image Optimization: Focused on using high-quality, lightweight images in modern formats like WebP to ensure performance without compromising visuals.

Ending

As the project came together, I felt a sense of accomplishment seeing the designs come to life. The features I’m particularly proud of include:

• The blog's intuitive layout and responsiveness.


• The dynamic accordion for the post page, which organizes content efficiently.


• The aesthetic harmony achieved through consistent typography and color palettes.

What’s Next?

Moving forward, I’d like to:

• Add animations to the blog post cards for hover effects.


• Explore integrating APIs to dynamically load post content.


• Optimize the site for SEO and improve accessibility further.

Conclusion

This project challenged me to think creatively while honing my CSS and JavaScript skills. Narriva is not just a blog but a testament to the power of design and interactivity. I’m excited about the possibilities it holds for storytelling and celebrating cultural heritage.

Thank you for taking the time to view my submission. I hope you enjoy exploring Narriva as much as I enjoyed building it!

Let me know if there’s anything you’d like to refine or add!