feat: add svg & font

package.json

@@ -21,12 +21,15 @@
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
+    "@svgr/cli": "^6.5.1",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
+    "fast-glob": "^3.2.12",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "typescript": "^4.9.3",
-    "vite": "^4.1.0"
+    "vite": "^4.1.0",
+    "vite-plugin-svg-icons": "^2.0.1"
   }
 }

readme.md

@@ -25,6 +25,6 @@ https://github.com/coderming/resume
 ## TODO
 
 - [x] code -> tree
-- [ ] tree -- resume-render --> resume
+- [x] tree -- resume-render --> resume
 - [ ] extend template
 - [ ] add provideCompletionItems

src/assets/font/font.less

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "Museo Sans";
+  src: url('museo-sans-500.ttf') format('truetype');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Museo Sans";
+  src: url('museo-sans-400.ttf') format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Museo Sans";
+  src: url('museo-sans-300.ttf') format('truetype');
+  font-weight: 300;
+}

src/components/Template/Common/Header/index.less

@@ -9,68 +9,96 @@
 
     .pic {
         img {
-            width: auto;
+            width: 200px;
             height: 100%;
-            background-size: cover;
+            background-size: contain;
         }
     }
 
     .tit {
         flex: 1;
         display: flex;
         flex-direction: column;
-        padding: 0px 20px;
+        padding: 20px 20px;
     }
 
     .tit-top {
         overflow: hidden;
         padding-bottom: 6px;
         border-bottom: 2px solid rgba(0, 0, 0, 0.1);
         display: flex;
+        align-items: center;
 
-        .tit-top-name {
-            display: inline-block;
-            vertical-align: middle;
+        h1 {
+            font-size: 50px;
+            font-weight: 500;
+            line-height: 1.35em;
+            float: left;
+        }
+
+        .nick {
+            height: 40px;
             font-size: 20px;
             line-height: 20px;
-            border-left: 3px solid rgba(0, 0, 0, 0.15);
-            font-weight: 400;
-            margin: 10px 0;
-            margin-left: 15px;
-            height: 40px;
-            box-sizing: border-box;
-            overflow: hidden;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            text-decoration: none;
+
+            .tit-top-space {
+                width: 3px;
+                background-color: rgba(0, 0, 0, 0.15);
+                height: 90%;
+                margin-left: 10px;
+            }
+
+            img {
+                filter: invert(1);
+                color: rgba(255, 255, 255, 0.87);
+                margin-left: 10px;
+            }
+
+            .tit-top-github {
+                font-size: 24px;
+                opacity: 0.98;
+                font-weight: 500;
+                margin-left: 5px;
+                color: rgba(255, 255, 255, 0.87);
+            }
         }
+
+
     }
 
     .tit-button {
         // padding: 15px 0;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        margin-top: 10px;
 
         .tb-left {
             float: left;
 
             .tbl-item {
-                font-weight: 400;
+                font-weight: 500;
                 font-size: 18px;
                 opacity: 0.9;
                 line-height: 2.05em;
             }
         }
 
         .tb-right {
+
             float: left;
 
             .tbr-item {
-                display: block;
                 white-space: nowrap;
-                font-weight: 400;
+                font-weight: 500;
                 font-size: 17.5px;
                 line-height: 2.1em;
                 text-align: right;
-                transition: opacity 0.2s ease;
             }
 
         }

src/components/Template/Common/Header/index.tsx

@@ -1,6 +1,7 @@
 import "./index.less";
 import pic from "../../../../assets/common/pic.jpg";
-import { Config } from "../../../../types";
+import { Config } from "../../../../types/index";
+import githubLogo from "../../../../assets/github.svg";
 type Props = {
   config: Config;
 };
@@ -14,18 +15,23 @@ export const Header: React.FC<Props> = (props: Props) => {
       <div className="tit">
         <div className="tit-top">
           <h1>{name}</h1>
-          <a className="tit-top-name">{github}</a>
+          <a href={`https://github.com/${github}`} className="nick">
+            <span className="tit-top-space"></span>
+            <img src={githubLogo} alt="github logo" />
+            <span className="tit-top-github">{github}</span>
+          </a>
+          {/* <a className="tit-top-name">{github}</a> */}
         </div>
         <div className="tit-button">
           <div className="tb-left">
-            {profiles.map((profile) => (
+            {profiles.map((profile: any) => (
               <h3 key={profile} className="tbl-item">
                 {profile}
               </h3>
             ))}
           </div>
           <div className="tb-right">
-            {contacts.map((contact) => (
+            {contacts.map((contact: any) => (
               <div key={contact} className="tbr-item">
                 {contact}
               </div>

src/components/Template/Common/components/P/index.less

@@ -1,36 +1,32 @@
-a {
-    font-family: Museo Sans, "Museo Sans", "Arial", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Helvetica Neue", "sans-serif";
-    font-weight: 500;
-    text-decoration: none;
-
-    &::after {
-        content: ">"
-    }
-
-    font-size: 15.6px;
-    padding: 0 6px 1px;
-    margin-top: 1px;
-    background-color: #f6f6f6;
-    border-radius: 3px;
-    font-weight: 600;
-    color: #555;
-    transition: all .2s ease;
-    // border 1px solid #EEE
-    box-sizing: border-box;
-
-    &:hover {
-        color: white;
-        background: #4682b4;
-    }
-
-}
-
 .p-space {
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
-}
 
-ul {
-    padding-left: 1em;
+    a {
+        font-family: "Museo Sans", "Arial", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Helvetica Neue", "sans-serif";
+        font-weight: 500;
+        text-decoration: none;
+
+        font-size: 15.6px;
+        padding: 0 6px 1px;
+        margin-top: 1px;
+        background-color: #f6f6f6;
+        border-radius: 3px;
+        font-weight: 600;
+        color: #555;
+        transition: all .2s ease;
+        // border 1px solid #EEE
+        box-sizing: border-box;
+
+        &:hover {
+            color: white;
+            background: #4682b4;
+        }
+
+    }
+
+    ul {
+        padding-left: 1em;
+    }
 }

src/components/Template/Common/index.less

@@ -1,13 +1,6 @@
 .content {
-    position: relative;
     // size: 1024px auto;
     width: 100%;
     height: 100%;
     // margin: 55px auto;
-    box-shadow: 0 0 15px silver;
-    border-radius: 5px;
-    transition: all .2s ease-out;
-
-    overflow: auto;
-
 }