next-js refactor

Author: Shuvayan Ghosh Dastidar

Diff for: .gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#next
+.next
+.vscode

Diff for: components/mac/Constants/timelineData.json

@@ -0,0 +1,47 @@
+[
+    {
+        "title": "CICBA",
+        "description": "Gave a presentation on my paper at CICBA",
+        "date": "7-9 January 2021"
+    },
+    {
+        "title": "First Paper Acceptance",
+        "description": "My Paper on Knowledge Distillation got accepted at CICBA International Conference",
+        "date": "22 December 2020"
+    },
+    {
+        "title": "Blogging",
+        "description": "Wrote many blogs on platforms like medium and GFG",
+        "date": "Sep-Oct 2020"
+    },
+    {
+        "title": "Amazon SDE intern",
+        "description": "Selected as an Amazon Summer SDE Intern through campus internship drive of Jadavpur University",
+        "date": "8 September 2020"
+    },
+    {
+        "title": "SIH Winner",
+        "description": "My team become the winners of SIH 2020 for our app - EcoEden ( written in flutter )",
+        "date": "3 July 2020"
+    },
+    {
+        "title": "Analytical Intern at My Ways",
+        "description": "Started working as an analytical intern at My Ways",
+        "date": "4 June 2020"
+    },
+    {
+        "title": "Undergraduate Reasearch Intern at IIT Bombay",
+        "description": "Started working under professor Biblab Banerjee of IIT Bombay.",
+        "date": "4 April 2020"
+    },
+    {
+        "title": "Undergraduate Reasearch Intern at Jadavpur University",
+        "description": "Started working as an undergraduate researcher in CMATER(DVLP) Lab of Jadavpur University under Professor Nibaran Das.",
+        "date": "24 April 2019"
+    },
+    {
+        "title": "Jadavpur University, Kolkata ( CS 2022 Batch )",
+        "description": "My journey with Computer Science started with the orientation.",
+        "date": "2 August 2018"
+    }
+]

Diff for: components/mac/Screens/About.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Image from 'next/image'
+import Typewriter from 'typewriter-effect';
+
+
+const About = () : any => {
+    return (
+        <div>
+            <div className="items-center flex flex-col h-full w-full">
+                <Image unoptimized src="/assets/photo.jpg" alt='A selfie of myself' height={70} width={60}  className="h-2/5 w-4/5 overflow-hidden rounded-3xl mt-2 ring-4 ring-black"></Image>
+                <div className="text-black dark:text-white mt-4 font-black text-2xl">Shuvayan Ghosh Dastidar</div>
+                <div className="text-black dark:text-white mt-4 font-semibold text-lg flex flex-row">Hey, I am a<Typewriter
+                    options={{
+                        strings: ['- Web Developer', '- Computer Vision Enthusiast', '- Competitive Programmer'],
+                        autoStart: true,
+                        loop: true,
+                    }}
+
+                /> </div>
+                <div className="absolute bottom-0 mb-4 flex flex-row justify-center">
+                    <a href="https://www.facebook.com/shuvayan.ghoshdastidar">
+                        <ion-icon name="logo-facebook" style={{ fontSize: "30px", color: "blue", margin: "2px" }}/>
+                    </a>
+                    <a href="https://www.instagram.com/chroma_mania/">
+                        <Image src="/assets/insta.jpeg" alt='Instagram icon' width={30} height={100} style={{ margin:"2px" }}/>
+                    </a>
+                    <a href="https://www.linkedin.com/in/shuvayan-ghosh-dastidar/">                    
+                        <ion-icon name="logo-linkedin" style={{ fontSize: "30px", color: "#0077B5", margin: "2px" }}/>
+                    </a>
+                    <a href="https://github.com/TheSYNcoder/">
+                        <ion-icon name="logo-github" style={{ fontSize: "30px", color: "black", margin :"2px" }} />
+                    </a>
+                    <a href="https://twitter.com/TheSYNcoder">
+                        <ion-icon name="logo-twitter" style={{ fontSize: "30px", color: "lightblue", margin: "2px" }}/>
+                    </a>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default About;

Diff for: components/mac/Screens/Projects.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+const Projects = () => {
+
+    const projectList = [
+        {
+            title : 'Jadavpur University Compiler Compiler',
+            description : 'A LL(1) parser written in C++. It supports dynamic grammar files for parsing different languages and visualizes the abstract syntax tree using Treant.js', 
+            link: 'https://github.com/TheSYNcoder/JuCC',
+            featImage: 'https://user-images.githubusercontent.com/42897033/116920657-8acdf480-ac70-11eb-8d3f-46cf27fcb1a1.png' ,
+        },
+        {
+            title : 'An Assembler',
+            description: 'Implementation of a two-pass assembler involving tries for fast in-memory opcode fetch and has implementation of loader and linkers for linking the object file created to make an executable file.',
+            link: 'https://github.com/TheSYNcoder/ProprietaryAssembler',
+            featImage: 'https://images.unsplash.com/photo-1583109193439-1ebb113bceac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1237&q=80' ,
+        },
+        // {
+        //     title : 'Budgify',
+        //     description: 'A personal savings app to maintain your day to day expenses and incomes. The app has many features such as tracking expenses and visualizing them',
+        //     link: 'https://play.google.com/store/apps/details?id=com.budgify',
+        //     featImage: 'https://play-lh.googleusercontent.com/WN77wvQymKgTcOBXt1o-C6hSQfTOcorhkYr6VpXAWf0bvm5tDHSAPPRNC7ev-nn3fPM=s180-rw',
+        // },
+    ]
+
+    return  (
+        <div className="h-full w-full flex flex-col items-center ">
+            <div className="text-black dark:text-white font-black text-xl mt-2 p-2">Featured Projects</div>
+            <div className="flex w-11/12 flex-col">{
+                projectList.map(proj => <div key={proj.title} className="border-2 border-blue-500 p-2 my-2 flex flex-col w-full shadow-xl">
+                    <div className="flex flex-row">
+                        <img className=" w-4/12 rounded-xl " src={proj.featImage}></img>
+                        <div className="ml-2 w-8/12">
+                            <div className="text-md dark:text-white text-black font-bold ">{proj.title}</div>
+                            <div className="text-md dark:text-gray-200 text-gray-600 font-normal ">{proj.description}</div>
+                            <a className="text-sm dark:text-white text-black font-medium hover:text-gray-800" href={proj.link}> <ion-icon name="link-outline" size="large" />View Project </a>
+                        </div>
+                    </div>
+                </div>)
+            }</div>
+        </div>
+    )
+}
+
+export default Projects;

Diff for: components/mac/Screens/Research.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const Research = () => {
+    return (
+        <div>
+            <div className="items-center flex flex-col h-full w-full">
+                <div className="text-xl dark:text-white text-black font-black">Research Work</div>
+                <div className="flex mx-7 my-3">
+                    <ul className="list-none">
+                        <li className="text-md font-medium dark:text-white text-black my-2">Worked at Jadavapur University CMATER (DVLP) Lab and was involved in making classification and segmentation models for the task of scene text detection. Also worked on making of the  <a className="border-b-2 border-black dark:border-white" href="https://dvlp.herokuapp.com/">Lab website</a></li>
+                        <li className="text-md font-medium dark:text-white text-black my-2">Worked under Prof. Biplab Banerjee of Indian Institute of Technology, Bombay to develop models for screening of covid affected patients from Chest-Xray images. Many appraches were experimented upon including an adversarial approach involving domain adaptation.</li>
+                    </ul>
+                </div>
+                <div className="text-xl dark:text-white text-black font-black">Publications and Blogs</div>
+                <div className="flex mx-7 my-3">
+                    <ul className="list-decimal">
+                        <li className="text-md font-medium dark:text-white text-black my-2">Accepted at CICBA international conference - Exploring Knowledge Distillation of a Deep Neural Network for Multi-Script identification . <a className="border-b-2 border-black dark:border-white" href="https://arxiv.org/abs/2102.10335">[Link]</a> . <a className="border-b-2 border-black dark:border-white" href="https://drive.google.com/file/d/1ReOFt0V73ASUDIk02pL1ubYUb_duEVgH/view?usp=sharing">[Certificate]</a> </li>
+                        <li className="text-md font-medium dark:text-white text-black my-2">Image processing with OpenCV published in medium publication - Towards AI. <a className="border-b-2 border-black dark:border-white" href="https://pub.towardsai.net/image-processing-basics-through-opencv-e9cbc6130821">[Link]</a></li>
+                        <li className="text-md font-medium dark:text-white text-black my-2">Spring Boot web application and making a docker container and dockerizing it in medium publication - Geek Culture. <a className="border-b-2 border-black dark:border-white" href="https://medium.com/geekculture/a-full-stack-e-commerce-application-using-spring-boot-and-making-a-docker-container-eff46f6f4e14">[Link]</a></li>
+                        <li className="text-md font-medium dark:text-white text-black my-2">A React frontend for a spring boot application in medium publication - Geek Culture. <a className="border-b-2 border-black dark:border-white" href="https://medium.com/geekculture/a-reactjs-web-application-with-a-spring-boot-backend-and-containerizing-it-using-docker-3eeaed8cb45a">[Link]</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Research;

Diff for: components/mac/Screens/Resume.tsx

@@ -0,0 +1,6 @@
+
+const Resume = () => {
+    return <iframe className="h-full w-full" src="/assets/shuvayan.pdf" title="Shuvayan's Resume"></iframe>
+}
+
+export default Resume;

Diff for: components/mac/Screens/Timeline.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { gsap } from "gsap";
+import data from "../Constants/timelineData.json";
+
+const Timeline = () => {
+    const items = data;
+
+
+    const hide = (elem: JSX.Element) => {
+        gsap.set(elem, { autoAlpha: 0 });
+    };
+
+
+    return (
+        <div className="flex flex-col">
+            <div className="dark:text-white text-black font-black text-2xl mt-4 w-full text-center">Timeline</div>
+            <div className="timeline">
+                <ul>
+                    {items.map((te, idx) => {
+                        return (
+                            <li key={`${te.title}_${te.date}`}>
+                                <div className="content">
+                                    <h3
+                                        className={`animate ${idx % 2 === 0 ? "slide_from_left" : "slide_from_right"
+                                            }`}
+                                    >
+                                        {te.title}
+                                    </h3>
+                                    <p
+                                        className={`animate ${idx % 2 === 0 ? "slide_from_left" : "slide_from_right"
+                                            }`}
+                                    >
+                                        {te.description}
+                                    </p>
+                                </div>
+                                <div
+                                    className={`time animate ${idx % 2 === 0 ? "slide_from_right" : "slide_from_left"
+                                        }`}
+                                >
+                                    <h4>{te.date}</h4>
+                                </div>
+                            </li>
+                        );
+                    })}
+                    <div style={{ clear: "both" }}></div>
+                </ul>
+            </div>
+        </div>
+    );
+};
+
+export default Timeline;

Diff for: components/mac/background.tsx

@@ -0,0 +1,33 @@
+
+import React from 'react';
+import { Context } from '../../lib/store';
+import { useContext } from 'react';
+
+
+const Background = () => {
+
+    const {state, dispatch} = useContext(Context) as AppStoreContextType;
+    
+    const currState = React.useRef(state);
+
+    React.useEffect(() => {
+        currState.current = state;
+    }, [state]);
+
+    const getPic = () => {
+        if ( currState.current.backgroundImage === 'pic1') {
+            return '/assets/pic1.jpg';
+        } else if ( currState.current.backgroundImage === 'pic2'){
+            return '/assets/pic2.jpg';
+        } else {
+            return '/assets/pic3.jpg';
+        }
+    }     
+
+    return  <div className="fixed top-0 w-screen h-screen bg-cover z-0">
+        <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>        
+    </div>
+}
+
+
+export default Background;

Diff for: components/mac/banner.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const Banner = () => {
+
+    
+    const [show, setShow] = React.useState(true);
+
+    return (
+        <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")}  >
+            <strong className="font-bold">Hey welcome!</strong>
+            <span className="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>
+            <span className="absolute top-0 bottom-0 right-0 px-4 py-3" onClick={() => setShow(false)}>
+                <svg className="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>
+            </span>
+        </div>
+    )
+}
+
+export default Banner;

Diff for: components/mac/changeBackground.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Context } from '../../lib/store';
+
+const ChangeBackground = (props: {context: {height: number, width: number}}) => {
+
+    const {state, dispatch} = React.useContext(Context) as AppStoreContextType;
+
+    var context = props.context;
+    const currState = React.useRef(state);
+
+    React.useEffect(() => {        
+        currState.current = state;
+    }, [state]);
+
+    const getPic = () => {                        
+        if (currState.current.backgroundImage === 'pic1') {
+            return '/assets/pic1.jpg';;
+        } else if (currState.current.backgroundImage === 'pic2') {
+            return '/assets/pic2.jpg';;
+        } else {
+            return '/assets/pic3.jpg';;
+        }
+    }
+
+    return  (   
+        <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" }}>
+            <div className="flex flex-row justify-around w-full h-1/4">
+                <div className="w-1/4 text-black font-black dark:text-white text-2xl">Current Background :</div>
+                <img className="w-1/2 rounded-xl overflow-hidden" src={getPic()}></img>
+            </div>
+            <div className="text-black dark:text-white font-black flex w-full items-center justify-center mt-3">Select your choice</div>
+            <div className="grid grid-cols-2 gap-4 h-3/4 ml-8 mr-2 mt-5">
+                <img onClick={() => dispatch({ type: "CHANGE_BACKGROUND", payload: "pic1" })}
+                src='/assets/pic1.jpg' className="w-5/6 h-40 rounded-xl cursor-pointer"></img>
+                <img onClick={() => dispatch({ type: "CHANGE_BACKGROUND", payload: "pic2" })}
+                src='/assets/pic2.jpg' className="w-5/6 h-40 rounded-xl cursor-pointer"></img>
+                <img onClick={() => dispatch({ type: "CHANGE_BACKGROUND", payload: "pic3" })}
+                src='/assets/pic3.jpg' className="w-5/6 h-40 rounded-xl cursor-pointer"></img>
+            </div>
+        </div>
+    )   
+}
+
+export default ChangeBackground;

Diff for: components/mac/defaultContextMenu.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Context } from '../../lib/store';
+import { useTheme } from 'next-themes';
+
+const DefaultContextMenu = () => {
+    const { theme, setTheme } = useTheme();
+    const {state, dispatch} = React.useContext(Context) as AppStoreContextType;
+    return (
+        <div className="relative h-auto w-auto flex flex-col rounded-lg p-2 ring-1 ring-gray-600 ring-inset" style={{minWidth :"13rem", zIndex : 10 , backgroundColor : "rgb(34, 35, 54, 0.3)"}}>
+            <div className="text-xs text-white pl-5 pt-0.5  rounded-sm hover:bg-blue-500 mb-1 cursor-pointer">New Folder</div>
+            <hr className="border border-gray-300 ml-2 mr-2 opacity-50"/>
+            <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" 
+            onClick={() => dispatch({ type: "NEW_WINDOW", payload: { id: 'PROFILE', header: true } }) }
+            >Get Info</div>
+            <div 
+                onClick={() => dispatch({ type: "NEW_WINDOW", payload: { id: 'CHANGE_BACKGROUND', header: true, title : "change background image" } })}
+            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>
+            <div 
+                onClick={() => setTheme( theme === 'dark' ? 'light' :  'dark') }
+            className="text-xs text-white pl-5 pt-1 pb-0.5 rounded-sm hover:bg-blue-500 mb-1 cursor-pointer">Change Theme</div>
+            <hr className="border border-gray-300 ml-2 mr-2 opacity-50" />
+            <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>
+        </div>
+    )
+};
+
+export default DefaultContextMenu;