working changes

Author: TheSYNcoder

README.md

@@ -4,14 +4,16 @@ Hey there, welcome to my personal website.
 This is a portfolio website built on the theme of MacOS made with ReactJs and TailwindCSS.
 This is currently under development.
 
-# UNDER DEVELOPMENT :construction: on :apple:
+
 
 ## Features present currently 
 
 * MacOs Bash terminal support for basic commands like ls, cd ,clear.
 * Opening of multiple windows
 * Changing of desktop background
-* And Obviously - My Portfolio in a window  ( working on it). 
+* And Obviously - My Portfolio in a window ( about me ).
+* Spotlight ( ctrl + space  to activate ) 
+
 
 ## Contributions are most welcome
 

src/App.js

@@ -63,7 +63,7 @@ const Component = () => {
 const Stacks = () => {
   const [state, dispatch] = useContext(Context);
     return (
-       <div className="absolute right-0 mr-10 flex flex-col bg-transparent z-10">
+       <div className="absolute right-0 mr-10 flex flex-col bg-transparent" style={{zIndex : 5}}>
         <img src={HDD} className="m-4 mb-0 h-12 w-12 md:h-16 md:w-16  shadow-xl" />
          <div className="text-xs text-white ml-1 font-black mt-2">Macintosh HD</div>
         <div className="cursor-pointer focus:bg-gray-400 z-10" 

src/Components/Profile.js

@@ -88,11 +88,11 @@ const Profile = (props) => {
             <div className="md:flex hidden flex-col w-1/4 md:w-1/5 h-full bg-gray-200 dark:bg-gray-700 text-sm overflow-y-auto rounded-bl-xl" style={{height : context.height }}>
                 {renderNavLinks()}
             </div>
-            <div onClick={() => showNavbar(!navbar)} className="md:hidden flex flex-col items-center justify-center absolute bg-ub-cool-grey rounded w-6 h-6 top-1 left-1">
-                <div className=" w-3.5 border-t border-black"></div>
-                <div className=" w-3.5 border-t border-black" style={{ marginTop: "2pt", marginBottom: "2pt" }}></div>
-                <div className=" w-3.5 border-t border-black"></div>
-                <div className={(navbar ? " visible animateShow z-30 " : " invisible ") + " md:hidden text-xs absolute bg-ub-cool-grey py-0.5 px-1 rounded-sm top-full mt-1 left-0 shadow border-black border border-opacity-20"}>
+            <div onClick={() => showNavbar(!navbar)} className="md:hidden flex flex-col items-center justify-center absolute rounded w-6 h-6 top-1 left-1">
+                <div className=" w-3.5 border-t border-black dark:border-white"></div>
+                <div className=" w-3.5 border-t border-black dark:border-white" style={{ marginTop: "2pt", marginBottom: "2pt" }}></div>
+                <div className=" w-3.5 border-t border-black dark:border-white"></div>
+                <div className={(navbar ? " visible animateShow z-30 " : " invisible ") + " md:hidden text-xs absolute py-0.5 px-1 rounded-sm top-full mt-1 left-0 shadow border-black border border-opacity-20"}>
                     {renderNavLinks()}
                 </div>
             </div>

src/Components/Spotlight.js

@@ -86,9 +86,9 @@ const SpotLight = () => {
             if ( index === 0) {
                 dispatch({ type: "NEW_WINDOW", payload: { id: 'TERMINAL', header: true, title: "Terminal" } })            
             } else if ( index === 1 ){
-                dispatch({ type: "NEW_WINDOW", payload: { id: 'RANDOM', header: true, title: "Mail" } })            
+                dispatch({ type: "NEW_WINDOW", payload: { id: 'MAIL', header: true, title: "Mail" } })            
             } else if ( index ===  2 ){
-                dispatch({ type: "NEW_WINDOW", payload: { id: 'RANDOM', header: true, title: "Finder" } })
+                dispatch({ type: "NEW_WINDOW", payload: { id: 'PROFILE', header: true, title: "Finder" } })
             }
             setShow(false);
 

src/Components/Terminal.js

@@ -321,6 +321,13 @@ const Terminal = (props) => {
             processStatement();            
         }
     }
+
+    if (window.screen.width < 500) {
+        context = {
+            height: "30rem",
+            width: (window.screen.width - 200) + "px"
+        }
+    }
 
 
     return (

src/draggable.js

@@ -10,7 +10,8 @@ const Draggable = (props) => {
 
 
     const [ currHeight , setHeigth ] = React.useState("30rem");
-    const [ currWidth , setWidth ] = React.useState("40rem");
+    const [ currWidth , setWidth ] = React.useState( "40rem");
+    
 
     const currState = React.useRef(state);
 
@@ -260,7 +261,7 @@ const Draggable = (props) => {
             }
 
             function doDrag(e) {
-                if (startWidth + e.clientX - startX  > 480 ){
+                if (startWidth + e.clientX - startX  > 280 ){
                     elem.style.width = startWidth + e.clientX - startX  + "px";
                     setWidth(elem.style.width);
                 }
@@ -271,7 +272,7 @@ const Draggable = (props) => {
             }
 
             function doDragMinusBoth(e) {   
-                if (startWidth + e.clientX - startX > 480) {
+                if (startWidth + e.clientX - startX > 280) {
                     elem.style.width = startWidth - e.clientX + startX + "px";
                     setWidth(elem.style.width);
                 }
@@ -287,7 +288,7 @@ const Draggable = (props) => {
                 if (startWidth - e.clientX + startX !==  elem.style.minWidth) {
                     elem.style.left = e.clientX + "px";
                 }
-                if (startWidth + e.clientX - startX > 480) {
+                if (startWidth + e.clientX - startX > 280) {
                     elem.style.width = startWidth - e.clientX + startX + "px";
                     setWidth(elem.style.width);
                 }
@@ -297,7 +298,7 @@ const Draggable = (props) => {
                 }                                
             }
             function doDragMinusTop(e) {  
-                if (startWidth + e.clientX - startX > 480) {
+                if (startWidth + e.clientX - startX > 280) {
                     elem.style.width = startWidth - e.clientX + startX + "px";
                     setWidth(elem.style.width);
                 }