A professional construction company portfolio website built with React and Tailwind CSS.
Showcasing 25+ years of expertise and 80+ completed projects across Bangladesh.
| Light Mode | Dark Mode |
|---|---|
 |
 |
- 🌗 Dark / Light Mode — Toggle with localStorage persistence and OS preference detection
- 🏠 Home Page — Animated hero, scroll-triggered stats counter, featured projects, services overview
- 📋 Projects Page — Filter by status, company & search with client-side pagination
- 🔍 Project Detail — Full image lightbox gallery, specifications, location map
- 🖼️ Gallery — Filterable image gallery across all projects with lightbox
- 📖 About Page — Company story, animated milestone timeline, core values, mission & vision
- ⚙️ Services Page — Alternating image/text layout, work process steps
- 📞 Contact Page — Info cards, Google Maps embed, office hours with today highlight
- 📱 Fully Responsive — Mobile, tablet, and desktop optimized
- ⚡ No Backend — All data served from a static JSON file
- 🎨 Polished Animations — Staggered hero reveals, hover lifts, gold shimmer effects
| Category | Technologies |
|---|---|
| Frontend | React 18, React Router DOM v6 |
| Styling | Tailwind CSS, Custom CSS Animations |
| UI Components | Swiper.js, Yet Another React Lightbox, React Icons |
| Data | Static JSON (no backend required) |
| Hosting | Vercel |
src/
├── components/
│ ├── common/
│ │ ├── Header.jsx # Sticky nav with dark/light toggle
│ │ ├── Footer.jsx
│ │ └── LoadingSpinner.jsx
├── pages/
│ ├── Home.jsx # Landing page with hero & stats
│ ├── About.jsx # Company story & milestones
│ ├── Services.jsx # Services with alternating layout
│ ├── Projects.jsx # Filterable project grid
│ ├── ProjectDetail.jsx # Single project with lightbox
│ ├── Gallery.jsx # Full image gallery
│ └── Contact.jsx # Contact info & map
├── data/
│ └── projects.json # All project data (images, specs, etc.)
└── services/
└── api.js # (Legacy — no longer used)
- Node.js
>= 16 - npm or yarn
# 1. Clone the repository
git clone https://github.com/sumu9897/sumon-enterprise-frontend.git
# 2. Navigate to the project directory
cd sumon-enterprise-frontend
# 3. Install dependencies
npm install
# 4. Start the development server
npm run devThe app will be running at http://localhost:5173
npm run buildAll project data lives in src/data/projects.json. To add a new project, append an entry following this structure:
{
"id": 17,
"company": "Company Name",
"projectName": "Project Name",
"slug": "project-name-slug",
"description": "Short description of the project",
"specifications": {
"floors": "G+9",
"floorArea": "3000sft per floor",
"type": "Residential",
"finish": "Fair-Face"
},
"address": {
"plot": "123",
"road": "5",
"block": "A",
"area": "Bashundhara",
"city": "Dhaka"
},
"status": "Ongoing",
"startDate": "2025",
"finishDate": null,
"images": [
{ "url": "https://i.ibb.co/XXXXXXXX/image.jpg" }
]
}Image hosting: Upload images to ImgBB and use the Direct Link (format:
https://i.ibb.co/XXXXXXXX/image.jpg). Make sure the domain isi.ibb.co— NOTi.ibb.co.com.
The theme system uses a dark class on <html> toggled by the Header component and stored in localStorage. All pages use a shared useDarkMode() hook:
const useDarkMode = () => {
const [dark, setDark] = useState(() =>
document.documentElement.classList.contains('dark')
);
useEffect(() => {
const observer = new MutationObserver(() =>
setDark(document.documentElement.classList.contains('dark'))
);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class'],
});
return () => observer.disconnect();
}, []);
return dark;
};Make sure your tailwind.config.js has:
module.exports = {
darkMode: 'class',
// ...
}{
"react": "^18.0.0",
"react-router-dom": "^6.0.0",
"tailwindcss": "^3.0.0",
"yet-another-react-lightbox": "^3.0.0",
"swiper": "^11.0.0",
"react-icons": "^4.0.0",
"react-toastify": "^9.0.0"
}| Route | Page | Description |
|---|---|---|
/ |
Home | Hero, stats, featured projects, services, CTA |
/about |
About | Story, timeline, values, mission/vision |
/services |
Services | 4 services with features and process |
/projects |
Projects | Filterable, paginated project grid |
/projects/:slug |
Project Detail | Images, specs, map, CTA |
/gallery |
Gallery | All project images with lightbox |
/contact |
Contact | Info cards, map, office hours |
- Admin panel / CMS for managing projects without editing JSON
- Contact form with email via Brevo (Sendinblue) API
- Blog section for construction tips and company news
- Image optimization with WebP format and lazy loading
- Google Analytics integration
- 3D building visualization with Three.js for featured projects
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License.
Sumon — @sumu9897
⭐ If you found this project helpful, please give it a star! ⭐
