Divya

Posted on Jul 10 • Edited on Jul 24

📊🎯📚AetherDesk: Custom Intranet, Designed for Every Dev out there.... 💻👩‍💻👨‍💻

#devchallenge #frontendchallenge #css #javascript

Frontend Challenge Holistic Webdev Submission

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

🌐 What I Built

I created AetherDesk, my dream intranet and all‑in‑one digital workspace. Built with HTML, CSS, and JavaScript, it’s a deeply personalized hub where I can:

Track projects & team stats
Run Pomodoro sessions & set daily goals
Access my favorite learning content
Take quick wellness breaks with workouts, music, and mini‑games

Inspired by Axero and tailored to my workflow as a web developer, AetherDesk keeps everything I need in one place: work, focus, learning, and play.

🎯 The Vision

I’m a web dev who hates juggling tabs (who likes it anyways, right). I wanted one space to:

📊 Get all my work info in one glance with a Dashboard that shows key dev stats, quick actions, events, team updates, and a launchpad.
🎯 Focus deeply and track my productivity with tools that keep me on task
📚 Learn new skills from the content I’ve saved across docs, videos, and platforms
🎮 Refresh with quick games, short & energizing workouts, or ambient music
🔄 Switch modes from work ➡️ focus ➡️ learn ➡️ play, all in the same space, no tab hopping

AetherDesk mirrors my natural flow as a developer: getting things done, staying curious, and remembering to breathe in between.

🧩 Key Sections

🏢 Dashboard

📊 Dev Metrics: commits, code reviews, uptime
⚡ Quick Actions: deploy, review, create projects
💬 Message Center: previews & timestamps
⭐ Team Spotlight: employee of the week/month
📅 Events: meeting reminders
🚀 Launchpad: GitHub, VS Code, Figma & many more

🧠 Focus Mode

📈 Productivity Stats: daily focus score & tasks done
🍅 Pomodoro Timer: presets + custom sessions
📋 Kanban Board: drag‑and‑drop task flow
🎯 Daily Goal: set & track one big objective

📚 Learning Mode

A personalized space to grow, upskill, and access everything I’ve saved for learning:

📺 Curated YouTube Playlists - React, Node, CSS Grid, and more
📖 Doc Hub – official docs like React, TypeScript, Next.js
🧪 Dev Tools & Platforms - CodePen, LeetCode, freeCodeCamp
🐙 GitHub Repositories - helpful codebases & open-source gems
📰 Articles & Blogs - saved insights, guides, and dev reads

🎮 Play Mode

📱 Social Dock: X, LinkedIn, Discord
💪 Workouts: desk stretches & HIIT bursts
🧘‍♀️ Music & Ambience: focus playlists, rain sounds
🧩 Mini Games: Sudoku, Snake, Wordle

📽️ Demo & Code

🚀 Launch AetherDesk Live:

Step into the full experience, explore all features, themes, and sections in action. Click the image below 👇⬇️

💻 View the Code here:

Curious how it's built? Peek into the codebase, see how the sections work, or fork it for yourself.

Divya4879 / customized-digital-space

📊🎯📚 AetherDesk - Personalized All-In-One Digital Intranet Workspace

A beautiful, feature-rich developer workspace dashboard built with vanilla HTML, CSS, and JS

🌟 Live Demo • 🐛 Report Bug • 💡 Request Feature

📋 Table of Contents

✨ Features

🏠 Dashboard

Real-time Welcome Section with dynamic greetings based on time of day
Quick Actions Panel for common developer tasks
Enhanced Message Center with unread indicators and real-time updates
Team Spotlight showcasing team achievements
Upcoming Events Calendar with visual date indicators
Development Metrics with live statistics and progress tracking

🎯 Focus Mode

Productivity Analytics with daily/weekly tracking
Developer Launch Pad with quick access to essential tools
Daily Focus Goal Setting with persistent storage
Advanced Pomodoro Timer with custom intervals
Interactive Kanban Board with drag-and-drop…

View on GitHub

🎨 Play in CodePen:

Tinker with the layout, test interactions, or try a theme switch, all in real time. Click here 👇

🛤️ Journey

I began by exploring Axero’s website to understand what makes a great intranet dashboard. From this, I implemented:

📅 Upcoming Events - stay updated with meetings and deadlines
👋 Personalized Greetings - time-based welcome to make it feel mine
🏆 Most Productive Employee - gamified motivation & shoutouts
🚀 Dev Launchpad – quick access to tools like GitHub, VS Code, Figma
📈 Team Stats - commits, code reviews, and system uptime at a glance

But then I asked myself: "What if this wasn’t just a workspace, but my digital universe?"

So, I added 3 more core sections based on how I truly work, learn, and unwind:

🧠 Focus Mode - built for distraction-free deep work with a custom Pomodoro timer, drag-and-drop Kanban board, and daily goal setting
📚 Learning Mode - houses all my saved resources: YouTube playlists, GitHub repos, docs, articles, coding tools, and platforms like LeetCode and CodePen
🎮 Play Mode - because productivity isn’t all grind; it has social media docks, HIIT & desk workouts, chill music, and brainy games like Sudoku and Wordle

What started as a dashboard became AetherDesk, a complete, personalized digital workspace that moves with me through every part of my day.

🔧 Key Implementation Details (with Code snippets!)

AetherDesk may look sleek, but there's plenty of logic under the hood (obviously!). Here's a look at some of the core features:

⏱ Custom Pomodoro Timer

A custom timed focus timer with auto-switching between work and break sessions.

let workTime = 25 * 60;
let breakTime = 5 * 60;
let isWork = true;
let interval;

function startTimer() {
  interval = setInterval(() => {
    let currentTime = isWork ? workTime : breakTime;
    currentTime--;
    displayTime(currentTime);

    if (currentTime <= 0) {
      clearInterval(interval);
      isWork = !isWork;
      startTimer(); // switch session
    }

    if (isWork) {
      workTime = currentTime;
    } else {
      breakTime = currentTime;
    }

    localStorage.setItem("pomodoroSession", JSON.stringify({ workTime, breakTime, isWork }));
  }, 1000);
}

💡 Functionality:

Switches between work & break automatically
Persists session state using localStorage

📦 Drag-and-Drop Kanban Board

A dev-focused task board built using HTML5 Drag API and localStorage.

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev, targetColumnId) {
  ev.preventDefault();
  let data = ev.dataTransfer.getData("text");
  let task = document.getElementById(data);
  document.getElementById(targetColumnId).appendChild(task);
  saveBoardState();
}

💡 Functionality:

Drag tasks across Planning → In Progress → Code Review → Deployed
Stores task positions and board state in localStorage
Custom labels, priority colors, and metadata modals supported

🌈 Theme Toggle with Custom Color Schemes

Switches between your 4 colour themes: pink, blue, green and purple.

const themeBtn = document.getElementById("theme-toggle");

themeBtn.addEventListener("click", () => {
  const themes = ["pink", "blue", "green", "purple"];
  const current = document.documentElement.getAttribute("data-theme");
  const index = themes.indexOf(current);
  const next = themes[(index + 1) % themes.length];
  document.documentElement.setAttribute("data-theme", next);
  localStorage.setItem("theme", next);
});

💡 Functionality:

Cycles through these color palettes:
- 🌸 Pink: #e91e63 / #9c27b0
- 🔵 Blue: #1976d2 / #0d47a1
- 🌿 Green: #388e3c / #2e7d32
- 💜 Purple: #7b1fa2 / #6a1b9a
Smooth transitions using CSS custom properties
Stores user preference in localStorage

📝 Daily Focus Goal Persistence

A minimal yet powerful tool to set your main focus for the day.

const goalInput = document.getElementById("daily-goal");

goalInput.addEventListener("input", () => {
  localStorage.setItem("focusGoal", goalInput.value);
});

window.addEventListener("DOMContentLoaded", () => {
  const savedGoal = localStorage.getItem("focusGoal");
  if (savedGoal) goalInput.value = savedGoal;
});

💡 Functionality:

Saves and reloads your day's priority (1 only)
Reinforces focus and intention-setting habits
Seamlessly integrated with Focus Mode layout

💪🔥 Short, Sweet, Sweaty & Blood-Pumping Workouts

Keeps your mind and body fresh with built-in movement and mini-workouts.

const workoutBtns = document.querySelectorAll(".workout-start");

workoutBtns.forEach((btn) =>
  btn.addEventListener("click", () => {
    const type = btn.dataset.type;
    startWorkout(type); // launches Desk, HIIT, Tabata, or Cardio
    showToast(`${type} started! 💪`);
  })
);

💡 Functionality:

One-click workouts: Desk, HIIT, Tabata, or Cardio
Tracks stats like "Today", "This Week", and "All Time"
Accompanied by motivational feedback, sounds, and light UI celebration
Helps break sedentary flow and boost energy throughout the day

🧰 Tech Stack

AetherDesk was crafted entirely with core frontend technologies - keeping it fast, lightweight, and fully customizable:

🧱 HTML5 - Semantic structure, accessibility-friendly tags, and ARIA roles
🎨 CSS3 - Responsive design with flex, grid, clamp(), and transitions
💅 SASS - Modular stylesheets with nesting and variables for scalable theming
💾 localStorage API - For persisting themes, focus goals, task boards, stats, and more
✨ JavaScript (ES6+) - Core logic for timers, drag-and-drop, theme toggles, and interactivity
🧩 HTML5 Drag & Drop API - Powering the Kanban task movement with smooth UX
🔊 Web Notifications + Toast UI - For subtle feedback and motivation
♿ ARIA & WCAG 2.1 Compliant - Designed with accessibility and inclusivity in mind

⚠️ Challenges I Faced

Every part of AetherDesk pushed me to think deeper about both functionality and feel, here were the toughest yet most rewarding parts:

🔄 Handling dynamic state without frameworks - I manually implemented everything from Pomodoro logic to drag-and-drop Kanban boards, focus goals, and theme persistence using vanilla JS
🧠 Designing four distinct yet unified modes - making Dashboard, Focus, Learning, and Play feel like separate worlds that still belonged to the same cohesive workspace
🎨 Marrying aesthetics with productivity - I wanted it to look beautiful but also support real workflows, with smooth animations, intuitive UX, and zero visual clutter
♿ Ensuring accessibility throughout - from ARIA labels and focus indicators to keyboard navigation and color contrast, I manually implemented inclusive design principles
💡 Creating something I'd genuinely use daily - it wasn't just about function; it was about joy, identity, and crafting a workspace that feels just right, for me

📝 What I Learned

This wasn’t just a design or coding task, but a complete creative and functional exploration for me:

✅ Mastered responsive layouts using Flexbox, CSS Grid, and modern units like clamp()

✅ Sharpened my Vanilla JS abilities by handling logic-heavy components without libraries

✅ Used localStorage extensively to make every section feel persistent and intentional

✅ Built reusable components like popups, modals, and cards to streamline UI/UX consistency

✅ Adopted SASS to write scalable and clean CSS

✅ Applied accessibility best practices - ARIA roles, keyboard interactions, and focus highlights

✅ Designed around real user behavior - focus sessions, learning bursts, game breaks, and mindful wellness

✅ Learned to build a space that supports both productivity and personality

💖😌 What I’m Proud Of

🎯 Personalization: It truly feels like a space crafted around my workflow, preferences, and daily rhythm
🎨 Themes & Modes: Light/dark toggle, 4 unique color palettes, and soft gradient transitions for visual delight
⚡ Performance: Built from scratch using pure HTML, CSS, and JS - no frameworks, no dependencies, just clean and fast
♿ Accessibility: Manual ARIA roles, keyboard navigation, and WCAG-compliant color contrast for an inclusive experience

And yes, the interface is intentionally optimized for larger screens where deep work actually happens.

I made everything a bit more spacious because... I wear specs 😭😭

On laptops, just zoom out to 80% and you’ll enjoy the full AetherDesk feel!

✨ Final Thoughts

AetherDesk isn’t just a project, it’s my digital space. A workspace that mirrors how I think, work, learn, and unwind.

It’s where Pomodoro meets play, commits meet calm, and deep work meets dopamine.

I didn’t want just another dashboard - I wanted a home for my dev flow.

Something that's built just for me, as a focused developer, a curious learner, and someone who needs that quick Wordle or HIIT break just to reset.

Thank you DEV.to and Axero for giving me a prompt that finally let me build what I didn’t even know I needed 💙🩷

From exploring real intranets to infusing it with my own chaos, clarity, and creativity - this was more than a challenge. It was a joy.

Thank you for making it to the end - from fatigue to flow, code to calm, this space isn’t just mine anymore. It’s for every dev who wants it all in one. ✨💻🧠💖🎯

Last but not the least - thank you if you made it this far and read it all! 🫶

If you found AetherDesk inspiring or useful, here’s how you can show some love:

✨ Star the GitHub repo
🍴 Fork it and make it your own digital sanctuary
💬 Leave a reaction or comment on this article - I’d love to hear your thoughts!

Your support truly means the world. 💖

Top comments (4)

dummy • Jul 12

Seriously impressive! AetherDesk feels premium - clean, elegant, and thoughtfully built. Loved how you structured it with HTML5, CSS3, and SASS, and added smooth interactivity using JS, localStorage, drag-and-drop, and more. Brilliant work!