feat: added projects to project page

fix: fixed typographic errors fix: fixed paddings for certain breakpoints
MahoMuri · Aug 29, 2022 · 49dda11 · 49dda11
1 parent c86c293
commit 49dda11
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 24 deletions.
diff --git a/src/components/card-component.vue b/src/components/card-component.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card-item">
-    <img class="object-scale-down" :src="imageLink" alt="Project Logo" />
+    <img class="mx-auto object-fit" :src="imageLink" alt="Project Logo" />
     <div class="card-header">
       <div class="flex flex-row justify-between">
         {{ title }}

diff --git a/src/components/sections/about-section.vue b/src/components/sections/about-section.vue
@@ -17,8 +17,9 @@
           >.
           <br />
           <br />
-          I am really passionate with programming every since I set foot on our academy. I really learned a lot form our
-          professors ranging from industry standard design patterns to quality assessment methods. I've developed my
+          I am really passionate with programming ever since I set foot on our academy. I really learned a lot from my
+          professors ranging from industry standard design patterns to important quality assessment methods. I've
+          developed my
           <a href="https://typescriptlang.org" class="blue-highlight hover:underline" target="_blank">TypeScript</a> and
           <a href="http://vuejs.org" class="green-highlight hover:underline" target="_blank">VueJS</a> skills by
           self-studying during quarantine.
@@ -31,8 +32,8 @@
           <a class="green-highlight hover:underline" href="https://top.gg/bot/816152179101663312" target="_blank"
             >Curator</a
           >. A custom voice channel bot that creates fully-customizable voice and text channels for users to use. While
-          my <a href="http://vuejs.org" class="green-highlight hover:underline" target="_blank">VueJS</a> skills,
-          well... by making this website haha along with my final projects for school and our thesis paper.
+          my <a href="http://vuejs.org" class="green-highlight hover:underline" target="_blank">VueJS</a> skills, by
+          making this website/portfolio along with my final projects for school and our thesis paper.
         </p>
       </div>
       <div class="hidden xl:block border-l-neutral-700 border-l-[1px] h-96"></div>
@@ -46,6 +47,7 @@
 <style lang="scss" scoped>
 .about {
   @apply container mx-auto pt-12;
+  @apply sm:px-10 xl:px-0;
 }
 
 .header {

diff --git a/src/components/sections/contactme-section.vue b/src/components/sections/contactme-section.vue
@@ -20,7 +20,7 @@
 .contact {
   @apply flex flex-col justify-center text-center gap-5;
   @apply bg-mahomuri-black-100;
-  @apply p-10 lg:p-28;
+  @apply p-10 lg:p-28 xl:p-80;
 }
 
 .header {

diff --git a/src/components/sections/profile-section.vue b/src/components/sections/profile-section.vue
@@ -22,7 +22,7 @@
         </a>
       </div>
     </div>
-    <div class="mb-5">
+    <div class="sm:mb-5 md:mb-0">
       <img class="profile-img" src="../../assets/img/profile.png" alt="" />
     </div>
   </div>
@@ -35,7 +35,9 @@ import ButtonComponent from "../button-component.vue";
 
 <style lang="scss" scoped>
 .jumbotron {
-  @apply container mx-auto flex flex-col-reverse lg:flex-row items-center mt-5 xl:mt-44 mb-16 lg:mb-24 xl:mb-52 gap-5;
+  @apply container mx-auto flex flex-col-reverse lg:flex-row items-center;
+  @apply mt-5 xl:mt-44 mb-16 lg:mb-24 xl:mb-48 gap-5;
+  @apply sm:px-10 xl:px-0;
 }
 
 .profile {
@@ -49,7 +51,7 @@ import ButtonComponent from "../button-component.vue";
 }
 
 .buttons {
-  @apply flex flex-row gap-4 mt-5 xl:mt-0;
+  @apply flex flex-row gap-4 mt-5;
 }
 
 .profile-img {

diff --git a/src/components/sections/projects-section.vue b/src/components/sections/projects-section.vue
@@ -6,27 +6,28 @@
       <div class="cards">
         <CardComponent
           image-link="https://i.imgur.com/dzBZ1F6.png"
-          title="Pogi si Maho"
+          title="Curator"
           description="A Discord bot that creates and manages custom voice channels."
-          github="test"
-          website="test"
+          website="https://top.gg/bot/816152179101663312"
         />
         <CardComponent
-          image-link="https://i.imgur.com/dzBZ1F6.png"
-          title="Curator"
-          description="A Discord bot that creates and manages custom voice channels."
-          website="test"
+          image-link="https://i.imgur.com/bSWwoob.png"
+          title="Magic 8Ball"
+          description="An Android app built in Kotlin that demonstrates CRUD operations with FireBase."
+          github="https://github.com/MahoMuri/magic8ball"
         />
         <CardComponent
-          image-link="https://i.imgur.com/dzBZ1F6.png"
-          title="Curator"
-          description="A Discord bot that creates and manages custom voice channels."
-          github="test"
+          image-link="https://i.imgur.com/XjIZhMA.png"
+          title="JAMBot"
+          description="A very simple Discord Bot that streams/plays music to a voice channel."
+          github="https://github.com/MahoMuri/JAMBot-v2"
         />
         <CardComponent
-          image-link="https://i.imgur.com/dzBZ1F6.png"
-          title="Curator"
-          description="A Discord bot that creates and manages custom voice channels."
+          image-link="https://i.imgur.com/S7sYUKc.png"
+          title="My Portfolio"
+          description="A Vite + Vue3 website built to server as my portfolio. Uses TailwindCSS and TypeScript."
+          github="https://github.com/MahoMuri/portfolio"
+          website="https://mahomuri.vercel.app"
         />
       </div>
     </div>
@@ -39,7 +40,7 @@ import CardComponent from "../card-component.vue";
 
 <style lang="scss" scoped>
 .projects {
-  @apply bg-mahomuri-black-100 pt-12 px-10 lg:px-0;
+  @apply bg-mahomuri-black-100 pt-12 sm:px-10 xl:px-0;
 }
 
 .cards {