added webp files for better page load performance

Author: siddharthmohite

.DS_Store

@@ -10,6 +10,21 @@ import type { LinksFunction } from "@remix-run/node";
 import "./tailwind.css";
 
 export const links: LinksFunction = () => [
+  {
+    rel: "preload",
+    href: "/folder.webp",
+    as: "image",
+  },
+  {
+    rel: "preload",
+    href: "/wallpaper.webp",
+    as: "image",
+  },
+  {
+    rel: "preload",
+    href: "/basketball2.webp",
+    as: "image",
+  },
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
   {
     rel: "preconnect",

app/root.tsx

@@ -10,7 +10,7 @@ export default function AboutMe(){
             <div className="main-content">
                 <div className="aboutme-text-container">
                 <div className="img-container">
-                    <img className="me" src="/groot.gif" />
+                    <img className="me" src="/groot.webp" />
                 </div>
                     <span className="introduction">
                     I'm <strong>Siddharth Mohite</strong>, a full-stack developer with a sharp eye for detail crafting UI components that don’t just function, but captivate.        

app/routes/components/AboutMe.jsx

@@ -20,7 +20,7 @@ export default function Folder({filename}){
         <div className="folder-image-container">
             <img 
             onClick={handleFileClick}
-            className={`folder-image ${FileClick ? "active" : ""}`} src="/folder.png"></img>
+            className={`folder-image ${FileClick ? "active" : ""}`} src="/folder.webp"></img>
             <span
              className={`folder-name-text ${FileClick ? "active" : ""}`}>{filename}</span>
         </div>

app/routes/components/Folder.jsx

@@ -68,15 +68,20 @@ const handleButtonClose = () =>
                     className="button-max">
 
                     </button>
-                </div>   
+                </div>
+                {status && (
+                    <div className={`response-message ${status.type}`}>
+                    {status.message}
+                        </div>
+                    )} 
                     <button onClick={handleSubmit} title="Send" className="send-email">
                     {loading ? <div className="spinner"></div> : <SendEmailIcon />}
                     </button>  
-                    {status && (
+                    {/* {status && (
                 <div className={`response-message ${status.type}`}>
                     {status.message}
                 </div>
-            )} 
+            )}  */}
             </div>
             <div className="mail-sender-content">
                 <div className="input-container">

app/routes/components/SendAMessage.jsx

@@ -42,14 +42,14 @@ export default function homepage(){
 
 
     const images = [
-        { id: 1, src: "/finder.png", name:"Finder" },
-        { id: 2, src: "/mail.png",name:"Contact Me" },
-        { id: 3, src: "/news.png" ,name:"Blog"},
-        { id: 4, src: "/terminal.png" ,name:"Terminal"},
-        { id: 5, src: "/chrome.png",name:"Google Chrome" },
-        { id: 6, src: "/calculator.png" ,name:"Calculator"},
-        { id: 7, src: "/vscode.png",name:"Visual Studio Code"},
-        { id: 8, src: "/trash.png",name:"Trash"}
+        { id: 1, src: "/finder.webp", name:"Finder" },
+        { id: 2, src: "/mail.webp",name:"Contact Me" },
+        { id: 3, src: "/news.webp" ,name:"Blog"},
+        { id: 4, src: "/terminal.webp" ,name:"Terminal"},
+        { id: 5, src: "/chrome.webp",name:"Google Chrome" },
+        { id: 6, src: "/calculator.webp" ,name:"Calculator"},
+        { id: 7, src: "/vscode.webp",name:"Visual Studio Code"},
+        { id: 8, src: "/trash.webp",name:"Trash"}
       ];
 
     const updateTime = () =>
@@ -271,16 +271,16 @@ useEffect(() => {
         })
         {( controlCenterButtonClicked &&
            <div className="controlcenter-container">
-            {/* <FullScreenProvider> */}
               <ControlCenter />
-            {/* </FullScreenProvider>   */}
           </div>
         )}
         {( selectedId == 1 &&
           <Finder onClose={handleClose} folderId={selectedFolderId || 1}/>
         )}
         {(selectedId == 2 &&
+        <div className="contact-me-container">
           <SendAMessage onClose={handleClose} />
+        </div>  
         )}
         ({
           selectedId == 6 &&
@@ -387,7 +387,7 @@ useEffect(() => {
               </div>
               <div 
               className="overlay-topbar__siri">
-                <img className="overlay-topbar__siri-img" src="/Siri.png"/>
+                <img className="overlay-topbar__siri-img" src="/Siri.webp"/>
               </div>
               <span className="overlay-topbar__day-text">
                 {dayState}  {monthState} {dateState}
@@ -415,7 +415,7 @@ useEffect(() => {
                     <img 
                     src={image.src}
                     alt={`Image ${image.id}`}
-                    data-id={image.id} //
+                    data-id={image.id} 
                     className="overlay-downbar__image"></img>
                     {selectedId == image.id &&(
                         <div className="overlay-downbar__image-notifier"/>

app/routes/homepage.tsx

@@ -11,6 +11,7 @@
 .mail-topbar{
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
     height: 4rem;
     background-color: rgb(243, 239, 239);
     border-radius: 0.5rem;
@@ -68,7 +69,7 @@
 }
 
 .send-email{
-    margin-bottom: 0.5rem;
+    margin-right:2rem;
 }
 
 .input-container,
@@ -115,7 +116,7 @@
 .response-message {
     margin-top: 10px;
     margin-left: auto;
-    margin-right: 10px;
+    margin-right: auto;
     padding: 10px;
     text-align: center;
     font-weight: bold;

app/routes/styles/SendAMessage.scss

@@ -87,7 +87,20 @@
   border-radius: 0.75rem;
   z-index: -1; /* Send background to back */
 }
+.contact-me-container{
+    display: flex;
+    overflow:hidden;
+    position: absolute; /* Add this */
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 70vw;
+    height: 70vh;
+    z-index: 30;
+    border-radius: 12px;
+    transition: all 0.3s ease;
 
+}
 .calculator{
   z-index:50;
   // height: 30vh;
@@ -103,6 +116,15 @@
     left: 0;
     z-index: 1;
 }
+.background-image{
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Equivalent to object-cover */
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index:0;
+}
 
 .folder-wrapper{
   position:absolute;