Aishika3

Posted on Jul 20 • Edited on Aug 3

TechElevate Office – A Modern Intranet Dashboard- Holistic Webdev Challenge

#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

TechElevate Office is a modern, all‑in‑one intranet dashboard designed for hybrid or remote and work from office organizations.

The goal: provide a single, friendly digital space for team announcements, essential resources, collaboration, and engagement—delivering an experience that feels like a digital HQ.

Features:

🌟 Welcome section: Inspiring landing area with company stats and a clear call‑to‑action.
📈 Key Metrics: Panels for loan growth, investments, new accounts, and goals.
📬 Message Button (Floating Icon) appears only when logged in—lets employees message HR or colleagues.
📰 Economics, News & Events: Article teaser, image slide, and feed list with modal.
🗃️ Role-Gated Dashboard: Sections like Projects, Benefits, Reports, Helpdesk, Directory, and Forms are hidden by default and revealed only after login.
📝 Forms & Templates: Searchable, filterable categories (onboarding, payroll, SOPs, privacy)which are hidden by default and revealed only after login.
📅 Calendar & Events: Interactive month view + upcoming events list.
💬 Social Corner: Lightweight feed (posts, comments, likes) in vanilla JS.
🎂 Birthdays: Auto list with profile images.
👥 Careers Page: Team intro + open positions grid.
🤝 Trusted By: Partner/client logo strip.
🔐 Employee Login: Secure login modal in the navbar for employee dashboard access. After login, the user’s name is shown (Hi! Username) for a personalized experience.
📱 Fully Responsive: Flex/Grid + Tailwind utilities.
♿ Accessible: Semantic HTML, focus states, ARIA labels, keyboard interactions.

Demo

Live Demo:
https://company-website-elevate.vercel.app/
GitHub Repo: https://github.com/Aishika3/Company_website_elevate
Video Demo:
https://drive.google.com/file/d/1w0mhCozFBI73HcHcOLjkQY60lWjP5-40/view?usp=sharing

Screenshots and Key Highlights

Home Page

Dark home page image (modern glass building, dusk).
Employee login modal in navbar—after logging in, the user is greeted by name (“Hi! Username”).
Overlay stats: 50+ projects, 100+ engineers, $3.5M value.
Bold headline: Build software people love.
“Get started” + “Scroll down” cues.

Navbar Section

Intuitive Navbar: Instantly access any section of the dashboard with a single click using the streamlined navigation bar.
Login Option: Secure employee login is available directly from the navbar for quick access to personalized features.

Experience / About Intro

Clean white section, ample whitespace.
Headline stresses “vision into reality.”
Overlapping team avatars for trust.
Partner/logo row + “Learn more” CTA.

Economics and News

Three‑part layout: summary card, feature image, news list.
“Key Economic Indicators” article teaser.
Sidebar with stacked news thumbnails.
Card‑based, rounded, shadowed style.

Forms and Templates and Dashboard Buttons

They are role-gated by default and are hidden by default and revealed only after login.
Row of square navigation buttons (Projects-showing the lists of projects the employee is working ;Benefits-benefits of employee, etc).
Search bar to find the required forms/templates.
Color‑coded form category chips.
Adjacent calendar card (month view).

Forms, Calendar and Events

Forms and template section are role gated by default and shown when logged in.
Forms grid + calendar + events list column.
Event items: date badge, title, category pill.
Consistent white cards, clear hierarchy.
Enhances at‑a‑glance scheduling.

Social Corner and Birthdays

Post input + grid of social update cards.
Helps the employee to create new post
Each post: avatar, snippet, image, stats.
Birthdays sidebar (headshots & dates).
Emphasizes engagement + recognition.

Team Section

Split layout: narrative text + large team photo.
Headline introduces team culture.
Rounded image card with shadow.
Reinforces authenticity & collaboration.

Open Positions

Grid of uniform job cards.
Each shows role, type, description, location, salary.
Contact email per card.
Clean, scannable recruiting section.

Contact Panel and Trusted Logos

“Get in Touch” heading with address, phone, email.
Clear emphasis on contact details.
Grayscale logo strip for social proof.
Claim: “Trusted by 1600+ companies.”

Message section to help the employee to contact colleagues and team mates

Visible only after login – ensures authenticated access.
Floating icon – fixed at the bottom-right of the screen.
Links to message.html – for internal messaging.
Toggled via JavaScript – based on isLoggedIn state.
Styled with TailwindCSS – responsive and non-intrusive.

Journey

Approach

Started with a modular layout plan (hero, content rails, utility panels) to avoid later restructuring. Built structural HTML first, layered Tailwind utilities, then added JS enhancements.
Added a login modal in the navbar for secure employee access to dashboard features. The username appears after login for a personalized experience, and logout toggles the session—all handled in a smooth modal flow.

Rapid Prototyping

TailwindCSS enabled fast adjustments to spacing, color, and responsive breakpoints with minimal custom CSS.

Vanilla JavaScript Choices

Modal logic (open/close + overlay) Now also used for login/logout toggle and username display in the home area.
Forms & templates live filtering
Calendar month navigation
Social feed post insertion & progressive loading

Responsiveness

Mobile‑first classes; grids collapse to single column, large interactive areas remain tappable.
Login modal and navbar adapt to all screen sizes; navbar menu includes direct login at the entry point.

Accessibility

Semantic HTML sectioning (header, nav, main, section, article, aside)
aria-label + descriptive alt text
Focus rings preserved/customized
Button roles instead of clickable divs

Key Challenges and Solutions

Challenge	Solution
Conditional visibility based on login	`.auth-only` class toggle + login state management
Visual clutter risk	Consistent card pattern + whitespace rhythm
Lightweight interactivity without frameworks	Modular vanilla JS functions
Calendar accessibility	Keyboard‑focusable day buttons with `aria-label`s
Keeping performance high	No large libraries, optimized images, defer noncritical logic

Lessons Learned

Early information architecture prevents later UI churn.
Vanilla JS remains efficient for mid‑sized dashboards.
Accessibility work early = fewer retrofits.

Tech Stack

Layer	Tools
Markup	HTML5 (semantic)
Styling	TailwindCSS + minimal custom CSS
Interactivity	Vanilla JavaScript (ES6+)
Deployment	Vercel CI/CD – auto-deploys from GitHub.