Initial commit

haquanq · Jul 9, 2024 · f1c71bb · f1c71bb
commit f1c71bb
Show file tree

Hide file tree

Showing 18 changed files with 1,981 additions and 0 deletions.
diff --git a/.docs/design/desktop-design.jpg b/.docs/design/desktop-design.jpg
diff --git a/.docs/design/desktop-preview.jpg b/.docs/design/desktop-preview.jpg
diff --git a/.docs/design/mobile-design.jpg b/.docs/design/mobile-design.jpg
diff --git a/.docs/style-guide.md b/.docs/style-guide.md
@@ -0,0 +1,35 @@
+# Front-end Style Guide
+
+## Layout
+
+The designs were created to the following widths:
+
+- Mobile: 375px
+- Desktop: 1440px
+
+> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
+
+## Colors
+
+### Primary
+
+Dark cyan: hsl(185, 75%, 39%)
+Very dark desaturated blue: hsl(229, 23%, 23%)
+Dark grayish blue: hsl(227, 10%, 46%)
+
+### Neutral
+
+Dark gray: hsl(0, 0%, 59%)
+
+## Typography
+
+### Body Copy
+
+- Font size (name and stats): 18px
+
+### Font
+
+- Family: [Kumbh Sans](https://fonts.google.com/specimen/Kumbh+Sans)
+- Weights: 400, 700
+
+> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.
diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
@@ -0,0 +1,29 @@
+name: Deploy to github-pages
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./app"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.prettierrc.yml b/.prettierrc.yml
@@ -0,0 +1,5 @@
+printWidth: 100
+overrides:
+  - files: ["*.css"]
+    options:
+      tabWidth: 4
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Bui Quang Ha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+## Frontend Mentor - Profile card component solution
+
+This is a solution to the [Profile card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
+
+### The challenge
+
+- No access to design files, attempt pixel-perfect
+
+### Solution
+
+- Built with: `HTML` `CSS`
+- Mobile-first workflow
+
+![](./.docs/design/desktop-design.jpg)
+
+## Working in `fm-profile-card-component` repository
+
+### Clone this project to your machine
+
+Make sure you have Git installed in your system, open new terminal, run the following command:
+
+```
+git clone https://github.com/haquanq/fm-profile-card-component.git
+```
+
+Then, run `npm install` to install all dependencies.
+
+```
+npm install
+```
+
+### Development workflow
+
+In terminal, run `npm run dev` to start development server:
+
+```
+npm run dev
+```
diff --git a/app/assets/images/bg-pattern-bottom.svg b/app/assets/images/bg-pattern-bottom.svg
diff --git a/app/assets/images/bg-pattern-card.svg b/app/assets/images/bg-pattern-card.svg
diff --git a/app/assets/images/bg-pattern-top.svg b/app/assets/images/bg-pattern-top.svg
diff --git a/app/assets/images/favicon-32x32.png b/app/assets/images/favicon-32x32.png
diff --git a/app/assets/images/image-victor.jpg b/app/assets/images/image-victor.jpg
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- displays site properly based on user's device -->
+
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png" />
+    <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=Kumbh+Sans:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./main.css" />
+
+    <title>Frontend Mentor | Profile card component</title>
+  </head>
+  <body>
+    <main class="main__container">
+      <img
+        class="main__container--pattern-top"
+        src="./assets/images/bg-pattern-top.svg"
+        alt="Background top pattern"
+      />
+      <img
+        class="main__container--pattern-bottom"
+        src="./assets/images/bg-pattern-bottom.svg"
+        alt="Background bottom pattern"
+      />
+      <h1>Profile card component</h1>
+      <div class="profile">
+        <img
+          class="profile__image"
+          src="./assets/images/bg-pattern-card.svg"
+          alt="Background card image"
+        />
+        <div class="profile__content">
+          <img
+            class="profile__avatar"
+            src="./assets/images/image-victor.jpg"
+            alt="Victor Crest avatar"
+          />
+          <div class="profile__person">
+            <h2 class="profile__person__name">Victor Crest</h2>
+            <p class="profile__person__age">26</p>
+          </div>
+          <p class="profile__from">London</p>
+          <ul class="profile__social__list">
+            <li class="profile__social__item">
+              <p class="profile__social__item--stat">80k</p>
+              <p class="profile__social__item--description">Followers</p>
+            </li>
+            <li class="profile__social__item">
+              <p class="profile__social__item--stat">803k</p>
+              <p class="profile__social__item--description">Likes</p>
+            </li>
+            <li class="profile__social__item">
+              <p class="profile__social__item--stat">1.4k</p>
+              <p class="profile__social__item--description">Photos</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/app/main.css b/app/main.css
@@ -0,0 +1,137 @@
+:root {
+    --clr-cyan-500: hsl(185, 75%, 39%);
+    --clr-blue-300: hsl(229, 23%, 23%);
+    --clr-blue-100: hsl(227, 10%, 46%);
+    --clr-gray-300: hsl(0, 0%, 59%);
+    --clr-gray-100: #e7e7e7;
+    --clr-white: #fff;
+
+    --font-sans: "Kumbh Sans", sans-serif;
+    --font-normal: 400;
+    --font-bold: 700;
+}
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+body {
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    overflow-wrap: break-word;
+}
+
+.main__container {
+    position: relative;
+    min-height: 100vh;
+    padding-top: clamp(9.1875rem, 8vw + 4rem, 10.8125rem);
+    padding-bottom: clamp(9.125rem, 8vw + 4rem, 10.8125rem);
+    background-color: var(--clr-cyan-500);
+    font-family: var(--font-sans);
+    overflow: hidden;
+}
+
+.main__container--pattern-top {
+    pointer-events: none;
+    position: absolute;
+    top: -31.875rem;
+    left: -17.8125rem;
+    z-index: 1;
+}
+.main__container--pattern-bottom {
+    pointer-events: none;
+    bottom: -39.375rem;
+    right: -14.5625rem;
+    position: absolute;
+    z-index: 1;
+}
+
+.main__container h1 {
+    position: absolute;
+    opacity: 0;
+}
+
+.profile {
+    position: relative;
+    overflow: hidden;
+    z-index: 999;
+    border-radius: 0.875rem;
+    background-color: var(--clr-white);
+    color: var(--clr-blue-100);
+    margin: 0 auto;
+    width: min(100vw - 3.125rem, 21.875rem);
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset,
+        rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+}
+
+.profile__image {
+    height: 8.75rem;
+    object-fit: cover;
+}
+
+.profile__avatar {
+    width: 6.625rem;
+    height: 6.625rem;
+    border-radius: 9999px;
+    border: 5px solid var(--clr-white);
+    margin-top: -3.4375rem;
+    margin-bottom: 1.3125rem;
+}
+
+.profile__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.profile__person {
+    display: flex;
+    align-items: center;
+    font-size: 1.125rem;
+    margin-bottom: 0.8125rem;
+}
+.profile__person__name {
+    color: var(--clr-blue-300);
+    font-size: 1.125rem;
+    margin-right: 0.5625rem;
+}
+.profile__from {
+    margin-bottom: 1.625rem;
+    font-size: 0.875rem;
+}
+
+.profile__social__list {
+    width: 100%;
+    padding: 1.625rem 1.625rem;
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    border-top: 1px solid var(--clr-gray-100);
+    text-align: center;
+}
+.profile__social__item:first-child {
+    margin-right: -1px;
+}
+
+.profile__social__item--stat {
+    font-size: 1.125rem;
+    font-weight: var(--font-bold);
+    color: var(--clr-blue-300);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    margin-bottom: 0.5rem;
+}
+
+.profile__social__item--description {
+    font-size: 0.625rem;
+    letter-spacing: 0.15em;
+}