Create basic profile

app/assets/stylesheets/abstracts/_variables.scss

@@ -1,2 +1,4 @@
 $shadow-light: 10px 0 rgba(0, 0, 0, 0.1);
 $border: 1px solid #000;
+
+$avatar-size: 3rem;

app/assets/stylesheets/layout/_footer.scss

@@ -6,20 +6,28 @@
   }
 
   a {
+    display: flex;
     margin: auto;
 
     i {
+      font-size: 2.5rem;
+
       @include themify {
         color: theme('color');
       }
     }
   }
 
-  .current-user {
-    border-radius: 50%;
-
-    @include themify {
-      background-color: theme('color');
+  .current-user {    
+    img {
+      border-radius: 50%;
+      height: $avatar-size;
+      width: $avatar-size;
+
+      @include themify {
+        border: 1px solid theme('color');
+      }
     }
+
   }
 }

app/assets/stylesheets/main.scss

@@ -20,4 +20,5 @@
   'components/posts';
 
 @import
-  'pages/feed';
+  'pages/feed',
+  'pages/profile';

app/assets/stylesheets/pages/_feed.scss

@@ -10,7 +10,7 @@
 }
 
 .histories {
-  height: 5rem;
+  height: $avatar-size + 2rem;
   margin: 1rem 1rem 0;
   overflow: auto;
 
@@ -19,17 +19,18 @@
   }
 }
 
-.histories .history{
-  border-radius: 50%;
-  border: $border;
+.histories .history {
   flex-direction: column;
-  margin: 0 4px;
-
+  height: $avatar-size;
+  margin: auto 4px;
+  width: $avatar-size;
+
   img {
-    height: 100%;
+    border-radius: 50%;
+
+    @include themify {
+      border: 1px solid theme('colorInverted');
+    }
   }
 
-  @include themify {
-    background-color: theme('color');
-  }
 }

app/assets/stylesheets/pages/_profile.scss

@@ -0,0 +1,95 @@
+.profile-header {
+  flex-direction: column;
+  padding: 1rem 0 0;
+
+  & > div:first-child {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__avatar {
+    border-radius: 50%;
+    padding-right: 1rem;
+
+    img {
+      border-radius: 50%;
+      height: $avatar-size * 2;
+      width: $avatar-size * 2;
+
+      @include themify {
+        border: 2px solid theme('colorInverted');
+      }
+    }
+  }
+
+  &__info {
+    flex-direction: column;
+
+    h2 {
+      font-size: 1.5rem;
+      padding: 4px 0;
+    }
+  }
+
+  .stats {
+    padding: 4px;
+
+    &__item {
+      flex-direction: column;
+      margin: auto;
+      text-align: center;
+    }
+  }
+
+  .actions {
+    justify-content: space-between;
+    padding: 4px 0;
+
+    button {
+      margin: 0.5rem 0;
+    }
+  }
+
+  .histories {
+    height: 4rem;
+    margin: 4px 1rem;
+  }
+}
+
+.profile-sections {
+  &__item {
+    width: 100%;
+
+    i {
+      margin: auto;
+    }
+
+    &.active, &:hover {
+      i {
+        @include themify {
+          color: theme('color');
+        }
+      }
+
+      @include themify {
+        background-color: theme('colorInverted');
+      }
+    }
+  }
+
+  span {
+    @include themify {
+      border-left: 1px solid theme('colorInverted');
+    }
+  }
+
+
+  @include themify {
+    border-bottom: 1px solid theme('colorInverted');
+    border-top: 1px solid theme('colorInverted');
+  }
+}
+
+.profile-main {
+  margin-bottom: auto;
+}

app/views/layouts/_footer.html.erb

@@ -12,6 +12,6 @@
     <i class="bi bi-heart-fill"></i>
   </a>
   <%= link_to posts_path, class: 'current-user' do %>
-    <%= image_tag('default-light.png', alt: 'Current User', style: 'width: 45px') %>
+    <%= image_tag('avatar-default.webp', alt: 'Current User') %>
   <% end %>
 </footer>

app/views/main/_histories.html.erb

@@ -1,7 +1,7 @@
 <div class="histories">
   <% (10).times do %>
     <div class="history">
-      <%= image_tag('default-light.png') %>
+      <%= image_tag('avatar-default.webp') %>
     </div>
   <% end %>
 </div>

app/views/posts/_cards.html.erb

@@ -6,7 +6,7 @@
       <div class="post">
         <div class="post-header">
           <div class="user">
-            <%= image_tag('default-light.png') %>
+            <%= image_tag('avatar-default.webp') %>
             <div>
               <h2>John Doe</h2>
               <p>1 hour ago</p>