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
Top comments (26)
I think you need 2 separate articles to apply for both.
Yess exactly, Yalda also published it separately on GitHub and dev.😁🤞🏻
The website you created looks amazing, girls! 👏👏🥰 Congratulations on all the hard work, you did such a wonderful job!
I love that you’re sisters and share the same passion for programming, I can only imagine how fun it must be to work together. 🥰
I wish I could convince my sister to follow my path in programming too. 🙃
Can’t wait to see your next project!
Good luck in the competition, Vida and Yalda! 🥰 I’m keeping my fingers crossed for you to win!🤞🏻
You are so kind😍🥺, well we can become international sisters😉😉feel free to join us , haha, the secret is that every path I go my sister follows me, because we are afraid of loneliness, 😂 and I guess you are Romanian because of you family, I can speak a little Romanian 😍 Romania have a good people . Thank youuuuu 😍💪🏻
Seriously??? 🥰Do you actually know some Romanian?😱 ....Have you ever visited Romania, or do you have any Romanian friends? …If you don’t mind me asking, you’ve made me really curious 😂🙃 I can teach you more Romanian if you still want us to become sisters 😂🥰🤗
Thank you very much for the kind words!🥰
Looks amazing! Congrats!
Really?😍🤞🏻 thank you so much
Yes, really! You two did a great job. It looks so neat and the colors are so pleasant to the eyes. It is beautiful, really. You should definitely have more feedback!
Thank you veryyyyyyy much, your opinion is important and encouraging to me.🥺😍
*Absolute Cinema...This is beautiful!
*
Thank you, sorry I wasn't available much.
no worries Vida
Wow! Vida Can we use this instead of WordPress application?
Wow, thank you! 😊🤞🏻😍
That means a lot! While Nebula Works isn’t a full WordPress replacement, it can definitely be used as a modern front-end for custom projects.
If you ever want to turn it into a complete template or connect it with a CMS, I’d be super happy to help and maybe even publish it together 🚀
Let’s build something awesome! 💡
Sure Vida
Amazing
thanks sisi😁😍
perfecttt
This is very intresting, nowadays most of the India based augmented reality companies were doing such type of coding techniques to explore variousopportunities for innovation.
Wow that’s super interesting! 🤩
I didn’t know AR companies in India were exploring similar approaches now I’m really curious!
Do you have any links or examples to share? I’d love to see how they’re using it and maybe get inspired too 🌟
Thanks a lot for your kind comment! 🙌
Perfect
😁😍merciiiiiiiiiii
The interactive 3D models are such a great touch! Great work!