feat: change resume portfilo image to iconSVG

17px · Nov 3, 2023 · 12803e3 · 12803e3
1 parent 85304a8
commit 12803e3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 48 deletions.
diff --git a/apps/dockyard/src/modules/resume/index.ejs b/apps/dockyard/src/modules/resume/index.ejs
@@ -192,15 +192,8 @@
           <% page.portfolio.forEach(function(item) { %>
           <a href="<%= item.link %>" class="card">
             <div class="card-content">
-              <div class="card-image" style="background-image: url('<%= item.cover %>');">
-                <span>
-                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
-                    <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <circle cx="12" cy="12" r="2"></circle>
-                      <path d="M22 12c-2.667 4.667-6 7-10 7s-7.333-2.333-10-7c2.667-4.667 6-7 10-7s7.333 2.333 10 7"></path>
-                    </g>
-                  </svg>
-                </span>
+              <div class="card-image">
+                <h2><%- item.iconSVG %></h2>
               </div>
               <div class="card-info-wrapper">
                 <div class="card-info">

diff --git a/apps/dockyard/src/modules/resume/index.less b/apps/dockyard/src/modules/resume/index.less
@@ -336,42 +336,11 @@ main {
       .portfolio {
         .magic-cards {
           .card {
-            &:hover {
-              .card-image {
-                background-size: 120% 120%;
-
-                >span {
-
-                  opacity: .5;
-                  visibility: inherit;
-                }
-              }
-            }
-
             .card-image {
-              background-size: 100% 100%;
-              background-repeat: no-repeat;
-              background-position: center;
-              transition: background-size 0.3s ease-in-out;
-              border-radius: var(--radius);
-
-              >span {
-                display: inline-flex;
-                justify-content: center;
-                align-items: center;
-                width: 100%;
-                height: 100%;
-                padding: 8px;
-                border-radius: var(--radius);
-                visibility: hidden;
-                opacity: 0;
-                background: var(--color-bg);
-                color: var(--color-font);
-                transition: all .3s ease;
-
-                >svg {
-                  width: 24px;
-                  height: 24px;
+              h2 {
+                svg {
+                  width: 6rem;
+                  height: 6rem;
                 }
               }
             }

diff --git a/test/hexo-test/source/resume/index.md b/test/hexo-test/source/resume/index.md
@@ -1,6 +1,7 @@
 ---
 title: resume
 layout: resume
+
 name: Hi! Mozzie
 role: Full Stack
 email: [email protected]
@@ -49,19 +50,19 @@ projectExp:
 portfolio:
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar.png
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M29.976 15.783l-2-9a1 1 0 0 0-.421-.615l-6-4A1 1 0 0 0 21 2H11a1 1 0 0 0-.555.168l-6 4a1 1 0 0 0-.421.615l-2 9a1.002 1.002 0 0 0 .018.504l3 10a1 1 0 0 0 .67.671l10 3h.006a.979.979 0 0 0 .564 0h.005l10-3a1 1 0 0 0 .671-.67l3-10a1.002 1.002 0 0 0 .018-.505zm-19.05.833l-3.91-7.819l7.282 2.648zM16 12.497L19.589 18H12.41zM19.382 20L16 26.764L12.618 20zm-1.68-8.555l7.281-2.648l-3.91 7.82zm.488-2.305l3.096-4.747l3.515 2.343zM16 8.836L12.846 4h6.308zm-2.19.304L7.2 6.736l3.514-2.343zm-4.844 8.03l-4.802-1.801l1.201-5.402zm5.104 10.207l-6.502-1.95l3.128-4.798zm7.233-6.748l3.129 4.797l-6.502 1.951zm5.332-10.662l1.2 5.402l-4.802 1.8zM4.537 17.645l4.595 1.722l-2.793 4.283zm21.124 6.005l-2.793-4.283l4.595-1.722z" fill="currentColor"></path></svg>
     link: https://www.google.com
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M30.415 16.513l-7.927-7.927a2.001 2.001 0 0 0-2.83 0L5.622 22.624a2.002 2.002 0 0 0 0 2.83L10.166 30h9.591l10.658-10.659a2.001 2.001 0 0 0 0-2.828zM18.929 28h-7.934l-3.96-3.962l6.312-6.312l7.928 7.928zm3.76-3.76l-7.928-7.928L21.074 10l7.927 7.927z" fill="currentColor"></path><path d="M11 12H8V2h3a3.003 3.003 0 0 1 3 3v4a3.003 3.003 0 0 1-3 3zm-1-2h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-1z" fill="currentColor"></path><path d="M4 2H0v2h4v2H1v2h3v2H0v2h4a2.003 2.003 0 0 0 2-2V4a2.002 2.002 0 0 0-2-2z" fill="currentColor"></path></svg>
     link: https://www.google.com
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M16 30a14 14 0 1 1 14-14a14.016 14.016 0 0 1-14 14zm0-26a12 12 0 1 0 12 12A12.014 12.014 0 0 0 16 4z" fill="currentColor"></path><path d="M15 7h2v7h-2z" fill="currentColor"></path><path d="M7 15h7v2H7z" fill="currentColor"></path><path d="M15 18h2v7h-2z" fill="currentColor"></path><path d="M18 15h7v2h-7z" fill="currentColor"></path></svg>
     link: https://www.google.com
   - name: Web Page
     desc: A responsive modern website built using React
-    cover: /img/avatar
+    iconSVG: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32"><path d="M9.5 8h10.6a5 5 0 1 0 0-2H9.5a5.5 5.5 0 0 0 0 11h11a3.5 3.5 0 0 1 0 7h-8.6a5 5 0 1 0 0 2h8.6a5.5 5.5 0 0 0 0-11h-11a3.5 3.5 0 0 1 0-7zM25 4a3 3 0 1 1-3 3a3 3 0 0 1 3-3zM7 28a3 3 0 1 1 3-3a3 3 0 0 1-3 3z" fill="currentColor"></path></svg>
     link: https://www.google.com
 
 ---