Nithya Interiors

A premium, responsive front-end web application crafted for showcasing architectural and interior design portfolios. This project emphasizes modern UI/UX, smooth interactions, and performance-first design, delivering a visually immersive browsing experience.

---

Live Preview

View Live Demo

---

Key Features

Premium UI/UX

• Elegant dark-first design system with glowing accents
• Smooth hover animations and glassmorphism effects
• Clean typography and visually balanced layouts

Light/Dark Mode Toggle

• Instant theme switching with persistent user preference (via localStorage)
• Dynamic section-based color adaptation for better visual hierarchy

Scroll Spy Navigation

• Active section highlighting using Intersection Observer API
• Enhances navigation clarity and user orientation

Cinematic Home Slider

• Auto-looping carousel with high-quality visuals
• Pauses on hover for improved accessibility

Hover-Based About Carousel

• Continuous horizontal scrolling gallery
• Smooth, infinite loop triggered on hover

Categorized Service Portfolios

• Organized grid with multiple category sliders:

  • Premium Marble Solutions
  • Custom Furniture
  • Design Tools

• Each section has independent controls and rich visuals

Fully Responsive Design

• Optimized for desktop, tablet, and mobile
• No layout breaking or overlapping elements

---

Tech Stack

Built using pure front-end technologies for speed and simplicity:

• HTML5: Semantic structure for accessibility & SEO
• CSS3:
  • Flexbox & Grid
  • CSS Variables (custom theming)
  • Animations & transitions
• JavaScript:
  • DOM manipulation
  • Event handling
  • Intersection Observer API
  • requestAnimationFrame for smooth animations
  • Local Storage integration

---

Project Structure

nithya-interiors/
│
├── index.html      # Main layout (Hero, About, Services, Contact)
├── style.css       # Styling, animations, and responsive design
├── script.js       # Interactivity, sliders, theme toggle, scroll spy
└── README.md       # Documentation

---

Run Locally

No setup or dependencies required.

# Clone the repository
git clone https://github.com/NKumar-B/SoftGrowTech_ImageSliderWebsite.git

# Navigate into the folder
cd SoftGrowTech_ImageSliderWebsite

Double Click and Open index.html in your browser

Recommended: Use VS Code Live Server for a smoother development experience.

---

Deployment

Hosted using GitHub Pages.

To deploy your own version:

1. Push code to a GitHub repository
2. Go to Settings → Pages
3. Select: Deploy from a branch
4. Choose main branch → Save
5. Your site will be live in minutes

---

Future Enhancements

Backend & Database

• Build REST APIs using Django / FastAPI
• Integrate PostgreSQL for structured data storage

Frontend Modernization

• Migrate to React + Vite for scalability
• Adopt Tailwind CSS for faster UI development

Business Features

• User authentication system
• Consultation booking system
• Email automation (Mailchimp / SendGrid)

AI Integration

• Smart chatbot for client interaction
• AI-based design recommendations

---

Project Highlights

• Zero external frameworks → lightweight & fast
• Strong focus on UI/UX design principles
• Demonstrates real-world front-end engineering skills
• Scalable foundation for full-stack expansion

---

Author

Nithin Kumar
Fullstack Developer | UI/UX Enthusiast
GitHub: https://github.com/NKumar-B