Kemet is a fully original ReactJS project built with Next.js and TailwindCSS, designed to explore and present the rich history, culture, and mythology of ancient Egypt. The project is powered by a custom API developed in Node.js, providing dynamic content for gods, historical sections, and thematic visuals.
The application features user authentication with Firebase, allowing users to sign in via Google or email, access their account, and interact with the content seamlessly.
This project was designed and built from scratch as a portfolio-grade application to demonstrate:
- Modern React architecture with Next.js
- Custom API integration
- Firebase authentication flows
- Responsive UI/UX design
- Dynamic content management
- Interactive component development
Kemet is not a template, clone, or tutorial project. It represents a complete, production-ready web application showcasing advanced frontend and backend integration skills.
This page establishes the geographical and sociopolitical context of the "Black Land" through a dynamic grid layout that prioritizes visual storytelling. It utilizes an asynchronous data fetching architecture and conditional rendering logic to present critical themes such as the barter economy, legal gender equality, and the linguistic evolution from Hieroglyphics to Coptic. Technically, it stands out for its responsive zig-zag design, which ensures a logical and fluid reading hierarchy, adapting the component order so that the mobile experience remains intuitive and content-rich.
The History section offers an immersive journey through over 3,500 years of civilization, structured into 10 chronological blocks ranging from the Early Dynastic Period to the Roman Province era. The engine behind this page is a strict sorting algorithm that guarantees the integrity of the timeline, supported by historiographical curation that explains how "Golden Ages" and "Intermediate Periods" were defined. The use of era-specific archaeological assets provides a visual anchor that transforms complex data into a tangible and ordered educational experience.
Designed as an interactive mythological gallery, this page manages the complex Egyptian pantheon through a high-performance filtering engine and a dual-state React architecture. Users can explore deities based on their domain and form (Male, Female, or Both), allowing for instantaneous UI updates without redundant API calls. The multi-column grid layout ensures that the intricate iconography of gods like Ra, Isis, and Anubis is presented with total clarity, maintaining visual harmony through the use of global design tokens.
The Gods Modal is the project's most advanced interaction component, designed to provide depth without fragmenting navigation. It implements React Portals to decouple rendering from the main DOM hierarchy, eliminating z-index conflicts and ensuring a flawless overlay. The user experience is elevated by an outside-click detection system managed with useRef and useEffect, allowing for a natural user flow. Visually, it balances high-resolution iconography with detailed theological descriptions, all wrapped in a golden palette that reinforces the sacred theme of Kemet.
- ✨ Fully original content and design, with no external templates used
- 🔌 Dynamic content fetching via a custom API
- 🔐 User authentication with Google and email/password options
- 🎨 Interactive image sliders and modal pop-ups for gods and historical sections
- 📱 Responsive design optimized for desktop and mobile
- 🏛️ Thematic sections:
- Home – Overview of Kemet and its meaning
- Gods – Interactive cards for Egyptian deities with modal details
- History – Chronological display of Egypt's historical events
- Contact – Contact form for users
- Account – User profile with logout functionality
| Category | Technology |
|---|---|
| Frontend | ReactJS, Next.js, TailwindCSS |
| Backend | Node.js (Custom API) |
| Database & Authentication | Firebase Firestore |
| Routing | React Router DOM |
| Icons | React Icons |
| Deployment | Vercel |
kemet/
├─ components/
│ ├─ Navbar.js
│ ├─ Footer.js
│ ├─ Subscribe.js
│ ├─ ImageSlider.js
│ └─ ...
├─ pages/
│ ├─ index.js (Home)
│ ├─ gods.js
│ ├─ history.js
│ ├─ contact.js
│ ├─ signin.js
│ ├─ signup.js
│ └─ account.js
├─ context/
│ └─ AuthContext.js
├─ assets/
│ └─ images/
├─ api/
│ └─ custom endpoints
├─ styles/
│ └─ globals.css
└─ public/
The application features a custom Egyptian-themed design with:
- Color Palette: Gold, yellow, red, teal, and blue accents
- Interactive Modals: Detailed content views for gods and historical events
- Responsive Grid Layouts: Optimized for all screen sizes
- Smooth Animations: Image scaling, transitions, and slider effects
- Clean Typography: Modern fonts paired with ancient Egyptian aesthetics
- Node.js 18+
- Yarn
- Firebase account (for authentication setup)
# Clone the repository
git clone https://github.com/SALVADORPOETA/Kemet-sm.git
# Navigate to project directory
cd Kemet-sm
# Install dependencies
yarn installCreate a .env.local file in the root directory:
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_idyarn devThe application will be available at:
http://localhost:3000
yarn build
yarn start- Users can sign up using email/password or Google authentication
- Protected routes ensure only authenticated users access account features
- Firebase Firestore manages user sessions and data
- Sign out functionality available from account page
The project consumes a custom Node.js API that provides:
- Egyptian gods data (names, descriptions, images, attributes)
- Historical events and timelines
- Cultural information and references
API endpoints are structured for scalability and easy content management.
This project is 100% original.
- No starter templates were used
- No UI kits were copied
- No tutorial projects were followed
- All components, layouts, API structure, and logic were independently designed and implemented
Kemet was built as a serious portfolio project, intended to demonstrate real-world full-stack development skills, architectural decisions, and engineering excellence.
Salvador Martínez
Full-Stack Developer
- GitHub: https://github.com/SALVADORPOETA
- LinkedIn: https://www.linkedin.com/in/salvador-martinez-sm/
This is a portfolio project by Salvador Martinez.
No commercial use intended.
All rights reserved to the author.
- Designed for educational, cultural, and portfolio purposes
- The project demonstrates advanced React patterns, Firebase integration, and custom API development
Inspired by the enduring legacy and fascinating history of the ancient Egypt.