diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 3e212e1..597d689 100644 --- 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 index 0c589ec..3f5e1e8 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,16 @@ - + + + + - Vite + React + Wave
diff --git a/src/App.jsx b/src/App.jsx index b8b8473..35e8108 100644 --- 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 ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ - ) + ); } -export default App +export default App; diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/ProfileInfo.jsx b/src/components/ProfileInfo.jsx new file mode 100644 index 0000000..dd83ebe --- /dev/null +++ b/src/components/ProfileInfo.jsx @@ -0,0 +1,10 @@ +import styles from "./ProfileInfo.module.css"; + +export const ProfileInfo = ({ icon, text }) => { + return ( +
+
{icon}
+ {text} +
+ ); +}; diff --git a/src/components/ProfileInfo.module.css b/src/components/ProfileInfo.module.css new file mode 100644 index 0000000..5277bcb --- /dev/null +++ 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 new file mode 100644 index 0000000..f4f90bc --- /dev/null +++ b/src/components/ProfileTextContent.jsx @@ -0,0 +1,10 @@ +import styles from "./ProfileTextContent.module.css"; + +export const ProfileTextContent = ({ heading, content }) => { + return ( +
+

{heading}

+

{content}

+
+ ); +}; diff --git a/src/components/ProfileTextContent.module.css b/src/components/ProfileTextContent.module.css new file mode 100644 index 0000000..ac4828a --- /dev/null +++ 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 new file mode 100644 index 0000000..3230322 --- /dev/null +++ b/src/components/icons/CakeIcon.jsx @@ -0,0 +1,23 @@ +export const CakeIcon = () => { + return ( + + + + + + + + + + + ); +}; diff --git a/src/components/icons/EmailIcon.jsx b/src/components/icons/EmailIcon.jsx new file mode 100644 index 0000000..91bc863 --- /dev/null +++ b/src/components/icons/EmailIcon.jsx @@ -0,0 +1,18 @@ +export const EmailIcon = () => { + return ( + + + + ); +}; diff --git a/src/components/icons/LocationIcon.jsx b/src/components/icons/LocationIcon.jsx new file mode 100644 index 0000000..20916a7 --- /dev/null +++ b/src/components/icons/LocationIcon.jsx @@ -0,0 +1,18 @@ +export const LocationIcon = () => { + return ( + + + + ); +}; diff --git a/src/components/icons/UserIcon.jsx b/src/components/icons/UserIcon.jsx new file mode 100644 index 0000000..d2c55c1 --- /dev/null +++ b/src/components/icons/UserIcon.jsx @@ -0,0 +1,23 @@ +export const UserIcon = () => { + return ( + + + + + + + + + + + ); +}; diff --git a/src/components/icons/index.js b/src/components/icons/index.js new file mode 100644 index 0000000..f255b59 --- /dev/null +++ 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" \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..d195c40 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,2 @@ +export { ProfileInfo } from "./ProfileInfo" +export { ProfileTextContent } from "./ProfileTextContent" \ No newline at end of file diff --git a/src/index.css b/src/index.css index 6119ad9..e8cb2dd 100644 --- 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 new file mode 100644 index 0000000..5b75cbd --- /dev/null +++ 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 ( +
+
+ profile banner +
+
+ profile picture + Geet Sethi +
+ + +
+
+ +
+
+ + +
+ + +
+
+
+
+ ); +}; diff --git a/src/pages/ProfilePage.module.css b/src/pages/ProfilePage.module.css new file mode 100644 index 0000000..3c2f214 --- /dev/null +++ b/src/pages/ProfilePage.module.css @@ -0,0 +1,61 @@ +.banner > img { + max-height: 30vh; + width: 100%; + object-fit: cover; +} + +.bannerInfo { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 4rem; + padding-right: 2rem; +} + +.bannerInfo > div { + display: flex; + align-items: center; + gap: 1rem; +} + +.bannerInfo > div > span { + font-size: 2rem; +} + +.bannerInfo > button { + padding: 0.5rem 1rem; + border-radius: 100px; + border: 1px solid var(--clr-border); + background: white; + font-weight: 600; +} + +.profilePicture { + width: 10rem; + height: 10rem; + border-radius: 100%; + margin-top: -5rem; + object-fit: cover; +} + +.content { + margin-top: 2rem; + background: var(--clr-bg-alt); + padding: 1rem; +} +.content > div { + background: var(--clr-bg); + border-radius: 1rem; + padding: 2rem; + + display: grid; + grid-template-columns: 1fr 3fr; + gap: 4rem; +} + +.profileInfo { + color: var(--clr-accent); +} +.profileInfo > span { + font-size: 1.15rem; +} diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..631ec0a --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1 @@ +export { ProfilePage } from "./ProfilePage" \ No newline at end of file