feat: shimmer background for images

.eslintrc.json

@@ -16,6 +16,7 @@
         "sourceType": "module",
         "project": ["tsconfig.json"]
     },
+    "ignorePatterns": ["**/*.js"],
     "plugins": ["@typescript-eslint"],
     "rules": {
         "@typescript-eslint/explicit-function-return-type": "off",

README.md

@@ -2,10 +2,12 @@
 
 Github Pages under my personal domain (https://giwoolee.com)
 
-# How to start
+# Performance metrics
 
-1. Open the `dev` branch
-2. `npm start`
+w/ `create-react-app`
+
+-   Memory footprint 49.5 MB
+-   CPU: 0.1%
 
 # Author
 

package.json

@@ -3,6 +3,9 @@
     "version": "2.0.0",
     "private": true,
     "dependencies": {
+        "@babel/preset-env": "^7.22.20",
+        "@babel/preset-react": "^7.22.15",
+        "@babel/register": "^7.22.15",
         "@emotion/react": "^11.7.1",
         "@emotion/styled": "^11.6.0",
         "@mui/icons-material": "^5.3.0",
@@ -14,6 +17,8 @@
         "@types/react": "^18.2.20",
         "@types/react-dom": "^18.2.7",
         "bootstrap": "^4.6.1",
+        "express": "^4.18.2",
+        "ignore-styles": "^5.0.1",
         "moment": "^2.29.4",
         "ramda": "^0.26.1",
         "react": "^18.2.0",

src/App.css

@@ -1,86 +1,75 @@
-.App {
-  background-size: cover;
-  background-position: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  text-align: center;
-  /* transition: all 2s ease-in-out; */
-  /* animation: fadeIn 1s ease-in-out forwards; */
-}
-
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
+    from {
+        opacity: 0;
+    }
 
-  to {
-    opacity: 0.9;
-  }
+    to {
+        opacity: 0.9;
+    }
 }
 
 .show {
-  display: block;
+    display: block;
 }
 
 .modal-dialog {
-  margin: 0;
-  max-width: inherit;
-  height: 100%;
+    margin: 0;
+    max-width: inherit;
+    height: 100%;
 }
 
 .modal-content {
-  background: rgba(0, 0, 0, 0.8);
-  color: #fff;
-  height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    height: 100%;
 }
 
 .modal-inner {
-  margin: 1.75rem auto;
-  max-width: 500px;
-  position: relative;
-  width: auto;
+    margin: 1.75rem auto;
+    max-width: 500px;
+    position: relative;
+    width: auto;
 }
 
 .images-container {
-  display: flex;
-  flex-direction: row;
-  overflow: scroll;
+    display: flex;
+    flex-direction: row;
+    overflow: scroll;
 }
 
 .modal-image {
-  max-height: 300px;
-  margin-right: 20px;
+    max-height: 300px;
+    margin-right: 20px;
 }
 
 .title-wrapper {
-  display: flex;
-  justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
 }
 
 .title-wrapper .heading {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .modal-primary-logo {
-  max-height: 50px;
+    max-height: 50px;
 }
 
 .wrapper {
-  margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 .sub-title {
-  font-weight: bold;
-  margin-bottom: 15px;
-  text-align: left;
-  text-transform: uppercase;
-  letter-spacing: 0.2rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+    text-align: left;
+    text-transform: uppercase;
+    letter-spacing: 0.2rem;
 }
 
 .text-content {
-  margin-top: 15px;
-  text-align: left;
+    margin-top: 15px;
+    text-align: left;
 }
 
 /**
@@ -90,21 +79,21 @@
 
 /* width */
 ::-webkit-scrollbar {
-  width: 5px;
+    width: 5px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
-  background: var(--white);
+    background: var(--white);
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  border-radius: 50px;
-  background: #888;
+    border-radius: 50px;
+    background: #888;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #555;
+    background: #555;
 }

src/App.tsx

@@ -1,30 +1,20 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
 import './App.css'
 import './Theme.css'
 
-// Images
-import backgrounds from 'shared/backgrounds'
+import NotFound from './pages/NotFound'
 
-// Pages
-import Home from './pages/Home'
+// Router
+import { Routes, Route } from 'react-router-dom'
+import Home from 'pages/Home'
 
-class App extends PureComponent {
-    state = {
-        bg: 'bg1',
-    }
-
-    render() {
-        return (
-            <div
-                className="App"
-                style={{
-                    backgroundImage: `url(${backgrounds[this.state.bg]})`,
-                }}
-            >
-                <Home />
-            </div>
-        )
-    }
+const App = () => {
+    return (
+        <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="*" element={<NotFound />} />
+        </Routes>
+    )
 }
 
 export default App

src/index.tsx

@@ -3,28 +3,22 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import './styles.default.css'
 import App from './App'
-import NotFound from './pages/NotFound'
 import * as serviceWorker from './serviceWorker'
-
-// Router
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
-
+import { BrowserRouter } from 'react-router-dom'
 // Store Setup
 import { Provider } from 'react-redux'
 import store from './store'
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
-
 root.render(
-    <Provider store={store}>
-        <BrowserRouter>
-            <Routes>
-                <Route path="/" element={<App />} />
-                <Route element={<NotFound />} />
-            </Routes>
-        </BrowserRouter>
-    </Provider>
+    <React.StrictMode>
+        <Provider store={store}>
+            <BrowserRouter>
+                <App />
+            </BrowserRouter>
+        </Provider>
+    </React.StrictMode>
 )
 
 // If you want your app to work offline and load faster, you can change

src/modules/preferences/components/Mission/mission.css

@@ -1,64 +1,60 @@
 .mission-container {
-  font-size: 12px;
+    font-size: 12px;
 }
 
 .mission-item {
-  color: var(--light-gray);
-  display: block;
-  margin-bottom: 20px;
-  text-align: left;
-}
-
-.mission-item a {
-  color: #007bff;
+    color: var(--light-gray);
+    display: block;
+    margin-bottom: 20px;
+    text-align: left;
 }
 
 .mission-button-container {
-  align-items: flex-end;
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 20px;
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 20px;
 }
 
 .mission-button-container div {
-  background-color: var(--white);
-  border: 1px solid var(--dark-gray);
-  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
-  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
-  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
-  cursor: pointer;
-  font-weight: bold;
-  margin-right: 10px;
-  padding: 5px;
+    background-color: var(--white);
+    border: 1px solid var(--dark-gray);
+    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
+    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
+    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
+    cursor: pointer;
+    font-weight: bold;
+    margin-right: 10px;
+    padding: 5px;
 }
 
 .mission-quote {
-  background-color: var(--gray);
-  display: block;
-  font-style: italic;
-  text-indent: 15px;
+    background-color: var(--gray);
+    display: block;
+    font-style: italic;
+    text-indent: 15px;
 }
 
 .mission-button-container div.active {
-  background-color: var(--light-gray);
+    background-color: var(--light-gray);
 }
 
 .mission-button-container div img {
-  height: 20px;
+    height: 20px;
 }
 
 .mission-font-size-small {
-  font-size: 14px;
+    font-size: 14px;
 }
 
 .mission-font-size-medium {
-  font-size: 16px;
+    font-size: 16px;
 }
 
 .mission-font-size-large {
-  font-size: 18px;
+    font-size: 18px;
 }
 
 .mission-font-size-extra-large {
-  font-size: 24px;
+    font-size: 24px;
 }