https://github.com/code-beaker/social-media-dashboard-code-beaker

Social Media Dashboard with Theme Switcher
https://github.com/code-beaker/social-media-dashboard-code-beaker

css frontendmentor-challenge html js scss

Last synced: 4 months ago
JSON representation

Social Media Dashboard with Theme Switcher

• Host: GitHub
• URL: https://github.com/code-beaker/social-media-dashboard-code-beaker
• Owner: Code-Beaker
• Created: 2024-06-09T14:38:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-11T02:44:58.000Z (over 1 year ago)
• Last Synced: 2025-09-05T21:03:55.076Z (5 months ago)
• Topics: css, frontendmentor-challenge, html, js, scss
• Language: HTML
• Homepage: https://social-media-dashboard-code-beaker.vercel.app/
• Size: 283 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Social Media Dashboard with Theme Switcher

This is a solution to the **Social Media Dashboard with Theme Switcher** from [Frontend Mentor](https://frontendmentor.io)

## Preview

Preview images of the website on both desktops and mobile phones.

> [!NOTE]

> The preview image does not include the toggle **New** toggle switch as they were taken before the switch was created.

### Light Mode

#### Desktop

![alt text](preview-desktop-light.png)

#### Mobile

![alt text](preview-mobile-light.jpg)

### Dark Mode

#### Desktop

![alt text](preview-desktop-dark.png)

#### Mobile

![alt text](preview-mobile-dark.jpg)

## Tools and Languages

- HTML

- SCSS

- JS

- [Vite](https://vitejs.dev)

- [Bootstrap Icons](https://icons.getbootstrap.com)

## Process

Creating and running the vite application using `npm`.

```sh

npm create vite@latest -- --template vanilla app

cd app

npm install

npm run dev

```

## Links

- [GitHub Repository](https://github.com/Code-Beaker/social-media-dashboard-code-beaker)

- [Netlify Deploy](https://social-media-dashboard-code-beaker.netlify.app/)

- [Vercel Deploy](https://social-media-dashboard-code-beaker.vercel.app/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/810aa684-c565-465f-84a6-508bea723099/deploy-status)](https://app.netlify.com/sites/social-media-dashboard-code-beaker/deploys)