Skip to content

Commit 0f0cd7f

Browse files
TheSYNcoderTheSYNcoder
committed
added support for terminal commands and bg-change
1 parent b9f95b7 commit 0f0cd7f

24 files changed

+372
-66
lines changed

‎README.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
# Personal Website
22

3-
43
Hey there, welcome to my personal website.
54
This is a portfolio website built on the theme of MacOS made with ReactJs and TailwindCSS.
65
This is currently under development.
76

87
# UNDER DEVELOPMENT :construction: on :apple:
98

9+
## Features present currently
10+
11+
* MacOs Bash terminal support for basic commands like ls, cd ,clear.
12+
* Opening of multiple windows
13+
* Changing of desktop background
14+
* And Obviously - My Portfolio in a window ( working on it).
15+
16+
## Contributions are most welcome
17+
18+
If you think you can help grow this website, consider forking the main repo and making a pull request. Will be more than happy to integrate it.
19+
1020
### Disclaimer
1121

1222
All trademarks(including logos and icons) remain the property of their respective owners. Unless specified or identified, the use of the trademarks does not indicate any relationship, endorsement or sponsorship. All references are to identify the corresponding third party goods.

‎package-lock.json

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"postcss": "^7.0.35",
2121
"react": "^17.0.2",
2222
"react-dom": "^17.0.2",
23+
"react-ga": "^3.3.0",
2324
"react-motion": "^0.5.2",
2425
"react-pdf": "^5.3.0",
2526
"react-scripts": "4.0.3",
@@ -29,7 +30,7 @@
2930
},
3031
"scripts": {
3132
"start": "craco start",
32-
"build": "craco build",
33+
"build": "GENERATE_SOURCEMAP=false && craco build",
3334
"test": "craco test",
3435
"eject": "react-scripts eject",
3536
"predeploy": "npm run build",

‎public/favicon.ico

4 KB
Binary file not shown.

‎public/index.html

+4-25
Original file line numberDiff line numberDiff line change
@@ -7,38 +7,17 @@
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="Personal Website of Shuvayan Ghosh Dastidar"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
13+
1714
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
15+
16+
<title>Shuvayan's Website</title>
2817
</head>
2918
<body>
3019
<noscript>You need to enable JavaScript to run this app.</noscript>
3120
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4221
</body>
4322
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
4423

‎public/manifest.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Shuvayan's Portfolio",
3+
"name": "Portfolio Website of Shuvayan Ghosh Dastidar made with ReactJs and tailwindcss.",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎src/App.js

+28-9
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@ import DefaultContextMenu from "./Components/DefaultContextMenu";
1010
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
1111
import Profile from "./Components/Profile";
1212
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
13+
import ReactGA from 'react-ga';
14+
import Terminal from "./Components/Terminal";
15+
import ChangeBackground from "./Components/ChangeBackground";
16+
import Dock from "./Components/Dock";
17+
import HDD from "./Assets/hdd.png";
18+
import Folder from "./Assets/folder.png";
19+
20+
import Head from 'next/head';
21+
ReactGA.initialize('G-7NQQVYC6KN');
22+
ReactGA.pageview(window.location.pathname + window.location.search);
1323

1424

15-
import Terminal from "./Components/Terminal";
1625

1726

1827

19-
import HDD from "./Assets/hdd.png";
20-
import Folder from "./Assets/folder.png";
2128

2229
const Component = () => {
2330
const { theme, setTheme } = useTheme();
@@ -36,6 +43,10 @@ const Component = () => {
3643
// setNumPages(nextNumPages);
3744
// }
3845

46+
React.useEffect(() => {
47+
setTheme('dark');
48+
}, []);
49+
3950

4051
const getComponent = (id) => {
4152

@@ -44,6 +55,8 @@ const Component = () => {
4455
return <Profile/>
4556
case 'TERMINAL':
4657
return <Terminal/>
58+
case 'CHANGE_BACKGROUND':
59+
return <ChangeBackground/>
4760
default:
4861
return <div>Some Content</div>
4962
}
@@ -97,11 +110,11 @@ const Stacks = () => {
97110
const [state, dispatch] = useContext(Context);
98111
return (
99112
<div className="absolute right-0 mr-10 flex flex-col bg-transparent z-10">
100-
<img src={HDD} style={{height:"70px", width:"70px"}} className="m-4 mb-0 shadow-xl" />
113+
<img src={HDD} className="m-4 mb-0 h-12 w-12 md:h-16 md:w-16 shadow-xl" />
101114
<div className="text-xs text-white ml-1 font-black mt-2">Macintosh HD</div>
102-
<div className="cursor-pointer focus:bg-gray-400 z-30"
115+
<div className="cursor-pointer focus:bg-gray-400 z-10"
103116
onClick={() => dispatch({ type: "NEW_WINDOW", payload: { id: 'PROFILE', header: true } })}>
104-
<img src={Folder} style={{ height: "70px", width: "70px" }} className="m-4 mb-0 shadow-xl" />
117+
<img src={Folder} className="m-4 mb-0 h-12 w-12 md:h-16 md:w-16 shadow-xl" />
105118
<div className="text-xs text-white ml-4 font-black mt-2">About Me</div>
106119
</div>
107120
</div>
@@ -112,16 +125,22 @@ const App = () => {
112125

113126

114127

128+
115129
return (
116130
<Store>
117-
<ThemeProvider attribute="class" defaultTheme="dark" >
118-
131+
<ThemeProvider attribute="class">
132+
<Head>
133+
<meta name="viewport" content="width=device-width, initial-scale=1" />
134+
<meta charSet="utf-8" />
135+
<title>Shuvayan's website</title>
136+
<meta name="description" content={"This is the personal website of Shuvayan Ghosh Dastidar. The portfolio website is made using ReactJs and tailwindcss."} />
137+
</Head>
119138
<Header />
120139
<Component />
121140
<Stacks/>
122141
<Background />
123142
<ContextMenu menu={ <DefaultContextMenu />} />
124-
143+
<Dock/>
125144
</ThemeProvider>
126145
</Store>
127146

‎src/Assets/bigsur.png

575 KB
Loading

‎src/Assets/launchpad.png

14.1 KB
Loading

‎src/Assets/mail.png

13.2 KB
Loading

‎src/Assets/safari.png

78 KB
Loading

‎src/Assets/terminal.png

7.74 KB
Loading

‎src/Components/Background.js

+20-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,30 @@ import React from 'react';
22
import Pic1 from "../Assets/pic1.jpg";
33
import Pic2 from "../Assets/pic2.jpg";
44
import Pic3 from "../Assets/pic3.jpg";
5-
5+
import {Context } from "../store";
66
const Background = () => {
7+
8+
const [state, dispatch] = React.useContext(Context);
79

8-
const [ pic , setPic ] = React.useState(Pic1);
10+
const currState = React.useRef(state);
11+
12+
React.useEffect(() => {
13+
14+
currState.current = state;
15+
}, [state]);
16+
17+
const getPic = () => {
18+
if ( currState.current.background_image === 'pic1') {
19+
return Pic1;
20+
} else if ( currState.current.background_image === 'pic2'){
21+
return Pic2;
22+
} else {
23+
return Pic3;
24+
}
25+
}
926

1027
return <div className="fixed top-0 w-screen h-screen bg-cover z-0">
11-
<img src={pic} className="w-screen h-screen bg-no-repeat absolute md:top-0 md:right-0 md:left-0 md:bottom-0"></img>
28+
<img src={getPic()} className="w-screen h-screen bg-no-repeat absolute md:top-0 md:right-0 md:left-0 md:bottom-0"></img>
1229
</div>
1330
}
1431

‎src/Components/ChangeBackground.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import Pic1 from "../Assets/pic1.jpg";
3+
import Pic2 from "../Assets/pic2.jpg";
4+
import Pic3 from "../Assets/pic3.jpg";
5+
import { Context } from "../store";
6+
7+
const ChangeBackground = (props) => {
8+
9+
const [state, dispatch] = React.useContext(Context);
10+
11+
var context = props.context;
12+
const currState = React.useRef(state);
13+
14+
React.useEffect(() => {
15+
currState.current = state;
16+
}, [state]);
17+
18+
const getPic = () => {
19+
if (currState.current.background_image === 'pic1') {
20+
return Pic1;
21+
} else if (currState.current.background_image === 'pic2') {
22+
return Pic2;
23+
} else {
24+
return Pic3;
25+
}
26+
}
27+
28+
return (
29+
<div className="flex flex-col relative bg-white dark:bg-gray-900 rounded-bl-xl rounded-br-xl" style={{ height: context.height, width: context.width, minHeight: "35rem" }}>
30+
<div className="flex flex-row justify-around w-full h-1/4">
31+
<div className="w-1/4 text-black font-black dark:text-white text-2xl">Current Background :</div>
32+
<img className="w-1/2 rounded-xl overflow-hidden" src={getPic()}></img>
33+
</div>
34+
<div className="text-black dark:text-white font-black flex w-full items-center justify-center mt-3">Select your choice</div>
35+
<div className="grid grid-cols-2 gap-4 h-3/4 ml-8 mr-2 mt-5">
36+
<img onClick={() => dispatch({ type: "CHANGE_BACKGROUND", payload: "pic1" })}
37+
src={Pic1} className="w-5/6 h-40 rounded-xl cursor-pointer"></img>
38+
<img onClick={() => dispatch({ type: "CHANGE_BACKGROUND", payload: "pic2" })}
39+
src={Pic2} className="w-5/6 h-40 rounded-xl cursor-pointer"></img>
40+
<img onClick={() => dispatch({ type: "CHANGE_BACKGROUND", payload: "pic3" })}
41+
src={Pic3} className="w-5/6 h-40 rounded-xl cursor-pointer"></img>
42+
</div>
43+
</div>
44+
)
45+
}
46+
47+
export default ChangeBackground;

‎src/Components/DefaultContextMenu.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ const DefaultContextMenu = () => {
1010
<div className="text-xs text-white pl-5 pt-1 pb-0.5 mt-1 rounded-sm hover:bg-blue-500 mb-1 cursor-pointer"
1111
onClick={() => dispatch({ type: "NEW_WINDOW", payload: { id: 'PROFILE', header: true } }) }
1212
>Get Info</div>
13-
<div className="text-xs text-white pl-5 pt-1 pb-0.5 rounded-sm hover:bg-blue-500 mb-1 cursor-pointer">Change Desktop Background</div>
13+
<div
14+
onClick={() => dispatch({ type: "NEW_WINDOW", payload: { id: 'CHANGE_BACKGROUND', header: true, title : "change background image" } })}
15+
className="text-xs text-white pl-5 pt-1 pb-0.5 rounded-sm hover:bg-blue-500 mb-1 cursor-pointer">Change Desktop Background</div>
1416
<hr className="border border-gray-300 ml-2 mr-2 opacity-50" />
1517
<div className="text-xs text-gray-300 pl-5 pt-1 mt-1 rounded-sm hover:bg-blue-500 mb-1 cursor-not-allowed">✓ Use Stacks</div>
1618
</div>

‎src/Components/Dock.js

+46-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,53 @@
11
import React from 'react';
2-
2+
import Finder from "../Assets/bigsur.png";
3+
import LaunchPad from "../Assets/launchpad.png";
4+
import Terminal from "../Assets/terminal.png";
5+
import Mail from "../Assets/mail.png";
6+
import { Context } from "../store";
37

48

59
const Dock = () => {
6-
10+
const [ clicked , setClick ] = React.useState(false);
11+
const [ window , setWindow ] = React.useState(null);
12+
const [ store, dispatch] = React.useContext(Context);
13+
const [name, setName] = React.useState('');
14+
15+
React.useEffect(() => {
16+
var timeo;
17+
if ( clicked ){
18+
timeo = setTimeout(() => {
19+
setClick(false);
20+
if ( window){
21+
dispatch({ type: "NEW_WINDOW", payload: { id: window, header: true, title: (window === 'TERMINAL' ? 'Terminal' : 'Hello') } })
22+
}
23+
}, 1500);
24+
25+
}
26+
return () => clearTimeout(timeo);
27+
}, [clicked]);
28+
return (
29+
30+
<div className="absolute bottom-0 w-full flex flex-row justify-center" >
31+
<div className="flex flex-row rounded-tl-xl rounded-tr-xl pl-2 pr-2" style={{ backgroundColor: "rgb(227 , 230 , 252, 0.3)" }}>
32+
<img src={Finder} onClick={ () => {
33+
setClick(true); setWindow('PROFILE'); setName('finder'); } }
34+
className={ "h-16 w-16 " + ( clicked && name === 'finder' ? "animate-bounce" :"") } ></img>
35+
<img src={LaunchPad} onClick={() => {
36+
setClick(true); setWindow(null); setName('launchpad')
37+
}}
38+
className={"h-16 w-16 " + (clicked && name === 'launchpad' ? "animate-bounce" : "")}></img>
39+
<img src={Mail} onClick={() => {
40+
setClick(true); setWindow(null); setName('mail');
41+
}}
42+
className={"h-14 w-14 mt-1 " + (clicked && name === 'mail' ? "animate-bounce" : "")}></img>
43+
<img src={Terminal} onClick={() => {
44+
setClick(true); setWindow('TERMINAL'); setName('terminal')
45+
}}
46+
className={"h-16 w-16 " + (clicked && name === 'terminal' ? "animate-bounce" : "")} ></img>
47+
48+
</div>
49+
</div>
50+
)
751
}
852

953
export default Dock;

‎src/Components/Profile.js

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const Profile = (props) => {
3434
changeScreen(last);
3535
}, []);
3636

37+
3738
const renderNavLinks = () => {
3839
return (
3940
<div>

‎src/Components/Screens/About.js

+3
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ const About = () => {
3030
<a href="https://github.com/TheSYNcoder/">
3131
<ion-icon name="logo-github" style={{ fontSize: "30px", color: "black", margin :"2px" }}></ion-icon>
3232
</a>
33+
<a href="https://twitter.com/TheSYNcoder">
34+
<ion-icon name="logo-twitter" style={{ fontSize: "30px", color: "lightblue", margin: "2px" }}></ion-icon>
35+
</a>
3336
</div>
3437
</div>
3538
</div>

‎src/Components/Screens/Projects.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
const Projects = () => {
44
return (
5-
<div>Projects</div>
5+
<div className="text-black">Projects and more </div>
66
)
77
}
88

‎src/Components/Screens/Research.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
const Research = () => {
44
return (
5-
<div>Research</div>
5+
<div className="text-black">Research</div>
66
)
77
}
88

0 commit comments

Comments
 (0)