GH-78 Add modrith, spigot links (#78)

* Delete projects EternalRTP and EternalCheck because of no activity in repositories.

* Add links via media icons in project tab

* Update EternalCore description to match length with other projects. Change name CitralFlo to Michal Wojtas.

* Change link format from list items to buttons.

* GH-75 Update renovate.json for merge all incoming PR's to one (Resolve #75)

* GH-75 Update renovate.json for merge all incoming PR's to one (Resolve #75)

* Change link format from list items to buttons.

* Change logos for GitHub, Spigot, Modrinth to more minimalistic versions and adjust the design

* Fix responsives

* Delete glow effect on button hover and change width of border for buttons to 2px.

* Remove useless css tags and improve scalability of buttons

* Extend spacing between "Our projects" title and subtitle

* Delete border from buttons and add small glow effect. Change animation to ease-in-out on buttons (on and off hover)

* Move button with left margin to match starting point of lines above.

* Cleanup codestyle in project css

---------

Co-authored-by: Martin Sulikowski <[email protected]>

Author: CitralFlo

public/assets/img/projects/GitHub-logo-short.webp

@@ -19,3 +19,4 @@
   ],
   "separateMajorMinor": false
 }
+

public/assets/img/projects/modrinth-logo-short.webp

@@ -6,33 +6,21 @@
 
     <div class="row projects-row">
       <Project
-          description="♾️ All the most important server functions in one!"
+          description="♾️ All the most important server functions in one!️"
           githubUrl="https://github.com/EternalCodeTeam/EternalCore"
           imageUrl="/assets/img/projects/infinity.webp"
           name="EternalCore"
           :hrefText="$t('message.projects.more')"
       />
-      <Project
-          description="🎇 Simple plugin to check players!"
-          githubUrl="https://github.com/EternalCodeTeam/EternalCheck"
-          imageUrl="/assets/img/projects/fireworks.webp"
-          name="EternalCheck"
-          :hrefText="$t('message.projects.more')"
-      />
       <Project
           description="📝 The most intelligent chat formatting plugin with minimessages support!"
           githubUrl="https://github.com/EternalCodeTeam/ChatFormatter"
+          spigotUrl="https://www.spigotmc.org/resources/102212/"
+          modrinth-url="https://modrinth.com/plugin/chatformatter"
           imageUrl="/assets/img/projects/chat.webp"
           name="ChatFormatter"
           :hrefText="$t('message.projects.more')"
       />
-      <Project
-          description="🗺️ A random teleport plugin that doesn't give you a headache."
-          githubUrl="https://github.com/EternalCodeTeam/EternalRTP"
-          imageUrl="/assets/img/projects/treasure-map.webp"
-          name="EternalRTP"
-          :hrefText="$t('message.projects.more')"
-      />
       <Project
           description="⚔ Combat Logging system for Minecraft!"
           githubUrl="https://github.com/EternalCodeTeam/EternalCombatLog"
@@ -134,6 +122,7 @@ export default {
   color: #d3d3d380;
   font-size: 40px;
   border: 2px;
+  margin-bottom: 1%;
   text-align: center;
 }
 
@@ -182,4 +171,5 @@ export default {
   text-decoration: none;
   color: #a6abaf;
 }
+
 </style>

public/assets/img/projects/spigot-logo-short.webp

@@ -6,13 +6,42 @@
           <img :src="imageUrl" alt="512" class="img-fluid rounded"/>
         </div>
 
+
         <div class="col-lg-9">
-          <h5>{{ name }}</h5>
-          <h6>{{ description }}</h6>
-          <a :href="githubUrl" target="_blank">
-            <font-awesome-icon icon="fa-solid fa-arrow-right-long"/>
-            {{ hrefText }}
-          </a>
+          <div class="project-card">
+            <h5>{{ name }}</h5>
+            <h6>{{ description }}</h6>
+
+            <!-- GitHub Link -->
+            <ul class="src-buttons">
+              <li v-if="githubUrl">
+                <a :href="githubUrl" target="_blank">
+                  <button class="button-link">
+                    <img alt="githubUrl" src="/assets/img/projects/GitHub-logo-short.webp">
+                  </button>
+                </a>
+              </li>
+
+              <!-- Spigot Link -->
+              <li v-if="spigotUrl">
+                <a :href="spigotUrl" target="_blank">
+                  <button class="button-link">
+                    <img alt="spigotUrl" src="/assets/img/projects/spigot-logo-short.webp">
+                  </button>
+                </a>
+              </li>
+
+              <!-- Modrinth Link -->
+              <li v-if="modrinthUrl">
+                <a :href="modrinthUrl" target="_blank">
+                  <button class="button-link">
+                    <img alt="modrinthUrl" src="/assets/img/projects/modrinth-logo-short.webp">
+                  </button>
+                </a>
+              </li>
+            </ul>
+
+          </div>
         </div>
       </div>
     </div>
@@ -25,9 +54,82 @@ export default {
     name: String,
     description: String,
     githubUrl: String,
+    spigotUrl: String,
+    modrinthUrl: String,
     imageUrl: String,
-    hrefText: String
+    hrefText: String,
   },
 };
 </script>
 
+<style>
+
+@media only screen and (max-width: 1000px) {
+  .src-buttons {
+    width: 70%;
+    display: flex;
+    align-items: center;
+  }
+
+  .src-buttons li {
+    margin-right: 5px;
+  }
+
+  .button-link {
+    height: 40px;
+    width: 40px;
+  }
+
+  .src-buttons img {
+    margin-top: 5px;
+  }
+}
+
+.src-buttons {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  width: 50%;
+  margin-top: 15px;
+}
+
+.src-buttons li {
+  margin-right: 10px;
+}
+
+.src-buttons li:last-child {
+  margin-right: 0;
+}
+
+.src-buttons li:first-child {
+  margin-left: -10px;
+}
+.button-link {
+  border: none;
+  background-color: transparent;
+  height: 50px;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  transition: 0.3s ease-in-out;
+}
+
+.button-link:hover {
+  /* FOR GLOW EFFECT */
+  filter: drop-shadow(0 0 0.7rem rgb(115, 115, 115)) drop-shadow(0 0 0.7rem rgb(115, 115, 115));
+  color: #111;
+}
+
+.button-link:hover img {
+  filter: brightness(0) invert(0.75);
+}
+
+.src-buttons img {
+  filter: brightness(0) invert(0.50);
+  max-width: 50px;
+  max-height: 50px;
+  width: auto;
+}
+</style>

renovate.json

@@ -54,7 +54,7 @@
         <Member
             githubUrl="https://github.com/Embrejs"
             imageUrl="https://avatars.githubusercontent.com/u/80779749?v=4"
-            name="CitralFlo"
+            name="Michał Wojtas"
             role="Student"
         />
       </div>