Initial profile page design

next.config.js

@@ -8,7 +8,10 @@ const nextConfig = {
     defaultLocale: 'en',
   },
   images: {
-    domains: ['acmucsd.s3.us-west-1.amazonaws.com'],
+    domains: [
+      'acmucsd.s3.us-west-1.amazonaws.com',
+      'acmucsd-membership-portal.s3.us-west-1.amazonaws.com',
+    ],
   },
   poweredByHeader: false,
   trailingSlash: false,

src/pages/u/[handle].tsx

@@ -4,14 +4,52 @@ import withAccessType from '@/lib/hoc/withAccessType';
 import { CookieService, PermissionService } from '@/lib/services';
 import type { PublicProfile } from '@/lib/types/apiResponses';
 import { CookieType } from '@/lib/types/enums';
+import defaultProfilePicture from '@/public/assets/profile-pics/adorable0.png';
+import styles from '@/styles/pages/user-profile.module.scss';
+import Image from 'next/image';
 import type { GetServerSideProps } from 'next/types';
 
 interface UserProfilePageProps {
   user: PublicProfile;
 }
 
 const UserProfilePage = ({ user }: UserProfilePageProps) => {
-  return <pre>{JSON.stringify(user, null, 2)}</pre>;
+  return (
+    <div className={styles.profilePage}>
+      <div className={styles.cardWrapper}>
+        <div className={styles.banner} />
+        <div className={styles.profileCard}>
+          <div className={styles.cardHalf}>
+            <div className={styles.horizontal}>
+              <div className={styles.profilePic}>
+                <Image
+                  src={user.profilePicture ?? defaultProfilePicture}
+                  alt="Profile Picture"
+                  fill
+                />
+              </div>
+              <div style={{ marginLeft: '1rem' }}>
+                <h1>{`${user.firstName} ${user.lastName}`}</h1>
+                <h3>@{user.handle}</h3>
+                <h2>Rank Here</h2>
+              </div>
+            </div>
+            <div className={styles.iconBox}>icon icon icon icon</div>
+          </div>
+          <div className={styles.cardHalf}>
+            <h2>Points</h2>
+            <h2>Class of {user.graduationYear}</h2>
+            <h2>{user.major}</h2>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.about}>
+        <h1>About me</h1>
+        <p>{'' || <i>Nothing here...</i>}</p>
+      </div>
+    </div>
+  );
 };
 
 export default UserProfilePage;

src/styles/pages/u.module.scss.d.ts

@@ -0,0 +1,17 @@
+export type Styles = {
+  about: string;
+  banner: string;
+  cardHalf: string;
+  cardWrapper: string;
+  horizontal: string;
+  iconBox: string;
+  profileCard: string;
+  profilePage: string;
+  profilePic: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/styles/pages/user-profile.module.scss

@@ -0,0 +1,81 @@
+@use 'src/styles/vars.scss' as vars;
+
+.profilePage {
+  margin: auto;
+  max-width: vars.$breakpoint-md;
+  width: 100%;
+
+  .cardWrapper {
+    padding: 5rem 0 0;
+    position: relative;
+
+    .banner {
+      background-color: vars.$pink-2;
+      border-radius: 0.5rem;
+      height: 10rem;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    .profileCard {
+      background-color: var(--theme-background);
+      border-radius: 0.25rem;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+      display: flex;
+      margin: 0 2rem;
+      padding: 1rem 2rem;
+      position: relative;
+
+      h1 {
+        font-size: vars.$card-heading-1;
+      }
+
+      h2 {
+        font-size: vars.$card-heading-2;
+        font-weight: 500;
+        margin-top: 1rem;
+      }
+
+      h3 {
+        font-size: vars.$card-heading-3;
+        font-weight: 200;
+        margin-top: 0.5rem;
+      }
+
+      .cardHalf {
+        flex-grow: 1;
+      }
+
+      .profilePic {
+        border-radius: 4rem;
+        flex-shrink: 0;
+        height: 8rem;
+        overflow: hidden;
+        position: relative;
+        width: 8rem;
+      }
+
+      .iconBox {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+
+  .about {
+    border: 2px solid var(--theme-primary-1);
+    border-radius: 0.5rem;
+    margin-top: 1rem;
+    padding: 1rem;
+
+    h1 {
+      font-size: vars.$card-heading-1;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .horizontal {
+    display: flex;
+  }  
+}

src/styles/pages/user-profile.module.scss.d.ts

@@ -0,0 +1,17 @@
+export type Styles = {
+  about: string;
+  banner: string;
+  cardHalf: string;
+  cardWrapper: string;
+  horizontal: string;
+  iconBox: string;
+  profileCard: string;
+  profilePage: string;
+  profilePic: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;