This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
๐ What I Built
Nebula Works is a futuristic, animated admin dashboard built completely with pure HTML, CSS, and JavaScript, designed as a submission for the Axero Frontend Challenge.
The project features:
- ๐ Dynamic greeting section with mock weather API
- ๐ฉโ๐ A responsive dashboard with multiple pages (Projects, Calendar, Messages, Team, etc.)
- ๐ Signup & Admin Login system
- ๐จ Light/Dark theming and animations
- ๐ Embedded
.glb3D planetary models (Earth, Mars, Jupiter) - โ๏ธ Custom admin panel for settings, security, and network
Although many elements look real (like notifications or calendar), some are only visual for the purpose of this challenge โ but they are built in a way that could easily become functional in the future.
๐ Demo
โ๏ธ Live GitHub Page: Click here
๐ Source Code: GitHub Repository
๐ฅ YouTube Demo:
๐ผ Gallery Preview
![]() ๐ Home Page |
![]() ๐ธ Dashboard |
![]() ๐ Calendar |
![]() ๐จโ๐ฉโ๐งโ๐ฆ Team |
๐ง Journey
This project was a creative and technical journey that tested and showcased my skills. Hereโs what made it special:
- I challenged myself to avoid using frameworks or libraries, making everything from scratch.
- Used
.glbfiles to integrate 3D space objects and give it a galactic theme. - Designed for responsiveness, ensuring the layout looks great on mobile, tablet, and desktop.
- Learned how to mimic real systems visually even when backend is not involved.
- Took care of UI/UX details, including theming, transitions, and animations.
- Created a modular structure for future expansion and real-world use.
Iโm proud of how realistic and smooth everything looks while keeping performance and compatibility in mind.
๐ฉโ๐ป Team Submissions
This was a team project with contributions split as follows:
| Name | Role | GitHub |
|---|---|---|
| Vida Khoshpey | Full Project Developer (Task 1) | @VIDAKHOSHPEY22 |
| Yalda Khoshpey | CSS Design & Styling (Task 2) | @YALDAKHOSHPEY |
Each team member submitted from their own GitHub account, as per rules.
๐ Folder Structure
nebula-works/
โ
โโโ index.html โ Home page with greeting + mock weather API
โโโ signup.html โ User signup form
โโโ style.css โ All custom styling
โโโ script.js โ Interactivity
โโโ LICENCE โ MIT License
โโโ README.md โ You're reading it!
โ
โโโ /admin โ Admin-only pages (login, settings, system)
โ โโโ index.html
โ โโโ user.html
โ โโโ system.html
โ โโโ security.html
โ โโโ network.html
โ โโโ event.html
โ โโโ settings-admin.html
โ
โโโ /dashboard โ Dashboard core
โ โโโ index.html
โ โโโ project.html
โ โโโ team.html
โ โโโ calendar.html
โ โโโ messages.html
โ โโโ resources.html
โ โโโ settings.html
โ
โโโ /assets
โโโ logo.png
โโโ Nebula.gif
โโโ /3d/
โโโ earth.glb
โโโ mars.glb
โโโ jupiter.glb
๐ License
Licensed under the MIT License.
โจ Acknowledgments
- Huge thanks to Axero and Dev.to for the opportunity.
- 3D models inspired by NASA Open Assets.
- UI/UX entirely handcrafted with โค๏ธ
๐ค API
- Due to regional restrictions and limited access to external APIs in Iran, this project uses mock data and simulated APIs for features like the weather service and notifications.
- This approach ensures that the UI/UX remains realistic and interactive while focusing fully on frontend development without dependence on unavailable backend services.
- Please note that some features such as notifications and the weather toggle key or news are currently purely for simulation purposes and do not connect to real backend services.
Made with ๐ซ by Vida Khoshpey
and styled with โญ by Yalda Khoshpey




















perfecttt