psychnerd25 · sethigeet · Mar 6, 2024 · Mar 6, 2024 · Mar 6, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -17,5 +17,6 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
+    'react/prop-types': 'off',
   },
 }
diff --git a/index.html b/index.html
@@ -1,10 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Comfortaa:[email protected]&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Wave</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,35 +1,11 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { ProfilePage } from "./pages";
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      <ProfilePage />
     </>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/ProfileInfo.jsx b/src/components/ProfileInfo.jsx
@@ -0,0 +1,10 @@
+import styles from "./ProfileInfo.module.css";
+
+export const ProfileInfo = ({ icon, text }) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.icon}>{icon}</div>
+      <span className={styles.text}>{text}</span>
+    </div>
+  );
+};
diff --git a/src/components/ProfileInfo.module.css b/src/components/ProfileInfo.module.css
@@ -0,0 +1,16 @@
+.container {
+  margin: 1rem 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 0.5px solid var(--clr-border-alt);
+}
+
+.icon {
+  font-size: 2rem;
+  color: var(--clr-primary);
+}
+
+.text {
+  color: var(--clr-accent);
+}
diff --git a/src/components/ProfileTextContent.jsx b/src/components/ProfileTextContent.jsx
@@ -0,0 +1,10 @@
+import styles from "./ProfileTextContent.module.css";
+
+export const ProfileTextContent = ({ heading, content }) => {
+  return (
+    <div className={styles.container}>
+      <h2>{heading}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
diff --git a/src/components/ProfileTextContent.module.css b/src/components/ProfileTextContent.module.css
@@ -0,0 +1,18 @@
+.container {
+  margin-top: 2rem;
+}
+
+.container:nth-child(1) {
+  margin-top: 0;
+}
+
+.container > h2 {
+  margin-bottom: 1rem;
+  border-bottom: 0.5px solid var(--clr-border);
+  width: fit-content;
+}
+
+.container > p {
+  margin-top: 1rem;
+  color: var(--clr-fg-alt);
+}
diff --git a/src/components/icons/CakeIcon.jsx b/src/components/icons/CakeIcon.jsx
@@ -0,0 +1,23 @@
+export const CakeIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2133_605)">
+        <path
+          d="M12 6C13.11 6 14 5.1 14 4C14 3.62 13.9 3.27 13.71 2.97L12 0L10.29 2.97C10.1 3.27 10 3.62 10 4C10 5.1 10.9 6 12 6ZM16.6 15.99L15.53 14.92L14.45 15.99C13.15 17.29 10.87 17.3 9.56 15.99L8.49 14.92L7.4 15.99C6.75 16.64 5.88 17 4.96 17C4.23 17 3.56 16.77 3 16.39V21C3 21.55 3.45 22 4 22H20C20.55 22 21 21.55 21 21V16.39C20.44 16.77 19.77 17 19.04 17C18.12 17 17.25 16.64 16.6 15.99ZM18 9H13V7H11V9H6C4.34 9 3 10.34 3 12V13.54C3 14.62 3.88 15.5 4.96 15.5C5.48 15.5 5.98 15.3 6.34 14.93L8.48 12.8L10.61 14.93C11.35 15.67 12.64 15.67 13.38 14.93L15.52 12.8L17.65 14.93C18.02 15.3 18.51 15.5 19.03 15.5C20.11 15.5 20.99 14.62 20.99 13.54V12C21 10.34 19.66 9 18 9Z"
+          fill="#FF5D84"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2133_605">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/src/components/icons/EmailIcon.jsx b/src/components/icons/EmailIcon.jsx
@@ -0,0 +1,18 @@
+export const EmailIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="15"
+      viewBox="0 0 16 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.9512 0C13.024 0 14.056 0.441667 14.8152 1.23417C15.5752 2.025 16 3.09167 16 4.20833V10.7917C16 13.1167 14.184 15 11.9512 15H4.048C1.8152 15 0 13.1167 0 10.7917V4.20833C0 1.88333 1.8072 0 4.048 0H11.9512ZM13.224 5.44987L13.288 5.3832C13.4792 5.14153 13.4792 4.79153 13.2792 4.54987C13.168 4.4257 13.0152 4.34987 12.856 4.3332C12.688 4.32403 12.528 4.3832 12.4072 4.49987L8.79999 7.49987C8.33599 7.9007 7.67119 7.9007 7.19999 7.49987L3.59999 4.49987C3.35119 4.3082 3.00719 4.3332 2.79999 4.5582C2.58399 4.7832 2.55999 5.14153 2.74319 5.39153L2.84799 5.49987L6.48799 8.4582C6.93599 8.82487 7.47919 9.02487 8.04799 9.02487C8.61519 9.02487 9.16799 8.82487 9.61519 8.4582L13.224 5.44987Z"
+        fill="#FF5D84"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/LocationIcon.jsx b/src/components/icons/LocationIcon.jsx
@@ -0,0 +1,18 @@
+export const LocationIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="17"
+      viewBox="0 0 14 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 7.07009C0 3.16021 3.16555 0 6.9946 0C10.8344 0 14 3.16021 14 7.07009C14 9.04034 13.3058 10.8695 12.1631 12.4198C10.9025 14.13 9.34883 15.62 7.59998 16.7896C7.19972 17.0599 6.83848 17.0803 6.39919 16.7896C4.64037 15.62 3.08666 14.13 1.83688 12.4198C0.693398 10.8695 0 9.04034 0 7.07009ZM4.68945 7.29019C4.68945 8.6 5.72498 9.63017 6.99469 9.63017C8.26523 9.63017 9.31072 8.6 9.31072 7.29019C9.31072 5.99058 8.26523 4.91026 6.99469 4.91026C5.72498 4.91026 4.68945 5.99058 4.68945 7.29019Z"
+        fill="#FF5D84"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/icons/UserIcon.jsx b/src/components/icons/UserIcon.jsx
@@ -0,0 +1,23 @@
+export const UserIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_2133_616)">
+        <path
+          d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z"
+          fill="#FF5D84"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2133_616">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -0,0 +1,4 @@
+export { CakeIcon } from "./CakeIcon"
+export { EmailIcon } from "./EmailIcon"
+export { LocationIcon } from "./LocationIcon"
+export { UserIcon } from "./UserIcon"
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,2 @@
+export { ProfileInfo } from "./ProfileInfo"
+export { ProfileTextContent } from "./ProfileTextContent"
diff --git a/src/index.css b/src/index.css
@@ -1,68 +1,17 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+* {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Comfortaa", "Times New Roman", Times, serif;
 }
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+:root {
+  --clr-primary: rgb(255, 93, 132);
+  --clr-bg: rgb(255, 255, 255);
+  --clr-bg-alt: rgb(240, 240, 240);
+  --clr-border: rgba(0, 0, 0, 0.4);
+  --clr-border-alt: rgba(3, 2, 41, 0.2);
+  --clr-accent: rgb(73, 0, 87);
+  --clr-fg: rgb(0, 0, 0);
+  --clr-fg-alt: rgba(45, 27, 49, 0.77);
 }
diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
@@ -0,0 +1,56 @@
+import { ProfileInfo, ProfileTextContent } from "../components";
+import {
+  CakeIcon,
+  EmailIcon,
+  LocationIcon,
+  UserIcon,
+} from "../components/icons";
+import styles from "./ProfilePage.module.css";
+
+export const ProfilePage = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.banner}>
+        <img
+          src="https://images.unsplash.com/photo-1522543558187-768b6df7c25c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="profile banner"
+        />
+        <div className={styles.bannerInfo}>
+          <div>
+            <img
+              src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              alt="profile picture"
+              className={styles.profilePicture}
+            />
+            <span>Geet Sethi</span>
+          </div>
+
+          <button>Edit Profile</button>
+        </div>
+      </div>
+
+      <main className={styles.content}>
+        <div>
+          <aside className={styles.profileInfo}>
+            <span>BTech in Mechanical Engg. at IIT Bombay</span>
+            <ProfileInfo icon={<UserIcon />} text="Male" />
+            <ProfileInfo icon={<CakeIcon />} text="June 26, 1980" />
+            <ProfileInfo icon={<EmailIcon />} text="[email protected]" />
+            <ProfileInfo icon={<LocationIcon />} text="Bandra (W), Mumbai" />
+          </aside>
+
+          <div>
+            <ProfileTextContent
+              heading="About Me"
+              content="Hey there! I'm Abhishek, a BTech student studying at IITB. Passionate about Football and movies, I'm always on the lookout for new adventures and meaningful connections with fellow students. Whether it's diving into coding projects, exploring the latest tech trends, or unwinding with a good book, I'm eager to share experiences!!"
+            />
+            <ProfileTextContent
+              heading="I'm lookin for..."
+              content="expanding my social circle and meet new friends with whom I can hang out, attend campus events, or explore the local area."
+            />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,5 +17,6 @@ module.exports = { @@
           'warn',
           { allowConstantExport: true },
         ],
+        'react/prop-types': 'off',
       },
     }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { ProfileInfo } from "./ProfileInfo"
		export { ProfileTextContent } from "./ProfileTextContent"