├── .github └── FUNDING.yml ├── .gitignore ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── public ├── App.css ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── components │ ├── actionCenter │ │ └── actionCenter.css │ ├── appComponent │ │ └── appComponent.css │ ├── applications │ │ ├── about │ │ │ └── about.css │ │ ├── application.css │ │ └── settings │ │ │ └── settings.css │ ├── base │ │ └── base.css │ ├── contextMenu │ │ └── contextMenu.css │ ├── desktop │ │ └── desktop.css │ ├── loading │ │ └── loading.css │ ├── lockScreen │ │ └── lockScreen.css │ └── startMenu │ │ └── startMenu.css ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.css ├── index.html ├── manifest.json ├── robots.txt ├── theme │ └── style.css └── worker.js └── src ├── App.css ├── App.js ├── App.test.js ├── assets └── images │ ├── apps │ ├── aboutMe.png │ ├── chrome.svg │ ├── jioSaavn.png │ ├── mail.png │ ├── settings.svg │ ├── spreadsheet.svg │ ├── vsCode.png │ └── word.svg │ ├── baseImages │ ├── checked.svg │ ├── default_avatar.JPG │ ├── default_avatar.svg │ ├── default_folder.png │ ├── scanCode.png │ └── windows_10.svg │ ├── contextMenu │ ├── contact_me.png │ ├── credits.svg │ ├── github.svg │ ├── refresh.png │ ├── source_code.png │ └── star.png │ ├── data │ ├── Freelance.png │ └── KloudGin.png │ ├── social │ ├── email.png │ ├── github.svg │ ├── linkedin.svg │ └── twitter.svg │ └── wallpapers │ ├── default_wallpaper.jpg │ ├── lockScreenWall.jpg │ ├── wallpaper1.jpg │ ├── wallpaper2.jpg │ ├── wallpaper3.jpg │ └── wallpaper4.jpg ├── components ├── actionCenter │ ├── actionCenter.js │ └── actionCenter.scss ├── appComponent │ ├── appComponent.js │ └── appComponent.scss ├── applications │ ├── about │ │ ├── about.scss │ │ ├── aboutMe.about.js │ │ ├── contactMe.about.js │ │ ├── education.about.js │ │ ├── experience.about.js │ │ ├── projects.about.js │ │ ├── resume.about.js │ │ └── skills.about.js │ ├── application.scss │ ├── chrome.application.js │ ├── document.application.js │ ├── jiosaavn.application.js │ ├── mail.application.js │ ├── settings │ │ ├── background.settings.js │ │ └── settings.scss │ ├── spreadsheet.application.js │ └── vscode.application.js ├── base │ ├── appIcon.js │ ├── base.scss │ ├── calendarOverlay.js │ ├── clockComponent.js │ ├── credits.js │ └── socialBlock.js ├── contextMenu │ ├── contextMenu.scss │ ├── desktop.contextMenu.js │ └── power.contextmenu.js ├── desktop │ ├── desktop.js │ └── desktop.scss ├── loading │ ├── loading.js │ └── loading.scss ├── lockScreen │ ├── landing.lockScreen.js │ ├── lockScreen.scss │ └── signIn.lockScreen.js ├── startMenu │ ├── startMenu.js │ └── startMenu.scss └── taskBar │ ├── taskBar-Icon.js │ └── taskBar.js ├── containers ├── blueScreen404.container.js ├── desktop.container.js ├── lockScreen.container.js ├── shutDown.container.js └── windows.container.js ├── index.js ├── index.scss ├── logo.svg ├── reportWebVitals.js ├── serviceWorker.js ├── setupTests.js ├── theme ├── _variables.scss └── style.scss └── utils ├── actions ├── app.action.js ├── settingsaction.js └── system.action.js ├── data ├── apps.config.js ├── cv_ver1.pdf ├── project.config.js ├── settings.config.js └── user.config.js ├── documents ├── app.document.js ├── enums.js ├── settings.document.js └── system.document.js ├── firebaseConfig.js ├── reducers ├── app.reducer.js ├── settings.reducer.js └── system.reducer.js ├── routes.js ├── services └── common-util-servies.js └── store.js /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [dawidolko] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Dawid Olko 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🪟 windows.dawidolko.pl 2 | _A React-powered personal portfolio that looks and feels like Microsoft Windows 10_ 3 | 4 | [![Build](https://img.shields.io/github/actions/workflow/status/dawidolko/Simulaing-Windows-System-GUI/Build.yml?label=build&logo=github)](https://github.com/dawidolko/Simulaing-Windows-System-GUI/actions) 5 | [![Website Status](https://img.shields.io/website?down_color=red&down_message=offline&up_message=online&url=https%3A%2F%2Fwindows.dawidolko.pl)](https://windows.dawidolko.pl) 6 | [![Stars](https://img.shields.io/github/stars/dawidolko/Simulaing-Windows-System-GUI?style=social)](https://github.com/dawidolko/Simulaing-Windows-System-GUI/stargazers) 7 | 8 | > ⚡ **Live Demo:** 9 | 10 | --- 11 | 12 | ## 📑 Table of Contents 13 | 1. [About](#about) 14 | 2. [Project Structure](#project-structure) 15 | 3. [Star History](#star-history) 16 | 4. [Getting Started](#getting-started) 17 | 5. [Customization Guide](#customization-guide) 18 | 6. [Contributing](#contributing) 19 | 7. [License & Author](#license--author) 20 | 21 | --- 22 | 23 | ## About 24 | `windows.dawidolko.pl` is a **customisable portfolio website** that recreates the Windows 10 desktop experience entirely in the browser. 25 | Under the hood it’s a standard React + JavaScript SPA, but on the surface it behaves like a miniature OS: draggable windows, a start menu, themed apps, wallpapers and more. Use it as a portfolio, résumé, or playful landing page. 🖱️🖥️ 26 | 27 | --- 28 | 29 | ## Project Structure 30 | ```text 31 | SIMULAING-WINDOW... 32 | ├─ .github/ GitHub Actions & issue templates 33 | │ ├─ ISSUE_TEMPLATE/ 34 | │ └─ workflows/ 35 | ├─ node_modules/ Runtime dependencies 36 | ├─ public/ Static assets served at / 37 | │ ├─ android-chrome-*.png 38 | │ ├─ apple-touch-icon.png 39 | │ ├─ favicon*.png|ico 40 | │ ├─ index.html Main HTML shell 41 | │ ├─ manifest.json PWA manifest 42 | │ └─ worker.js Service-worker 43 | ├─ src/ Application source 44 | │ ├─ assets/ Images & fonts 45 | │ ├─ components/ Re-usable React components 46 | │ ├─ containers/ Page-level components 47 | │ ├─ theme/ Global styles & variables 48 | │ ├─ utils/ Helper functions & configs 49 | │ ├─ App.* Root component & styles 50 | │ ├─ index.* App entry point 51 | │ └─ serviceWorker.js PWA service worker registration 52 | ├─ .gitignore 53 | ├─ LICENSE MIT 54 | ├─ package*.json NPM metadata & scripts 55 | └─ README.md You are here! 56 | ```` 57 | 58 | --- 59 | 60 | ## Star History 61 | 62 | [![Star History Chart](https://api.star-history.com/svg?repos=dawidolko/Simulaing-Windows-System-GUI\&type=Date)](https://star-history.com/#dawidolko/Simulaing-Windows-System-GUI&Date) 63 | 64 | --- 65 | 66 | ## Getting Started 67 | 68 | ### Prerequisites 69 | 70 | * **Git** – [https://git-scm.com](https://git-scm.com) 71 | * **Node.js 16 +** (includes **npm**) – [https://nodejs.org](https://nodejs.org) 72 | 73 | ### Installation 74 | 75 | ```bash 76 | # 1. Clone the repo 77 | git clone https://github.com/dawidolko/Windows-Simulaing-System-GUI 78 | cd Windows-Simulaing-System-GUI/ 79 | 80 | # 2. Install dependencies 81 | npm install # or pnpm / yarn 82 | 83 | # 3. Start the dev server 84 | npm start 85 | ``` 86 | 87 | ### Production build 88 | 89 | ```bash 90 | npm run build # outputs an optimised bundle in /build 91 | ``` 92 | 93 | > **Tip (WSL users)** 94 | > If you’re on Windows Subsystem for Linux, you might need an X-server or the Windows Node runtime. 95 | > See Microsoft’s guide: [https://aka.ms/wslg](https://aka.ms/wslg). 96 | 97 | --- 98 | 99 | ## Customization Guide 100 | 101 | 1. **User profile** 102 | Edit `src/utils/data/user.config.js` with your name, avatar, social links, etc. 103 | 104 | 2. **App list & sidebar** 105 | Toggle built-in apps or the left sidebar in `src/utils/data/apps.config.js`. 106 | 107 | 3. **Wallpapers** 108 | Add images to `public/wallpapers/` (create the folder if missing) and reference them in `apps.config.js`. 109 | 110 | 4. **Analytics (optional)** 111 | *Disable* or *enable* Google Analytics / Firebase in `src/utils/data/project.config.js`. 112 | 113 | 5. **Firebase keys (only if analytics is on)** 114 | Create a `.env` file at the project root: 115 | 116 | ```dotenv 117 | REACT_APP_APIKEY=... 118 | REACT_APP_AUTH_DOMAIN=... 119 | REACT_APP_DATABASE_URL=... 120 | REACT_APP_PROJECT_ID=... 121 | REACT_APP_STORAGE_BUCKET=... 122 | REACT_APP_MESSAGING_SENDER_ID=... 123 | REACT_APP_APP_ID=... 124 | REACT_APP_MEASUREMENT_ID=... 125 | ``` 126 | 127 | 6. **EmailJS (optional contact form)** 128 | 129 | ```dotenv 130 | REACT_APP_EMAILJS_KEY=your_emailjs_key 131 | ``` 132 | 133 | --- 134 | 135 | ## Contributing 136 | 137 | Contributions are what make open source amazing! 138 | If you spot a bug 🐞, want a new feature ✨, or simply improve the docs: 139 | 140 | 1. **Fork** the project 141 | 2. Create your branch `git checkout -b feat/awesome-feature` 142 | 3. **Commit** your changes `git commit -m "Add awesome feature"` 143 | 4. **Push** the branch `git push origin feat/awesome-feature` 144 | 5. Open a **Pull Request** 145 | 146 | --- 147 | 148 | ## License & Author 149 | 150 | * **License:** MIT – do with it what you will 🆓 151 | * **Author:** Dawid Olko 152 | 153 | * Portfolio: [https://dawidolko.pl](https://dawidolko.pl) 154 | * GitHub: [https://github.com/dawidolko](https://github.com/dawidolko) 155 | * LinkedIn: [https://www.linkedin.com/in/dawidolko/](https://www.linkedin.com/in/dawidolko/) 156 | 157 | > Made with ❤️, ☕ and a nostalgic love for the Windows 10 aesthetic. 158 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dawidolko", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@fluentui/react": "^8.14.13", 7 | "@testing-library/jest-dom": "^5.12.0", 8 | "@testing-library/react": "^11.2.7", 9 | "@testing-library/user-event": "^12.8.3", 10 | "emailjs-com": "^2.6.4", 11 | "firebase": "^8.6.5", 12 | "moment-timezone": "^0.5.33", 13 | "quill": "^1.3.7", 14 | "react": "^17.0.2", 15 | "react-calendar": "^3.4.0", 16 | "react-contexify": "^5.0.0", 17 | "react-dom": "^17.0.2", 18 | "react-draggable": "^4.4.3", 19 | "react-live-clock": "^5.1.0", 20 | "react-moment": "^1.1.1", 21 | "react-quilljs": "^1.2.14", 22 | "react-redux": "^7.2.4", 23 | "react-router-dom": "^5.2.0", 24 | "react-scripts": "^5.0.1", 25 | "react-spreadsheet": "^0.5.4", 26 | "redux": "^4.1.0", 27 | "sass": "^1.32.13", 28 | "uikit": "^3.6.22", 29 | "web-vitals": "^1.1.2" 30 | }, 31 | "scripts": { 32 | "start": "react-scripts start", 33 | "build": "react-scripts build", 34 | "test": "react-scripts test", 35 | "eject": "react-scripts eject" 36 | }, 37 | "eslintConfig": { 38 | "extends": [ 39 | "react-app", 40 | "react-app/jest" 41 | ] 42 | }, 43 | "browserslist": { 44 | "production": [ 45 | ">0.2%", 46 | "not dead", 47 | "not op_mini all" 48 | ], 49 | "development": [ 50 | "last 1 chrome version", 51 | "last 1 firefox version", 52 | "last 1 safari version" 53 | ] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/App.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/components/actionCenter/actionCenter.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .action-center { 15 | height: calc(100% - 40px) !important; 16 | } 17 | 18 | .action-center-wrapper { 19 | display: flex !important; 20 | flex-wrap: wrap !important; 21 | width: 100% !important; 22 | } 23 | 24 | .action-center-btn { 25 | min-height: 60px !important; 26 | color: var(--font-white) !important; 27 | background-color: rgb(50, 49, 48) !important; 28 | } 29 | 30 | .action-center-btn:hover { 31 | cursor: pointer !important; 32 | border: 2px solid var(--color-secondary) !important; 33 | } 34 | 35 | .settings-active { 36 | background-color: var(--color-blue) !important; 37 | } 38 | -------------------------------------------------------------------------------- /public/components/appComponent/appComponent.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .app-component { 15 | height: 80% !important; 16 | width: 80% !important; 17 | } 18 | 19 | @media only screen and (max-width: 640px) { 20 | .app-component { 21 | width: 95% !important; 22 | } 23 | } 24 | .app-topbar { 25 | height: 32px !important; 26 | width: 100% !important; 27 | color: var(--font-white) !important; 28 | border-bottom-right-radius: unset !important; 29 | border-bottom-left-radius: unset !important; 30 | } 31 | 32 | .close-button:hover { 33 | color: var(--color-white); 34 | background-color: var(--color-red); 35 | } 36 | 37 | .title-bar { 38 | width: calc(100% - 140px) !important; 39 | } 40 | 41 | .app-top-functions { 42 | width: 100px !important; 43 | } 44 | 45 | .maximized { 46 | width: 100% !important; 47 | height: calc(100% - 40px) !important; 48 | } 49 | 50 | .app-content-container { 51 | height: 100% !important; 52 | width: 80% !important; 53 | } 54 | 55 | .maximized-application { 56 | height: 100% !important; 57 | width: 100% !important; 58 | } 59 | 60 | .app-sidebar { 61 | height: 100% !important; 62 | width: 20% !important; 63 | } 64 | 65 | .app-content { 66 | height: calc(100% - 32px) !important; 67 | width: 100% !important; 68 | overflow-y: scroll !important; 69 | overflow-x: hidden !important; 70 | } 71 | 72 | .scrollbar::-webkit-scrollbar { 73 | width: 10px; 74 | } 75 | 76 | .scrollbar::-webkit-scrollbar-thumb { 77 | background-color: #babac0; 78 | border-radius: 16px; 79 | } 80 | 81 | .scrollbar::-webkit-scrollbar-button { 82 | display: none; 83 | } 84 | 85 | .app-title { 86 | border-bottom-right-radius: unset !important; 87 | border-bottom-left-radius: unset !important; 88 | width: 200px !important; 89 | height: 100% !important; 90 | } 91 | 92 | .sidebar-list { 93 | color: var(--font-white) !important; 94 | } 95 | 96 | .sidebar-list-item { 97 | cursor: pointer !important; 98 | padding: 10px !important; 99 | } 100 | 101 | .sidebar-list :hover { 102 | background-color: rgb(50, 49, 48) !important; 103 | } 104 | 105 | .sidebar-list .uk-active { 106 | background-color: rgb(50, 49, 48) !important; 107 | border-left: 5px solid; 108 | border-color: var(--color-blue) !important; 109 | font-weight: bold; 110 | } 111 | 112 | .app-nav-bar { 113 | width: 100%; 114 | margin-left: 0px !important; 115 | height: 25px !important; 116 | } 117 | 118 | .disabled-text-field .ms-TextField-wrapper .ms-TextField-fieldGroup { 119 | border: 0px !important; 120 | } 121 | .disabled-text-field .ms-TextField-wrapper .ms-TextField-fieldGroup .ms-TextField-field { 122 | background: none rgb(50, 49, 48) !important; 123 | color: rgb(121, 119, 117) !important; 124 | border: none rgb(50, 49, 48) !important; 125 | } 126 | 127 | .isApplication { 128 | display: none !important; 129 | } 130 | 131 | .isApplication-list { 132 | height: 96% !important; 133 | } 134 | 135 | .dropdown-content { 136 | position: absolute; 137 | min-width: 160px; 138 | z-index: 10000; 139 | } 140 | 141 | .show-element { 142 | display: block !important; 143 | } 144 | 145 | .hide-element { 146 | display: none !important; 147 | } 148 | -------------------------------------------------------------------------------- /public/components/applications/about/about.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .container { 15 | position: relative; 16 | overflow: hidden; 17 | } 18 | 19 | .container:before { 20 | content: ""; 21 | position: absolute; 22 | top: 0; 23 | left: 10px; 24 | margin-left: -1px; 25 | width: 2px; 26 | height: 100%; 27 | background: #ccd1d9; 28 | z-index: 1; 29 | } 30 | 31 | .timeline-block { 32 | display: flex; 33 | -webkit-box-pack: justify; 34 | -webkit-justify-content: space-between; 35 | -moz-box-pack: justify; 36 | justify-content: space-between; 37 | clear: both; 38 | } 39 | 40 | .timeline-block-right { 41 | float: right; 42 | } 43 | 44 | .marker { 45 | width: 16px; 46 | height: 16px; 47 | border-radius: 50%; 48 | border: 2px solid #f5f7fa; 49 | background: #4fc1e9; 50 | margin-top: 10px; 51 | z-index: 9999; 52 | } 53 | 54 | .timeline-content { 55 | width: 95%; 56 | padding: 0 15px; 57 | } 58 | 59 | .timeline-content span { 60 | font-size: 15px; 61 | color: var(--font-light-grey); 62 | } 63 | 64 | .positon-desc { 65 | font-size: 14px; 66 | line-height: 1.5em; 67 | word-spacing: 1px; 68 | color: var(--font-light-grey); 69 | } 70 | 71 | @media screen and (max-width: 768px) { 72 | .container:before { 73 | left: 8px; 74 | width: 2px; 75 | } 76 | .timeline-block { 77 | width: 100%; 78 | margin-bottom: 30px; 79 | } 80 | .timeline-block-right { 81 | float: none; 82 | } 83 | .timeline-block-left { 84 | float: none; 85 | direction: ltr; 86 | } 87 | } 88 | .org-img { 89 | height: 75px !important; 90 | } 91 | 92 | .project-card { 93 | background: rgb(50, 49, 48) !important; 94 | } 95 | 96 | .link-to-project { 97 | color: var(--font-color-white); 98 | } 99 | .link-to-project .ms-Button-flexContainer .ms-Button-icon { 100 | font-size: 20px !important; 101 | } 102 | 103 | .link-to-project:hover { 104 | color: var(--color-blue); 105 | background-color: rgb(50, 49, 48) !important; 106 | } 107 | 108 | .mail-card { 109 | border: 2px solid #f5f7fa; 110 | } 111 | -------------------------------------------------------------------------------- /public/components/applications/application.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .form-input .ms-TextField .ms-TextField-wrapper .ms-Label { 15 | color: var(--font-white) !important; 16 | } 17 | .form-input .ms-TextField .ms-TextField-wrapper .ms-TextField-fieldGroup .ms-TextField-field { 18 | background-color: var(--color-secondary) !important; 19 | color: var(--font-white) !important; 20 | } 21 | 22 | .discard-button :hover { 23 | background-color: #323130 !important; 24 | } 25 | -------------------------------------------------------------------------------- /public/components/applications/settings/settings.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .wallpaper-thumbnail { 15 | height: 250px !important; 16 | } 17 | -------------------------------------------------------------------------------- /public/components/base/base.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .taskbar-clock { 15 | height: 40px !important; 16 | width: unset !important; 17 | margin-right: unset !important; 18 | } 19 | 20 | .clock-timer { 21 | font-size: 12px !important; 22 | color: var(--font-white) !important; 23 | } 24 | 25 | .app-icon:hover { 26 | background: rgba(74, 74, 74, 0.5) !important; 27 | backdrop-filter: blur(20px) !important; 28 | -webkit-backdrop-filter: blur(20px) !important; 29 | } 30 | -------------------------------------------------------------------------------- /public/components/contextMenu/contextMenu.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | :root .ms-ContextualMenu { 15 | background-color: rgb(37, 36, 35) !important; 16 | } 17 | :root .ms-ContextualMenu-link:hover { 18 | background-color: rgb(50, 49, 48) !important; 19 | } 20 | :root .ms-ContextualMenu-itemText, 21 | :root .ms-ContextualMenu-icon { 22 | color: var(--font-white) !important; 23 | } 24 | -------------------------------------------------------------------------------- /public/components/desktop/desktop.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .taskbar-bottom { 15 | height: 40px !important; 16 | background: rgba(0, 0, 0, 0.55); 17 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 18 | backdrop-filter: blur(20px); 19 | -webkit-backdrop-filter: blur(20px); 20 | } 21 | 22 | .taskbar-icon { 23 | color: var(--color-white); 24 | width: 45px; 25 | margin-right: 5px; 26 | } 27 | 28 | .taskbar-quick-icon { 29 | color: var(--color-white); 30 | width: 30px; 31 | margin-right: 5px; 32 | } 33 | 34 | .taskbar-quick-icon:hover { 35 | color: var(--color-white); 36 | cursor: pointer !important; 37 | background-color: rgba(255, 255, 255, 0.1) !important; 38 | } 39 | 40 | .taskbar-icon:hover { 41 | color: var(--color-white); 42 | cursor: pointer !important; 43 | background-color: rgba(255, 255, 255, 0.1) !important; 44 | } 45 | 46 | .taskbar-icon-active { 47 | height: 90% !important; 48 | border-bottom: 1px solid #ccc; 49 | border-color: var(--color-blue) !important; 50 | } 51 | 52 | .onDesktop { 53 | background-color: rgba(255, 255, 255, 0.3) !important; 54 | } 55 | 56 | .onDesktop:hover { 57 | background-color: rgba(255, 255, 255, 0.5) !important; 58 | } 59 | 60 | .desktop-container { 61 | height: calc(100% - 40px) !important; 62 | } 63 | 64 | .taskbar { 65 | height: 40px !important; 66 | } 67 | -------------------------------------------------------------------------------- /public/components/loading/loading.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-weight: 300; 3 | } 4 | 5 | .wrapper { 6 | text-align: center; 7 | } 8 | 9 | .loader { 10 | position: relative; 11 | width: 50px; 12 | height: 50px; 13 | border-radius: 50%; 14 | animation: 4500ms linear 0s normal none infinite running; 15 | animation-name: rotate; 16 | left: 25px; 17 | } 18 | 19 | .loader span::after { 20 | position: absolute; 21 | width: 8px; 22 | height: 8px; 23 | border-radius: 50%; 24 | background-color: #fff; 25 | content: ""; 26 | display: block; 27 | transform-origin: 25px 25px; 28 | animation-duration: 3000ms; 29 | animation-iteration-count: infinite; 30 | animation-timing-function: ease-in-out; 31 | } 32 | 33 | @keyframes rotate { 34 | 0% { 35 | transform: rotate(0deg); 36 | } 37 | 100% { 38 | transform: rotate(360deg); 39 | } 40 | } 41 | .pip-0::after { 42 | transform: rotate(0deg); 43 | animation-name: rotate-0; 44 | animation-delay: 900ms; 45 | } 46 | 47 | @keyframes rotate-0 { 48 | 0%, 20% { 49 | transform: rotate(0deg); 50 | } 51 | 40%, 60% { 52 | transform: rotate(180deg); 53 | } 54 | 80%, 100% { 55 | transform: rotate(360deg); 56 | } 57 | } 58 | .pip-1::after { 59 | transform: rotate(20deg); 60 | animation-name: rotate-1; 61 | animation-delay: 775ms; 62 | } 63 | 64 | @keyframes rotate-1 { 65 | 0%, 20% { 66 | transform: rotate(20deg); 67 | } 68 | 40%, 60% { 69 | transform: rotate(200deg); 70 | } 71 | 80%, 100% { 72 | transform: rotate(380deg); 73 | } 74 | } 75 | .pip-2::after { 76 | transform: rotate(40deg); 77 | animation-name: rotate-2; 78 | animation-delay: 650ms; 79 | } 80 | 81 | @keyframes rotate-2 { 82 | 0%, 20% { 83 | transform: rotate(40deg); 84 | } 85 | 40%, 60% { 86 | transform: rotate(220deg); 87 | } 88 | 80%, 100% { 89 | transform: rotate(400deg); 90 | } 91 | } 92 | .pip-3::after { 93 | transform: rotate(60deg); 94 | animation-name: rotate-3; 95 | animation-delay: 525ms; 96 | } 97 | 98 | @keyframes rotate-3 { 99 | 0%, 20% { 100 | transform: rotate(60deg); 101 | } 102 | 40%, 60% { 103 | transform: rotate(240deg); 104 | } 105 | 80%, 100% { 106 | transform: rotate(420deg); 107 | } 108 | } 109 | .pip-4::after { 110 | transform: rotate(80deg); 111 | animation-name: rotate-4; 112 | animation-delay: 400ms; 113 | } 114 | 115 | @keyframes rotate-4 { 116 | 0%, 20% { 117 | transform: rotate(80deg); 118 | } 119 | 40%, 60% { 120 | transform: rotate(260deg); 121 | } 122 | 80%, 100% { 123 | transform: rotate(440deg); 124 | } 125 | } 126 | .pip-5::after { 127 | transform: rotate(100deg); 128 | animation-name: rotate-5; 129 | animation-delay: 275ms; 130 | } 131 | 132 | @keyframes rotate-5 { 133 | 0%, 20% { 134 | transform: rotate(100deg); 135 | } 136 | 40%, 60% { 137 | transform: rotate(280deg); 138 | } 139 | 80%, 100% { 140 | transform: rotate(460deg); 141 | } 142 | } 143 | @keyframes opacity { 144 | from { 145 | opacity: 1; 146 | } 147 | to { 148 | opacity: 0; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /public/components/lockScreen/lockScreen.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .SignInOverlay { 15 | background: rgba(0, 0, 0, 0.25); 16 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 17 | backdrop-filter: blur(4px); 18 | -webkit-backdrop-filter: blur(4px); 19 | } 20 | -------------------------------------------------------------------------------- /public/components/startMenu/startMenu.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .start-menu { 15 | height: 80% !important; 16 | width: 50vw !important; 17 | top: calc(20% - 40px) !important; 18 | background: rgba(74, 74, 74, 0.5) !important; 19 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important; 20 | backdrop-filter: blur(20px) !important; 21 | -webkit-backdrop-filter: blur(20px) !important; 22 | border-radius: 10px !important; 23 | } 24 | 25 | .start-quick-actions { 26 | width: 42px !important; 27 | height: 100% !important; 28 | } 29 | 30 | .start-app-list { 31 | width: calc(100% - 42px - 70%); 32 | } 33 | 34 | .start-tiles { 35 | width: calc(100% - 42px - 30%); 36 | height: 100% !important; 37 | overflow: hidden; 38 | } 39 | 40 | @media screen and (max-width: 640px) { 41 | .start-menu { 42 | width: 100vw !important; 43 | } 44 | .start-app-list { 45 | width: 0 !important; 46 | display: none; 47 | } 48 | .start-tiles { 49 | width: calc(100% - 42px); 50 | height: 100% !important; 51 | overflow: hidden; 52 | } 53 | } 54 | .quick-action-button { 55 | width: 40px !important; 56 | height: 40px !important; 57 | } 58 | 59 | .start-menu-list { 60 | color: var(--font-white) !important; 61 | } 62 | 63 | .start-menu-list-item { 64 | font-size: 14px !important; 65 | cursor: pointer !important; 66 | padding: 10px !important; 67 | } 68 | 69 | .start-menu-list :hover { 70 | background-color: rgb(50, 49, 48) !important; 71 | } 72 | 73 | .profile-card { 74 | background: rgb(50, 49, 48) !important; 75 | } 76 | 77 | .profile-card-img { 78 | margin-top: calc(-10% - 40px) !important; 79 | } 80 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/public/favicon.ico -------------------------------------------------------------------------------- /public/index.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | windows.dawidolko.pl - Simulaing System Windows 6 | 9 | 12 | 13 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 | 30 |
31 | 55 | 56 | 59 | 60 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dawid Olko | Full Stack Developer", 3 | "short_name": "Dawid Olko", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "android-chrome-192x192.png", 12 | "sizes": "192x192", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "android-chrome-512x512.png", 17 | "sizes": "512x512", 18 | "type": "image/png" 19 | } 20 | ], 21 | "start_url": "/", 22 | "theme_color": "#ffffff", 23 | "background_color": "#ffffff", 24 | "display": "standalone", 25 | "scope": "/" 26 | } 27 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/theme/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | --font-white: rgb(250, 249, 248); 8 | --font-light-grey: #a4a4a4; 9 | --font-medium: 18px !important; 10 | --medium-screen: 640px !important; 11 | --small-screen: 960px; 12 | } 13 | 14 | .screenHeight { 15 | position: fixed; 16 | padding: 0; 17 | margin: 0; 18 | top: 0; 19 | left: 0; 20 | min-width: 100%; 21 | min-height: 100%; 22 | } 23 | 24 | .font-color-white { 25 | color: var(--color-white) !important; 26 | } 27 | 28 | .font-color-red { 29 | color: var(--color-red) !important; 30 | } 31 | 32 | .font-size-medium { 33 | font-size: var(--font-medium) !important; 34 | } 35 | 36 | .app-playground { 37 | height: 100% !important; 38 | width: 100% !important; 39 | } 40 | 41 | .height-100 { 42 | height: 100% !important; 43 | } 44 | 45 | .blur { 46 | background: rgba(74, 74, 74, 0.5) !important; 47 | backdrop-filter: blur(20px) !important; 48 | -webkit-backdrop-filter: blur(20px) !important; 49 | } 50 | 51 | .power-button .ms-Button-flexContainer .ms-Icon { 52 | font-size: 25px !important; 53 | } 54 | 55 | .blue-screen { 56 | background-color: var(--color-blue) !important; 57 | } 58 | -------------------------------------------------------------------------------- /public/worker.js: -------------------------------------------------------------------------------- 1 | var CACHE_NAME = "pwa-task-manager"; 2 | var urlsToCache = ["/", "/home", "/windows", "/404"]; 3 | 4 | // Install a service worker 5 | self.addEventListener("install", (event) => { 6 | // Perform install steps 7 | event.waitUntil( 8 | caches.open(CACHE_NAME).then(function (cache) { 9 | console.log("Opened cache"); 10 | return cache.addAll(urlsToCache); 11 | }) 12 | ); 13 | }); 14 | self.addEventListener("fetch", (event) => { 15 | event.respondWith( 16 | caches.match(event.request).then(function (response) { 17 | // Cache hit - return response 18 | if (response) { 19 | return response; 20 | } 21 | return fetch(event.request); 22 | }) 23 | ); 24 | }); 25 | 26 | // Update a service worker 27 | self.addEventListener("activate", (event) => { 28 | var cacheWhitelist = ["pwa-task-manager"]; 29 | event.waitUntil( 30 | caches.keys().then((cacheNames) => { 31 | return Promise.all( 32 | cacheNames.map((cacheName) => { 33 | if (cacheWhitelist.indexOf(cacheName) === -1) { 34 | return caches.delete(cacheName); 35 | } 36 | }) 37 | ); 38 | }) 39 | ); 40 | }); 41 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/App.css -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import store from "./utils/store"; 3 | import { BrowserRouter as Router } from "react-router-dom"; 4 | import { Provider } from "react-redux"; 5 | import Routes from "./utils/routes"; 6 | 7 | function App() { 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/assets/images/apps/aboutMe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/apps/aboutMe.png -------------------------------------------------------------------------------- /src/assets/images/apps/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/apps/jioSaavn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/apps/jioSaavn.png -------------------------------------------------------------------------------- /src/assets/images/apps/mail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/apps/mail.png -------------------------------------------------------------------------------- /src/assets/images/apps/settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/apps/spreadsheet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/apps/vsCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/apps/vsCode.png -------------------------------------------------------------------------------- /src/assets/images/apps/word.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/baseImages/checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/baseImages/default_avatar.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/baseImages/default_avatar.JPG -------------------------------------------------------------------------------- /src/assets/images/baseImages/default_avatar.svg: -------------------------------------------------------------------------------- 1 | male_avatar -------------------------------------------------------------------------------- /src/assets/images/baseImages/default_folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/baseImages/default_folder.png -------------------------------------------------------------------------------- /src/assets/images/baseImages/scanCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/baseImages/scanCode.png -------------------------------------------------------------------------------- /src/assets/images/baseImages/windows_10.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/contextMenu/contact_me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/contextMenu/contact_me.png -------------------------------------------------------------------------------- /src/assets/images/contextMenu/credits.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/images/contextMenu/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/contextMenu/refresh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/contextMenu/refresh.png -------------------------------------------------------------------------------- /src/assets/images/contextMenu/source_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/contextMenu/source_code.png -------------------------------------------------------------------------------- /src/assets/images/contextMenu/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/contextMenu/star.png -------------------------------------------------------------------------------- /src/assets/images/data/Freelance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/data/Freelance.png -------------------------------------------------------------------------------- /src/assets/images/data/KloudGin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/data/KloudGin.png -------------------------------------------------------------------------------- /src/assets/images/social/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/social/email.png -------------------------------------------------------------------------------- /src/assets/images/social/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/social/linkedin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/social/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/wallpapers/default_wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/wallpapers/default_wallpaper.jpg -------------------------------------------------------------------------------- /src/assets/images/wallpapers/lockScreenWall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/wallpapers/lockScreenWall.jpg -------------------------------------------------------------------------------- /src/assets/images/wallpapers/wallpaper1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/wallpapers/wallpaper1.jpg -------------------------------------------------------------------------------- /src/assets/images/wallpapers/wallpaper2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/wallpapers/wallpaper2.jpg -------------------------------------------------------------------------------- /src/assets/images/wallpapers/wallpaper3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/wallpapers/wallpaper3.jpg -------------------------------------------------------------------------------- /src/assets/images/wallpapers/wallpaper4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/assets/images/wallpapers/wallpaper4.jpg -------------------------------------------------------------------------------- /src/components/actionCenter/actionCenter.js: -------------------------------------------------------------------------------- 1 | import { Icon } from "@fluentui/react"; 2 | import React from "react"; 3 | import { useSelector } from "react-redux"; 4 | import "./actionCenter.scss"; 5 | import { useDispatch } from "react-redux"; 6 | import { toggleSettings } from "../../utils/actions/settingsaction"; 7 | import { ACTION_TYPES } from "../../utils/documents/enums"; 8 | import JIOSaavn from "../applications/jiosaavn.application"; 9 | 10 | function ActionCenter() { 11 | const settings = useSelector((state) => state.settingsState); 12 | const dispatch = useDispatch(); 13 | const handleSettingsClick = (type) => { 14 | dispatch(toggleSettings(type)); 15 | }; 16 | 17 | return ( 18 |
19 |
20 |
21 | 22 |
23 |
24 | {/* Wifi Button */} 25 |
31 | handleSettingsClick(ACTION_TYPES.TOGGLE_WIFI) 32 | } 33 | > 34 | {settings.wifiEnabled && ( 35 | 39 | )} 40 | {!settings.wifiEnabled && ( 41 | 45 | )} 46 | 47 | 48 | Wifi 49 | 50 |
51 | 52 | {/* Mute Button */} 53 |
59 | handleSettingsClick(ACTION_TYPES.TOGGLE_MUTE) 60 | } 61 | > 62 | {settings.isMute && ( 63 | 67 | )} 68 | {!settings.isMute && ( 69 | 73 | )} 74 | 75 | 76 | Sound 77 | 78 |
79 | 80 | {/* Airplane Mode */} 81 |
87 | handleSettingsClick( 88 | ACTION_TYPES.TOGGLE_AIRPLANE_MODE 89 | ) 90 | } 91 | > 92 | {settings.airplaneMode && ( 93 | 97 | )} 98 | {!settings.airplaneMode && ( 99 | 103 | )} 104 | 105 | 106 | Airplane Mode 107 | 108 |
109 | 110 | {/* Settings */} 111 |
112 | 116 | 117 | 118 | Settings 119 | 120 |
121 |
122 |
123 |
124 | ); 125 | } 126 | 127 | export default ActionCenter; 128 | -------------------------------------------------------------------------------- /src/components/actionCenter/actionCenter.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .action-center { 4 | height: calc(100% - 40px) !important; 5 | } 6 | 7 | .action-center-wrapper { 8 | display: flex !important; 9 | flex-wrap: wrap !important; 10 | width: 100% !important; 11 | } 12 | 13 | .action-center-btn { 14 | min-height: 60px !important; 15 | color: var(--font-white) !important; 16 | background-color: rgb(50, 49, 48) !important; 17 | } 18 | .action-center-btn:hover { 19 | cursor: pointer !important; 20 | border: 2px solid var(--color-secondary) !important; 21 | } 22 | 23 | .settings-active { 24 | background-color: var(--color-blue) !important; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/appComponent/appComponent.js: -------------------------------------------------------------------------------- 1 | import { IconButton, TextField } from "@fluentui/react"; 2 | import React, { useState } from "react"; 3 | import Draggable from "react-draggable"; 4 | import "./appComponent.scss"; 5 | import { useDispatch } from "react-redux"; 6 | import { handleAppFunctions } from "../../utils/actions/app.action"; 7 | import { ACTION_TYPES } from "../../utils/documents/enums"; 8 | 9 | function AppComponent(props) { 10 | const dispatch = useDispatch(); 11 | const handleAppFunctionClick = (app, type) => { 12 | dispatch(handleAppFunctions(app, type)); 13 | }; 14 | 15 | const [showAppMenu, setShowAppMenu] = useState(false); 16 | const [currentComponentName, setCurrentComponentName] = useState(""); 17 | 18 | const setComponent = (componentName) => { 19 | setCurrentComponentName(componentName); 20 | }; 21 | 22 | return ( 23 | 33 |
39 | {props.appInfo.showLinks && ( 40 |
46 | 73 |
74 | )} 75 |
85 |
86 |
87 |
88 | 89 | {props.appInfo.name} 102 | 103 | {props.appInfo.name} 104 | 105 | 106 |
107 |
108 |
109 | 114 | handleAppFunctionClick( 115 | props.appInfo, 116 | ACTION_TYPES.MINIMIZE 117 | ) 118 | } 119 | /> 120 | 125 | handleAppFunctionClick( 126 | props.appInfo, 127 | ACTION_TYPES.MAXIMIZE 128 | ) 129 | } 130 | /> 131 | 137 | handleAppFunctionClick( 138 | props.appInfo, 139 | ACTION_TYPES.CLOSE 140 | ) 141 | } 142 | /> 143 |
144 |
145 |
146 | {!props.appInfo.isApplication && ( 147 |
148 | 153 | 158 | ${props.appInfo.name} > ${currentComponentName}`} 163 | /> 164 | 170 |
171 | )} 172 |
173 | setShowAppMenu(!showAppMenu)} 181 | /> 182 |
190 | 226 |
227 |
228 | 229 |
    238 | {props.appInfo.subComponent.map( 239 | (component, index) => { 240 | return ( 241 |
  • 245 | 246 | 247 | 248 |
    • 249 | ); 250 | } 251 | )} 252 |
253 |
254 |
255 |
256 | 257 | ); 258 | } 259 | 260 | export default AppComponent; 261 | -------------------------------------------------------------------------------- /src/components/appComponent/appComponent.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .app-component { 4 | // display: inline-block !important; 5 | height: 80% !important; 6 | width: 80% !important; 7 | } 8 | 9 | @media only screen and (max-width: 640px) { 10 | .app-component { 11 | width: 95% !important; 12 | } 13 | } 14 | 15 | .app-topbar { 16 | height: 32px !important; 17 | width: 100% !important; 18 | color: var(--font-white) !important; 19 | border-bottom-right-radius: unset !important; 20 | border-bottom-left-radius: unset !important; 21 | } 22 | 23 | .close-button:hover { 24 | color: var(--color-white); 25 | background-color: var(--color-red); 26 | } 27 | 28 | .title-bar { 29 | width: calc(100% - 140px) !important; 30 | } 31 | 32 | .app-top-functions { 33 | width: 100px !important; 34 | } 35 | 36 | .maximized { 37 | // margin-left: -10% !important; 38 | width: 100% !important; 39 | height: calc(100% - 40px) !important; 40 | } 41 | 42 | .app-content-container { 43 | height: 100% !important; 44 | width: 80% !important; 45 | } 46 | 47 | .maximized-application { 48 | height: 100% !important; 49 | width: 100% !important; 50 | } 51 | 52 | .app-sidebar { 53 | height: 100% !important; 54 | width: 20% !important; 55 | } 56 | 57 | .app-content { 58 | height: calc(100% - 32px) !important; 59 | width: 100% !important; 60 | overflow-y: scroll !important; 61 | overflow-x: hidden !important; 62 | } 63 | 64 | .scrollbar::-webkit-scrollbar { 65 | width: 10px; 66 | } 67 | 68 | .scrollbar::-webkit-scrollbar-thumb { 69 | background-color: #babac0; 70 | border-radius: 16px; 71 | } 72 | 73 | .scrollbar::-webkit-scrollbar-button { 74 | display: none; 75 | } 76 | 77 | .app-title { 78 | border-bottom-right-radius: unset !important; 79 | border-bottom-left-radius: unset !important; 80 | width: 200px !important; 81 | height: 100% !important; 82 | } 83 | 84 | .sidebar-list { 85 | color: var(--font-white) !important; 86 | } 87 | 88 | .sidebar-list-item { 89 | cursor: pointer !important; 90 | padding: 10px !important; 91 | } 92 | 93 | .sidebar-list :hover { 94 | background-color: rgb(50, 49, 48) !important; 95 | } 96 | 97 | .sidebar-list { 98 | .uk-active { 99 | background-color: rgb(50, 49, 48) !important; 100 | border-left: 5px solid; 101 | border-color: var(--color-blue) !important; 102 | font-weight: bold; 103 | } 104 | } 105 | 106 | .app-nav-bar { 107 | width: 100%; 108 | margin-left: 0px !important; 109 | height: 25px !important; 110 | } 111 | 112 | .disabled-text-field { 113 | .ms-TextField-wrapper { 114 | .ms-TextField-fieldGroup { 115 | .ms-TextField-field { 116 | background: none rgb(50, 49, 48) !important; 117 | color: rgb(121, 119, 117) !important; 118 | border: none rgb(50, 49, 48) !important; 119 | } 120 | border: 0px !important; 121 | } 122 | } 123 | } 124 | 125 | .isApplication { 126 | display: none !important; 127 | } 128 | 129 | .isApplication-list { 130 | height: 96% !important; 131 | } 132 | 133 | .dropdown-content { 134 | position: absolute; 135 | min-width: 160px; 136 | z-index: 10000; 137 | } 138 | 139 | .show-element { 140 | display: block !important; 141 | } 142 | 143 | .hide-element { 144 | display: none !important; 145 | } 146 | -------------------------------------------------------------------------------- /src/components/applications/about/about.scss: -------------------------------------------------------------------------------- 1 | @import "../../../theme/variables"; 2 | 3 | .container { 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | 8 | .container:before { 9 | content: ""; 10 | position: absolute; 11 | top: 0; 12 | left: 10px; 13 | margin-left: -1px; 14 | width: 2px; 15 | height: 100%; 16 | background: #ccd1d9; 17 | z-index: 1; 18 | } 19 | 20 | .timeline-block { 21 | display: flex; 22 | -webkit-box-pack: justify; 23 | -webkit-justify-content: space-between; 24 | -moz-box-pack: justify; 25 | justify-content: space-between; 26 | clear: both; 27 | } 28 | 29 | .timeline-block-right { 30 | float: right; 31 | } 32 | 33 | .marker { 34 | width: 16px; 35 | height: 16px; 36 | border-radius: 50%; 37 | border: 2px solid #f5f7fa; 38 | background: #4fc1e9; 39 | margin-top: 10px; 40 | z-index: 9999; 41 | } 42 | 43 | .timeline-content { 44 | width: 95%; 45 | padding: 0 15px; 46 | } 47 | 48 | .timeline-content span { 49 | font-size: 15px; 50 | color: var(--font-light-grey); 51 | } 52 | 53 | .positon-desc { 54 | font-size: 14px; 55 | line-height: 1.5em; 56 | word-spacing: 1px; 57 | color: var(--font-light-grey); 58 | } 59 | 60 | @media screen and (max-width: 768px) { 61 | .container:before { 62 | left: 8px; 63 | width: 2px; 64 | } 65 | .timeline-block { 66 | width: 100%; 67 | margin-bottom: 30px; 68 | } 69 | .timeline-block-right { 70 | float: none; 71 | } 72 | 73 | .timeline-block-left { 74 | float: none; 75 | direction: ltr; 76 | } 77 | } 78 | 79 | .org-img { 80 | height: 75px !important; 81 | } 82 | 83 | .project-card { 84 | background: rgb(50, 49, 48) !important; 85 | } 86 | 87 | .link-to-project { 88 | color: var(--font-color-white); 89 | .ms-Button-flexContainer { 90 | .ms-Button-icon { 91 | font-size: 20px !important; 92 | } 93 | } 94 | } 95 | 96 | .link-to-project:hover { 97 | color: var(--color-blue); 98 | background-color: rgb(50, 49, 48) !important; 99 | } 100 | 101 | .mail-card { 102 | border: 2px solid #f5f7fa; 103 | } 104 | -------------------------------------------------------------------------------- /src/components/applications/about/aboutMe.about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import avatar from "../../../assets/images/baseImages/default_avatar.svg"; 3 | import user from "../../../utils/data/user.config"; 4 | 5 | function AboutMe() { 6 | return ( 7 |
8 |
9 |
10 | user 23 |

24 | Hey, I'm {user.firstName} {user.lastName} 25 |

26 | {user.aboutMe.intro && ( 27 |

28 | {user.aboutMe.intro} 29 |

30 | )} 31 |
32 | {user.aboutMe.description && ( 33 |
34 | {user.aboutMe.description} 35 |
36 | )} 37 | 38 | {user.aboutMe.outro && ( 39 |
40 | {user.aboutMe.outro} 41 |
42 | )} 43 |
44 |
45 | ); 46 | } 47 | 48 | export default AboutMe; 49 | -------------------------------------------------------------------------------- /src/components/applications/about/contactMe.about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import SocialBlock from "../../base/socialBlock"; 3 | import Mail from "../mail.application"; 4 | 5 | function ContactMe() { 6 | return ( 7 |
8 |
9 |

Find me on :

10 | 11 |
12 |
13 | 14 |
15 |
16 | ); 17 | } 18 | 19 | export default ContactMe; 20 | -------------------------------------------------------------------------------- /src/components/applications/about/education.about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import user from "../../../utils/data/user.config"; 3 | 4 | function Education() { 5 | return ( 6 |
7 |
8 |
9 | {user.education.map((education, index) => { 10 | return ( 11 |
12 |
13 |
14 |

15 | {education.instituteName} 16 |

17 | {education.year} 18 |

19 |

20 | {education.degree} 21 |

22 |

23 |
24 |
25 | ); 26 | })} 27 |
28 |
29 |
30 | ); 31 | } 32 | 33 | export default Education; 34 | -------------------------------------------------------------------------------- /src/components/applications/about/experience.about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./about.scss"; 3 | import avatar from "../../../assets/images/baseImages/default_avatar.svg"; 4 | import user from "../../../utils/data/user.config"; 5 | 6 | function Experience() { 7 | return ( 8 |
9 | {user.experiences.map((experience, index) => { 10 | return ( 11 |
12 |
13 |
14 | org 27 |
28 |
29 |

33 | {experience.organization} 34 |

35 |
36 |
37 | 38 |
39 | {experience.positions.map((position, posIndex) => { 40 | return ( 41 |
45 |
46 |
47 |

48 | {position.positionName} 49 |

50 | 51 | {position.startDate} - 52 | {position.endDate} 53 | 54 |

55 | {position.description} 56 |

57 |
58 |
59 | ); 60 | })} 61 |
62 |
63 | ); 64 | })} 65 |
66 | ); 67 | } 68 | 69 | export default Experience; 70 | -------------------------------------------------------------------------------- /src/components/applications/about/projects.about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./about.scss"; 3 | import user from "../../../utils/data/user.config"; 4 | import { 5 | DirectionalHint, 6 | IconButton, 7 | TooltipDelay, 8 | TooltipHost, 9 | } from "@fluentui/react"; 10 | 11 | function Projects() { 12 | return ( 13 |
14 | {user.projects.map((project, index) => { 15 | return ( 16 |
20 |

21 | {project.projectName} 22 | 27 | 33 | 34 |

35 |

{project.description}

36 | 37 |

38 | {project.madeWith.map((stack, stackIndex) => { 39 | return ( 40 | 44 | {stack} 45 | 46 | ); 47 | })} 48 |

49 |
50 | ); 51 | })} 52 |
53 | ); 54 | } 55 | 56 | export default Projects; 57 | -------------------------------------------------------------------------------- /src/components/applications/about/resume.about.js: -------------------------------------------------------------------------------- 1 | import { PrimaryButton } from "@fluentui/react"; 2 | import React from "react"; 3 | import projectConfig from "../../../utils/data/project.config"; 4 | import user from "../../../utils/data/user.config"; 5 | import { ANALYTICS_EVENTS } from "../../../utils/documents/enums"; 6 | import firebase from "../../../utils/firebaseConfig"; 7 | 8 | function Resume() { 9 | const downloadIcon = { iconName: "DownloadDocument" }; 10 | const onDownloadClick = (resume) => { 11 | if (projectConfig.enableAnalytics) { 12 | firebase.analytics().logEvent(ANALYTICS_EVENTS.DOWNLOAD_RESUME); 13 | } 14 | window.open(resume, "_blank"); 15 | }; 16 | return ( 17 |
18 |
19 |
20 | onDownloadClick(user.resume)} 23 | > 24 | Download Resume 25 | 26 |
27 | 32 |

33 | Sorry Couldn't load the file. 34 |

35 | 36 |
37 |
38 | ); 39 | } 40 | 41 | export default Resume; 42 | -------------------------------------------------------------------------------- /src/components/applications/about/skills.about.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import user from "../../../utils/data/user.config"; 3 | 4 | function Skills() { 5 | return ( 6 |
10 | {user.skills.map((skill, index) => { 11 | return ( 12 |
13 |
14 |

{skill.name}

15 |
16 | {skill.values.map((value, valIndex) => { 17 | return ( 18 | 22 | {value} 23 | 24 | ); 25 | })} 26 |
27 |
28 |
29 | ); 30 | })} 31 |
32 | ); 33 | } 34 | 35 | export default Skills; 36 | -------------------------------------------------------------------------------- /src/components/applications/application.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .form-input { 4 | .ms-TextField { 5 | .ms-TextField-wrapper { 6 | .ms-Label { 7 | color: var(--font-white) !important; 8 | } 9 | .ms-TextField-fieldGroup { 10 | .ms-TextField-field { 11 | background-color: var(--color-secondary) !important; 12 | color: var(--font-white) !important; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | 19 | .discard-button :hover { 20 | background-color: #323130 !important; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/applications/chrome.application.js: -------------------------------------------------------------------------------- 1 | import { IconButton, TextField } from "@fluentui/react"; 2 | import React, { useState } from "react"; 3 | 4 | function Chrome() { 5 | const [urlToShow, seturlToShow] = useState("https://www.google.com/"); 6 | const [url, seturl] = useState("https://www.google.com/webhp?igu=1"); 7 | const onURLChange = (event) => { 8 | const target = event.target; 9 | seturlToShow(target.value); 10 | }; 11 | 12 | const onGO = () => { 13 | seturl(urlToShow); 14 | }; 15 | 16 | return ( 17 |
18 |
19 |
20 | 25 | 30 | 36 | onGO()} 41 | /> 42 |
43 |
44 | 51 |
52 | ); 53 | } 54 | 55 | export default Chrome; 56 | -------------------------------------------------------------------------------- /src/components/applications/document.application.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useQuill } from "react-quilljs"; 3 | import "quill/dist/quill.snow.css"; 4 | 5 | function Word() { 6 | const { quillRef } = useQuill(); 7 | 8 | return ( 9 |
10 |
11 |
12 | ); 13 | } 14 | 15 | export default Word; 16 | -------------------------------------------------------------------------------- /src/components/applications/jiosaavn.application.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function JIOSaavn(props) { 4 | return ( 5 |
6 | 13 |
14 | ); 15 | } 16 | 17 | export default JIOSaavn; 18 | -------------------------------------------------------------------------------- /src/components/applications/mail.application.js: -------------------------------------------------------------------------------- 1 | import { Icon, MessageBar, MessageBarType, TextField } from "@fluentui/react"; 2 | import React, { useEffect, useState } from "react"; 3 | import "./application.scss"; 4 | import firebase from "../../utils/firebaseConfig"; 5 | import { ANALYTICS_EVENTS } from "../../utils/documents/enums"; 6 | import projectAnalytics from "../../utils/data/project.config"; 7 | 8 | function Mail() { 9 | useEffect(() => { 10 | window.emailjs.init(process.env.REACT_APP_EMAILJS_KEY); 11 | }); 12 | const [emailResponse, setEmailResponse] = useState({ 13 | template: { 14 | from: "", 15 | subject: "", 16 | message: "", 17 | response: "", 18 | }, 19 | }); 20 | 21 | const handleChange = (event) => { 22 | const target = event.target; 23 | var templateMeta = emailResponse.template; 24 | templateMeta[target.name] = target.value; 25 | setEmailResponse({ template: templateMeta }); 26 | console.log(emailResponse); 27 | }; 28 | 29 | const handleSubmit = (event) => { 30 | const form = event.currentTarget; 31 | if (form.checkValidity() === false) { 32 | event.preventDefault(); 33 | event.stopPropagation(); 34 | } else { 35 | event.preventDefault(); 36 | event.stopPropagation(); 37 | const templateId = "from_website"; 38 | let templateParams = { 39 | message: emailResponse.template.message, 40 | subject: emailResponse.template.subject, 41 | from: emailResponse.template.from, 42 | }; 43 | console.log(templateParams); 44 | if (projectAnalytics.enableAnalytics) { 45 | firebase.analytics().logEvent(ANALYTICS_EVENTS.SEND_MAIL, { 46 | template: templateParams, 47 | }); 48 | } 49 | sendFeedback(templateId, templateParams); 50 | } 51 | }; 52 | 53 | const sendFeedback = (templateId, variables) => { 54 | window.emailjs 55 | .send("default_service", templateId, variables) 56 | .then((res) => { 57 | var templateMeta = { 58 | from: "", 59 | subject: "", 60 | message: "", 61 | response: ( 62 | 66 | Message sent successfully. 67 | 68 | ), 69 | }; 70 | setEmailResponse({ template: templateMeta }); 71 | console.log(emailResponse); 72 | }) 73 | .catch((err) => { 74 | console.error( 75 | "Oh well, message sending failed. Here some thoughts on the error that occured:", 76 | err 77 | ); 78 | var templateMeta = emailResponse.template; 79 | templateMeta.response = ( 80 | 84 | Sorry! Couldn't send the message. Please try some other medium. 85 | 86 | ); 87 | setEmailResponse({ template: templateMeta }); 88 | }); 89 | }; 90 | 91 | return ( 92 |
93 |
94 |
95 | 99 | 102 |
103 | {emailResponse.template.response} 104 |
105 | 114 |
115 |
116 | 122 |
123 |
124 | 133 |
134 |
135 | 144 |
145 |
146 |
147 | ); 148 | } 149 | 150 | export default Mail; 151 | -------------------------------------------------------------------------------- /src/components/applications/settings/background.settings.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { changeDesktopBackground } from "../../../utils/actions/settingsaction"; 4 | import settings from "../../../utils/data/settings.config"; 5 | import checked from "../../../assets/images/baseImages/checked.svg"; 6 | import "./settings.scss"; 7 | import firebase from "../../../utils/firebaseConfig"; 8 | import { ANALYTICS_EVENTS } from "../../../utils/documents/enums"; 9 | import projectConfig from "../../../utils/data/project.config"; 10 | 11 | function BackgroundSettings() { 12 | const current_settings = useSelector((state) => state.settingsState); 13 | const dispatch = useDispatch(); 14 | const changeWallpaper = (wallpaperId) => { 15 | if (projectConfig.enableAnalytics) { 16 | firebase.analytics().logEvent(ANALYTICS_EVENTS.BACKGROUND_CHANGE, { 17 | wallpaper_Id: wallpaperId, 18 | }); 19 | } 20 | dispatch(changeDesktopBackground(wallpaperId)); 21 | }; 22 | 23 | return ( 24 |
25 |

26 | Change Desktop Background : 27 |

28 |
29 | {settings.desktop_wallpapers.map((wallpaper, index) => { 30 | return ( 31 |
32 |
changeWallpaper(wallpaper.id)} 41 | > 42 | {current_settings.currentWallpaperId === 43 | wallpaper.id && ( 44 |
45 | Selected 51 |
52 | )} 53 |
54 |
55 | ); 56 | })} 57 |
58 |
59 | ); 60 | } 61 | 62 | export default BackgroundSettings; 63 | -------------------------------------------------------------------------------- /src/components/applications/settings/settings.scss: -------------------------------------------------------------------------------- 1 | @import "../../../theme/variables"; 2 | 3 | .wallpaper-thumbnail { 4 | height: 250px !important; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/applications/spreadsheet.application.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Spreadsheet from "react-spreadsheet"; 3 | 4 | function SpreadsheetApp() { 5 | const data = () => { 6 | var data = []; 7 | for (let i = 0; i < 100; i++) { 8 | data.push([ 9 | { value: "" }, 10 | { value: "" }, 11 | { value: "" }, 12 | { value: "" }, 13 | { value: "" }, 14 | { value: "" }, 15 | { value: "" }, 16 | { value: "" }, 17 | { value: "" }, 18 | { value: "" }, 19 | { value: "" }, 20 | { value: "" }, 21 | { value: "" }, 22 | { value: "" }, 23 | { value: "" }, 24 | { value: "" }, 25 | ]); 26 | } 27 | return data; 28 | }; 29 | return ( 30 |
31 | 32 |
33 | ); 34 | } 35 | 36 | export default SpreadsheetApp; 37 | -------------------------------------------------------------------------------- /src/components/applications/vscode.application.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function VSCode() { 4 | return ( 5 |
6 | 12 |
13 | ); 14 | } 15 | 16 | export default VSCode; 17 | -------------------------------------------------------------------------------- /src/components/base/appIcon.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { handleApplicationClick } from "../../utils/actions/app.action"; 4 | import folder from "../../assets/images/baseImages/default_folder.png"; 5 | 6 | function AppIcon(props) { 7 | const dispatch = useDispatch(); 8 | const handleIconClick = (app) => { 9 | dispatch(handleApplicationClick(app)); 10 | }; 11 | 12 | return ( 13 |
handleIconClick(props.appInfo)} 16 | > 17 |
18 | {props.appInfo.name} 30 |
31 |
32 | {props.appInfo.name} 33 |
34 |
35 | ); 36 | } 37 | 38 | export default AppIcon; 39 | -------------------------------------------------------------------------------- /src/components/base/base.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .taskbar-clock { 4 | height: 40px !important; 5 | width: unset !important; 6 | margin-right: unset !important; 7 | } 8 | 9 | .clock-timer { 10 | font-size: 12px !important; 11 | color: var(--font-white) !important; 12 | } 13 | 14 | .app-icon:hover { 15 | background: rgba(74, 74, 74, 0.5) !important; 16 | backdrop-filter: blur(20px) !important; 17 | -webkit-backdrop-filter: blur(20px) !important; 18 | } 19 | -------------------------------------------------------------------------------- /src/components/base/calendarOverlay.js: -------------------------------------------------------------------------------- 1 | import { Separator } from "@fluentui/react"; 2 | import React from "react"; 3 | import Clock from "react-live-clock"; 4 | import Calendar from "react-calendar"; 5 | import "react-calendar/dist/Calendar.css"; 6 | 7 | function CalendarOverlay() { 8 | return ( 9 |
14 |
15 |

16 | 17 |

18 |

19 | 20 |

21 | 22 | 23 |
24 |
25 | ); 26 | } 27 | 28 | export default CalendarOverlay; 29 | -------------------------------------------------------------------------------- /src/components/base/clockComponent.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Clock from "react-live-clock"; 3 | import "./base.scss"; 4 | 5 | function ClockComponent() { 6 | return ( 7 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | ); 19 | } 20 | 21 | export default ClockComponent; 22 | -------------------------------------------------------------------------------- /src/components/base/credits.js: -------------------------------------------------------------------------------- 1 | import { IconButton, Modal, TooltipHost } from "@fluentui/react"; 2 | 3 | import React from "react"; 4 | 5 | function Credits(props) { 6 | const cancelIcon = { iconName: "Cancel" }; 7 | const navigate = (link) => { 8 | window.open(link, "_blank"); 9 | }; 10 | return ( 11 | 15 |
16 |

Credits

17 |

18 | 19 | 20 | 21 | 22 | 36 | 37 | 38 | 39 | 44 | 45 | 46 | 47 | 72 | 73 | 74 | 75 | 97 | 98 | 99 |
Framework : 23 | navigate("https://getuikit.com/")}> 24 | UIKit 25 | 26 | {" ,"}{" "} 27 | 29 | navigate( 30 | "https://developer.microsoft.com/en-us/fluentui#/" 31 | ) 32 | }> 33 | Fluent UI 34 | 35 |
Icons: 40 | navigate("https://icons8.com/")}> 41 | Icons8 42 | 43 |
Apps Plugins: 48 | navigate("https://quilljs.com/")}> 49 | Quill.js 50 | 51 | {", "} 52 | 54 | navigate( 55 | "https://www.npmjs.com/package/react-spreadsheet" 56 | ) 57 | }> 58 | React Spreadsheet 59 | 60 | {", "} 61 | navigate("https://www.jiosaavn.com/")}> 62 | JioSaavn 63 | 64 | {", "} 65 | 67 | navigate("https://github.com/conwnet/github1s") 68 | }> 69 | Github1s 70 | 71 |
Other Plugins : 76 | 78 | navigate("https://www.npmjs.com/package/react-draggable") 79 | }> 80 | React Draggable 81 | 82 | {", "} 83 | 85 | navigate("https://www.npmjs.com/package/react-contexify") 86 | }> 87 | ContextMenu 88 | 89 | {", "} 90 | 92 | navigate("https://www.npmjs.com/package/react-live-clock") 93 | }> 94 | React Live Clock 95 | 96 |
100 |

101 | 107 |
108 |

109 | Made with{" "} 110 | 113 | ♥ 114 | 115 | by Dawid Olko 116 |

117 |
118 |
119 | 120 | ); 121 | } 122 | 123 | export default Credits; 124 | -------------------------------------------------------------------------------- /src/components/base/socialBlock.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import user from "../../utils/data/user.config"; 3 | import twitter from "../../assets/images/social/twitter.svg"; 4 | import linkedin from "../../assets/images/social/linkedin.svg"; 5 | import github from "../../assets/images/social/github.svg"; 6 | import email from "../../assets/images/social/email.png"; 7 | import firebase from "../../utils/firebaseConfig"; 8 | import { ANALYTICS_EVENTS } from "../../utils/documents/enums"; 9 | import projectConfig from "../../utils/data/project.config"; 10 | 11 | function SocialBlock() { 12 | const onSocialClick = (social) => { 13 | if (projectConfig.enableAnalytics) { 14 | firebase.analytics().logEvent(ANALYTICS_EVENTS.SOCIAL_CLICK, { 15 | link: social, 16 | }); 17 | } 18 | window.open(social, "_blank"); 19 | }; 20 | 21 | return ( 22 |
23 | {user.gitHub !== undefined && 24 | user.gitHub !== null && 25 | user.gitHub !== "" && ( 26 | Github Icon 34 | onSocialClick("https://github.com/" + user.gitHub) 35 | } 36 | /> 37 | )} 38 | {user.twitter !== undefined && 39 | user.twitter !== null && 40 | user.twitter !== "" && ( 41 | Twitter Icon 49 | onSocialClick("https://twitter.com/" + user.twitter) 50 | } 51 | /> 52 | )} 53 | {user.linkedIn !== undefined && 54 | user.linkedIn !== null && 55 | user.linkedIn !== "" && ( 56 | LinkedIn Icom 64 | onSocialClick( 65 | "https://www.linkedin.com/" + user.linkedIn 66 | ) 67 | } 68 | /> 69 | )} 70 | {user.email !== undefined && 71 | user.email !== null && 72 | user.email !== "" && ( 73 | Mail Icom onSocialClick("mailto:" + user.email)} 81 | /> 82 | )} 83 |
84 | ); 85 | } 86 | 87 | export default SocialBlock; 88 | -------------------------------------------------------------------------------- /src/components/contextMenu/contextMenu.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | :root { 3 | .ms-ContextualMenu { 4 | background-color: rgb(37, 36, 35) !important; 5 | } 6 | 7 | .ms-ContextualMenu-link:hover { 8 | background-color: rgb(50, 49, 48) !important; 9 | } 10 | 11 | .ms-ContextualMenu-itemText, 12 | .ms-ContextualMenu-icon { 13 | color: var(--font-white) !important; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/contextMenu/desktop.contextMenu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Menu, Item, Separator } from "react-contexify"; 3 | import star from "../../assets/images/contextMenu/star.png"; 4 | import contact_me from "../../assets/images/contextMenu/contact_me.png"; 5 | import refresh from "../../assets/images/contextMenu/refresh.png"; 6 | import source_code from "../../assets/images/contextMenu/source_code.png"; 7 | import credits from "../../assets/images/contextMenu/credits.svg"; 8 | import github from "../../assets/images/contextMenu/github.svg"; 9 | import { SCREENS } from "../../utils/documents/enums"; 10 | import Credits from "../base/credits"; 11 | import { useBoolean } from "@fluentui/react-hooks"; 12 | 13 | const MENU_ID = "context-menu"; 14 | 15 | function DesktopContextMenu(props) { 16 | const handleRefresh = ({ event, props }) => console.log("Super Refreshed !!"); 17 | const navigate = (link) => { 18 | window.open(link, "_blank"); 19 | }; 20 | 21 | const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = 22 | useBoolean(false); 23 | return ( 24 |
25 | 26 | 28 | navigate( 29 | "https://github.com/dawidolko/Simulaing-Windows-System-GUI/" 30 | ) 31 | }> 32 | Star 39 | Star This Project 40 | 41 | 42 | {props.location === SCREENS.DESKTOP && ( 43 | 44 | Refresh 51 | Refresh 52 | 53 | )} 54 | {props.location === SCREENS.DESKTOP && } 55 | 57 | navigate( 58 | "https://github.com/dawidolko/Simulaing-Windows-System-GUI/" 59 | ) 60 | }> 61 | Code 68 | View Source Code 69 | 70 | 71 | navigate("https://github.com/dawidolko")}> 72 | Github 79 | Github Profile 80 | 81 | 82 | navigate("mailto:poczta@dawidolko.pl")}> 83 | mail 90 | Contact Me 91 | 92 | 93 | 94 | Credits 101 | Credits 102 | 103 | 104 | 105 | 106 |
107 | ); 108 | } 109 | 110 | export default DesktopContextMenu; 111 | -------------------------------------------------------------------------------- /src/components/contextMenu/power.contextmenu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Callout } from "@fluentui/react/lib/Callout"; 3 | import { DefaultButton } from "@fluentui/react"; 4 | import "./contextMenu.scss"; 5 | 6 | function ContextMenu(props) { 7 | return ( 8 | 13 | 17 | 18 | ); 19 | } 20 | 21 | export default ContextMenu; 22 | -------------------------------------------------------------------------------- /src/components/desktop/desktop.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useSelector } from "react-redux"; 3 | import { filterObjectList } from "../../utils/services/common-util-servies"; 4 | import ActionCenter from "../actionCenter/actionCenter"; 5 | import AppComponent from "../appComponent/appComponent"; 6 | import AppIcon from "../base/appIcon"; 7 | import CalendarOverlay from "../base/calendarOverlay"; 8 | import StartMenu from "../startMenu/startMenu"; 9 | import Taskbar from "../taskBar/taskBar"; 10 | import "./desktop.scss"; 11 | import Loading from "../loading/loading"; 12 | 13 | function Desktop() { 14 | const appState = useSelector((state) => state.appState); 15 | const [desktopApps, setDesktopApps] = useState([]); 16 | const [onDesktopApps, setonDesktopApps] = useState([]); 17 | const [onTaskbarApps, setonTaskBarApps] = useState([]); 18 | useEffect(() => { 19 | var desktopAppList = []; 20 | var onDesktopAppList = []; 21 | var onTaskBarAppList = []; 22 | if ( 23 | appState !== undefined && 24 | appState !== null && 25 | appState.apps !== undefined && 26 | appState.apps !== null 27 | ) { 28 | desktopAppList = filterObjectList( 29 | appState.apps, 30 | "showInDesktop", 31 | true 32 | ); 33 | onTaskBarAppList = filterObjectList( 34 | appState.apps, 35 | "isOpened", 36 | true 37 | ); 38 | onDesktopAppList = filterObjectList( 39 | onTaskBarAppList, 40 | "isMinimized", 41 | false 42 | ); 43 | setDesktopApps(desktopAppList); 44 | setonDesktopApps(onDesktopAppList); 45 | setonTaskBarApps(onTaskBarAppList); 46 | } 47 | }, [appState]); 48 | 49 | if ( 50 | desktopApps !== undefined && 51 | desktopApps !== null && 52 | desktopApps.length > 0 53 | ) { 54 | return ( 55 |
56 |
57 | 58 | 59 | 60 |
61 |
62 | {desktopApps.map((app, index) => { 63 | return ; 64 | })} 65 |
66 | {onDesktopApps.map((app, index) => { 67 | return ; 68 | })} 69 |
70 |
71 |
72 | 73 |
74 |
75 | ); 76 | } else { 77 | return ; 78 | } 79 | } 80 | 81 | export default Desktop; 82 | -------------------------------------------------------------------------------- /src/components/desktop/desktop.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .taskbar-bottom { 4 | height: 40px !important; 5 | background: rgba(0, 0, 0, 0.55); 6 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 7 | backdrop-filter: blur(20px); 8 | -webkit-backdrop-filter: blur(20px); 9 | } 10 | 11 | .taskbar-icon { 12 | color: var(--color-white); 13 | width: 45px; 14 | margin-right: 5px; 15 | } 16 | 17 | .taskbar-quick-icon { 18 | color: var(--color-white); 19 | width: 30px; 20 | margin-right: 5px; 21 | } 22 | 23 | .taskbar-quick-icon:hover { 24 | color: var(--color-white); 25 | cursor: pointer !important; 26 | background-color: rgba(255, 255, 255, 0.1) !important; 27 | } 28 | .taskbar-icon:hover { 29 | color: var(--color-white); 30 | cursor: pointer !important; 31 | background-color: rgba(255, 255, 255, 0.1) !important; 32 | } 33 | 34 | .taskbar-icon-active { 35 | height: 90% !important; 36 | border-bottom: 1px solid #ccc; 37 | border-color: var(--color-blue) !important; 38 | } 39 | 40 | .onDesktop { 41 | background-color: rgba(255, 255, 255, 0.3) !important; 42 | } 43 | 44 | .onDesktop:hover { 45 | background-color: rgba(255, 255, 255, 0.5) !important; 46 | } 47 | 48 | .desktop-container { 49 | height: calc(100% - 40px) !important; 50 | } 51 | 52 | .taskbar { 53 | height: 40px !important; 54 | } 55 | -------------------------------------------------------------------------------- /src/components/loading/loading.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./loading.scss"; 3 | 4 | function Loading() { 5 | // https://codepen.io/Mobius1/pen/aNVyzp 6 | return ( 7 |
8 |
9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

Loading...

18 |
19 |
20 | ); 21 | } 22 | 23 | export default Loading; 24 | -------------------------------------------------------------------------------- /src/components/loading/loading.scss: -------------------------------------------------------------------------------- 1 | // https://codepen.io/Mobius1/pen/aNVyzp 2 | 3 | $duration: 3000ms; 4 | $loader-size: 50px; 5 | $pip-size: 8px; 6 | 7 | h1 { 8 | font-weight: 300; 9 | } 10 | 11 | .wrapper { 12 | text-align: center; 13 | } 14 | 15 | .loader { 16 | position: relative; 17 | width: $loader-size; 18 | height: $loader-size; 19 | border-radius: 50%; 20 | animation: $duration * 1.5 linear 0s normal none infinite running; 21 | animation-name: rotate; 22 | left: $loader-size / 2; 23 | } 24 | .loader span::after { 25 | position: absolute; 26 | width: $pip-size; 27 | height: $pip-size; 28 | border-radius: 50%; 29 | background-color: #fff; 30 | content: ""; 31 | display: block; 32 | transform-origin: $loader-size/2 $loader-size/2; 33 | animation-duration: $duration; 34 | animation-iteration-count: infinite; 35 | animation-timing-function: ease-in-out; 36 | } 37 | 38 | @keyframes rotate { 39 | 0% { 40 | transform: rotate(0deg); 41 | } 42 | 100% { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | 47 | @for $i from 0 through 5 { 48 | $start: $i * 20; 49 | $delay: 900 - ($i * 125); 50 | $mid: 180 + $start; 51 | $finish: 360 + $start; 52 | 53 | .pip-#{$i} { 54 | &::after { 55 | transform: rotate(#{$start}deg); 56 | animation-name: rotate-#{$i}; 57 | animation-delay: #{$delay}ms; 58 | } 59 | } 60 | 61 | @keyframes rotate-#{$i} { 62 | 0%, 63 | 20% { 64 | transform: rotate(#{$start}deg); 65 | } 66 | 40%, 67 | 60% { 68 | transform: rotate(#{$mid}deg); 69 | } 70 | 80%, 71 | 100% { 72 | transform: rotate(#{$finish}deg); 73 | } 74 | } 75 | } 76 | 77 | @keyframes opacity { 78 | from { 79 | opacity: 1; 80 | } 81 | to { 82 | opacity: 0; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/components/lockScreen/landing.lockScreen.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Clock from "react-live-clock"; 3 | import { Icon } from "@fluentui/react"; 4 | import "./lockScreen.scss"; 5 | 6 | function LockWallpaperScreen() { 7 | return ( 8 |
9 | {/* LockScreenIcons */} 10 |
11 |
12 |

13 | Click anywhere to unlock. 14 |

15 |
16 |
17 | 18 | {/* LockScreen Clock */} 19 |
20 |

21 | 22 |

23 |

24 | 25 |

26 |
27 | 28 | {/* LockScreenIcons */} 29 |
30 |
31 | 32 |
33 |
34 |
35 | ); 36 | } 37 | 38 | export default LockWallpaperScreen; 39 | -------------------------------------------------------------------------------- /src/components/lockScreen/lockScreen.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .SignInOverlay { 4 | background: rgba(0, 0, 0, 0.25); 5 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 6 | backdrop-filter: blur(4px); 7 | -webkit-backdrop-filter: blur(4px); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/lockScreen/signIn.lockScreen.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./lockScreen.scss"; 3 | import { setSystemState } from "../../utils/actions/system.action"; 4 | import { useDispatch } from "react-redux"; 5 | import avatar from "../../assets/images/baseImages/default_avatar.svg"; 6 | import { Icon, PrimaryButton, TextField } from "@fluentui/react"; 7 | import SocialBlock from "../base/socialBlock"; 8 | 9 | function SignInScreen() { 10 | const dispatch = useDispatch(); 11 | const setNextSystemState = (systemState) => { 12 | dispatch(setSystemState(systemState)); 13 | }; 14 | 15 | return ( 16 |
17 | {/* Sign In Form */} 18 |
19 |
20 | User 27 |
28 |
29 |

Dawid Olko

30 |
31 |
32 | 38 |
39 |
40 | setNextSystemState("isDesktop")} 44 | /> 45 |
46 |
47 | 48 | {/* LockScreenIcons */} 49 |
50 |
51 | 52 |
53 |
54 | 55 | {/* Social Links */} 56 |
57 | 58 |
59 |
60 | ); 61 | } 62 | 63 | export default SignInScreen; 64 | -------------------------------------------------------------------------------- /src/components/startMenu/startMenu.js: -------------------------------------------------------------------------------- 1 | import { IconButton } from "@fluentui/react"; 2 | import { useConst, useBoolean } from "@fluentui/react-hooks"; 3 | import React from "react"; 4 | import "./startMenu.scss"; 5 | import ContextMenu from "../contextMenu/power.contextmenu"; 6 | import { useDispatch, useSelector } from "react-redux"; 7 | import { setSystemState } from "../../utils/actions/system.action"; 8 | import { handleApplicationClick } from "../../utils/actions/app.action"; 9 | import user from "../../utils/data/user.config"; 10 | import SocialBlock from "../base/socialBlock"; 11 | import AppIcon from "../base/appIcon"; 12 | import firebase from "../../utils/firebaseConfig"; 13 | import { ANALYTICS_EVENTS } from "../../utils/documents/enums"; 14 | import projectConfig from "../../utils/data/project.config"; 15 | 16 | function StartMenu() { 17 | const [ 18 | showPowerMenu, 19 | { setTrue: onShowPowerMenu, setFalse: onHidePowerMenu }, 20 | ] = useBoolean(false); 21 | 22 | const dispatch = useDispatch(); 23 | const handleIconClick = (app) => { 24 | dispatch(handleApplicationClick(app)); 25 | }; 26 | const setNextSystemState = (systemState) => { 27 | if (projectConfig.enableAnalytics) { 28 | firebase.analytics().logEvent(ANALYTICS_EVENTS.CHANGE_POWER_STATE, { 29 | changedTo: systemState, 30 | }); 31 | } 32 | dispatch(setSystemState(systemState)); 33 | }; 34 | 35 | const appState = useSelector((state) => state.appState); 36 | 37 | const menuProps = useConst({ 38 | shouldFocusOnMount: true, 39 | items: [ 40 | { 41 | key: "lock", 42 | iconProps: { iconName: "Lock" }, 43 | text: "Lock", 44 | onClick: () => setNextSystemState("isLocked"), 45 | }, 46 | { 47 | key: "shutDown", 48 | iconProps: { iconName: "PowerButton" }, 49 | text: "Shut Down", 50 | onClick: () => setNextSystemState("isShutDown"), 51 | }, 52 | { 53 | key: "admin", 54 | iconProps: { iconName: "Admin" }, 55 | text: "Admin", 56 | onClick: () => { 57 | if (projectConfig.enableAnalytics) { 58 | firebase.analytics().logEvent(ANALYTICS_EVENTS.ADMIN); 59 | } 60 | window.open( 61 | "https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstleyVEVO", 62 | "_blank" 63 | ); 64 | }, 65 | }, 66 | ], 67 | }); 68 | 69 | return ( 70 |
71 |
72 |
73 | 80 | {showPowerMenu && ( 81 | 85 | )} 86 |
87 |
88 |
    89 | {appState.apps.map((app, index) => { 90 | return ( 91 |
  • handleIconClick(app)} 94 | key={index} 95 | > 96 | {app.icon !== undefined && 97 | app.icon !== null && 98 | app.icon !== "" && ( 99 | {app.name} 106 | )} 107 | {app.name} 108 |
    • 109 | ); 110 | })} 111 |
112 |
113 |
114 |
115 | {user.userImage !== undefined && 116 | user.userImage !== null && 117 | user.userImage !== "" && ( 118 | {user.firstName} 125 | )} 126 |

Hi, {user.firstName}

127 | 128 |
129 |
130 | {appState.apps.map((app, index) => { 131 | return ; 132 | })} 133 |
134 |
135 |
136 |
137 | ); 138 | } 139 | 140 | export default StartMenu; 141 | -------------------------------------------------------------------------------- /src/components/startMenu/startMenu.scss: -------------------------------------------------------------------------------- 1 | @import "../../theme/variables"; 2 | 3 | .start-menu { 4 | height: 80% !important; 5 | width: 50vw !important; 6 | top: calc(20% - 40px) !important; 7 | background: rgba(74, 74, 74, 0.5) !important; 8 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important; 9 | backdrop-filter: blur(20px) !important; 10 | -webkit-backdrop-filter: blur(20px) !important; 11 | border-radius: 10px !important; 12 | } 13 | 14 | .start-quick-actions { 15 | width: 42px !important; 16 | height: 100% !important; 17 | } 18 | 19 | .start-app-list { 20 | width: calc((100% - 42px) - 70%); 21 | } 22 | 23 | .start-tiles { 24 | width: calc((100% - 42px) - 30%); 25 | height: 100% !important; 26 | overflow: hidden; 27 | } 28 | 29 | @media screen and (max-width: 640px) { 30 | .start-menu { 31 | width: 100vw !important; 32 | } 33 | 34 | .start-app-list { 35 | width: 0 !important; 36 | display: none; 37 | } 38 | 39 | .start-tiles { 40 | width: calc(100% - 42px); 41 | height: 100% !important; 42 | overflow: hidden; 43 | } 44 | } 45 | 46 | .quick-action-button { 47 | width: 40px !important; 48 | height: 40px !important; 49 | } 50 | 51 | .start-menu-list { 52 | color: var(--font-white) !important; 53 | } 54 | 55 | .start-menu-list-item { 56 | font-size: 14px !important; 57 | cursor: pointer !important; 58 | padding: 10px !important; 59 | } 60 | 61 | .start-menu-list :hover { 62 | background-color: rgb(50, 49, 48) !important; 63 | } 64 | 65 | .profile-card { 66 | background: rgb(50, 49, 48) !important; 67 | } 68 | 69 | .profile-card-img { 70 | margin-top: calc(-10% - 40px) !important; 71 | } 72 | -------------------------------------------------------------------------------- /src/components/taskBar/taskBar-Icon.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { handleApplicationClick } from "../../utils/actions/app.action"; 4 | import folder from "../../assets/images/baseImages/default_folder.png"; 5 | 6 | function TaskBarIcon(props) { 7 | const dispatch = useDispatch(); 8 | const handleIconClick = (app) => { 9 | dispatch(handleApplicationClick(app)); 10 | }; 11 | 12 | return ( 13 |
handleIconClick(props.appInfo)} 15 | className={ 16 | "taskbar-icon uk-flex uk-flex-center uk-flex-middle taskbar-icon-active" + 17 | (!props.appInfo.isMinimized ? " onDesktop" : "") 18 | } 19 | > 20 | {props.appInfo.name} 32 |
33 | ); 34 | } 35 | 36 | export default TaskBarIcon; 37 | -------------------------------------------------------------------------------- /src/components/taskBar/taskBar.js: -------------------------------------------------------------------------------- 1 | import { IconButton } from "@fluentui/react"; 2 | import React from "react"; 3 | import { useSelector } from "react-redux"; 4 | import ClockComponent from "../base/clockComponent"; 5 | import TaskBarIcon from "./taskBar-Icon"; 6 | 7 | function Taskbar(props) { 8 | const settings = useSelector((state) => state.settingsState); 9 | 10 | return ( 11 |
12 |
13 |
14 |
18 | 24 |
25 | 31 | {/* */} 37 |
38 |
39 | {props.onTaskbarApps.map((app, index) => { 40 | return ; 41 | })} 42 |
43 |
44 |
45 |
46 | {settings.wifiEnabled && ( 47 | 53 | )} 54 | {!settings.wifiEnabled && ( 55 | 61 | )} 62 |
63 |
64 | {settings.isMute && ( 65 | 71 | )} 72 | {!settings.isMute && ( 73 | 79 | )} 80 |
81 |
82 | 83 |
84 |
88 | 94 |
95 |
96 |
97 | ); 98 | } 99 | 100 | export default Taskbar; 101 | -------------------------------------------------------------------------------- /src/containers/blueScreen404.container.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import scanCode from "../assets/images/baseImages/scanCode.png"; 4 | 5 | function BlueScreen404() { 6 | return ( 7 |
8 |
9 |

:(

10 |

11 | This virtual PC ran into a problem. You weren't supposed to 12 | come here. We're just collecting some error info. You can{" "} 13 | 14 | Click Here 15 | {" "} 16 | to go back. 17 |

18 |

100% complete.

19 |
20 |
21 | QR Code 27 |
28 |
29 |

30 | Let's go back.{" "} 31 | 32 | Click Here 33 | {" "} 34 |

35 | If you call a support person, give them this info: 36 |
37 | Stop Code: 404 PAGE NOT FOUND 38 |

39 |
40 |
41 |
42 |
43 | ); 44 | } 45 | 46 | export default BlueScreen404; 47 | -------------------------------------------------------------------------------- /src/containers/desktop.container.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { useDispatch, useSelector } from "react-redux"; 3 | import { initApplications } from "../utils/actions/app.action"; 4 | import Desktop from "../components/desktop/desktop"; 5 | import { useContextMenu } from "react-contexify"; 6 | import "react-contexify/dist/ReactContexify.css"; 7 | import DesktopContextMenu from "../components/contextMenu/desktop.contextMenu"; 8 | import { SCREENS } from "../utils/documents/enums"; 9 | 10 | const MENU_ID = "context-menu"; 11 | 12 | function DesktopContainer() { 13 | const current_settings = useSelector((state) => state.settingsState); 14 | 15 | const dispatch = useDispatch(); 16 | useEffect(() => { 17 | dispatch(initApplications()); 18 | }); 19 | 20 | const { show } = useContextMenu({ 21 | id: MENU_ID, 22 | }); 23 | function handleContextMenu(event) { 24 | event.preventDefault(); 25 | show(event, { 26 | props: { 27 | key: "value", 28 | }, 29 | }); 30 | } 31 | 32 | return ( 33 |
40 | 41 | 42 |
43 | ); 44 | } 45 | 46 | export default DesktopContainer; 47 | -------------------------------------------------------------------------------- /src/containers/lockScreen.container.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import LockWallpaperScreen from "../components/lockScreen/landing.lockScreen"; 3 | import lockScreenWall from "../assets/images/wallpapers/lockScreenWall.jpg"; 4 | import SignInScreen from "../components/lockScreen/signIn.lockScreen"; 5 | import { useContextMenu } from "react-contexify"; 6 | import "react-contexify/dist/ReactContexify.css"; 7 | import DesktopContextMenu from "../components/contextMenu/desktop.contextMenu"; 8 | import { SCREENS } from "../utils/documents/enums"; 9 | 10 | const MENU_ID = "context-menu"; 11 | 12 | function LockScreen(props) { 13 | const [showSignInPage, setLockScreenState] = useState(false); 14 | const currentWallpaper = lockScreenWall; 15 | let changeScreenState = () => { 16 | setLockScreenState(true); 17 | }; 18 | 19 | const { show } = useContextMenu({ 20 | id: MENU_ID, 21 | }); 22 | function handleContextMenu(event) { 23 | event.preventDefault(); 24 | show(event, { 25 | props: { 26 | key: "value", 27 | }, 28 | }); 29 | } 30 | 31 | return ( 32 |
40 | {(() => { 41 | if (showSignInPage) { 42 | return ; 43 | } else { 44 | return ; 45 | } 46 | })()} 47 | 48 |
49 | ); 50 | } 51 | 52 | export default LockScreen; 53 | -------------------------------------------------------------------------------- /src/containers/shutDown.container.js: -------------------------------------------------------------------------------- 1 | import { IconButton } from "@fluentui/react"; 2 | import React from "react"; 3 | import windows_10 from "../assets/images/baseImages/windows_10.svg"; 4 | import { useDispatch } from "react-redux"; 5 | import { setSystemState } from "../utils/actions/system.action"; 6 | import SocialBlock from "../components/base/socialBlock"; 7 | 8 | function ShutDown() { 9 | const dispatch = useDispatch(); 10 | const setNextSystemState = (systemState) => { 11 | dispatch(setSystemState(systemState)); 12 | }; 13 | 14 | return ( 15 |
16 |
17 |
18 | Windows Icon 25 |
26 |
27 | setNextSystemState("isLocked")} 33 | /> 34 |
35 |
36 |
37 | 38 |
39 |
40 | ); 41 | } 42 | 43 | export default ShutDown; 44 | -------------------------------------------------------------------------------- /src/containers/windows.container.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useSelector } from "react-redux"; 3 | import BlueScreen404 from "./blueScreen404.container"; 4 | import DesktopContainer from "./desktop.container"; 5 | import LockScreen from "./lockScreen.container"; 6 | import ShutDown from "./shutDown.container"; 7 | 8 | function Windows() { 9 | const systemState = useSelector((state) => state.systemState); 10 | 11 | return ( 12 |
13 | {(() => { 14 | if (systemState.isLocked) { 15 | return ; 16 | } else if (systemState.isShutDown) { 17 | return ; 18 | } else if (systemState.isDesktop) { 19 | return ; 20 | } else { 21 | return ; 22 | } 23 | })()} 24 |
25 | ); 26 | } 27 | 28 | export default Windows; 29 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.scss"; 4 | import "./theme/style.scss"; 5 | import App from "./App"; 6 | import reportWebVitals from "./reportWebVitals"; 7 | import "uikit/dist/css/uikit.min.css"; 8 | import "uikit/dist/css/uikit-core.min.css"; 9 | import "uikit/dist/js/uikit.min.js"; 10 | import "uikit/dist/js/uikit-icons.min"; 11 | import { initializeIcons } from "@fluentui/react/lib/Icons"; 12 | import * as serviceWorker from "./serviceWorker"; 13 | 14 | initializeIcons(); 15 | ReactDOM.render( 16 | 17 | 18 | , 19 | document.getElementById("root") 20 | ); 21 | 22 | serviceWorker.register(); 23 | reportWebVitals(); 24 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/index.scss -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === "localhost" || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === "[::1]" || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener("load", () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | "This web app is being served cache-first by a service " + 46 | "worker. To learn more, visit https://bit.ly/CRA-PWA" 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then((registration) => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === "installed") { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | "New content is available and will be used when all " + 74 | "tabs for this page are closed. See https://bit.ly/CRA-PWA." 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log("Content is cached for offline use."); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch((error) => { 97 | console.error("Error during service worker registration:", error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { "Service-Worker": "script" }, 105 | }) 106 | .then((response) => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get("content-type"); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && 112 | contentType.indexOf("javascript") === -1) 113 | ) { 114 | // No service worker found. Probably a different app. Reload the page. 115 | navigator.serviceWorker.ready.then((registration) => { 116 | registration.unregister().then(() => { 117 | window.location.reload(); 118 | }); 119 | }); 120 | } else { 121 | // Service worker found. Proceed as normal. 122 | registerValidSW(swUrl, config); 123 | } 124 | }) 125 | .catch(() => { 126 | console.log( 127 | "No internet connection found. App is running in offline mode." 128 | ); 129 | }); 130 | } 131 | 132 | export function unregister() { 133 | if ("serviceWorker" in navigator) { 134 | navigator.serviceWorker.ready 135 | .then((registration) => { 136 | registration.unregister(); 137 | }) 138 | .catch((error) => { 139 | console.error(error.message); 140 | }); 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/theme/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-primary: #000000; 3 | --color-white: #ffffff; 4 | --color-red: #ff0000; 5 | --color-blue: #00a2ed; 6 | --color-secondary: rgb(34, 34, 34); 7 | 8 | --font-white: rgb(250, 249, 248); 9 | --font-light-grey: #a4a4a4; 10 | 11 | --font-medium: 18px !important; 12 | 13 | --medium-screen: 640px !important; 14 | --small-screen: 960px; 15 | } 16 | -------------------------------------------------------------------------------- /src/theme/style.scss: -------------------------------------------------------------------------------- 1 | @import "./variables"; 2 | 3 | .screenHeight { 4 | position: fixed; 5 | padding: 0; 6 | margin: 0; 7 | top: 0; 8 | left: 0; 9 | min-width: 100%; 10 | min-height: 100%; 11 | } 12 | 13 | .font-color-white { 14 | color: var(--color-white) !important; 15 | } 16 | 17 | .font-color-red { 18 | color: var(--color-red) !important; 19 | } 20 | 21 | .font-size-medium { 22 | font-size: var(--font-medium) !important; 23 | } 24 | 25 | .app-playground { 26 | height: calc(100%) !important; 27 | width: 100% !important; 28 | } 29 | 30 | .height-100 { 31 | height: 100% !important; 32 | } 33 | 34 | .blur { 35 | background: rgba(74, 74, 74, 0.5) !important; 36 | backdrop-filter: blur(20px) !important; 37 | -webkit-backdrop-filter: blur(20px) !important; 38 | } 39 | 40 | .power-button { 41 | .ms-Button-flexContainer { 42 | .ms-Icon { 43 | font-size: 25px !important; 44 | } 45 | } 46 | } 47 | 48 | .blue-screen { 49 | background-color: var(--color-blue) !important; 50 | } 51 | -------------------------------------------------------------------------------- /src/utils/actions/app.action.js: -------------------------------------------------------------------------------- 1 | import { ACTION_TYPES } from "../documents/enums"; 2 | 3 | export const initApplications = () => { 4 | return { 5 | type: ACTION_TYPES.APP_INIT, 6 | }; 7 | }; 8 | 9 | export const handleApplicationClick = (app) => { 10 | return { 11 | type: ACTION_TYPES.APP_CLICK, 12 | app: app, 13 | }; 14 | }; 15 | 16 | export const handleAppFunctions = (app, type) => { 17 | return { 18 | type: type, 19 | app: app, 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /src/utils/actions/settingsaction.js: -------------------------------------------------------------------------------- 1 | import { ACTION_TYPES } from "../documents/enums"; 2 | 3 | export const toggleSettings = (toggleKey) => { 4 | return { 5 | type: toggleKey, 6 | }; 7 | }; 8 | 9 | export const changeDesktopBackground = (wallpaperId) => { 10 | return { 11 | type: ACTION_TYPES.CHANGE_WALLPAPER, 12 | wallpaperId: wallpaperId, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/utils/actions/system.action.js: -------------------------------------------------------------------------------- 1 | import { ACTION_TYPES } from "../documents/enums"; 2 | 3 | export const setSystemState = (systemState) => { 4 | return { 5 | type: ACTION_TYPES.SET_STATE, 6 | systemState: systemState, 7 | }; 8 | }; 9 | -------------------------------------------------------------------------------- /src/utils/data/apps.config.js: -------------------------------------------------------------------------------- 1 | import AboutMe from "../../components/applications/about/aboutMe.about"; 2 | import ContactMe from "../../components/applications/about/contactMe.about"; 3 | import Education from "../../components/applications/about/education.about"; 4 | import Experience from "../../components/applications/about/experience.about"; 5 | import Projects from "../../components/applications/about/projects.about"; 6 | import Resume from "../../components/applications/about/resume.about"; 7 | import Skills from "../../components/applications/about/skills.about"; 8 | import Chrome from "../../components/applications/chrome.application"; 9 | import JIOSaavn from "../../components/applications/jiosaavn.application"; 10 | import Mail from "../../components/applications/mail.application"; 11 | import SpreadsheetApp from "../../components/applications/spreadsheet.application"; 12 | import VSCode from "../../components/applications/vscode.application"; 13 | import Word from "../../components/applications/document.application"; 14 | import aboutMe from "../../assets/images/apps/aboutMe.png"; 15 | import chrome from "../../assets/images/apps/chrome.svg"; 16 | import jioSaavn from "../../assets/images/apps/jioSaavn.png"; 17 | import mail from "../../assets/images/apps/mail.png"; 18 | import word from "../../assets/images/apps/word.svg"; 19 | import spreadsheet from "../../assets/images/apps/spreadsheet.svg"; 20 | import vsCode from "../../assets/images/apps/vsCode.png"; 21 | import settings from "../../assets/images/apps/settings.svg"; 22 | import BackgroundSettings from "../../components/applications/settings/background.settings"; 23 | 24 | const appConfig = [ 25 | { 26 | id: "aboutMe", 27 | name: "About Me", 28 | order: 1, 29 | icon: aboutMe, 30 | showInDesktop: true, 31 | isApplication: false, 32 | showLinks: true, 33 | subComponent: [ 34 | { 35 | name: "About Me", 36 | component: AboutMe, 37 | }, 38 | { 39 | name: "Experience", 40 | component: Experience, 41 | }, 42 | { 43 | name: "Education", 44 | component: Education, 45 | }, 46 | { 47 | name: "Projects", 48 | component: Projects, 49 | }, 50 | { 51 | name: "Skills", 52 | component: Skills, 53 | }, 54 | { 55 | name: "Resume", 56 | component: Resume, 57 | }, 58 | { 59 | name: "Contact Me", 60 | component: ContactMe, 61 | }, 62 | ], 63 | }, 64 | { 65 | id: "vscode", 66 | name: "VSCode", 67 | order: 2, 68 | icon: vsCode, 69 | isApplication: true, 70 | showInDesktop: true, 71 | showLinks: true, 72 | subComponent: [ 73 | { 74 | name: "VSCode", 75 | component: VSCode, 76 | }, 77 | ], 78 | }, 79 | { 80 | id: "jioSaavn", 81 | name: "JIO Saavn", 82 | order: 3, 83 | icon: jioSaavn, 84 | isApplication: true, 85 | showInDesktop: true, 86 | showLinks: true, 87 | subComponent: [ 88 | { 89 | name: "jioSaavn", 90 | component: JIOSaavn, 91 | }, 92 | ], 93 | }, 94 | { 95 | id: "mail", 96 | name: "Contact Me", 97 | order: 4, 98 | icon: mail, 99 | isApplication: true, 100 | showInDesktop: true, 101 | showLinks: true, 102 | subComponent: [ 103 | { 104 | name: "mail", 105 | component: Mail, 106 | }, 107 | ], 108 | }, 109 | { 110 | id: "chrome", 111 | name: "Chrome", 112 | order: 5, 113 | icon: chrome, 114 | isApplication: true, 115 | showInDesktop: true, 116 | showLinks: true, 117 | subComponent: [ 118 | { 119 | name: "chrome", 120 | component: Chrome, 121 | }, 122 | ], 123 | }, 124 | { 125 | id: "word", 126 | name: "Word", 127 | order: 6, 128 | icon: word, 129 | isApplication: true, 130 | showInDesktop: true, 131 | showLinks: true, 132 | subComponent: [ 133 | { 134 | name: "word", 135 | component: Word, 136 | }, 137 | ], 138 | }, 139 | { 140 | id: "spreadsheet", 141 | name: "Spreadsheet", 142 | order: 7, 143 | icon: spreadsheet, 144 | isApplication: true, 145 | showInDesktop: true, 146 | showLinks: true, 147 | subComponent: [ 148 | { 149 | name: "spreedsheet", 150 | component: SpreadsheetApp, 151 | }, 152 | ], 153 | }, 154 | { 155 | id: "settings", 156 | name: "Settings", 157 | order: 8, 158 | icon: settings, 159 | showInDesktop: false, 160 | isApplication: false, 161 | showLinks: true, 162 | subComponent: [ 163 | { 164 | name: "Background", 165 | component: BackgroundSettings, 166 | }, 167 | ], 168 | }, 169 | ]; 170 | 171 | export default appConfig; 172 | -------------------------------------------------------------------------------- /src/utils/data/cv_ver1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dawidolko/Windows-Simulaing-System-GUI/15185a5eff381abad32206324b402140cb6d85be/src/utils/data/cv_ver1.pdf -------------------------------------------------------------------------------- /src/utils/data/project.config.js: -------------------------------------------------------------------------------- 1 | const projectConfig = { 2 | enableAnalytics: false, 3 | }; 4 | 5 | export default projectConfig; 6 | -------------------------------------------------------------------------------- /src/utils/data/settings.config.js: -------------------------------------------------------------------------------- 1 | import default_wallpaper from "../../assets/images/wallpapers/default_wallpaper.jpg"; 2 | import wallpaper1 from "../../assets/images/wallpapers/wallpaper1.jpg"; 3 | import wallpaper2 from "../../assets/images/wallpapers/wallpaper2.jpg"; 4 | import wallpaper3 from "../../assets/images/wallpapers/wallpaper3.jpg"; 5 | 6 | const settings = { 7 | desktop_wallpapers: [ 8 | { 9 | id: "default_wall", 10 | value: default_wallpaper, 11 | }, 12 | { 13 | id: "wall_1", 14 | value: wallpaper1, 15 | }, 16 | { 17 | id: "wall_2", 18 | value: wallpaper2, 19 | }, 20 | { 21 | id: "wall_3", 22 | value: wallpaper3, 23 | }, 24 | ], 25 | default_wallpaper: default_wallpaper, 26 | }; 27 | 28 | export default settings; 29 | -------------------------------------------------------------------------------- /src/utils/data/user.config.js: -------------------------------------------------------------------------------- 1 | import ResumePDF from "./cv_ver1.pdf"; 2 | import default_avatar from "../../assets/images/baseImages/default_avatar.svg"; 3 | import KloudGin from ".././../assets/images/data/KloudGin.png"; 4 | import Freelance from ".././../assets/images/data/Freelance.png"; 5 | 6 | const user = { 7 | firstName: "Dawid", 8 | lastName: "Olko", 9 | userImage: default_avatar, 10 | resume: ResumePDF, 11 | email: "poczta@dawidolko.pl", 12 | linkedIn: "in/dawidolko", 13 | gitHub: "dawidolko", 14 | twitter: "dawidolko", 15 | aboutMe: { 16 | intro: " I'm a Full Stack Software Development Engineer from Poland.", 17 | description: 18 | "I enjoy taking up complex problems and converting to an usable format. My major domains are Web Development (React / Angular) and Software Development (Java / Python).", 19 | outro: 20 | "When I'm not developing any stuff , you will find me re-watching an episode of The Office or exploring a new place.", 21 | }, 22 | experiences: [ 23 | { 24 | organization: "-", 25 | organizationPicture: KloudGin, 26 | isCurrent: true, 27 | startDate: "Jun 2019", 28 | endDate: null, 29 | positions: [ 30 | { 31 | positionName: "-", 32 | startDate: "-", 33 | endDate: " -", 34 | isPresent: true, 35 | description: "-", 36 | }, 37 | { 38 | positionName: "--", 39 | startDate: "--", 40 | endDate: "--", 41 | isPresent: false, 42 | description: "--", 43 | }, 44 | { 45 | positionName: "---", 46 | startDate: "---", 47 | endDate: "---", 48 | isPresent: false, 49 | description: "---", 50 | }, 51 | ], 52 | }, 53 | { 54 | organization: "Freelance Developer", 55 | startDate: "2017", 56 | endDate: "2019", 57 | organizationPicture: Freelance, 58 | isCurrent: false, 59 | positions: [ 60 | { 61 | positionName: "-", 62 | startDate: "-", 63 | endDate: "-", 64 | isPresent: false, 65 | description: "-", 66 | }, 67 | ], 68 | }, 69 | ], 70 | education: [ 71 | { 72 | instituteName: "-", 73 | degree: "-", 74 | year: "-", 75 | id: 1, 76 | }, 77 | { 78 | instituteName: "--", 79 | degree: "--", 80 | year: "--", 81 | id: 2, 82 | }, 83 | { 84 | instituteName: "--", 85 | degree: "--", 86 | year: "--", 87 | id: 3, 88 | }, 89 | ], 90 | projects: [ 91 | { 92 | projectName: "Note", 93 | description: "-", 94 | madeWith: ["-", "--", "---", "----"], 95 | link: "https://github.com/dawidolko/", 96 | }, 97 | { 98 | projectName: "Bus Management", 99 | description: "-", 100 | madeWith: ["-", "--", "---"], 101 | link: "https://github.com/dawidolko/", 102 | }, 103 | { 104 | projectName: "Seat Swapper", 105 | description: "-", 106 | madeWith: ["Java", "MySQL", "BlockChain", "HTML", "CSS", "JavaScript"], 107 | link: "https://github.com/dawidolko/", 108 | }, 109 | { 110 | projectName: "Flight Ticket Saver", 111 | description: "-", 112 | madeWith: ["Python", "DJANGO", "HTML", "CSS", "JavaScript"], 113 | link: "https://github.com/dawidolko/", 114 | }, 115 | ], 116 | skills: [ 117 | { 118 | name: "Language Proficiency", 119 | values: [ 120 | "Python", 121 | "Java", 122 | "JavaScript", 123 | "ReactJS", 124 | "Firebase", 125 | "HTML", 126 | "CSS", 127 | ], 128 | }, 129 | { 130 | name: "Tools Proficiency", 131 | values: ["Git", "PyCharm", "Eclipse", "IntelliJ IDEA", "Postman"], 132 | }, 133 | { 134 | name: "Database Proficiency", 135 | values: ["MySQL", "MongoDB", "Firestore"], 136 | }, 137 | ], 138 | }; 139 | 140 | export default user; 141 | -------------------------------------------------------------------------------- /src/utils/documents/app.document.js: -------------------------------------------------------------------------------- 1 | class AppStateDocument { 2 | constructor() { 3 | this.id = ""; 4 | this.name = ""; 5 | this.icon = ""; 6 | this.componentName = ""; 7 | this.order = ""; 8 | this.isMaximized = false; 9 | this.isMinimized = false; 10 | this.isOpened = false; 11 | this.showInDesktop = false; 12 | this.showInStartMenu = false; 13 | this.showInTaskBar = false; 14 | this.showLinks = false; 15 | this.subComponent = {}; 16 | this.isApplication = false; 17 | } 18 | } 19 | 20 | export default AppStateDocument; 21 | -------------------------------------------------------------------------------- /src/utils/documents/enums.js: -------------------------------------------------------------------------------- 1 | export const ACTION_TYPES = { 2 | SET_STATE: "Set_State", 3 | APP_INIT: "Initialize_Applications", 4 | APP_CLICK: "Application_Click", 5 | MINIMIZE: "Minimize", 6 | MAXIMIZE: "Maximize", 7 | CLOSE: "Close", 8 | TOGGLE_WIFI: "Toggle_Wifi", 9 | TOGGLE_AIRPLANE_MODE: "Toggle_Airplane_Mode", 10 | TOGGLE_MUTE: "Toggle_Mute", 11 | CHANGE_WALLPAPER: "Change_Wallpaper", 12 | }; 13 | 14 | export const SCREENS = { 15 | DESKTOP: "Desktop", 16 | LOCK_SCREEN: "Lock_Screen", 17 | SHUT_DOWN: "Shut_Down", 18 | }; 19 | 20 | export const ANALYTICS_EVENTS = { 21 | DOWNLOAD_RESUME: "Download_Resume", 22 | SEND_MAIL: "Send_Mail", 23 | CHANGE_POWER_STATE: "Chnage_Power_State", 24 | ADMIN: "Admin", 25 | BACKGROUND_CHANGE: "Background_Change", 26 | SOCIAL_CLICK: "Social_Click", 27 | }; 28 | -------------------------------------------------------------------------------- /src/utils/documents/settings.document.js: -------------------------------------------------------------------------------- 1 | import default_wallpaper from "../../assets/images/wallpapers/default_wallpaper.jpg"; 2 | 3 | class SettingDocument { 4 | constructor() { 5 | this.currentWallpaper = default_wallpaper; 6 | this.currentWallpaperId = "default_wall"; 7 | this.isMute = false; 8 | this.wifiEnabled = true; 9 | this.airplaneMode = true; 10 | } 11 | } 12 | 13 | export default SettingDocument; 14 | -------------------------------------------------------------------------------- /src/utils/documents/system.document.js: -------------------------------------------------------------------------------- 1 | class SystemStateDocument { 2 | constructor() { 3 | this.isLocked = true; 4 | this.isShutDown = false; 5 | this.isDesktop = false; 6 | } 7 | } 8 | 9 | export default SystemStateDocument; 10 | -------------------------------------------------------------------------------- /src/utils/firebaseConfig.js: -------------------------------------------------------------------------------- 1 | import firebase from "firebase/app"; 2 | import "firebase/analytics"; 3 | import projectConfig from "../utils/data/project.config"; 4 | 5 | const firebaseConfig = { 6 | apiKey: process.env.REACT_APP_APIKEY, 7 | authDomain: process.env.REACT_APP_AUTH_DOMAIN, 8 | databaseURL: process.env.REACT_APP_DATABASE_URL, 9 | projectId: process.env.REACT_APP_PROJECT_ID, 10 | storageBucket: process.env.REACT_APP_STORAGE_BUCKET, 11 | messagingSenderId: process.env.REACT_APP_MESSSAGING_SENDER_ID, 12 | appId: process.env.REACT_APP_APP_ID, 13 | }; 14 | 15 | if (!firebase.apps.length && projectConfig.enableAnalytics) { 16 | firebase.initializeApp(firebaseConfig); 17 | } 18 | 19 | export default firebase; 20 | -------------------------------------------------------------------------------- /src/utils/reducers/app.reducer.js: -------------------------------------------------------------------------------- 1 | import appConfig from "../data/apps.config"; 2 | import AppStateDocument from "../documents/app.document"; 3 | import { ACTION_TYPES } from "../documents/enums"; 4 | import { 5 | filterObjectListById, 6 | replaceObjectListByKey, 7 | } from "../services/common-util-servies"; 8 | 9 | const initialAppState = new AppStateDocument(); 10 | 11 | const appStateReducer = (state = [initialAppState], action) => { 12 | var apps = []; 13 | var currentAppState = {}; 14 | switch (action.type) { 15 | case ACTION_TYPES.APP_INIT: 16 | let appsList = appConfig; 17 | if ( 18 | appsList !== undefined && 19 | appsList !== null && 20 | appsList.length > 0 21 | ) { 22 | for (let i = 0; i < appsList.length; i++) { 23 | var newApp = new AppStateDocument(); 24 | newApp.id = appsList[i].id; 25 | newApp.name = appsList[i].name; 26 | newApp.icon = appsList[i].icon; 27 | newApp.order = appsList[i].order; 28 | newApp.showInDesktop = appsList[i].showInDesktop; 29 | newApp.showLinks = appsList[i].showLinks; 30 | newApp.isApplication = appsList[i].isApplication; 31 | if (newApp.showLinks) { 32 | newApp.subComponent = appsList[i].subComponent; 33 | } 34 | apps.push(newApp); 35 | } 36 | } 37 | return { 38 | apps, 39 | }; 40 | 41 | case ACTION_TYPES.APP_CLICK: 42 | currentAppState = filterObjectListById(state.apps, action.app.id); 43 | if (currentAppState.isOpened) { 44 | currentAppState.isMinimized = !currentAppState.isMinimized; 45 | } else { 46 | currentAppState.isMinimized = false; 47 | currentAppState.isMaximized = false; 48 | currentAppState.isOpened = true; 49 | } 50 | apps = replaceObjectListByKey(state.apps, currentAppState, "id"); 51 | return { 52 | apps, 53 | }; 54 | 55 | case ACTION_TYPES.MINIMIZE: 56 | currentAppState = filterObjectListById(state.apps, action.app.id); 57 | currentAppState.isMinimized = true; 58 | apps = replaceObjectListByKey(state.apps, currentAppState, "id"); 59 | return { 60 | apps, 61 | }; 62 | 63 | case ACTION_TYPES.MAXIMIZE: 64 | currentAppState = filterObjectListById(state.apps, action.app.id); 65 | currentAppState.isMaximized = !currentAppState.isMaximized; 66 | apps = replaceObjectListByKey(state.apps, currentAppState, "id"); 67 | return { 68 | apps, 69 | }; 70 | 71 | case ACTION_TYPES.CLOSE: 72 | currentAppState = filterObjectListById(state.apps, action.app.id); 73 | currentAppState.isMinimized = false; 74 | currentAppState.isMaximized = false; 75 | currentAppState.isOpened = false; 76 | apps = replaceObjectListByKey(state.apps, currentAppState, "id"); 77 | return { 78 | apps, 79 | }; 80 | 81 | default: 82 | return state; 83 | } 84 | }; 85 | 86 | export default appStateReducer; 87 | -------------------------------------------------------------------------------- /src/utils/reducers/settings.reducer.js: -------------------------------------------------------------------------------- 1 | import settings from "../data/settings.config"; 2 | import { ACTION_TYPES } from "../documents/enums"; 3 | import SettingDocument from "../documents/settings.document"; 4 | 5 | const initialSettings = new SettingDocument(); 6 | 7 | const settingsStateReducer = (state = initialSettings, action) => { 8 | switch (action.type) { 9 | case ACTION_TYPES.TOGGLE_MUTE: 10 | return { 11 | ...state, 12 | isMute: !state.isMute, 13 | }; 14 | case ACTION_TYPES.TOGGLE_WIFI: 15 | return { 16 | ...state, 17 | wifiEnabled: !state.wifiEnabled, 18 | }; 19 | case ACTION_TYPES.TOGGLE_AIRPLANE_MODE: 20 | return { 21 | ...state, 22 | airplaneMode: !state.airplaneMode, 23 | }; 24 | case ACTION_TYPES.CHANGE_WALLPAPER: 25 | var newWallpaper = settings.desktop_wallpapers.filter( 26 | (wallpaper) => wallpaper.id === action.wallpaperId 27 | ); 28 | return { 29 | ...state, 30 | currentWallpaper: 31 | newWallpaper !== undefined && newWallpaper[0] !== undefined 32 | ? newWallpaper[0].value 33 | : settings.default_wallpaper, 34 | currentWallpaperId: 35 | newWallpaper !== undefined && newWallpaper[0] !== undefined 36 | ? newWallpaper[0].id 37 | : "default_wall", 38 | }; 39 | default: 40 | return state; 41 | } 42 | }; 43 | 44 | export default settingsStateReducer; 45 | -------------------------------------------------------------------------------- /src/utils/reducers/system.reducer.js: -------------------------------------------------------------------------------- 1 | import { ACTION_TYPES } from "../documents/enums"; 2 | import SystemStateDocument from "../documents/system.document"; 3 | 4 | const initialSystemState = new SystemStateDocument(); 5 | 6 | const systemStateReducer = (state = initialSystemState, action) => { 7 | switch (action.type) { 8 | case ACTION_TYPES.SET_STATE: 9 | var newSystemState = new SystemStateDocument(); 10 | newSystemState.isLocked = false; 11 | newSystemState[action.systemState] = true; 12 | return { 13 | ...state, 14 | isLocked: newSystemState.isLocked, 15 | isShutDown: newSystemState.isShutDown, 16 | isDesktop: newSystemState.isDesktop, 17 | }; 18 | default: 19 | return state; 20 | } 21 | }; 22 | 23 | export default systemStateReducer; 24 | -------------------------------------------------------------------------------- /src/utils/routes.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch, Route } from "react-router-dom"; 3 | import BlueScreen404 from "../containers/blueScreen404.container"; 4 | import Windows from "../containers/windows.container"; 5 | 6 | function Routes() { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default Routes; 19 | -------------------------------------------------------------------------------- /src/utils/services/common-util-servies.js: -------------------------------------------------------------------------------- 1 | export const filterObjectList = (objectList, key, value) => { 2 | var result = []; 3 | if ( 4 | objectList !== undefined && 5 | objectList !== null && 6 | objectList.length > 0 7 | ) { 8 | result = objectList.filter((obj) => obj[key] === value); 9 | } 10 | return result; 11 | }; 12 | 13 | export const filterObjectListById = (objectList, id) => { 14 | var result = []; 15 | var obj = {}; 16 | if ( 17 | objectList !== undefined && 18 | objectList !== null && 19 | objectList.length > 0 20 | ) { 21 | result = objectList.filter((obj) => obj.id === id); 22 | if (result !== undefined && result !== null && result.length > 0) { 23 | obj = result[0]; 24 | } 25 | } 26 | return obj; 27 | }; 28 | 29 | export const replaceObjectListByKey = (objectList, object, key) => { 30 | if (objectList.length < 1) { 31 | objectList.push(object); 32 | } else { 33 | for (let i = 0; i < objectList.length; i++) { 34 | if (objectList[i][key] === object[key]) { 35 | objectList[i] = object; 36 | break; 37 | } 38 | } 39 | } 40 | return objectList; 41 | }; 42 | -------------------------------------------------------------------------------- /src/utils/store.js: -------------------------------------------------------------------------------- 1 | import { combineReducers, createStore } from "redux"; 2 | import systemStateReducer from "./reducers/system.reducer"; 3 | import appStateReducer from "./reducers/app.reducer"; 4 | import settingsStateReducer from "./reducers/settings.reducer"; 5 | 6 | const rootReducer = combineReducers({ 7 | systemState: systemStateReducer, 8 | appState: appStateReducer, 9 | settingsState: settingsStateReducer, 10 | }); 11 | 12 | // Remove window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() in Prod env 13 | export default createStore( 14 | rootReducer, 15 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 16 | ); 17 | --------------------------------------------------------------------------------