added mail support and timeline

Author: TheSYNcoder

package-lock.json

@@ -13,14 +13,14 @@
     "@testing-library/user-event": "^12.8.3",
     "autoprefixer": "^9.8.6",
     "gh-pages": "^3.2.0",
+    "gsap": "^3.6.1",
     "next": "^10.2.0",
     "next-seo": "^4.24.0",
     "next-sitemap": "^1.6.57",
     "next-themes": "0.0.14",
     "postcss": "^7.0.35",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-ga": "^3.3.0",
     "react-motion": "^0.5.2",
     "react-pdf": "^5.3.0",
     "react-scripts": "4.0.3",

package.json

@@ -20,5 +20,13 @@
     <div id="root"></div>
   </body>
   <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-7NQQVYC6KN"></script>
+  <script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-7NQQVYC6KN');
+</script>
 
 </html>

public/index.html

@@ -10,20 +10,14 @@ import DefaultContextMenu from "./Components/DefaultContextMenu";
 import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
 import Profile from "./Components/Profile";
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
-import ReactGA from 'react-ga';
 import Terminal from "./Components/Terminal";
 import ChangeBackground from "./Components/ChangeBackground";
 import Dock from "./Components/Dock";
 import HDD from "./Assets/hdd.png";
 import SpotLight from "./Components/Spotlight";
 import Folder from "./Assets/folder.png";
-
 import Head from 'next/head';
-ReactGA.initialize('G-7NQQVYC6KN');
-ReactGA.pageview(window.location.pathname + window.location.search);
-
-
-
+import Mail from "./Components/Mail";
 
 
 
@@ -58,6 +52,8 @@ const Component = () => {
         return <Terminal/>
       case 'CHANGE_BACKGROUND':
         return <ChangeBackground/>
+      case 'MAIL':
+        return <Mail />
       default:
         return  <div>Some Content</div>
     }
@@ -124,9 +120,6 @@ const Stacks = () => {
 
 const App = ()  => {  
 
-  
-  
-  
   return (
     <Store>
       <ThemeProvider attribute="class">  

src/App.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Context } from "../store";
-const DefaultContextMenu = () => {
+import { useTheme } from 'next-themes';
 
+const DefaultContextMenu = () => {
+    const { theme, setTheme } = useTheme();
     const [ store, dispatch ] = React.useContext(Context);
     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)"}}>
@@ -13,6 +15,9 @@ const DefaultContextMenu = () => {
             <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>

src/Assets/clock.png

@@ -12,13 +12,23 @@ const Dock = () => {
     const [ store, dispatch]  = React.useContext(Context);
     const [name, setName] = React.useState('');
 
+    const getName = () => {
+        if ( window === 'TERMINAL' ) {
+            return 'Terminal';
+        }
+        if ( window === 'MAIL') {
+            return 'Mail';
+        }
+        return 'Hello';
+    }
+
     React.useEffect(() => {
         var timeo;
         if ( clicked ){
                 timeo = setTimeout(() => {
                     setClick(false);
                     if ( window){
-                        dispatch({ type: "NEW_WINDOW", payload: { id: window, header: true, title: (window === 'TERMINAL' ? 'Terminal' : 'Hello') } })
+                        dispatch({ type: "NEW_WINDOW", payload: { id: window, header: true, title: getName() } })
                     }                    
                 }, 1500);
 
@@ -37,7 +47,7 @@ const Dock = () => {
                 }}
                     className={"h-16 w-16 " + (clicked  && name === 'launchpad' ? "animate-bounce" : "")}></img>
                 <img src={Mail} onClick={() => {
-                    setClick(true); setWindow(null); setName('mail');
+                    setClick(true); setWindow('MAIL'); setName('mail');
                 }}
                     className={"h-14 w-14 mt-1 " + (clicked  && name === 'mail' ? "animate-bounce" : "")}></img>
                 <img src={Terminal} onClick={() => {

src/Assets/send.png

@@ -0,0 +1,59 @@
+import React from "react";
+import Send from "../Assets/send.png";
+
+
+const Mail = (props) => {
+    var context = props.context;
+
+    if (window.screen.width < 600) {
+        context = {
+            height: "30rem",
+            width: window.screen.width - 100
+        }
+    }
+
+    const [ cc, setCc ] = React.useState('');
+    const [ subject , setSubject  ] = React.useState('');
+    const [ from , setFrom ] = React.useState('');
+    const [ body , setBody ] = React.useState('');
+
+    return (
+        <div className="flex relative bg-white dark:bg-gray-900 rounded-b-xl" style={{ height: context.height, width: context.width, minHeight: "30rem" }}>
+            <div className="flex flex-col mx-1 h-full w-full">
+                <div className="h-10 w-full p-1" style={{backgroundColor :"rgb(56,59,65)"}}>
+                    <a href={`mailto:[email protected]?subject=${encodeURI(subject)}&cc=${cc}&body=${encodeURI(body)}`}>
+                    <img
+                            className="ml-3 cursor-pointer" src={Send}></img></a>
+                </div>
+                <div className="flex flex-row w-full mt-3 ml-3">
+                    <div className="text-xs mr-5 dark:text-gray-400 text-gray-800">To:</div>
+                    <div className="text-xs mr-5 dark:text-white text-gray-900">[email protected]</div>
+                </div>
+                <div className="border dark:border-gray-800 border-gray-800 border-b-1 my-3"></div>
+                <div className="flex flex-row w-full mt-1 ml-3">
+                    <div className="text-xs mr-5 dark:text-gray-400 text-gray-800">Cc:</div>
+                    <input value={cc} onChange={(e) => setCc(e.target.value)}
+                    className="text-xs mr-5 dark:text-white w-full text-gray-900 bg-transparent outline-none"></input>
+                </div>
+                <div className="border dark:border-gray-800 border-gray-800 border-b-1 my-3"></div>
+                <div className="flex flex-row w-full mt-1 ml-3">
+                    <div className="text-xs mr-5 dark:text-gray-400 text-gray-800">Subject:</div>
+                    <input value={subject} onChange={(e) => setSubject(e.target.value)}
+                    className="text-xs mr-5 dark:text-white w-full text-gray-900 bg-transparent outline-none"></input>
+                </div>
+                <div className="border dark:border-gray-800 border-gray-800 border-b-1 my-3"></div>
+                <div className="flex flex-row w-full mt-1 ml-3">
+                    <div className="text-xs mr-5 dark:text-gray-400 text-gray-800">From:</div>
+                    <input value={from} onChange={(e) => setFrom(e.target.value)}
+                    className="text-xs mr-5 w-full dark:text-white text-gray-900 bg-transparent outline-none"></input>
+                </div>
+                <div className="border dark:border-gray-800 border-gray-800 border-b-1 my-3"></div>
+                <textarea value={body} onChange={e => setBody(e.target.value)}
+                className="px-2 mt-3 h-full w-full dark:text-white text-black text-md outline-none bg-transparent"></textarea>
+            </div>
+        </div>
+    );
+
+}
+
+export default Mail;

src/Components/DefaultContextMenu.js

@@ -3,10 +3,13 @@ import { act } from 'react-dom/test-utils';
 import About from './Screens/About';
 import Projects from './Screens/Projects';
 import Research from './Screens/Research';
+import Timeline from "./Timeline";
 
 import AboutSVG from "../Assets/profile.svg"
 import ProjectSVG from "../Assets/project.svg"
 import ResearchSVG from "../Assets/research.svg"
+import Clock from "../Assets/clock.png";
+
 const Profile = (props) => {
 
     const [ activeScreen , setScreen ] = React.useState("about");
@@ -16,7 +19,8 @@ const Profile = (props) => {
     const screens = {
         'about' : <About/>,
         'projects' : <Projects/>,
-        'research' : <Research/>
+        'research' : <Research/>,
+        'timeline' : <Timeline/>
     }
 
     const changeScreen = (e) => {
@@ -50,6 +54,10 @@ const Profile = (props) => {
                     <img className=" w-2 md:w-4 " alt="Research" src={ ResearchSVG }/>
                     <span className=" ml-1 md:ml-2 text-black text-xs dark:text-white">Research</span>
                 </div>
+                <div tabIndex="0" onFocus={() => changeScreen('timeline')} className={(activeScreen === "timeline" ? " bg-gray-300  bg-opacity-100 hover:bg-opacity-95" : " hover:bg-gray-50 hover:bg-opacity-5 ") + " w-28 md:w-full  rounded-lg cursor-default outline-none py-1.5 focus:outline-none duration-100 my-0.5 flex items-center pl-2 md:pl-2.5"}>
+                    <img className=" w-2 md:w-4 " alt="Timeline" src={ Clock }/>
+                    <span className=" ml-1 md:ml-2 text-black text-xs dark:text-white">Timeline</span>
+                </div>
 
             </div>
         );

src/Components/Dock.js

@@ -83,10 +83,10 @@ const Terminal = (props) => {
         if ( tokens.length === 1 ){
             if ( currDir === 'shuvayan') {
                 contents = Object.keys(dirStr['folders']);
-                return contents.join(' ');            
+                return contents.map(e => e.split('/').slice(-1)[0]).join(' ');
             }                                 
 
-            return dirStr[currDir].join(' ');
+            return dirStr[currDir].map( e => e.split('/').slice(-1)[0]).join(' ');
         }
         var dirs = tokens.slice(1);
         const ret = {};
@@ -153,11 +153,21 @@ const Terminal = (props) => {
                 continue;
             }
             filest[sysfile] = "";
-            var filesinDir = dirStr[currDir];
-            filesinDir.push(file);
-            dirStr[currDir] = filesinDir;
-            localStorage.setItem('localstructure', JSON.stringify(dirStr));
+                        
+            var filesinDir;
+            if (currDir === 'shuvayan') {
+                var fils = dirStr['folders'];
+                console.log(dirStr , fils);
+                fils[sysfile] = "";
+                dirStr['folders'] = fils;
+            } else {
+                filesinDir = dirStr[currDir];
+                filesinDir.push(file);
+                dirStr[currDir] = filesinDir;
+            }                                            
         }
+        localStorage.setItem('files' , JSON.stringify(filest));
+        localStorage.setItem('localstructure', JSON.stringify(dirStr));
         return ret;
     }
 

src/Components/Mail.js

@@ -0,0 +1,103 @@
+import React, { useEffect } from "react";
+
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import data from "./timelineData.json";
+import "./timeline.css";
+
+const Timeline = (props) => {
+    const items = data;
+
+    const animateFromTo = (elem, direction) => {
+        const offset = 1000;
+        let x = 0;
+        let y = direction * offset;
+
+        direction = direction | 1;
+
+        if (elem.classList.contains("slide_from_left")) {
+            x = -offset;
+            y = 0;
+        } else if (elem.classList.contains("slide_from_right")) {
+            x = offset;
+            y = 0;
+        }
+
+        gsap.fromTo(
+            elem,
+            { x: x, y: y, autoAlpha: 0 },
+            {
+                duration: 1.25,
+                x: 0,
+                y: 0,
+                autoAlpha: 1,
+                ease: "expo",
+                overwrite: "auto",
+            }
+        );
+    };
+
+    const hide = (elem) => {
+        gsap.set(elem, { autoAlpha: 0 });
+    };
+
+    // useEffect(() => {
+    //     // gsap.registerPlugin(ScrollTrigger);
+
+    //     gsap.utils.toArray(".animate").forEach(function (elem) {
+    //         hide(elem);
+
+    //         ScrollTrigger.create({
+    //             trigger: elem,
+    //             onEnter: function () {
+    //                 animateFromTo(elem);
+    //             },
+    //             onEnterBack: function () {
+    //                 animateFromTo(elem, -1);
+    //             },
+    //             onLeave: function () {
+    //                 hide(elem);
+    //             },
+    //         });
+    //     });
+    // }, []);
+
+    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;