adds env

gayathrirajendran · Jul 17, 2023 · 6cb839f · 6cb839f
1 parent 14f9608
commit 6cb839f
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 10 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+VITE_LOCATION='Chennai'
+VITE_GOOGLE_MAP='https://www.google.com/maps/d/u/0/viewer?mid=1qJTcq5CaMdI4s4mNWp9Mi7QpJHQ&hl=en&ll=12.971477862060398%2C80.1832865&z=11'
diff --git a/index.html b/index.html
@@ -3,14 +3,37 @@
 
 <head>
   <meta charset="UTF-8" />
+  <link rel="manifest" href="./manifest.json">
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- Chrome, Firefox OS and Opera -->
+  <!-- <meta name="theme-color" content="#4285f4">  -->
+  <!-- Windows Phone -->
+  <!-- <meta name="msapplication-navbutton-color" content="#4285f4">  -->
+  <!-- iOS Safari -->
+  <!-- <meta name="apple-mobile-web-app-status-bar-style" content="#4285f4"> -->
   <link
     href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap"
     rel="stylesheet">
   <title>Resume</title>
+
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
+          // Registration was successful
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function (err) {
+          // registration failed :(
+          console.log('ServiceWorker registration failed: ', err);
+        });
+      });
+    }
+  </script>
+
+
 </head>
 
 <body>

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,16 @@
+{
+    "name": "resume",
+    "short_name": "resume",
+    "start_url": "index.html",
+    "icons": [
+        {
+            "src": "https://www.scoms.com/media/12178/jobs.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        }
+    ],
+    "background_color": "#3E4EB8",
+    "display": "standalone",
+    "theme_color": "#2E3AA1"
+}
diff --git a/public/resume.json b/public/resume.json
@@ -13,6 +13,11 @@
             "link": "https://www.linkedin.com/in/gayathri-rajendran-478b9514a/details/experience/",
             "network": "linkedIn",
             "title": "LinkedIn profile"
+        },
+        {
+            "link": "https://github.com/gayathrirajendran",
+            "network": "github",
+            "title": "Github"
         }
     ],
     "education": [

diff --git a/serviceWorker.js b/serviceWorker.js
@@ -0,0 +1,42 @@
+let CACHE_NAME = 'my-site-cache-v1';
+const urlsToCache = [
+    '/',
+    '/index.html',
+];
+self.addEventListener('install', function (event) {
+    // Perform install steps
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(function (cache) {
+                console.log('Opened cache');
+                return cache.addAll(urlsToCache);
+            })
+    );
+    self.skipWaiting();
+});
+
+self.addEventListener('fetch', function (event) {
+    event.respondWith(caches.match(event.request)
+        .then(function (response) {
+            if (response) {
+                return response;
+            }
+            return fetch(event.request);
+        })
+    );
+});
+
+self.addEventListener('activate', event => {
+    var cacheWhitelist = [CACHE_NAME];
+    event.waitUntil(
+      caches.keys().then(cacheNames => {
+        return Promise.all(
+          cacheNames.map(cacheName => {
+            if (cacheWhitelist.indexOf(cacheName) === -1) {
+              return caches.delete(cacheName);
+            }
+          })
+        );
+      })
+    );
+  });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,12 @@
+import { Link } from "react-router-dom";
 import Resume from "./components/Resume";
 
 export default function App() {
     return (
         <>
+            {/* {import.meta.env.VITE_LOCATION} */}
             {/* <Welcome></Welcome> */}
-            {/* <Link to="/create">Create your own profile</Link> */}
+            {/* <Link to="/contact-us">Create your own profile</Link> */}
             <Resume></Resume>
         </>
     )

diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
@@ -0,0 +1,7 @@
+const Loading = () => {
+  return (
+    <div>Loading...</div>
+  )
+}
+
+export default Loading
diff --git a/src/components/Resume.tsx b/src/components/Resume.tsx
@@ -6,6 +6,7 @@ import ContactUs from "./ContactUs";
 import Header from "./Header";
 import GenericSummary from "./GenericSummary";
 import SocialMediaWidget from "./SocialMediaWidget";
+import { Link, Outlet } from "react-router-dom";
 
 
 export default function Resume() {
@@ -25,6 +26,10 @@ export default function Resume() {
                             <SocialMediaWidget mediaObjects={data.socialMedia}></SocialMediaWidget>
                             <ContactUs contactDetails={data.contactDetails}></ContactUs>
                         </div>
+                        <a className="d-flex mt-2 justify-content-end text-decoration-none" target="_blank" href={import.meta.env.VITE_GOOGLE_MAP}>
+                            <i className="bi bi-geo-alt-fill"></i>
+                            {import.meta.env.VITE_LOCATION}
+                        </a>
                     </Header>
                     {/* <header className="d-flex justify-content-between align-items-center">
                         <h2>{data.name}</h2>
@@ -41,6 +46,9 @@ export default function Resume() {
                             <WorkHistory list={data.workHistory}></WorkHistory>
                         </GenericSummary>
                     </div>
+
+                    {/* <Link to="contact-us" state={data.contactDetails}>Write to us!</Link>
+                    <Outlet></Outlet> */}
                 </>
             }
         </main>

diff --git a/src/components/SocialMediaWidget.tsx b/src/components/SocialMediaWidget.tsx
@@ -7,7 +7,8 @@ const SocialMediaWidget = ({ mediaObjects }: { mediaObjects: SocialMediaModel[]
     const networkImageMap: Record<string, string> = {
         "linkedIn": "bi bi-linkedin linkedin-blue",
         "instagram": "bi bi-instagram",
-        "twitter": "bi bi-twitter"
+        "twitter": "bi bi-twitter",
+        "github": "bi bi-github"
     }
 
     const listItems = mediaObjects.map((item: SocialMediaModel) => (
@@ -18,7 +19,7 @@ const SocialMediaWidget = ({ mediaObjects }: { mediaObjects: SocialMediaModel[]
         </li>
     ))
     return (
-        <ul className="d-flex mx-3 my-0">
+        <ul className="d-flex gap-2 mx-3 my-0">
             {listItems}
         </ul>
     )

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,22 +1,37 @@
-import React from 'react'
+import React, { Suspense, lazy } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import './css/main.css';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import Loading from './components/Loading';
 // import ProfileForm from './components/ProfileForm';
-import ContactUsForm from './components/ContactUsForm';
+
+const ContactUs = lazy(() => import('./components/ContactUsForm'))
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <App />
-  }, 
-  {
-    path: 'contact-us',
-    element: <ContactUsForm />
+    children: [{
+      index: true,
+      path: '',
+      element: <App />,
+    }, {
+      path: 'contact-us',
+      element:
+        <Suspense fallback={<Loading />}>
+          <ContactUs></ContactUs>
+        </Suspense>
+    }]
   },
+  // {
+  //   path: 'contact-us',
+  //   element:
+  //     <Suspense fallback={<Loading />}>
+  //       <ContactUs></ContactUs>
+  //     </Suspense>
+  // },
   {
     path: '*',
     element: <App />
@@ -28,3 +43,4 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
     <RouterProvider router={router} />
   </React.StrictMode>,
 )
+