start of lazy loading

code/frontend/src/pages/Profile.tsx

@@ -0,0 +1,104 @@
+import "./profile.css";
+import "../components/bio.css";
+import "./loginAndSignUpPage.css";
+import "../styles/sizes.css";
+import "../styles/colors.css";
+import "../styles/fonts.css";
+import { useState } from "react";
+import Avatar from "@mui/material/Avatar";
+import QuiltedImageList from "../components/QuiltedImageList";
+import TextField from "@mui/material/TextField";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import {
+  Box,
+  StyledEngineProvider,
+  createTheme,
+  ThemeProvider,
+  Divider,
+  Button,
+} from "@mui/material";
+import Bio from "../components/Bio";
+
+function Profile() {
+  const toggleEditMode = (event: React.MouseEvent<HTMLElement>) => {
+    isEditable(!editMode);
+  };
+  const [editMode, isEditable] = useState(true);
+
+  const theme = createTheme({
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 768,
+        md: 650,
+        lg: 768,
+        xl: 1200,
+      },
+    },
+  });
+  const matchDownMd = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <div className="profile-display">
+          <div className="user-info">
+            <div className="user">
+              <Avatar
+                alt="Username"
+                src="./assets/images/OwlSignUp.png"
+                className="profile-avatar"
+              >
+                U
+              </Avatar>
+              <span className="profile-username body-l">Username</span>
+            </div>
+            <div>
+              <Box
+                component="form"
+                sx={{
+                  "& .MuiTextField-root": {
+                    m: 1,
+                    width: "30ch",
+                    maxWidth: "100%",
+                  },
+                }}
+                noValidate
+                autoComplete="off"
+              >
+                <TextField
+                  className="bio-input"
+                  id="outlined-multiline-flexible"
+                  label="✎ Bio"
+                  multiline
+                  maxRows={4}
+                  disabled={editMode}
+                  onClick={editMode ? toggleEditMode :  undefined}
+                />
+              </Box>
+              {!editMode && <Button variant="contained" className="button" onClick={toggleEditMode}>Ok</Button>}
+            </div>
+            <Divider variant="middle" className="divider"/>
+            <div className="numeral-data">
+              <div className="data">
+                <span aria-label="current-post-number">50</span>
+                <span className="data-label title-h1">Posts</span>
+              </div>
+              <div className="data">
+                <span aria-label="current-follower-number">100</span>
+                <span className="data-label title-h1">Followers</span>
+              </div>
+              <div className="data">
+                <span aria-label="current-following-number">50</span>
+                <span className="data-label title-h1">Following</span>
+              </div>
+            </div>
+          </div>
+          <QuiltedImageList />
+        </div>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+export default Profile;

code/frontend/src/pages/profile.css

@@ -0,0 +1,109 @@
+.profile-display {
+  padding-top: var(--Header-hight);
+  flex-direction: column;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+    border-radius: 1rem;
+    background-color: hsla(244, 70%, 13%, 0.71);
+    backdrop-filter: blur(8px);
+    margin-top: calc(var(--Header-height) + 1rem);
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+.user {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    gap: 20px;
+    margin: 2rem;
+    border-radius: 1rem;
+  }
+
+  .numeral-data {
+    display: flex;
+    flex-direction: row;
+    font-size: 18px;
+    font-weight: 500;   
+    color: var(--Rotkehlchen-gray);
+    border-radius: 1rem;
+  }
+
+  .data {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem;
+  }
+
+  .profile-avatar {
+    width: 40px;
+    height: 40px;
+    background-color: aqua;
+  }
+
+  .profile-username {
+    font-weight: 700;
+    color: var(--Rotkehlchen-orange-default);
+  }
+
+  .button {
+    margin-bottom: 0.5rem;
+  }
+
+  .divider {
+    border-color: var(--Rotkehlchen-orange-default);
+  }
+
+@media screen and (min-width: 768px) {
+.profile-display {
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: baseline;
+    padding-top: 1rem;
+}
+
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    margin-left: 2rem;
+    border-radius: 1rem;
+    background-color: hsla(244, 70%, 13%, 0.71);
+    align-self: top;
+    padding-bottom: 1rem;
+  }
+
+  .user {
+    width: fit-content;
+    padding-left: 1rem;
+    padding-right: 3rem;
+  }
+
+  .numeral-data {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2rem;
+    font-weight: 700;
+    font-size: 2rem;
+  }
+
+  .data-label {
+    padding-top: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  .data {
+    display: flex;
+    flex-direction: column;
+    margin: 1rem;
+  }
+
+  .profile-avatar {
+    width: 5rem;
+    height: 5rem;
+    background-color: aqua;
+  }
+}