proposta mentors

hackupc · Apr 13, 2024 · 9e4b66c · 9e4b66c
1 parent 1cc3a46
commit 9e4b66c
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 46 deletions.
diff --git a/src/data/mentors.ts b/src/data/mentors.ts
@@ -2,26 +2,26 @@ export interface Mentor {
   readonly title: string
   readonly description: string
   readonly slack: string
-  readonly linkedin: string
+  readonly linkedin?: string
   readonly languages: string
   readonly webpage?: string
 }
 
 export const mentors: Mentor[] = [
-  /**{
+  {
     title: 'Maurici Abad Gutierrez',
-    description: `💼  Senior Frontend Engineer`,
+    description: `Senior Frontend Engineer`,
     slack: '@mauri',
     linkedin: 'https://www.linkedin.com/in/mauriciabad',
     languages: 'JavaScript, TypeScript, CSS, React, Vue, Next.js, Figma, Git',
     webpage: 'https://mauri.app/',
   },
   {
     title: 'Andrea Querol de Porras',
-    description: `💼  FPGA developer`,
+    description: `FPGA developer`,
     slack: '@drea',
     linkedin: 'https://linkedin.com/in/dreaqdp',
     languages:
       'C, C++, verilog and system verilog, FPGA shell development, RISC-V, Arduino, Raspberry, Linux, Vim, R, Git, MPI, OMP',
-  },**/
+  },
 ]
diff --git a/src/main.ts b/src/main.ts
@@ -22,6 +22,7 @@ import {
   faFileInvoiceDollar,
   faGavel,
   faGift,
+  faGlobe,
   faHome,
   faHourglassHalf,
   faHourglassStart,
@@ -90,7 +91,8 @@ library.add(
   faThumbsUp,
   faFileInvoiceDollar,
   faMoneyBillWave,
-  faEnvelope
+  faEnvelope,
+  faGlobe
 )
 
 const app = createApp(App)

diff --git a/src/views/Mentors.vue b/src/views/Mentors.vue
@@ -13,31 +13,25 @@ import PanelContainer from '@/components/PanelContainer.vue'
       Mentors are experts in various technologies and programming languages who
       can help you with:
       <ul>
-        <li>Issues with your code</li>
-        <li>Boosting up your project</li>
-        <li>Getting started with your project</li>
-        <li>Submitting it to Devpost</li>
+        <li>💣 Issues with your code</li>
+        <li>🚀 Boosting up your project</li>
+        <li>💻 Getting started with your project</li>
+        <li>🏆 Submitting it to Devpost</li>
       </ul>
     </Panel>
     <Panel title="Where to find them? Mentor lobby" size="small">
+      <IconLabel centered style="margin-bottom: 0.5rem">
+        <template #icon>
+          <FontAwesomeIcon class="link__icon" :icon="['fab', 'slack']" />
+        </template>
+        #help
+      </IconLabel>
       You can always find a mentor in the Mentors lobby, located at A5105 next
       to the Cafeteria.
       <br /><br />
       📍Check where to find it in the <a href="/map/indoors">Map</a>!
       <br /><br />
       Also you can ask for help through the help channel on Slack!
-      <IconLabel centered style="margin-top: 0.27rem">
-        <template #icon>
-          <FontAwesomeIcon class="link__icon" :icon="['fab', 'slack']" />
-        </template>
-        <a
-          href="https://hackupc2024.slack.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="icon-label-link"
-          >#help
-        </a>
-      </IconLabel>
     </Panel>
     <div class="mentorPan">
       <Panel title="How to recognize a Mentor" size="big">
@@ -54,40 +48,41 @@ import PanelContainer from '@/components/PanelContainer.vue'
         :key="mentor.title"
         :title="mentor.title"
       >
-        <IconLabel centered style="margin-top: 0.27rem">
+        <IconLabel centered style="margin-top: 0.27rem; margin-bottom: 1.5rem">
           <template #icon>
             <FontAwesomeIcon class="link__icon" :icon="['fab', 'slack']" />
           </template>
           <p class="icon-label-link">{{ mentor.slack }}</p>
         </IconLabel>
-        <p class="position">{{ mentor.description }}</p>
+        <p class="position">
+          <span style="margin-right: 8px">💼</span><strong>Working as:</strong>
+          {{ mentor.description }}
+        </p>
         <p class="position">{{ mentor.languages }}</p>
-        <div class="buttons">
-          <p class="position">
-            <a :href="mentor.linkedin">
-              <FontAwesomeIcon
-                class="link__icon"
-                :icon="['fab', 'twitter']"
-                size="3x"
-              />
-            </a>
-          </p>
-          <p v-if="mentor.webpage" class="position">
-            <a :href="mentor.webpage">
-              <FontAwesomeIcon
-                icon="home"
-                size="3x"
-                style="margin-right: 5px"
-              />
-            </a>
-          </p>
+        <div class="icons">
+          <a v-if="mentor.linkedin" :href="mentor.linkedin" class="icons__icon">
+            <FontAwesomeIcon
+              class="link__icon"
+              :icon="['fab', 'linkedin']"
+              size="3x"
+            />
+          </a>
+          <a v-if="mentor.webpage" :href="mentor.webpage" class="icons__icon">
+            <FontAwesomeIcon
+              class="link__icon"
+              :icon="['fa', 'globe']"
+              size="3x"
+            />
+          </a>
         </div>
       </Panel>
     </div>
   </PanelContainer>
 </template>
 
 <style lang="scss" scoped>
+@use '@/variables' as *;
+
 .mentorPan {
   display: flex;
   max-width: 1300px;
@@ -108,10 +103,23 @@ import PanelContainer from '@/components/PanelContainer.vue'
   margin-bottom: 16px;
 }
 
-.buttons {
+.icons {
   display: flex;
-  overflow: hidden;
-  margin-top: 0.75rem;
+  justify-content: center;
+  margin-top: 1.5rem;
   border-radius: 3px;
+
+  &__icon {
+    margin-right: 1rem;
+    color: $tertiary-light-color !important;
+
+    &:hover {
+      color: $links-color !important;
+    }
+
+    &:active {
+      color: $links-color-hover !important;
+    }
+  }
 }
 </style>