├── public
├── Panda.png
├── robots.txt
├── manifest.json
└── index.html
├── src
├── Assets
│ ├── Resume.pdf
│ ├── Icons
│ │ ├── Ejs.png
│ │ ├── Sort.png
│ │ ├── Wifi.png
│ │ ├── Chrome.png
│ │ ├── Folder.png
│ │ ├── KSJaay.png
│ │ ├── Autopsy.png
│ │ ├── FTKImager.png
│ │ ├── Notepad.png
│ │ ├── Recycle.png
│ │ ├── Terminal.png
│ │ ├── Calculator.png
│ │ ├── FullFolder.png
│ │ ├── JFreeChart.jpg
│ │ ├── RecycleFull.png
│ │ ├── TaskManager.png
│ │ ├── FileExplorer.png
│ │ ├── GithubDesktop.png
│ │ ├── NormalBackground.jpg
│ │ ├── Vue.svg
│ │ ├── Windows.svg
│ │ ├── Material_UI.svg
│ │ ├── HTML.svg
│ │ ├── CSS.svg
│ │ ├── NPM.svg
│ │ ├── Unity.svg
│ │ ├── Strapi.svg
│ │ ├── Tensorflow.svg
│ │ ├── Visual.svg
│ │ ├── Tailwind.svg
│ │ ├── BitBucket.svg
│ │ ├── Git.svg
│ │ ├── Socket.svg
│ │ ├── TypeScript.svg
│ │ ├── Vercel.svg
│ │ ├── JavaScript.svg
│ │ ├── Mobx.svg
│ │ ├── Scala.svg
│ │ ├── MongoDB.svg
│ │ ├── Nextjs.svg
│ │ ├── Fastify.svg
│ │ ├── Java.svg
│ │ ├── C.svg
│ │ ├── Python.svg
│ │ ├── Chartjs.svg
│ │ ├── DynamoDB.svg
│ │ ├── Oracle.svg
│ │ ├── CSharp.svg
│ │ ├── CPlus.svg
│ │ ├── Github.svg
│ │ ├── Firebase.svg
│ │ ├── Node.svg
│ │ ├── Kotlin.svg
│ │ ├── React.svg
│ │ ├── Redis.svg
│ │ ├── MariaDB.svg
│ │ ├── Hotjar.svg
│ │ ├── Atom.svg
│ │ ├── MySQL.svg
│ │ ├── Icons.jsx
│ │ ├── jQuery.svg
│ │ ├── Nginx.svg
│ │ ├── Postman.svg
│ │ ├── Expressjs.svg
│ │ ├── SQLite.svg
│ │ ├── Wireshark.svg
│ │ ├── PostgreSQL.svg
│ │ ├── Nodejs.svg
│ │ ├── mysql-3.svg
│ │ ├── WindowsLoading.svg
│ │ └── ReactNative.svg
│ ├── Images
│ │ ├── KSJaay.png
│ │ ├── Projects
│ │ │ ├── CovidApp.png
│ │ │ ├── CovidApp2.png
│ │ │ ├── JavaChat.png
│ │ │ ├── AmariWebsite.PNG
│ │ │ └── AlitaOpenSource.png
│ │ ├── TerminalBackground.png
│ │ └── Backgrounds
│ │ │ ├── Desert.webp
│ │ │ ├── Windows.jpg
│ │ │ └── WindowsDumb.jpg
│ └── CSS
│ │ ├── Recent.css
│ │ ├── Contact.css
│ │ ├── Hero.css
│ │ └── MyComputer.css
├── index.js
├── Components
│ ├── Apps
│ │ ├── Settings.jsx
│ │ ├── Portfolio
│ │ │ ├── Resume.jsx
│ │ │ ├── About.jsx
│ │ │ ├── Experience.jsx
│ │ │ ├── Projects.jsx
│ │ │ └── Contact.jsx
│ │ ├── Github.jsx
│ │ ├── Editor.jsx
│ │ ├── TextEditor.jsx
│ │ ├── KSJaay.jsx
│ │ ├── Google.jsx
│ │ ├── Folder.jsx
│ │ └── Recycle.jsx
│ └── Computer
│ │ ├── BSOD.jsx
│ │ ├── Helpers
│ │ ├── CreateItem.jsx
│ │ └── CreateInFolder.jsx
│ │ ├── Modal.jsx
│ │ └── Desktop.jsx
├── Index.css
├── App.jsx
└── Utils
│ └── Style.js
├── .gitignore
├── LICENSE
├── package.json
└── README.md
/public/Panda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/public/Panda.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/Assets/Resume.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Resume.pdf
--------------------------------------------------------------------------------
/src/Assets/Icons/Ejs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Ejs.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Sort.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Sort.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Wifi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Wifi.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Chrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Chrome.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Folder.png
--------------------------------------------------------------------------------
/src/Assets/Icons/KSJaay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/KSJaay.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Autopsy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Autopsy.png
--------------------------------------------------------------------------------
/src/Assets/Icons/FTKImager.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/FTKImager.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Notepad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Notepad.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Recycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Recycle.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Terminal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Terminal.png
--------------------------------------------------------------------------------
/src/Assets/Images/KSJaay.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/KSJaay.png
--------------------------------------------------------------------------------
/src/Assets/Icons/Calculator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/Calculator.png
--------------------------------------------------------------------------------
/src/Assets/Icons/FullFolder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/FullFolder.png
--------------------------------------------------------------------------------
/src/Assets/Icons/JFreeChart.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/JFreeChart.jpg
--------------------------------------------------------------------------------
/src/Assets/Icons/RecycleFull.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/RecycleFull.png
--------------------------------------------------------------------------------
/src/Assets/Icons/TaskManager.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/TaskManager.png
--------------------------------------------------------------------------------
/src/Assets/Icons/FileExplorer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/FileExplorer.png
--------------------------------------------------------------------------------
/src/Assets/Icons/GithubDesktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/GithubDesktop.png
--------------------------------------------------------------------------------
/src/Assets/Icons/NormalBackground.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Icons/NormalBackground.jpg
--------------------------------------------------------------------------------
/src/Assets/Images/Projects/CovidApp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Projects/CovidApp.png
--------------------------------------------------------------------------------
/src/Assets/Images/Projects/CovidApp2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Projects/CovidApp2.png
--------------------------------------------------------------------------------
/src/Assets/Images/Projects/JavaChat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Projects/JavaChat.png
--------------------------------------------------------------------------------
/src/Assets/Images/TerminalBackground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/TerminalBackground.png
--------------------------------------------------------------------------------
/src/Assets/Images/Backgrounds/Desert.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Backgrounds/Desert.webp
--------------------------------------------------------------------------------
/src/Assets/Images/Backgrounds/Windows.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Backgrounds/Windows.jpg
--------------------------------------------------------------------------------
/src/Assets/Images/Backgrounds/WindowsDumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Backgrounds/WindowsDumb.jpg
--------------------------------------------------------------------------------
/src/Assets/Images/Projects/AmariWebsite.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Projects/AmariWebsite.PNG
--------------------------------------------------------------------------------
/src/Assets/Images/Projects/AlitaOpenSource.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KSJaay/Win10React/HEAD/src/Assets/Images/Projects/AlitaOpenSource.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "KSJaay",
3 | "name": "Windows 10 themed portfolio using React and Styled components. Recode in the works.",
4 | "start_url": ".",
5 | "display": "standalone",
6 | "theme_color": "#6524FA",
7 | "background_color": "#6524FA"
8 | }
9 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import "./Index.css";
4 | import { App } from "./App.jsx";
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById("root")
11 | );
12 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Vue.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Windows.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.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.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/src/Assets/CSS/Recent.css:
--------------------------------------------------------------------------------
1 | .featured-project-link-item{
2 | font-size: 1.8em;
3 | margin: 18px 20px 0px 5px;
4 | color: var(--font-color);
5 | text-decoration: none;
6 | }
7 |
8 | .featured-project-link-item:hover{
9 | cursor: pointer;
10 | color: var(--highlight-color);
11 | }
12 |
13 | @media (max-width: 768px) {
14 | .featured-project-link-item{
15 | margin: 18px 20px 10px 8px;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/Assets/Icons/Material_UI.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/HTML.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/CSS.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/NPM.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Unity.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Strapi.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Apps/Settings.jsx:
--------------------------------------------------------------------------------
1 | // I promise I coded this, probably just an old commit or something...
2 |
3 | // Import node_modules
4 | import React from "react";
5 | import styled from "styled-components";
6 |
7 | const TextEditor = ({ content }) => {
8 | return ;
9 | };
10 |
11 | const Container = styled.div`
12 | height: 100%;
13 | width: 100%;
14 | min-height: 100%;
15 | min-width: 100%;
16 | max-height: 100%;
17 | max-width: 100%;
18 | display: flex;
19 | flex-direction: column;
20 | `;
21 |
22 | export default TextEditor;
23 |
--------------------------------------------------------------------------------
/src/Components/Apps/Portfolio/Resume.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 | import ResumePdf from "./../../../Assets/Resume.pdf";
5 |
6 | // Iframe with my resume
7 | const Resume = () => {
8 | return (
9 |
10 |
17 |
18 | );
19 | };
20 |
21 | const Container = styled.div`
22 | width: 100%;
23 | height: 100%;
24 | display: flex;
25 | `;
26 |
27 | export default Resume;
28 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Tensorflow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Apps/Github.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Whole thing is just an iframe
6 | const Github = () => {
7 | return (
8 |
9 |
17 |
18 | );
19 | };
20 |
21 | const Container = styled.div`
22 | display: flex;
23 | flex: 1;
24 | height: 100%;
25 | background-color: #1e1e1e;
26 | `;
27 |
28 | export default Github;
29 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Visual.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Tailwind.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/BitBucket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Git.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Socket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/TypeScript.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/JavaScript.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Mobx.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Scala.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 KSJaay.com
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 |
--------------------------------------------------------------------------------
/src/Assets/Icons/MongoDB.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
14 |
15 |
16 |
17 |
21 |
22 |
23 |
24 | KSJaay
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Nextjs.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Computer/BSOD.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Worst feeling ever is coded below
6 | const BSOD = () => {
7 | return (
8 |
9 | :(
10 |
11 | Your PC ran into a problem and needs to restart. We're just collected
12 | some error information. Please restart your PC to fix this issue.
13 |
14 |
15 | Just refresh the broswer if you don't get the joke :)
16 |
17 |
18 | );
19 | };
20 |
21 | const Container = styled.div`
22 | position: absolute;
23 | overflow: hidden;
24 | width: 65%;
25 | height: 100%;
26 | flex: 1;
27 | display: flex;
28 | justify-content: center;
29 | color: ${(props) => props.theme.colors.font};
30 | background-color: #0079d8;
31 | flex-direction: column;
32 | padding: 0 25% 0 10%;
33 | `;
34 |
35 | const SadFace = styled.div`
36 | font-size: 8em;
37 | `;
38 |
39 | const ErrorText = styled.div`
40 | margin-top: 30px;
41 | font-size: 2em;
42 | `;
43 |
44 | const SmallText = styled.div`
45 | margin-top: 30px;
46 | font-size: 12px;
47 | `;
48 |
49 | export default BSOD;
50 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Fastify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Exo:400,500,600,700');
2 | @import url('https://fonts.googleapis.com/css?family=Fira+Code:400,500,600,700&display=swap');
3 |
4 | html {
5 | scroll-behavior: smooth;
6 | }
7 |
8 | body {
9 | margin: 0;
10 | padding: 0;
11 | font-family: Helvetica;
12 | -webkit-touch-callout: none;
13 | -webkit-user-select: none;
14 | user-select: none;
15 | margin: 0;
16 | background-color: #282c34;
17 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
18 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
19 | sans-serif;
20 | }
21 |
22 | :root {
23 | --background-primary: #282c34;
24 | --background-secondary: #21252b;
25 | --background-light: #333842;
26 | --font-color: white;
27 | --highlight-color: #3bce85;
28 | --scroll-primary: #21252b;
29 | --scroll-secondary: #3a3f47;
30 | --scroll-hover: #414855;
31 | --items-about-hover: #dbdbdb;
32 | }
33 |
34 | ::-webkit-scrollbar {
35 | width: 8px;
36 | }
37 |
38 | ::-webkit-scrollbar-track {
39 | background: #21252b;
40 | }
41 |
42 | ::-webkit-scrollbar-thumb {
43 | background: #3a3f47;
44 | border-radius: 8px;
45 | }
46 |
47 | ::-webkit-scrollbar-thumb:hover {
48 | background: #414855;
49 | }
--------------------------------------------------------------------------------
/src/Assets/Icons/Java.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/C.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Python.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Chartjs.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import { BrowserRouter as Router, Route } from "react-router-dom";
4 | import { ThemeProvider } from "styled-components";
5 | import { darkTheme } from "./Utils/Style";
6 | import { lightTheme } from "./Utils/Style";
7 |
8 | // Import react components
9 | import { Computer } from "./Components/Computer/MainPage";
10 |
11 | export class App extends React.Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | // default theme
16 | theme: "dark",
17 | };
18 | }
19 |
20 | componentDidMount() {
21 | // Load theme from local storage
22 | let theme = !localStorage.getItem("ksjaay_theme")
23 | ? "dark"
24 | : localStorage.getItem("ksjaay_theme");
25 | this.setState({ theme: theme });
26 |
27 | // Version management for later features
28 | let version = localStorage.getItem("version");
29 | if (!version) localStorage.setItem("version", "1.0.0");
30 | }
31 |
32 | render() {
33 | return (
34 |
38 |
39 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "win10react",
3 | "author": {
4 | "name": "KSJaay",
5 | "email": "contact@ksjaay.com"
6 | },
7 | "version": "1.0.0",
8 | "description": "💻 Windows 10 themed portfolio, using React and Styled Components.",
9 | "private": true,
10 | "dependencies": {
11 | "@emotion/react": "^11.9.0",
12 | "@emotion/styled": "^11.8.1",
13 | "@monaco-editor/react": "^4.3.1",
14 | "@mui/material": "^5.0.2",
15 | "moment": "^2.29.1",
16 | "react": "^17.0.2",
17 | "react-calendar": "^3.4.0",
18 | "react-dom": "^17.0.2",
19 | "react-draggable": "^4.4.4",
20 | "react-icons": "^4.2.0",
21 | "react-router-dom": "^5.3.0",
22 | "react-scripts": "^4.0.3",
23 | "styled-components": "^5.3.1"
24 | },
25 | "scripts": {
26 | "start": "react-scripts start",
27 | "build": "react-scripts build",
28 | "test": "react-scripts test",
29 | "eject": "react-scripts eject"
30 | },
31 | "eslintConfig": {
32 | "extends": [
33 | "react-app",
34 | "react-app/jest"
35 | ]
36 | },
37 | "browserslist": {
38 | "production": [
39 | ">0.2%",
40 | "not dead",
41 | "not op_mini all"
42 | ],
43 | "development": [
44 | "last 1 chrome version",
45 | "last 1 firefox version",
46 | "last 1 safari version"
47 | ]
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/Assets/CSS/Contact.css:
--------------------------------------------------------------------------------
1 | .lds-ellipsis {
2 | position: relative;
3 | display: flex;
4 | width: 150px;
5 | justify-content: center;
6 | align-items: center;
7 | padding: 10.5px 32px
8 | }
9 | .lds-ellipsis div {
10 | position: absolute;
11 | width: 13px;
12 | height: 13px;
13 | border-radius: 50%;
14 | background: #fff;
15 | animation-timing-function: cubic-bezier(0, 1, 1, 0);
16 | }
17 | .lds-ellipsis div:nth-child(1) {
18 | left: 43px;
19 | animation: lds-ellipsis1 0.6s infinite;
20 | }
21 | .lds-ellipsis div:nth-child(2) {
22 | left: 43px;
23 | animation: lds-ellipsis2 0.6s infinite;
24 | }
25 | .lds-ellipsis div:nth-child(3) {
26 | left: 67px;
27 | animation: lds-ellipsis2 0.6s infinite;
28 | }
29 | .lds-ellipsis div:nth-child(4) {
30 | left: 91px;
31 | animation: lds-ellipsis3 0.6s infinite;
32 | }
33 |
34 |
35 |
36 | @keyframes lds-ellipsis1 {
37 | 0% {
38 | transform: scale(0);
39 | }
40 | 100% {
41 | transform: scale(1);
42 | }
43 | }
44 |
45 | @keyframes lds-ellipsis3 {
46 | 0% {
47 | transform: scale(1);
48 | }
49 | 100% {
50 | transform: scale(0);
51 | }
52 | }
53 |
54 | @keyframes lds-ellipsis2 {
55 | 0% {
56 | transform: translate(0, 0);
57 | }
58 | 100% {
59 | transform: translate(24px, 0);
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/Assets/Icons/DynamoDB.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Oracle.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/CSharp.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/CSS/Hero.css:
--------------------------------------------------------------------------------
1 | .amari-logo{
2 | animation: mover 2s linear infinite;
3 | width: 15em;
4 | height: auto;
5 | padding: 50px 0 30px 0;
6 | }
7 |
8 |
9 | @-webkit-keyframes mover {
10 | 0% { transform: translateY(0); }
11 | 25% { transform: translateY(-2px); }
12 | 30% { transform: translateY(-3px); }
13 | 50% { transform: translateY(0px); }
14 | 75% { transform: translateY(3px); }
15 | 80% { transform: translateY(2px); }
16 | 100% { transform: translateY(0px); }
17 | }
18 | @-moz-keyframes mover {
19 | 0% { transform: translateY(0); }
20 | 25% { transform: translateY(-2px); }
21 | 30% { transform: translateY(-3px); }
22 | 50% { transform: translateY(0px); }
23 | 75% { transform: translateY(3px); }
24 | 80% { transform: translateY(2px); }
25 | 100% { transform: translateY(0px); }
26 | }
27 | @-ms-keyframes mover {
28 | 0% { transform: translateY(0); }
29 | 25% { transform: translateY(-2px); }
30 | 30% { transform: translateY(-3px); }
31 | 50% { transform: translateY(0px); }
32 | 75% { transform: translateY(3px); }
33 | 80% { transform: translateY(2px); }
34 | 100% { transform: translateY(0px); }
35 | }
36 | @-o-keyframes mover {
37 | 0% { transform: translateY(0); }
38 | 25% { transform: translateY(-2px); }
39 | 30% { transform: translateY(-3px); }
40 | 50% { transform: translateY(0px); }
41 | 75% { transform: translateY(3px); }
42 | 80% { transform: translateY(2px); }
43 | 100% { transform: translateY(0px); }
44 | }
45 | @keyframes mover {
46 | 0% { transform: translateY(0); }
47 | 25% { transform: translateY(-2px); }
48 | 30% { transform: translateY(-3px); }
49 | 50% { transform: translateY(0px); }
50 | 75% { transform: translateY(3px); }
51 | 80% { transform: translateY(2px); }
52 | 100% { transform: translateY(0px); }
53 | }
--------------------------------------------------------------------------------
/src/Assets/Icons/CPlus.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # THIS PROJECT IS A MESS, RECODE WHICH IS MUCH CLEANER IS COMING SOON
2 |
3 | # Win10React
4 |
5 | This is my Windows 10 💻 themed portfolio, created using React and Styled Components.
6 |
7 | ## Notice
8 |
9 | > This project is not in anyway affiliated with Microsoft or any of the Microsoft’s Operating System or Products. This is also not Windows 365 cloud PC.
10 |
11 | ## Can I help with this project?
12 |
13 | I'm working actively on the project but some times I make mistakes, so if you want to help me out, just shoot me a message or open up a pull request. I have a list of future updates at the bottom, so you can check that out and see what the future will offer. If you want to see specific updates you can also open an issue, and let me know :)
14 |
15 | # Why did you create this?
16 |
17 | I got really bored of looking at my current portfolio, cause it looked the same as everyone elses. So I thought what can I do to make it nicer/stand out. And this was pretty much what I decided to do. (Thinking about making a different design now so...)
18 |
19 | # Features
20 |
21 | - [ ] Animations
22 | - [ ] Applications:
23 | - [ ] Calculator
24 | - [x] Github Desktop
25 | - [x] Google Chrome
26 | - [x] KSJaay
27 | - [x] Notepad
28 | - [ ] React Editor
29 | - [x] Recycle Bin
30 | - [x] Terminal
31 | - [x] VS Code
32 | - [ ] Microsoft Store
33 | - [x] Context menu
34 | - [x] Delete applications, files, & folders
35 | - [x] Desktop & Navbar icons
36 | - [x] Drag, minimize, close, & resize windows
37 | - [x] File Explorer
38 | - [ ] Games (Knots and Crosses, Chess?, & idk...)
39 | - [x] Multiple windows support
40 | - [ ] Side Navigation
41 | - [x] Startup screen
42 | - [x] Start menu, Search menu, & Widgets
43 | - [ ] Task bar feed (News, Weather, & More!)
44 | - [ ] Themes & backgrounds
45 | - [x] User local weather updates
46 |
47 | ## Future plans
48 |
49 | - Create the highlight box (Mousedown on Windows)
50 | - Better start menu
51 | - Games
52 | - Live React coding
53 | - Login/Logout screen
54 | - Move to a state manager (Redux or Mobx)
55 |
56 | # Stack
57 |
58 | - Framework - React
59 | - Styling - Styled-components
60 | - Icons - React-Icons
61 |
62 | ## Known Issues
63 |
64 | - Opening applications through terminal doesn't bring application to front
65 |
--------------------------------------------------------------------------------
/src/Utils/Style.js:
--------------------------------------------------------------------------------
1 | export const darkTheme = {
2 | fonts: {
3 | body: `"sans-serif"`,
4 | },
5 | colors: {
6 | primary: "#282c34", // Medium
7 | secondary: "#21252b", // Dark
8 | light: "#333842", // Light
9 | highlight: "#3bce85",
10 | font: "#ffffff",
11 | secondaryFont: "#99aab5",
12 | },
13 | typography: {
14 | xs: {
15 | fontSize: "12px",
16 | lineHeight: 1.7,
17 | },
18 | s: {
19 | fontSize: "14px",
20 | lineHeight: 1.6,
21 | },
22 | m: {
23 | fontSize: "16px",
24 | lineHeight: 1.6,
25 | },
26 | l: {
27 | fontSize: "18px",
28 | lineHeight: 1.5,
29 | },
30 | xl: {
31 | fontSize: "20px",
32 | lineHeight: 1.4,
33 | },
34 | "2xl": {
35 | fontSize: "24px",
36 | lineHeight: 1.3,
37 | },
38 | "3xl": {
39 | fontSize: "30px",
40 | lineHeight: 1.2,
41 | },
42 | "4xl": {
43 | fontSize: "36px",
44 | lineHeight: 1.2,
45 | },
46 | "5xl": {
47 | fontSize: "48px",
48 | lineHeight: 1.1,
49 | },
50 | },
51 | };
52 |
53 | export const lightTheme = {
54 | fonts: {
55 | body: `"sans-serif"`,
56 | },
57 | colors: {
58 | primary: "#fafafa", // Medium
59 | secondary: "#eaeaeb", // Dark
60 | light: "#f1f1f1", // Light
61 | highlight: "#f67852",
62 | font: "#000000",
63 | secondaryFont: "#99aab5",
64 | },
65 | typography: {
66 | xs: {
67 | fontSize: "12px",
68 | lineHeight: 1.7,
69 | },
70 | s: {
71 | fontSize: "14px",
72 | lineHeight: 1.6,
73 | },
74 | m: {
75 | fontSize: "16px",
76 | lineHeight: 1.6,
77 | },
78 | l: {
79 | fontSize: "18px",
80 | lineHeight: 1.5,
81 | },
82 | xl: {
83 | fontSize: "20px",
84 | lineHeight: 1.4,
85 | },
86 | "2xl": {
87 | fontSize: "24px",
88 | lineHeight: 1.3,
89 | },
90 | "3xl": {
91 | fontSize: "30px",
92 | lineHeight: 1.2,
93 | },
94 | "4xl": {
95 | fontSize: "36px",
96 | lineHeight: 1.2,
97 | },
98 | "5xl": {
99 | fontSize: "48px",
100 | lineHeight: 1.1,
101 | },
102 | },
103 | };
104 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Firebase.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Apps/Editor.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React, { useState, useEffect } from "react";
3 | import styled from "styled-components";
4 | import Editor from "@monaco-editor/react";
5 |
6 | // Editor created using @monaco-editor/react
7 | const VsEditor = ({ content, updateFile }) => {
8 | let [value, setValue] = useState("// Code goes here");
9 | useEffect(() => {
10 | if (content) {
11 | setValue(content.content);
12 | }
13 | }, [content]);
14 |
15 | return (
16 | {
18 | if (content) {
19 | if (e.ctrlKey && e.key === "s") {
20 | e.preventDefault();
21 | let newFile = content;
22 | newFile.content = value;
23 | updateFile(newFile);
24 | }
25 | }
26 | }}
27 | >
28 | {content ? (
29 |
30 |
33 |
44 |
45 | ) : null}
46 |
47 | {
53 | setValue(value);
54 | }}
55 | />
56 |
57 |
58 | );
59 | };
60 |
61 | const Container = styled.div`
62 | display: flex;
63 | flex: 1;
64 | height: 100%;
65 | background-color: #1e1e1e;
66 | display: flex;
67 | flex-direction: column;
68 | `;
69 |
70 | const Content = styled.div`
71 | flex: 1;
72 | background-color: ${(props) => props.theme.colors.primary};
73 | `;
74 |
75 | const MenuContainer = styled.div`
76 | background-color: ${(props) => props.theme.colors.secondary};
77 | display: flex;
78 | `;
79 |
80 | const MenuItem = styled.div`
81 | border-right: 2px solid ${(props) => props.theme.colors.primary};
82 | padding: 3px 15px;
83 |
84 | &:hover {
85 | background-color: ${(props) => props.theme.colors.primary};
86 | }
87 | `;
88 |
89 | export default VsEditor;
90 |
--------------------------------------------------------------------------------
/src/Components/Apps/TextEditor.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React, { useState, useEffect } from "react";
3 | import styled from "styled-components";
4 |
5 | const TextEditor = ({ content, updateFile }) => {
6 | const [value, setValue] = useState(content.content);
7 |
8 | useEffect(() => {
9 | setValue(content.content);
10 | }, [content]);
11 |
12 | return (
13 | {
15 | if (e.ctrlKey && e.key === "s") {
16 | e.preventDefault();
17 | let newFile = content;
18 | newFile.content = value;
19 | updateFile(newFile);
20 | }
21 | }}
22 | >
23 |
24 |
27 |
36 |
37 |
38 |
39 | setValue(event.target.value)}
44 | />
45 |
46 |
47 | );
48 | };
49 |
50 | const Container = styled.div`
51 | height: 100%;
52 | width: 100%;
53 | min-height: 100%;
54 | min-width: 100%;
55 | max-height: 100%;
56 | max-width: 100%;
57 | display: flex;
58 | flex-direction: column;
59 | `;
60 |
61 | const MenuContainer = styled.div`
62 | background-color: ${(props) => props.theme.colors.light};
63 | display: flex;
64 | `;
65 |
66 | const MenuItem = styled.div`
67 | border-right: 2px solid ${(props) => props.theme.colors.primary};
68 | padding: 3px 15px;
69 |
70 | &:hover {
71 | background-color: ${(props) => props.theme.colors.primary};
72 | }
73 | `;
74 |
75 | const InputContainer = styled.div`
76 | flex: 1;
77 | display: flex;
78 | `;
79 |
80 | const Input = styled.textarea`
81 | flex: 1;
82 | outline: none;
83 | border: none;
84 | resize: none;
85 | background: ${(props) => props.theme.colors.secondary};
86 | color: ${(props) => props.theme.colors.font};
87 | padding: 5px;
88 | border-radius: 5px;
89 | font-family: "Exo", sans-serif;
90 | font-size: 16px;
91 | `;
92 |
93 | export default TextEditor;
94 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Node.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Kotlin.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/React.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Redis.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/MariaDB.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Hotjar.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Atom.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/MySQL.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Icons.jsx:
--------------------------------------------------------------------------------
1 | // Export all icons
2 | export const Icons = {
3 | Atom: require("./Atom.svg").default,
4 | Autopsy: require("./Autopsy.png").default,
5 | BitBucket: require("./BitBucket.svg").default,
6 | C: require("./C.svg").default,
7 | "C#": require("./CSharp.svg").default,
8 | "C++": require("./CPlus.svg").default,
9 | Chartjs: require("./Chartjs.svg").default,
10 | CSS: require("./CSS.svg").default,
11 | "Discord.js": require("./Discordjs.svg").default,
12 | DynamoDB: require("./DynamoDB.svg").default,
13 | Express: require("./Expressjs.svg").default,
14 | Fastify: require("./Fastify.svg").default,
15 | Firebase: require("./Firebase.svg").default,
16 | "FTK Imager": require("./FTKImager.png").default,
17 | Git: require("./Git.svg").default,
18 | Github: require("./Github.svg").default,
19 | Hotjar: require("./Hotjar.svg").default,
20 | HTML: require("./HTML.svg").default,
21 | Java: require("./Java.svg").default,
22 | JavaScript: require("./JavaScript.svg").default,
23 | JFreeChart: require("./JFreeChart.jpg").default,
24 | jQuery: require("./jQuery.svg").default,
25 | Kotlin: require("./Kotlin.svg").default,
26 | Linux: require("./Linux.svg").default,
27 | MariaDB: require("./MariaDB.svg").default,
28 | "Material UI": require("./Material_UI.svg").default,
29 | Mobx: require("./Mobx.svg").default,
30 | MongoDB: require("./MongoDB.svg").default,
31 | MySQL: require("./MySQL.svg").default,
32 | "NetBeans IDE": require("./Netbeans.svg").default,
33 | Nextjs: require("./Nextjs.svg").default,
34 | Nginx: require("./Nginx.svg").default,
35 | Nodejs: require("./Node.svg").default,
36 | NPM: require("./NPM.svg").default,
37 | Oracle: require("./Oracle.svg").default,
38 | PHP: require("./PHP.svg").default,
39 | PostgreSQL: require("./PostgreSQL.svg").default,
40 | Postman: require("./Postman.svg").default,
41 | Python: require("./Python.svg").default,
42 | React: require("./React.svg").default,
43 | "React Native": require("./ReactNative.svg").default,
44 | Redis: require("./Redis.svg").default,
45 | Scala: require("./Scala.svg").default,
46 | "Socket.io": require("./Socket.svg").default,
47 | Strapi: require("./Strapi.svg").default,
48 | SQLite: require("./SQLite.svg").default,
49 | Tailwind: require("./Tailwind.svg").default,
50 | Tensorflow: require("./Tensorflow.svg").default,
51 | TypeScript: require("./TypeScript.svg").default,
52 | Unity: require("./Unity.svg").default,
53 | Vercel: require("./Vercel.svg").default,
54 | "Visual Studio Code": require("./Visual.svg").default,
55 | Vuejs: require("./Vue.svg").default,
56 | Wireshark: require("./Wireshark.svg").default,
57 | };
58 |
59 | /*
60 | Icons I need to get
61 | Strapi
62 | Mobx
63 | DynamoDB
64 | Firebase
65 | Expo
66 | Sass
67 | Hotjar
68 | Tailwind
69 | Fastify
70 | Styled components
71 | Chartjs
72 | Canvas
73 | Canvas constructor
74 | Hapi
75 | Material UI
76 | PayPal SDK
77 | Framer motion
78 | Nextjs
79 | Twitter SDK
80 | Twitch SDK
81 | Youtube SDK
82 | Tensortflow
83 | p5js
84 | Jfreechart
85 | BitBucket
86 | Unity
87 | */
88 |
--------------------------------------------------------------------------------
/src/Components/Apps/Portfolio/About.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Import images
6 | import KSJaay from "./../../../Assets/Images/KSJaay.png";
7 |
8 | // Nice page with some nice styling
9 | const About = () => {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 | Hi, I'm KSJaay,
17 |
18 |
19 | I code things on the web.
20 |
21 |
22 |
23 | Recent graduate from{" "}
24 | University of Greenwhich with a strong
25 | focus on both{" "}
26 | frontend and backend development.
27 |
28 |
29 | Currently focused on creating applications with{" "}
30 | React, Node.js, Mobx, and MongoDB, like
31 | this website.
32 |
33 |
34 | Offering 3 years of experience in software
35 | development and testing for a large user-based company.
36 |
37 |
38 | Seeking an opportunity to utilise skills in developing software for an
39 | established company.
40 |
41 |
42 |
43 | );
44 | };
45 |
46 | const Container = styled.div`
47 | width: 100%;
48 | height: 100%;
49 | display: flex;
50 | flex-direction: column;
51 | `;
52 |
53 | const LogoContainer = styled.div`
54 | width: 100%;
55 | display: flex;
56 | justify-content: center;
57 | margin-top: 40px;
58 | `;
59 |
60 | const Logo = styled.img`
61 | height: 125px;
62 | width: auto;
63 | border-radius: 100%;
64 | `;
65 |
66 | const Header = styled.div`
67 | width: 100%;
68 | display: flex;
69 | justify-content: center;
70 | margin-top: 20px;
71 | font-size: 28px;
72 | `;
73 |
74 | const HeaderHighlight = styled.a`
75 | padding-left: 5px;
76 | color: ${(props) => props.theme.colors.highlight};
77 | font-weight: bold;
78 | `;
79 |
80 | const SubHeader = styled.div`
81 | width: 100%;
82 | display: flex;
83 | justify-content: center;
84 | margin-top: 5px;
85 | font-size: 22px;
86 | `;
87 |
88 | const List = styled.ul`
89 | width: 60%;
90 | margin: 0 20%;
91 | margin-top: 30px;
92 |
93 | @media screen and (max-width: 1200px) {
94 | margin: 0 10%;
95 | margin-top: 30px;
96 | width: 75%;
97 | }
98 |
99 | @media screen and (max-width: 900px) {
100 | margin: 0;
101 | margin-top: 30px;
102 |
103 | flex: 1;
104 | width: auto;
105 | }
106 | `;
107 |
108 | const ListItem = styled.li`
109 | margin: 8px 0;
110 | `;
111 |
112 | const Highlighter = styled.span`
113 | color: ${(props) => props.theme.colors.highlight};
114 | font-weight: 500;
115 | `;
116 |
117 | export default About;
118 |
--------------------------------------------------------------------------------
/src/Components/Apps/KSJaay.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React, { useState } from "react";
3 | import styled from "styled-components";
4 |
5 | // Import components
6 | import About from "./Portfolio/About";
7 | import Contact from "./Portfolio/Contact";
8 | import Experience from "./Portfolio/Experience";
9 | import Projects from "./Portfolio/Projects";
10 | import Resume from "./Portfolio/Resume";
11 | import Skills from "./Portfolio/Skills";
12 |
13 | // Assign components to names which user can select from
14 | const sections = {
15 | about: ,
16 | experience: ,
17 | skills: ,
18 | projects: ,
19 | resume: ,
20 | contact: ,
21 | };
22 |
23 | // Fun and interesting stuff about me.
24 |
25 | const KSJaay = () => {
26 | const [active, setActive] = useState("about");
27 | return (
28 |
29 |
30 | setActive("about")}
32 | style={active === "about" ? { backgroundColor: "#3bce85" } : {}}
33 | >
34 | About Me
35 |
36 | setActive("experience")}
38 | style={active === "experience" ? { backgroundColor: "#3bce85" } : {}}
39 | >
40 | Experience
41 |
42 | setActive("skills")}
44 | style={active === "skills" ? { backgroundColor: "#3bce85" } : {}}
45 | >
46 | Skills
47 |
48 | setActive("projects")}
50 | style={active === "projects" ? { backgroundColor: "#3bce85" } : {}}
51 | >
52 | My Projects
53 |
54 | setActive("resume")}
56 | style={active === "resume" ? { backgroundColor: "#3bce85" } : {}}
57 | >
58 | Resume
59 |
60 | setActive("contact")}
62 | style={active === "contact" ? { backgroundColor: "#3bce85" } : {}}
63 | >
64 | Contact Me
65 |
66 |
67 | {sections[active]}
68 |
69 | );
70 | };
71 |
72 | const Container = styled.div`
73 | width: 100%;
74 | height: 100%;
75 | display: flex;
76 |
77 | @media (max-width: 768px) {
78 | flex-direction: column;
79 | }
80 | `;
81 |
82 | const SideContainer = styled.div`
83 | width: 200px;
84 | background-color: ${(props) => props.theme.colors.light};
85 |
86 | @media (max-width: 768px) {
87 | width: 100%;
88 | }
89 | `;
90 |
91 | const SideContainerItem = styled.div`
92 | padding: 5px;
93 | &:hover {
94 | cursor: pointer;
95 | background-color: ${(props) => props.theme.colors.highlight}66;
96 | }
97 | `;
98 |
99 | const InfoContainer = styled.div`
100 | flex: 1;
101 | overflow: auto;
102 | `;
103 |
104 | export default KSJaay;
105 |
--------------------------------------------------------------------------------
/src/Assets/Icons/jQuery.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Nginx.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
39 |
--------------------------------------------------------------------------------
/src/Components/Apps/Google.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React, { useState } from "react";
3 | import styled from "styled-components";
4 | // Import icons
5 | import { AiOutlineHome, AiOutlineReload } from "react-icons/ai";
6 |
7 | const Google = () => {
8 | // Filter url to ones which work with iframe
9 | let [url, setURL] = useState("https://www.google.com");
10 | let [baseURL, setBaseURL] = useState("https://www.google.com/webhp?igu=1");
11 | const keyType = (e) => {
12 | if (e.key === "Enter") {
13 | let newurl = e.target.value;
14 | newurl = newurl.trim();
15 | if (newurl.length === 0) return;
16 | if (newurl.indexOf("http://") !== 0 && newurl.indexOf("https://") !== 0) {
17 | newurl = "https://" + newurl;
18 | }
19 | newurl = encodeURI(newurl);
20 | if (newurl.includes("google.com")) {
21 | newurl = "https://www.google.com/webhp?igu=1";
22 | }
23 | setBaseURL(newurl);
24 | }
25 | };
26 |
27 | const refreshChrome = () => {
28 | document.getElementById("chrome-iframe").src += "";
29 | };
30 |
31 | const goHome = () => {
32 | setBaseURL("https://www.google.com/webhp?igu=1");
33 | setURL("https://www.google.com");
34 | refreshChrome();
35 | };
36 |
37 | return (
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | {
53 | setURL(e.target.value);
54 | }}
55 | />
56 |
57 |
58 |
59 |
67 |
68 |
69 | );
70 | };
71 |
72 | const Container = styled.div`
73 | display: flex;
74 | flex-direction: column;
75 | height: 100%;
76 | `;
77 |
78 | const TitleContainer = styled.div`
79 | display: flex;
80 | margin: 3px 0;
81 | `;
82 |
83 | const IconContainer = styled.div`
84 | display: flex;
85 | justify-content: center;
86 | align-items: center;
87 | `;
88 |
89 | const Icon = styled.div`
90 | padding: 5px;
91 | display: flex;
92 | justify-content: center;
93 | align-items: center;
94 |
95 | &:hover {
96 | background-color: ${(props) => props.theme.colors.light};
97 | cursor: pointer;
98 | color: ${(props) => props.theme.colors.highlight};
99 | }
100 | `;
101 |
102 | const InputURLContainer = styled.div`
103 | margin-left: 10px;
104 | flex: 1;
105 | display: flex;
106 | align-items: center;
107 | `;
108 |
109 | const InputURL = styled.input`
110 | height: 20px;
111 | width: 100%;
112 | padding: 2px 5px;
113 | margin-right: 25px;
114 | font-size: 14px;
115 | width: 100%;
116 | border: 2px solid ${(props) => props.theme.colors.light};
117 | background-color: ${(props) => props.theme.colors.primary};
118 | color: ${(props) => props.theme.colors.font};
119 | border-radius: 12px;
120 |
121 | &:focus {
122 | outline: none;
123 | border: 2px solid ${(props) => props.theme.colors.highlight};
124 | }
125 | `;
126 |
127 | const IframeContainer = styled.div`
128 | flex: 1;
129 | border: none;
130 | `;
131 |
132 | export default Google;
133 |
--------------------------------------------------------------------------------
/src/Components/Computer/Helpers/CreateItem.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React, { useState } from "react";
3 | import styled from "styled-components";
4 |
5 | const CreateItem = ({ data, createItem, closeMenu, type }) => {
6 | const [error, setError] = useState(false);
7 | const [input, setInput] = useState("");
8 |
9 | // Check the name user has input and check if it already exists on desktop
10 | const checkInput = () => {
11 | if (input.length < 1) return;
12 | let files = data.desktop.map((x) => x.name.toLowerCase());
13 | if (files.includes(input.toLowerCase())) {
14 | return setError(true); // Error this name already exists
15 | }
16 | setError(false);
17 | setInput("");
18 | createItem(input, type);
19 | };
20 |
21 | return (
22 |
23 |
24 |
25 | New {!type ? null : type.toLowerCase()} name
26 | {
30 | if (e.key === "Enter") {
31 | checkInput();
32 | }
33 | }}
34 | onChange={(e) => {
35 | setInput(e.target.value);
36 | }}
37 | />
38 |
41 | {type} already exists
42 |
43 |
44 |
45 |
48 | checkInput()}>Create
49 |
50 |
51 |
52 | );
53 | };
54 |
55 | const Container = styled.div`
56 | position: absolute;
57 | display: flex;
58 | width: 100vw;
59 | height: 100vh;
60 | justify-content: center;
61 | align-items: center;
62 | z-index: 99999;
63 | `;
64 |
65 | const Modal = styled.div`
66 | background-color: ${(props) => props.theme.colors.primary};
67 | display: flex;
68 | justify-content: center;
69 | flex-direction: column;
70 | min-width: 350px;
71 | `;
72 |
73 | const InputContainer = styled.div`
74 | padding: 20px 20px 10px 20px;
75 | display: flex;
76 | justify-content: center;
77 | flex-direction: column;
78 | `;
79 |
80 | const Title = styled.div`
81 | margin-bottom: 20px;
82 | `;
83 |
84 | const Input = styled.input`
85 | width: 100%;
86 | font-family: "Exo", sans-serif;
87 | font-size: 16px;
88 | border: 1px solid ${(props) => props.theme.colors.primary};
89 | background-color: ${(props) => props.theme.colors.light};
90 | color: ${(props) => props.theme.colors.font};
91 | border: 2px solid ${(props) => props.theme.colors.light};
92 | border-radius: 5px;
93 | padding: 2px 0;
94 | padding-left: 5px;
95 |
96 | &:focus {
97 | outline: none;
98 | border: 2px solid ${(props) => props.theme.colors.highlight};
99 | }
100 | `;
101 |
102 | const Error = styled.div`
103 | color: #d83030;
104 | margin-top: 5px;
105 | margin-left: 3px;
106 | `;
107 |
108 | const ButtonContainer = styled.div`
109 | display: flex;
110 | border-top: 2px solid ${(props) => props.theme.colors.light};
111 | `;
112 |
113 | const Button = styled.div`
114 | flex: 1;
115 | text-align: center;
116 | padding: 10px 0;
117 | border-right: 2px solid ${(props) => props.theme.colors.light};
118 |
119 | &:hover {
120 | cursor: pointer;
121 | }
122 | `;
123 |
124 | const ButtonSecond = styled.div`
125 | flex: 1;
126 | text-align: center;
127 | padding: 10px 0;
128 |
129 | &:hover {
130 | cursor: pointer;
131 | }
132 | `;
133 |
134 | export default CreateItem;
135 |
--------------------------------------------------------------------------------
/src/Components/Apps/Folder.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Import icons
6 | import ChromeIcon from "./../../Assets/Icons/Chrome.png";
7 | import CalculatorIcon from "./../../Assets/Icons/Calculator.png";
8 | import VscodeIcon from "./../../Assets/Icons/Visual.svg";
9 | import RecycleIcon from "./../../Assets/Icons/Recycle.png";
10 | import KSJaayIcon from "./../../Assets/Icons/KSJaay.png";
11 | import TerminalIcon from "./../../Assets/Icons/Terminal.png";
12 | import FolderIcon from "./../../Assets/Icons/Folder.png";
13 | import NotepadIcon from "./../../Assets/Icons/Notepad.png";
14 | import ReactIcon from "./../../Assets/Icons/React.svg";
15 | import GithubIcon from "./../../Assets/Icons/GithubDesktop.png";
16 |
17 | // Assign icons to file names
18 | const icons = {
19 | recycle_bin: RecycleIcon,
20 | google_chrome: ChromeIcon,
21 | github: GithubIcon,
22 | visual_studio: VscodeIcon,
23 | calculator: CalculatorIcon,
24 | ksjaay: KSJaayIcon,
25 | terminal: TerminalIcon,
26 | folder: FolderIcon,
27 | file: NotepadIcon,
28 | react: ReactIcon,
29 | "react file": ReactIcon,
30 | };
31 |
32 | // Cool folder things that a folder would do
33 | const Folder = ({ content, openModal }) => {
34 | let component = content;
35 | return (
36 |
37 | 0
41 | ? {}
42 | : { justifyContent: "center", display: "flex", marginTop: "8px" }
43 | }
44 | >
45 | {component.content.length < 1 ? "No files found." : null}
46 |
47 | {component.content.length < 1
48 | ? null
49 | : component.content.map((item, index) => (
50 |
56 |
61 |
64 | {item.name}
65 |
66 |
67 | ))}
68 |
69 |
70 |
71 | );
72 | };
73 |
74 | const Container = styled.div`
75 | height: 100%;
76 | width: 100%;
77 | display: flex;
78 | flex-direction: column;
79 | `;
80 |
81 | const Content = styled.div`
82 | flex: 1;
83 | display: grid;
84 | `;
85 |
86 | const ItemsContainer = styled.div`
87 | display: flex;
88 | flex-flow: row wrap;
89 | flex-direction: row;
90 | align-items: flex-end;
91 | justify-content: flex-start;
92 | align-content: flex-start;
93 | flex-wrap: wrap;
94 | max-height: calc(100vh - 50px);
95 | overflow: hidden;
96 | overflow-y: auto;
97 | `;
98 |
99 | const DesktopItems = styled.div`
100 | display: flex;
101 | flex-direction: column;
102 | width: 80px;
103 | height: 95px;
104 | padding: 5px;
105 | border-radius: 5px;
106 | margin: 3px;
107 | justify-content: flex-start;
108 | align-items: center;
109 |
110 | &:hover {
111 | background-color: ${(props) => props.theme.colors.highlight}22;
112 | }
113 |
114 | &:focus {
115 | background-color: ${(props) => props.theme.colors.highlight}66;
116 | }
117 | `;
118 |
119 | const DesktopIcon = styled.img`
120 | width: 60px;
121 | height: 60px;
122 | `;
123 |
124 | const DesktopItemName = styled.div`
125 | font-size: 12px;
126 | text-align: center;
127 | padding-top: 3px;
128 | `;
129 |
130 | export default Folder;
131 |
--------------------------------------------------------------------------------
/src/Components/Computer/Helpers/CreateInFolder.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React, { useState } from "react";
3 | import styled from "styled-components";
4 |
5 | const CreateInFolder = ({ data, createItem, closeMenu, info }) => {
6 | const [error, setError] = useState(false);
7 | const [input, setInput] = useState("");
8 |
9 | // Check the name user has input and check if it already exists on desktop
10 | const checkInput = () => {
11 | if (input.length < 1) return;
12 | let directories = data.desktop.map((x) => x.name);
13 | let index = directories.indexOf(info.name);
14 | if (index > -1) {
15 | let folder = data.desktop[index].content.map((x) => x.name.toLowerCase());
16 | if (
17 | folder.includes(input.toLowerCase()) ||
18 | data.desktop[index].name.toLowerCase() === input.toLowerCase()
19 | ) {
20 | return setError(true);
21 | }
22 | }
23 |
24 | setError(false);
25 | setInput("");
26 | createItem(input, info.file, info.name);
27 | };
28 |
29 | return (
30 |
31 |
32 |
33 | New {!info.open ? null : info.file.toLowerCase()} name
34 | {
38 | if (e.key === "Enter") {
39 | checkInput();
40 | }
41 | }}
42 | onChange={(e) => {
43 | setInput(e.target.value);
44 | }}
45 | />
46 |
49 | {info.file} already exists
50 |
51 |
52 |
53 |
56 | checkInput()}>Create
57 |
58 |
59 |
60 | );
61 | };
62 |
63 | const Container = styled.div`
64 | position: absolute;
65 | display: flex;
66 | width: 100vw;
67 | height: 100vh;
68 | justify-content: center;
69 | align-items: center;
70 | z-index: 99999;
71 | `;
72 |
73 | const Modal = styled.div`
74 | background-color: ${(props) => props.theme.colors.primary};
75 | display: flex;
76 | justify-content: center;
77 | flex-direction: column;
78 | min-width: 350px;
79 | `;
80 |
81 | const InputContainer = styled.div`
82 | padding: 20px 20px 10px 20px;
83 | display: flex;
84 | justify-content: center;
85 | flex-direction: column;
86 | `;
87 |
88 | const Title = styled.div`
89 | margin-bottom: 20px;
90 | `;
91 |
92 | const Input = styled.input`
93 | width: 100%;
94 | font-family: "Exo", sans-serif;
95 | font-size: 16px;
96 | border: 1px solid ${(props) => props.theme.colors.primary};
97 | background-color: ${(props) => props.theme.colors.light};
98 | color: ${(props) => props.theme.colors.font};
99 | border: 2px solid ${(props) => props.theme.colors.light};
100 | border-radius: 5px;
101 | padding: 2px 0;
102 | padding-left: 5px;
103 |
104 | &:focus {
105 | outline: none;
106 | border: 2px solid ${(props) => props.theme.colors.highlight};
107 | }
108 | `;
109 |
110 | const Error = styled.div`
111 | color: #d83030;
112 | margin-top: 5px;
113 | margin-left: 3px;
114 | `;
115 |
116 | const ButtonContainer = styled.div`
117 | display: flex;
118 | border-top: 2px solid ${(props) => props.theme.colors.light};
119 | `;
120 |
121 | const Button = styled.div`
122 | flex: 1;
123 | text-align: center;
124 | padding: 10px 0;
125 | border-right: 2px solid ${(props) => props.theme.colors.light};
126 |
127 | &:hover {
128 | cursor: pointer;
129 | }
130 | `;
131 |
132 | const ButtonSecond = styled.div`
133 | flex: 1;
134 | text-align: center;
135 | padding: 10px 0;
136 |
137 | &:hover {
138 | cursor: pointer;
139 | }
140 | `;
141 |
142 | export default CreateInFolder;
143 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Postman.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/CSS/MyComputer.css:
--------------------------------------------------------------------------------
1 | .react-calendar__navigation__prev2-button{
2 | display: none;
3 | }
4 |
5 | .react-calendar__navigation__next2-button{
6 | display: none;
7 | }
8 |
9 | .react-calendar {
10 | width: 100%;
11 | max-width: 100%;
12 | height: 310px;
13 | background: #25262800;
14 | border: none;
15 | font-family: Arial, Helvetica, sans-serif;
16 | line-height: 1.125em;
17 | }
18 | .react-calendar--doubleView {
19 | width: 700px;
20 | }
21 | .react-calendar--doubleView .react-calendar__viewContainer {
22 | display: flex;
23 | margin: -0.5em;
24 | }
25 | .react-calendar--doubleView .react-calendar__viewContainer > * {
26 | width: 50%;
27 | margin: 0.5em;
28 | }
29 |
30 | .react-calendar,
31 | .react-calendar *,
32 | .react-calendar *:before,
33 | .react-calendar *:after {
34 | -moz-box-sizing: border-box;
35 | -webkit-box-sizing: border-box;
36 | box-sizing: border-box;
37 | }
38 | .react-calendar button {
39 | margin: 0;
40 | border: 0;
41 | outline: none;
42 | }
43 | .react-calendar button:enabled:hover {
44 | cursor: pointer;
45 | }
46 | .react-calendar__navigation {
47 | height: 44px;
48 | margin-bottom: 1em;
49 | }
50 | .react-calendar__navigation button {
51 | min-width: 44px;
52 | background: none;
53 | }
54 | .react-calendar__navigation__label__labelText{
55 | color: white;
56 | }
57 |
58 | .react-calendar__navigation__arrow{
59 | color: white;
60 | }
61 | .react-calendar__navigation button:enabled:hover,
62 | .react-calendar__navigation button:enabled:focus {
63 | background-color: #252628;
64 | }
65 | .react-calendar__navigation button[disabled] {
66 | background-color: #f0f0f0;
67 | }
68 | .react-calendar__month-view__weekdays {
69 | text-align: center;
70 | text-transform: uppercase;
71 | font-weight: bold;
72 | font-size: 0.75em;
73 | color: white;
74 | text-decoration: none;
75 | }
76 | .react-calendar__month-view__weekdays__weekday {
77 | padding: 0.5em;
78 | color: white;
79 | text-decoration: none;
80 | }
81 |
82 | .react-calendar__month-view__days__day{
83 | color: white;
84 | }
85 |
86 | .react-calendar__month-view__weekNumbers {
87 | font-weight: bold;
88 | }
89 | .react-calendar__month-view__weekNumbers .react-calendar__tile {
90 | display: flex;
91 | align-items: center;
92 | justify-content: center;
93 | font-size: 0.75em;
94 | padding: calc(0.75em / 0.75) calc(0.5em / 0.75);
95 | }
96 | .react-calendar__month-view__days__day--weekend {
97 | color: #d10000;
98 | }
99 | .react-calendar__month-view__days__day--neighboringMonth {
100 | color: #757575;
101 | }
102 | .react-calendar__year-view .react-calendar__tile,
103 | .react-calendar__decade-view .react-calendar__tile,
104 | .react-calendar__century-view .react-calendar__tile {
105 | padding: 2em 0.5em;
106 | }
107 | .react-calendar__tile {
108 | max-width: 100%;
109 | text-align: center;
110 | padding: 0.75em 0.5em;
111 | background: none;
112 | }
113 | .react-calendar__tile:disabled {
114 | background-color: #f0f0f0;
115 | }
116 | .react-calendar__tile:enabled:hover,
117 | .react-calendar__tile:enabled:focus {
118 | background-color: #252628;
119 | }
120 | .react-calendar__tile--now {
121 | background: #3bce85;
122 | }
123 | .react-calendar__tile--now:enabled:hover,
124 | .react-calendar__tile--now:enabled:focus {
125 | background: #3bce85;
126 | }
127 | .react-calendar__tile--hasActive {
128 | background: #76baff;
129 | }
130 | .react-calendar__tile--hasActive:enabled:hover,
131 | .react-calendar__tile--hasActive:enabled:focus {
132 | background: #a9d4ff;
133 | }
134 | .react-calendar__tile--active {
135 | background: #006edc;
136 | color: white;
137 | }
138 | .react-calendar__tile--active:enabled:hover,
139 | .react-calendar__tile--active:enabled:focus {
140 | background: #1087ff;
141 | }
142 | .react-calendar--selectRange .react-calendar__tile--hover {
143 | background-color: #e6e6e6;
144 | }
145 |
146 | .react-calendar__navigation__label__labelText{
147 | color: white;
148 | }
149 |
150 | .react-calendar__navigation button[disabled]{
151 | background-color: #21252b;
152 | }
153 |
154 | .react-calendar__decade-view__years__year,
155 | .react-calendar__year-view__months__month,
156 | .react-calendar__century-view__decades__decade{
157 | color: white;
158 | }
--------------------------------------------------------------------------------
/src/Components/Apps/Recycle.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Import icons
6 | import ChromeIcon from "./../../Assets/Icons/Chrome.png";
7 | import CalculatorIcon from "./../../Assets/Icons/Calculator.png";
8 | import VscodeIcon from "./../../Assets/Icons/Visual.svg";
9 | import RecycleIcon from "./../../Assets/Icons/Recycle.png";
10 | import KSJaayIcon from "./../../Assets/Icons/KSJaay.png";
11 | import TerminalIcon from "./../../Assets/Icons/Terminal.png";
12 | import FolderIcon from "./../../Assets/Icons/Folder.png";
13 | import FullFolderIcon from "./../../Assets/Icons/FullFolder.png";
14 | import NotepadIcon from "./../../Assets/Icons/Notepad.png";
15 | import ReactIcon from "./../../Assets/Icons/React.svg";
16 | import GithubIcon from "./../../Assets/Icons/GithubDesktop.png";
17 |
18 | // Assign icons to file names
19 | const icons = {
20 | recycle_bin: RecycleIcon,
21 | google_chrome: ChromeIcon,
22 | github: GithubIcon,
23 | visual_studio: VscodeIcon,
24 | calculator: CalculatorIcon,
25 | ksjaay: KSJaayIcon,
26 | terminal: TerminalIcon,
27 | folder: FolderIcon,
28 | fullFolder: FullFolderIcon,
29 | file: NotepadIcon,
30 | react: ReactIcon,
31 | "react file": ReactIcon,
32 | };
33 |
34 | // Basic recycle bin
35 | const Recycle = ({ data }) => {
36 | return (
37 |
38 |
39 |
40 |
41 |
42 | 0
45 | ? {}
46 | : { justifyContent: "center", display: "flex", marginTop: "20px" }
47 | }
48 | >
49 | {data.recycle.length < 1 ? "Recycle bin is empty." : null}
50 |
51 | {data.recycle.length < 1
52 | ? null
53 | : data.recycle.map((item, index) => (
54 |
55 | 0
58 | ? icons["fullFolder"]
59 | : icons[item.id]
60 | }
61 | draggable={false}
62 | id={item.name}
63 | />
64 | {item.name}
65 |
66 | ))}
67 |
68 |
69 |
70 | );
71 | };
72 |
73 | const Container = styled.div`
74 | height: 100%;
75 | width: 100%;
76 | display: flex;
77 | flex-direction: column;
78 | `;
79 |
80 | const Header = styled.div`
81 | display: flex;
82 | flex-direction: row;
83 | justify-content: flex-end;
84 | background-color: ${(props) => props.theme.colors.primary};
85 | `;
86 |
87 | const Button = styled.div`
88 | padding: 8px 12px;
89 | background-color: ${(props) => props.theme.colors.primary};
90 |
91 | &:hover {
92 | background-color: ${(props) => props.theme.colors.light};
93 | }
94 | `;
95 |
96 | const Content = styled.div`
97 | flex: 1;
98 | display: grid;
99 | `;
100 |
101 | const ItemsContainer = styled.div`
102 | display: flex;
103 | flex-flow: row wrap;
104 | flex-direction: row;
105 | align-items: flex-end;
106 | justify-content: flex-start;
107 | align-content: flex-start;
108 | flex-wrap: wrap;
109 | max-height: calc(100vh - 50px);
110 | overflow: hidden;
111 | overflow-y: auto;
112 | `;
113 |
114 | const DesktopItems = styled.div`
115 | display: flex;
116 | flex-direction: column;
117 | width: 80px;
118 | height: 95px;
119 | padding: 5px;
120 | border-radius: 5px;
121 | margin: 3px;
122 | justify-content: flex-start;
123 | align-items: center;
124 | overflow: hidden;
125 |
126 | &:hover {
127 | background-color: ${(props) => props.theme.colors.highlight}22;
128 | }
129 |
130 | &:focus {
131 | background-color: ${(props) => props.theme.colors.highlight}66;
132 | }
133 | `;
134 |
135 | const DesktopIcon = styled.img`
136 | width: 60px;
137 | height: 60px;
138 | `;
139 |
140 | const DesktopItemName = styled.div`
141 | font-size: 12px;
142 | text-align: center;
143 | padding-top: 3px;
144 | `;
145 |
146 | export default Recycle;
147 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Expressjs.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/SQLite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Apps/Portfolio/Experience.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // List of all the experience I've had
6 | const Jobs = [
7 | {
8 | title: "Junior Developer",
9 | company: "Nester",
10 | url: "https://nester.com",
11 | dates: ["Sept 2021", "Apr 2022"],
12 | description:
13 | "Nester provides an easy to use platform where users can invest in properties and get a return on their investment. Users are able to track their weekly income, get updates about the property status and more.",
14 | stack: [
15 | { name: "React", link: "https://reactjs.org/" },
16 | { name: "Node.js", link: "https://nodejs.org/en/about/" },
17 | { name: "Next.js", link: "https://nextjs.org/" },
18 | { name: "Strapi", link: "https://strapi.io/" },
19 | { name: "Sass", link: "https://sass-lang.com/" },
20 | { name: "Hotjar", link: "https://www.hotjar.com/" },
21 | { name: "Tailwind", link: "https://www.hotjar.com/" },
22 | { name: "DynamoDB", link: "https://aws.amazon.com/dynamodb/" },
23 | ],
24 | },
25 | {
26 | title: "Fullstack Developer",
27 | company: "AmariBot",
28 | url: "https://amaribot.com",
29 | dates: ["Oct 2019", "Aug 2021"],
30 | description:
31 | "AmariBot focuses on developing a program that rewards users for being active within a community. Community staff members can set up custom rewards and change the difficulty of reaching rewards.",
32 | stack: [
33 | { name: "Discord.js", link: "https://discord.js.org/#/" },
34 | { name: "EJS", link: "https://ejs.co/" },
35 | { name: "Express.js", link: "https://expressjs.com/" },
36 | { name: "Fastify", link: "https://www.fastify.io/" },
37 | { name: "MongoDB", link: "https://www.mongodb.com/" },
38 | { name: "Node.js", link: "https://nodejs.org/en/about/" },
39 | { name: "PostgreSQL", link: "https://www.postgresql.org/" },
40 | { name: "React", link: "https://reactjs.org/" },
41 | ],
42 | },
43 | {
44 | title: "Freelance Developer",
45 | company: "",
46 | url: null,
47 | dates: ["Feb 2019", "Apr 2020"],
48 | description:
49 | "While studying I worked on various static websites and complex Discord/Twitter bots which allowed users to monitor news, status of websites/games, and many other features.",
50 | stack: [
51 | {
52 | name: "CSS",
53 | link: "https://developer.mozilla.org/en-US/docs/Web/CSS/",
54 | },
55 | { name: "Express.js", link: "https://expressjs.com/" },
56 | {
57 | name: "HTML",
58 | link: "https://developer.mozilla.org/en-US/docs/Web/HTML/",
59 | },
60 | { name: "MongoDB", link: "https://www.mongodb.com/" },
61 | { name: "Node.js", link: "https://nodejs.org/en/about/" },
62 | { name: "PostgreSQL", link: "https://www.postgresql.org/" },
63 | { name: "React", link: "https://reactjs.org/" },
64 | ],
65 | },
66 | ];
67 |
68 | // Nice page with some nice styling
69 | const Experience = () => {
70 | return (
71 |
72 | Experience
73 |
74 | {Jobs &&
75 | Jobs.map((Job, index) => (
76 |
77 | window.open(Job.url, "_blank")}>
78 |
79 | {Job.title}
80 | {Job.company ? ` - ${Job.company}` : null}
81 |
82 |
83 | {Job.dates[0]}
84 | {Job.dates[1] ? ` - ${Job.dates[1]}` : null}
85 |
86 |
87 | window.open(Job.url, "_blank")}>
88 | {Job.description}
89 |
90 |
91 | {Job.stack &&
92 | Job.stack.map((stack, zindex) => (
93 |
94 | {stack.name}
95 |
96 | ))}
97 |
98 |
99 | ))}
100 |
101 |
102 | );
103 | };
104 |
105 | const Container = styled.div`
106 | width: 100%;
107 | height: 100%;
108 | display: flex;
109 | flex-direction: column;
110 | `;
111 |
112 | const Title = styled.div`
113 | font-size: 24px;
114 | text-align: center;
115 | width: 100%;
116 | margin: 15px 0;
117 | font-weight: 600;
118 | `;
119 |
120 | const JobContainer = styled.div`
121 | display: flex;
122 | width: 100%;
123 | flex-direction: column;
124 | `;
125 |
126 | const JobContent = styled.div`
127 | display: flex;
128 | position: relative;
129 | flex-direction: column;
130 | margin: 8px 15px;
131 | background-color: ${(props) => props.theme.colors.primary};
132 | border-radius: 8px;
133 | padding: 5px 10px;
134 | box-shadow: 0 8px 25px -15px rgb(0 0 0 / 80%);
135 | color: white;
136 | text-decoration: none;
137 |
138 | &:hover {
139 | cursor: pointer;
140 | background-color: ${(props) => props.theme.colors.light};
141 | }
142 | `;
143 |
144 | const JobHeader = styled.div`
145 | display: flex;
146 | `;
147 |
148 | const JobTitle = styled.div`
149 | flex: 1;
150 | font-size: 20px;
151 | color: ${(props) => props.theme.colors.highlight};
152 | `;
153 |
154 | const JobDate = styled.div``;
155 |
156 | const JobDescription = styled.div``;
157 |
158 | const JobStackContainer = styled.div`
159 | margin: 5px 0;
160 | display: flex;
161 | flex-wrap: wrap;
162 | `;
163 |
164 | const JobStack = styled.a`
165 | color: white;
166 | text-decoration: none;
167 | padding-right: 12px;
168 | padding-bottom: 3px;
169 | font-size: 13px;
170 |
171 | &:hover {
172 | color: ${(props) => props.theme.colors.highlight};
173 | }
174 | `;
175 |
176 | export default Experience;
177 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Wireshark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Apps/Portfolio/Projects.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Import class
6 | import "./../../../Assets/CSS/Recent.css";
7 |
8 | // List of projects I was really happy with/worked on
9 | const recentProjects = [
10 | {
11 | name: "Covid-19 Application",
12 | date: "Oct 2020",
13 | description:
14 | "A React Native application, with location based contact tracing system using geolocation, statistics, news using the NewsAPI and other information about Covid-19 based on a users region. All fitted into a simple design.",
15 | stack: [
16 | { name: "Expo", link: "https://expo.dev/" },
17 | { name: "Express.js", link: "https://expressjs.com/" },
18 | { name: "MongoDB", link: "https://www.mongodb.com/" },
19 | { name: "Node.js", link: "https://nodejs.org/en/about/" },
20 | { name: "React", link: "https://reactjs.org/" },
21 | { name: "React Native", link: "https://reactnative.dev/" },
22 | ],
23 | image: require("./../../../Assets/Images/Projects/CovidApp2.png"),
24 | link: "",
25 | },
26 | {
27 | name: "Chat app",
28 | date: "Mar 2020",
29 | description:
30 | "An instant group messaging application created using Java and Socket. This application hosts a LAN server which users can connect to, once connected users can communicate with each other using a custom interface.",
31 | stack: [
32 | { name: "Java", link: "https://go.java/?intcmp=gojava-banner-java-com" },
33 | {
34 | name: "Socket",
35 | link: "https://docs.oracle.com/javase/7/docs/api/java/net/Socket.html",
36 | },
37 | ],
38 | image: require("./../../../Assets/Images/Projects/JavaChat.png"),
39 | link: "https://github.com/KSJaay/LAN-Chat-App",
40 | },
41 | {
42 | name: "AmariBot",
43 | description:
44 | "A leveling focused Discord bot which rewards users for being active within a community. AmariBot offers a user friendly experience and with highly customisable settings. Users are able to custom their profiles cards, settings, announcements and much more.",
45 | date: "Aug 2019",
46 | stack: [
47 | { name: "Discord.js", link: "https://discord.js.org/#/" },
48 | { name: "EJS", link: "https://ejs.co/" },
49 | { name: "Express.js", link: "https://expressjs.com/" },
50 | { name: "Fastify", link: "https://www.fastify.io/" },
51 | { name: "MongoDB", link: "https://www.mongodb.com/" },
52 | { name: "Node.js", link: "https://nodejs.org/en/about/" },
53 | { name: "PostgreSQL", link: "https://www.postgresql.org/" },
54 | { name: "React", link: "https://reactjs.org/" },
55 | ],
56 | image: require("./../../../Assets/Images/Projects/AmariWebsite.PNG"),
57 | link: "https://amaribot.com",
58 | },
59 | {
60 | name: "Alita-Open Source",
61 | date: "Aug 2019",
62 | description:
63 | "An easy to use, multipurpose bot created using Discord.js and MongoDB. Alita open source was created for the sole purpose of teaching new Discord.js framework users the basics. It uses simple handlers, that are easy to understand for beginner programmers.",
64 | stack: [
65 | { name: "Chart.js", link: "https://www.chartjs.org/" },
66 | { name: "Discord.js", link: "https://discord.js.org/#/" },
67 | { name: "MongoDB", link: "https://www.mongodb.com/" },
68 | { name: "Node.js", link: "https://nodejs.org/en/about/" },
69 | ],
70 | image: require("./../../../Assets/Images/Projects/AlitaOpenSource.png"),
71 | link: "https://github.com/KSJaay/Alita",
72 | },
73 | ];
74 |
75 | const Project = () => {
76 | return (
77 |
78 | Projects
79 |
80 | {recentProjects &&
81 | recentProjects.map((project, index) => (
82 |
83 | {project.name}
84 | {project.description}
85 | {project.date}
86 |
87 | {project.stack &&
88 | project.stack.map((stack, yindex) => (
89 |
90 | {stack.name}
91 |
92 | ))}
93 |
94 |
95 | ))}
96 |
97 |
98 | );
99 | };
100 |
101 | const Container = styled.div`
102 | width: 100%;
103 | height: 100%;
104 | display: flex;
105 | flex-direction: column;
106 | overflow: auto;
107 | `;
108 |
109 | const Title = styled.div`
110 | font-size: 24px;
111 | text-align: center;
112 | width: 100%;
113 | margin: 10px 0;
114 | font-weight: 600;
115 | `;
116 |
117 | const Projects = styled.div`
118 | display: flex;
119 | flex-direction: column;
120 | margin: 10px;
121 | `;
122 |
123 | const ProjectItem = styled.a`
124 | display: block;
125 | margin: 10px 0;
126 | padding: 10px 10px 5px 10px;
127 | position: relative;
128 | background-color: ${(props) => props.theme.colors.primary};
129 | border-radius: 8px;
130 | box-shadow: 0 8px 25px -15px rgb(0 0 0 / 80%);
131 | color: white;
132 | text-decoration: none;
133 |
134 | &:hover {
135 | background-color: ${(props) => props.theme.colors.light};
136 | cursor: pointer;
137 | }
138 | `;
139 |
140 | const ProjectTitle = styled.div`
141 | font-size: 22px;
142 | color: ${(props) => props.theme.colors.highlight};
143 | `;
144 | const ProjectDescription = styled.div`
145 | margin: 10px 0;
146 | font-size: 16px;
147 | `;
148 |
149 | const ProjectDate = styled.div`
150 | position: absolute;
151 | top: 6px;
152 | right: 10px;
153 | `;
154 |
155 | const StackContainer = styled.div`
156 | margin: 5px 0;
157 | display: flex;
158 | flex-wrap: wrap;
159 | `;
160 |
161 | const StackText = styled.a`
162 | color: white;
163 | text-decoration: none;
164 | padding-right: 12px;
165 | padding-bottom: 3px;
166 | font-size: 13px;
167 |
168 | &:hover {
169 | color: ${(props) => props.theme.colors.highlight};
170 | }
171 | `;
172 |
173 | export default Project;
174 |
--------------------------------------------------------------------------------
/src/Assets/Icons/PostgreSQL.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Components/Computer/Modal.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 | import Draggable from "react-draggable";
5 |
6 | // Import Applications
7 | import Calculator from "./../Apps/Calculator";
8 | import Google from "./../Apps/Google";
9 | import KSJaay from "./../Apps/KSJaay";
10 | import Recycle from "./../Apps/Recycle";
11 | import Terminal from "./../Apps/Terminal";
12 | import Github from "./../Apps/Github";
13 | import Folder from "./../Apps/Folder";
14 | import TextEditor from "./../Apps/TextEditor";
15 | import VsEditor from "./../Apps/Editor";
16 |
17 | // Import icons
18 | import { BiSquare, BiMinus } from "react-icons/bi";
19 | import { VscChromeClose, VscChromeRestore } from "react-icons/vsc";
20 |
21 | // Functions for each app
22 | const apps = {
23 | recycle_bin: function (content, data) {
24 | return ;
25 | },
26 | google_chrome: function (content, data) {
27 | return ;
28 | },
29 | github: function (content, data) {
30 | return ;
31 | },
32 | visual_studio: function () {
33 | return ;
34 | },
35 | calculator: function () {
36 | return ;
37 | },
38 | ksjaay: function (content, data) {
39 | return ;
40 | },
41 | terminal: function (
42 | content,
43 | data,
44 | createFolder,
45 | updateFile,
46 | openModal,
47 | openTerminalModal,
48 | closeModal
49 | ) {
50 | return (
51 |
57 | );
58 | },
59 | folder: function (content, data, createFolder, updateFile, openModal) {
60 | return ;
61 | },
62 | file: function (content, data, createFolder, updateFile) {
63 | return ;
64 | },
65 | react: function (content, data, createFolder, updateFile) {
66 | return ;
67 | },
68 | "react file": function (content, data, createFolder, updateFile) {
69 | return ;
70 | },
71 | };
72 |
73 | // Update the position of the component
74 | const UpdatePosition = (component) => {
75 | let elem = document.getElementById(component.name);
76 | if (component.maximized === false) {
77 | let posXY = elem.style.getPropertyValue("--modal-transform");
78 | elem.style.transform = posXY;
79 | } else {
80 | elem.style.setProperty("--modal-transform", elem.style.transform);
81 | elem.style.transform = `translate(0pt,0pt)`;
82 | }
83 | };
84 |
85 | const Modal = ({
86 | component,
87 | closeModal,
88 | maximizeWindow,
89 | minimizeWindow,
90 | focusWindow,
91 | data,
92 | createFolder,
93 | updateFile,
94 | openModal,
95 | openTerminalModal,
96 | }) => {
97 | // Check if the component is in focus, if so bring zIndex to front
98 | let zindex =
99 | component.isFocused === true ? { zIndex: "30" } : { zIndex: "20" };
100 |
101 | // Change the size of the component based on if it is maximized or not
102 | let size =
103 | component.maximized === true
104 | ? {
105 | top: "0",
106 | left: "0",
107 | position: "absolute",
108 | width: "100%",
109 | height: "calc(100% - 48px)",
110 | borderRadius: "0px",
111 | }
112 | : { height: "80%", width: "70%", borderRadius: "5px" };
113 |
114 | // Check if the component is minimized or not and change opacity accordingly
115 | let minimize =
116 | component.minimized === true
117 | ? { opacity: 0, width: "0px", height: "0px" }
118 | : { opacity: 1 };
119 |
120 | // Adding a custom opacity for terminal
121 | let opacity =
122 | component.id === "terminal" && component.minimized === false
123 | ? { opacity: 0.9 }
124 | : component.minimized === true
125 | ? { opacity: 0 }
126 | : { opacity: 1 };
127 |
128 | return (
129 |
130 |
137 |
146 |
147 | {component.name}
148 |
149 |
153 |
154 |
155 | [maximizeWindow(), UpdatePosition(component)]}
157 | onClick={() => [maximizeWindow(), UpdatePosition(component)]}
158 | >
159 | {component.maximized === true ? : }
160 |
161 |
162 |
163 |
164 |
165 |
166 | {apps[component.id](
167 | component,
168 | data,
169 | createFolder,
170 | updateFile,
171 | openModal,
172 | openTerminalModal,
173 | closeModal
174 | )}
175 |
176 |
177 |
178 | );
179 | };
180 |
181 | const Container = styled.div`
182 | display: flex;
183 | flex-direction: column;
184 | justify-content: center;
185 | align-content: center;
186 | position: fixed;
187 | width: 70%;
188 | height: 80%;
189 | left: 15%;
190 | top: calc(10% - 40px);
191 | background-color: ${(props) => props.theme.colors.secondary};
192 | border-radius: 5px;
193 | transition: height 300ms, width 300ms, opacity 250ms;
194 | `;
195 |
196 | const Header = styled.div`
197 | display: flex;
198 | background-color: ${(props) => props.theme.colors.highlight}cc;
199 | `;
200 |
201 | const Title = styled.div`
202 | flex: 1;
203 | padding: 5px 8px;
204 | font-weight: 600;
205 | `;
206 |
207 | const CloseButton = styled.div`
208 | padding: 5px 12px;
209 | display: flex;
210 | justify-content: center;
211 | align-items: center;
212 | border-top-right-radius: 5px;
213 | &:hover {
214 | background-color: #e61531;
215 | }
216 | `;
217 |
218 | const MaximizeButton = styled.div`
219 | padding: 5px 12px;
220 | display: flex;
221 | justify-content: center;
222 | align-items: center;
223 | &:hover {
224 | background-color: ${(props) => props.theme.colors.highlight};
225 | }
226 | `;
227 |
228 | const MinimizeButton = styled.div`
229 | padding: 5px 12px;
230 | display: flex;
231 | justify-content: center;
232 | align-items: center;
233 |
234 | &:hover {
235 | background-color: ${(props) => props.theme.colors.highlight};
236 | }
237 | `;
238 |
239 | const Content = styled.div`
240 | flex: 1;
241 | overflow: hidden;
242 | `;
243 |
244 | export default Modal;
245 |
--------------------------------------------------------------------------------
/src/Assets/Icons/Nodejs.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/mysql-3.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/Assets/Icons/WindowsLoading.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/Components/Computer/Desktop.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Import icons
6 | import Recycle from "./../../Assets/Icons/Recycle.png";
7 | import RecycleFull from "./../../Assets/Icons/RecycleFull.png";
8 | import Modal from "./Modal";
9 |
10 | // Import icons
11 | import ChromeIcon from "./../../Assets/Icons/Chrome.png";
12 | import CalculatorIcon from "./../../Assets/Icons/Calculator.png";
13 | import VscodeIcon from "./../../Assets/Icons/Visual.svg";
14 | import RecycleIcon from "./../../Assets/Icons/Recycle.png";
15 | import KSJaayIcon from "./../../Assets/Icons/KSJaay.png";
16 | import TerminalIcon from "./../../Assets/Icons/Terminal.png";
17 | import FolderIcon from "./../../Assets/Icons/Folder.png";
18 | import FullFolderIcon from "./../../Assets/Icons/FullFolder.png";
19 | import NotepadIcon from "./../../Assets/Icons/Notepad.png";
20 | import ReactIcon from "./../../Assets/Icons/React.svg";
21 | import GithubIcon from "./../../Assets/Icons/GithubDesktop.png";
22 |
23 | // Assign icons to file names
24 | const icons = {
25 | recycle_bin: RecycleIcon,
26 | google_chrome: ChromeIcon,
27 | github: GithubIcon,
28 | visual_studio: VscodeIcon,
29 | calculator: CalculatorIcon,
30 | ksjaay: KSJaayIcon,
31 | terminal: TerminalIcon,
32 | folder: FolderIcon,
33 | file: NotepadIcon,
34 | react: ReactIcon,
35 | "react file": ReactIcon,
36 | };
37 |
38 | export class Desktop extends React.Component {
39 | render() {
40 | // Handler for clicks depending on screen size
41 | const handleClick = (id, folder) => (e) => {
42 | if (window.innerWidth < 1000) {
43 | return this.props.openModal(id, folder);
44 | }
45 | if (e.detail === 2) {
46 | this.props.openModal(id, folder);
47 | }
48 | };
49 | const handleTerminalOpen = (id) => {
50 | this.props.openModal(id);
51 | };
52 | const handleClose = (id) => (e) => {
53 | this.props.closeModal(id);
54 | };
55 | const maximizeWindow = (id) => (e) => {
56 | this.props.maximizeWindow(id);
57 | };
58 | const minimizeWindow = (id) => (e) => {
59 | this.props.minimizeWindow(id);
60 | };
61 | const focusWindow = (id) => (e) => {
62 | this.props.focusWindow(id);
63 | };
64 | const createFolder = (id) => {
65 | this.props.createFolder(id, "folder");
66 | };
67 | const updateFile = (file) => {
68 | this.props.updateFile(file);
69 | };
70 | // Loads the content to current screen
71 | return (
72 |
73 | {this.props.modals &&
74 | this.props.modals.map((item, index) => (
75 |
92 | ))}
93 |
94 | {this.props.data &&
95 | this.props.data.desktop.map((item, index) => {
96 | if (item.name === "Recycle Bin") {
97 | return (
98 |
104 | {this.props.data &&
105 | this.props.data.recycle &&
106 | this.props.data.recycle.length > 0 ? (
107 |
112 | ) : (
113 |
118 | )}
119 |
120 | {item.name}
121 |
122 |
123 | );
124 | } else if (item.id === "folder") {
125 | return (
126 |
132 | {item.content.length > 0 ? (
133 |
138 | ) : (
139 |
144 | )}
145 |
146 | {item.name}
147 |
148 |
149 | );
150 | } else {
151 | return (
152 |
158 |
163 |
164 | {item.name}
165 |
166 |
167 | );
168 | }
169 | })}
170 |
171 |
172 | );
173 | }
174 | }
175 |
176 | const Container = styled.div`
177 | flex: 1;
178 | display: grid;
179 | `;
180 |
181 | const ItemsContainer = styled.div`
182 | display: flex;
183 | flex-flow: column wrap;
184 | flex-direction: column;
185 | align-items: flex-end;
186 | justify-content: flex-start;
187 | align-content: flex-start;
188 | flex-wrap: wrap;
189 | max-height: calc(100vh - 50px);
190 | overflow: hidden;
191 | `;
192 |
193 | const DesktopItems = styled.div`
194 | display: flex;
195 | flex-direction: column;
196 | width: 80px;
197 | height: 95px;
198 | padding: 5px;
199 | border-radius: 5px;
200 | margin: 3px;
201 | justify-content: flex-start;
202 | align-items: center;
203 | overflow: hidden;
204 |
205 | &:hover {
206 | background-color: ${(props) => props.theme.colors.highlight}22;
207 | }
208 |
209 | &:focus {
210 | background-color: ${(props) => props.theme.colors.highlight}66;
211 | }
212 | `;
213 |
214 | const DesktopIcon = styled.img`
215 | width: 60px;
216 | height: 60px;
217 | `;
218 |
219 | const DesktopItemName = styled.div`
220 | font-size: 12px;
221 | text-align: center;
222 | padding-top: 3px;
223 | `;
224 |
--------------------------------------------------------------------------------
/src/Components/Apps/Portfolio/Contact.jsx:
--------------------------------------------------------------------------------
1 | // Import node_modules
2 | import React from "react";
3 | import styled from "styled-components";
4 |
5 | // Import class
6 | import "./../../../Assets/CSS/Contact.css";
7 |
8 | export default class Contact extends React.Component {
9 | constructor(props) {
10 | super(props);
11 | this.state = {
12 | username: "",
13 | email: "",
14 | message: "",
15 | emailSending: false,
16 | emailError: false,
17 | emailSent: false,
18 | };
19 | }
20 |
21 | async sendEmail() {
22 | // Dummy email
23 | this.setState({
24 | emailSent: true,
25 | emailSending: false,
26 | emailError: false,
27 | username: "",
28 | email: "",
29 | message: "",
30 | });
31 |
32 | /*
33 | ###############################################################
34 | Removed along with backend, will be added in next major version
35 | ###############################################################
36 | */
37 |
38 | // fetch('/email', {
39 | // method: "POST",
40 | // headers: { 'Content-Type': 'application/json' },
41 | // body: JSON.stringify({name: this.state.username, email: this.state.email, message: this.state.message})
42 | // }).then(res => {
43 | // setTimeout(() => {
44 | // if(res.status !== 200){
45 | // return this.setState({emailError: true, emailSending: false});
46 | // };
47 | // this.setState({emailSent: true, emailSending: false, emailError: false, username: "", email: "", message: ""});
48 | // }, 1000)
49 | // });
50 | }
51 |
52 | render() {
53 | let formbtn =
54 | this.state.emailSending === true ? (
55 |
61 | ) : this.state.emailError === true ? (
62 | "Error! Try again"
63 | ) : (
64 | "Submit"
65 | );
66 | return (
67 |
68 | Contact Me
69 |
70 |
71 | My inbox is always open. Whether you have a question, you want to
72 | discuss a new opportunity or just want to say HI, I'll try my best
73 | to get back to you as soon as possible!
74 |
75 |
76 |
77 |
83 | this.setState({ username: event.target.value })
84 | }
85 | />
86 | this.setState({ email: event.target.value })}
92 | />
93 | this.setState({ message: event.target.value })}
99 | />
100 | {this.state.emailSent === false ? (
101 | {
103 | if (this.state.emailSent) return;
104 | if (
105 | this.state.username.replace(/ /g, "").length < 1 ||
106 | this.state.email.replace(/ /g, "").length < 1 ||
107 | this.state.message.replace(/ /g, "").length < 1
108 | )
109 | return;
110 | this.sendEmail();
111 | this.setState({ emailSending: true });
112 | }}
113 | >
114 | {formbtn}
115 |
116 | ) : (
117 | 🎉 Speak soon!
118 | )}
119 |
120 |
121 | );
122 | }
123 | }
124 |
125 | const Container = styled.div`
126 | display: flex;
127 | justify-content: center;
128 | align-items: center;
129 | flex-direction: column;
130 | color: ${(props) => props.theme.colors.font};
131 | font-family: "Exo", sans-serif;
132 | border-radius: 16px;
133 | overflow: auto;
134 |
135 | @media (max-width: 768px) {
136 | background-color: ${(props) => props.theme.colors.primary};
137 | box-shadow: none;
138 | }
139 | `;
140 |
141 | const Title = styled.h1`
142 | margin: 30px 0 10px 0;
143 | `;
144 |
145 | const DescriptionContainer = styled.div`
146 | width: 100%;
147 | display: flex;
148 | justify-content: center;
149 | align-items: center;
150 | `;
151 |
152 | const Description = styled.p`
153 | width: 100%;
154 | max-width: 650px;
155 | margin: 10px 0 20px 0%;
156 | font-size: 17px;
157 | text-align: center;
158 | `;
159 |
160 | const FormContainer = styled.div`
161 | width: 100%;
162 | display: flex;
163 | justify-content: center;
164 | align-items: center;
165 | flex-direction: column;
166 | margin-bottom: 30px;
167 | `;
168 |
169 | const UsernameInput = styled.input`
170 | width: 100%;
171 | max-width: 500px;
172 | padding: 10px;
173 | margin: 10px;
174 | font-family: "Exo", sans-serif;
175 | font-size: 16px;
176 | border: 2px solid ${(props) => props.theme.colors.primary};
177 | background-color: ${(props) => props.theme.colors.light};
178 | color: ${(props) => props.theme.colors.font};
179 | border-radius: 8px;
180 |
181 | &:focus {
182 | outline: none;
183 | border: 2px solid ${(props) => props.theme.colors.highlight};
184 | }
185 | `;
186 |
187 | const EmailInput = styled.input`
188 | width: 100%;
189 | max-width: 500px;
190 | padding: 10px;
191 | margin: 10px;
192 | font-family: "Exo", sans-serif;
193 | font-size: 16px;
194 | border: 2px solid ${(props) => props.theme.colors.primary};
195 | background-color: ${(props) => props.theme.colors.light};
196 | color: ${(props) => props.theme.colors.font};
197 | border-radius: 8px;
198 |
199 | &:focus {
200 | outline: none;
201 | border: 2px solid ${(props) => props.theme.colors.highlight};
202 | }
203 | `;
204 |
205 | const TextInput = styled.textarea`
206 | width: 100%;
207 | max-width: 502px;
208 | min-height: 250px;
209 | max-height: 250px;
210 | padding: 10px;
211 | margin: 10px;
212 | font-family: "Exo", sans-serif;
213 | font-size: 16px;
214 | border: 2px solid ${(props) => props.theme.colors.primary};
215 | background-color: ${(props) => props.theme.colors.light};
216 | color: ${(props) => props.theme.colors.font};
217 | border-radius: 8px;
218 |
219 | &:focus {
220 | outline: none;
221 | border: 2px solid ${(props) => props.theme.colors.highlight};
222 | }
223 | `;
224 |
225 | const GreenButton = styled.a`
226 | background-color: #38bb79;
227 | border: none;
228 | color: #fff;
229 | padding: 15px 32px;
230 | text-align: center;
231 | text-decoration: none;
232 | display: block;
233 | font-size: 16px;
234 | width: 150px;
235 | margin-top: 25px;
236 | border-radius: 8px;
237 | font-weight: 600;
238 |
239 | &:hover {
240 | cursor: pointer;
241 | background-color: #3bce85;
242 | box-shadow: 0 5px 15px rgba(59, 206, 133, 0.4);
243 | animation: shine 5s ease-in-out infinite;
244 | animation-fill-mode: forwards;
245 | }
246 | `;
247 |
248 | const PurpleButton = styled.a`
249 | background-color: #4a3bce;
250 | border: none;
251 | color: #fff;
252 | padding: 15px 32px;
253 | text-align: center;
254 | text-decoration: none;
255 | display: block;
256 | font-size: 16px;
257 | width: 150px;
258 | margin-top: 25px;
259 | border-radius: 8px;
260 | font-weight: 600;
261 |
262 | &:hover {
263 | cursor: pointer;
264 | background-color: #5747e7;
265 | box-shadow: rgb(74 59 206 / 60%) 0px 5px 15px;
266 | animation: shine 5s ease-in-out infinite;
267 | animation-fill-mode: forwards;
268 | cursor: no-drop;
269 | }
270 | `;
271 |
--------------------------------------------------------------------------------
/src/Assets/Icons/ReactNative.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------