Skip to content

Commit f0adc23

Browse files
TheSYNcoderTheSYNcoder
committedJan 16, 2022
added landing page
1 parent a71cfce commit f0adc23

File tree

12 files changed

+454
-48
lines changed

12 files changed

+454
-48
lines changed
 

‎CNAME

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package-lock.json

Lines changed: 275 additions & 32 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@
2121
"postcss": "^7.0.35",
2222
"react": "^17.0.2",
2323
"react-dom": "^17.0.2",
24+
"react-icons": "^4.3.1",
2425
"react-motion": "^0.5.2",
2526
"react-pdf": "^5.3.0",
27+
"react-router-dom": "^6.2.1",
2628
"react-scripts": "4.0.3",
2729
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
2830
"typewriter-effect": "^2.17.0",

‎public/imgs/ita-naruto.gif

652 KB
Loading

‎public/imgs/sharingan.gif

37.5 KB
Loading

‎src/App.js

Lines changed: 79 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import SpotLight from "./Components/Spotlight";
1818
import Folder from "./Assets/folder.png";
1919
import Head from 'next/head';
2020
import Mail from "./Components/Mail";
21+
import Socials from "./Components/Socials";
22+
import { BrowserRouter as Router, Route , Routes, Link } from "react-router-dom";
23+
import Banner from './Components/banner';
2124

2225

2326

@@ -74,6 +77,75 @@ const Stacks = () => {
7477
</div>
7578
)
7679
}
80+
81+
82+
const Mac = () => {
83+
return (
84+
<div>
85+
<Header />
86+
<Component />
87+
<Stacks/>
88+
<Background />
89+
<ContextMenu menu={ <DefaultContextMenu />} />
90+
<SpotLight />
91+
<Dock/>
92+
<Banner />
93+
</div>
94+
)
95+
}
96+
97+
98+
99+
100+
const Home = () => {
101+
const sst = {
102+
backgroundImage: "url('/imgs/ita-naruto.gif')",
103+
width: "100vw",
104+
height: "100vh",
105+
backgroundRepeat: "no-repeat",
106+
backgroundSize: 'contain',
107+
backgroundPosition : 'center center',
108+
backgroundAttachment: 'fixed',
109+
backgroundSize: 'cover'
110+
}
111+
112+
113+
return (
114+
<div className="App">
115+
<div style={sst}>
116+
<div className="flex justify-center" >
117+
<Link to="/mac" className="transform transition duration-1000 hover:scale-110">
118+
<img src="/imgs/sharingan.gif" ></img>
119+
</Link>
120+
</div>
121+
<div className="flex justify-center items-center h-2/6">
122+
123+
<div className="flex flex-col gap-4 mt-2">
124+
<div className="font-mono font-extrabold text-4xl md:text-6xl">
125+
<span className="text-red-600">Hi ,</span>
126+
<span className="text-white md:text-red-600">I am</span> </div>
127+
<div className="font-mono font-extrabold text-2xl md:text-4xl">
128+
<span className="text-red-600">Shuvayan</span> Ghosh
129+
<span className="text-red-600"> Dastidar</span>
130+
</div>
131+
<div className="font-mono font-extrabold text-2xl">
132+
<span className="text-red-600">Software</span> {' '}
133+
<span className="text-red-300"> Developer</span>
134+
</div>
135+
</div>
136+
</div>
137+
<div className="flex h-1/6 mx-32 md:mx-64 ">
138+
<div className="font-mono flex justify-center text-sm md:text-lg font-bold text-white md:text-red-500 text-center w-full">
139+
If you are on a PC or a laptop click on the sharingan above or any of the socials to know more about me!
140+
</div>
141+
</div>
142+
<div className="flex h-44 w-full justify-center items-center flex-grow flex-shrink">
143+
<Socials />
144+
</div>
145+
</div>
146+
</div>
147+
);
148+
}
77149

78150
const App = () => {
79151

@@ -85,14 +157,13 @@ const App = () => {
85157
<meta charSet="utf-8" />
86158
<title>Shuvayan's website</title>
87159
<meta name="description" content={"This is the personal website of Shuvayan Ghosh Dastidar. The portfolio website is made using ReactJs and tailwindcss."} />
88-
</Head>
89-
<Header />
90-
<Component />
91-
<Stacks/>
92-
<Background />
93-
<ContextMenu menu={ <DefaultContextMenu />} />
94-
<SpotLight />
95-
<Dock/>
160+
</Head >
161+
<Router>
162+
<Routes>
163+
<Route path="/" element={<Home />} />
164+
<Route path="/mac" element={<Mac />} />
165+
</Routes>
166+
</Router>
96167
</ThemeProvider>
97168
</Store>
98169

‎src/Components/Mail.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@ const Mail = (props) => {
2121
<div className="flex relative bg-white dark:bg-gray-900 rounded-b-xl" style={{ height: context.height, width: context.width, minHeight: "30rem" }}>
2222
<div className="flex flex-col mx-1 h-full w-full">
2323
<div className="h-10 w-full p-1" style={{backgroundColor :"rgb(56,59,65)"}}>
24-
<a href={`mailto:sgd030@gmail.com?subject=${encodeURI(subject)}&cc=${cc}&body=${encodeURI(body)}`}>
24+
<a href={`mailto:contact@shuvayan.com?subject=${encodeURI(subject)}&cc=${cc}&body=${encodeURI(body)}`}>
2525
<img
2626
className="ml-3 cursor-pointer" src={Send}></img></a>
2727
</div>
2828
<div className="flex flex-row w-full mt-3 ml-3">
2929
<div className="text-xs mr-5 dark:text-gray-400 text-gray-800">To:</div>
30-
<div className="text-xs mr-5 dark:text-white text-gray-900">sgd030@gmail.com</div>
30+
<div className="text-xs mr-5 dark:text-white text-gray-900">contact@shuvayan.com</div>
3131
</div>
3232
<div className="border dark:border-gray-800 border-gray-800 border-b-1 my-3"></div>
3333
<div className="flex flex-row w-full mt-1 ml-3">

‎src/Components/Screens/About.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const About = () => {
2424
<a href="https://www.instagram.com/chroma_mania/">
2525
<img src={Insta} style={{width :"30px" , margin:"2px" }}/>
2626
</a>
27-
<a href="https://www.linkedin.com/in/shuvayan-ghosh-dastidar-3b5383166/">
27+
<a href="https://www.linkedin.com/in/shuvayan-ghosh-dastidar/">
2828
<ion-icon name="logo-linkedin" style={{ fontSize: "30px", color: "#0077B5", margin :"2px" }}></ion-icon>
2929
</a>
3030
<a href="https://github.com/TheSYNcoder/">

‎src/Components/Socials.js

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {
2+
FaFacebookF,
3+
FaTwitter,
4+
FaInstagram,
5+
FaGithub,
6+
FaLinkedin,
7+
FaLinkedinIn,
8+
9+
} from "react-icons/fa";
10+
import { FiInstagram, FiMail } from "react-icons/fi"
11+
12+
13+
const SocialButton = ({ name, link }) => {
14+
let FBStyles = { color: "blue", fontSize: "1.5em" };
15+
let TwitterStyles = { color: "#00acee", fontSize: "1.5em" };
16+
let GithubStyles = { color: "black", fontSize: "1.5em" };
17+
let InstaStyles = { color: "orange", opacity: "0.6", fontSize: "1.5em" };
18+
let MailStyles = { color: "red", fontSize: "1.5em" };
19+
let LinkedinStyles = { color: "#00a0dc", fontSize: "1.5em" };
20+
return (
21+
<a href={link} target="_blank">
22+
<div className="relative flex flex-col items-center group">
23+
<span className="h-7 w-7 bg-white rounded-3xl flex items-center justify-center p-1">
24+
{
25+
name === 'fb' ? <FaFacebookF style={FBStyles} /> :
26+
name === 'twitter' ? <FaTwitter style={TwitterStyles} /> :
27+
name === 'github' ? <FaGithub style={GithubStyles} /> :
28+
name === 'mail' ? <FiMail style={MailStyles} /> :
29+
name === 'insta' ? <FaInstagram style={InstaStyles} /> :
30+
name === 'linkedin' ? <FaLinkedinIn style={LinkedinStyles} /> : <div></div>
31+
}
32+
</span>
33+
<div className="absolute bottom-0 flex-col items-center hidden mb-8 group-hover:flex">
34+
<span className="relative z-10 p-2 mb-2 text-xs leading-none text-black whitespace-no-wrap bg-white shadow-2xl rounded-lg">
35+
{
36+
name === 'fb' ? "Facebook" :
37+
name === 'twitter' ? "theSYNcoder" :
38+
name === 'github' ? "github.com/thesyncoder" :
39+
name === 'mail' ? "contact@shuvayan.com" :
40+
name === 'insta' ? "chroma_mania" :
41+
name === 'linkedin' ? "shuvayan-ghosh-dastidar" : <div></div>
42+
}
43+
</span>
44+
<div class="w-3 h-3 -mt-4 transform rotate-45 bg-white"></div>
45+
</div>
46+
</div>
47+
</a>
48+
)
49+
}
50+
51+
const Socials = () => {
52+
53+
54+
return (
55+
<div className="grid grid-cols-6 gap-2 md:gap-1 w-3/4 mx-auto">
56+
<SocialButton name="linkedin" link='https://www.linkedin.com/in/shuvayan-ghosh-dastidar' />
57+
<SocialButton name="github" link='https://github.com/TheSYNcoder/' />
58+
<SocialButton name="insta" link='https://www.instagram.com/chroma_mania/' />
59+
<SocialButton name="mail" link='mailto:contact@shuvayan.com' />
60+
<SocialButton name="twitter" link='https://twitter.com/TheSYNcoder' />
61+
<SocialButton name="fb" link='https://www.facebook.com/shuvayan.ghoshdastidar' />
62+
</div>
63+
)
64+
}
65+
66+
export default Socials;

‎src/Components/banner.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import { Context } from "../store";
3+
4+
const Banner = () => {
5+
6+
7+
8+
9+
const [show, setShow] = React.useState(true);
10+
11+
12+
13+
14+
return (
15+
<div id="banner" role='alert' className={"absolute top-1/4 left-1/4 z-10 w-6/12 flex flex-col h-30 rounded-xl bg-blue-100 border-t-4 border-blue-500 rounded-b text-blue-900 px-4 py-3 shadow-md " + (show ? "" : "hidden")} >
16+
<strong class="font-bold">Hey welcome!</strong>
17+
<span class="block sm:inline">This is my space. Use the terminal if you are a geek :). Click on About me to know about me. Right click anywhere for more fun. Use ctrl + space to open up spotlight to go to any application. Wanna contact me for some chat or projects, shoot a mail using the mail app! Have fun!!</span>
18+
<span class="absolute top-0 bottom-0 right-0 px-4 py-3" onClick={() => setShow(false)}>
19+
<svg class="fill-current h-6 w-6 text-blue-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" /></svg>
20+
</span>
21+
</div>
22+
)
23+
}
24+
25+
export default Banner;

‎src/Components/useContextHook.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ export const useContextHook = () => {
99

1010

1111
const handleContextMenu = (e) => {
12-
e.preventDefault();
13-
14-
12+
e.preventDefault();
1513
setXPos(`${e.pageX}px`);
1614
setYPos(`${e.pageY}px`);
1715
setShowMenu(true);

‎tailwind.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ module.exports = {
1818
extend: {},
1919
},
2020
variants: {
21-
extend: {},
21+
extend: {
22+
display: ["group-hover"],
23+
},
2224
},
2325
plugins: [require('@tailwindcss/typography')],
2426
}

0 commit comments

Comments
 (0)