[add]: design

src/components/addons.js

@@ -4,19 +4,19 @@ import { latestBlogs } from "../utils/workflows"
 import links from "../constants/page-links"
 import { isMediumUsernameValid } from "../utils/validation"
 
-const AddonsItem = ({inputId, inputChecked, onInputChange, ...props}) => {
+const AddonsItem = ({ inputId, inputChecked, onInputChange, ...props }) => {
   return (
-      <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
-          <label htmlFor={inputId} className="cursor-pointer flex items-center">
-              <input
-                  type="checkbox"
-                  id={inputId}
-                  checked={inputChecked}
-                  onChange={onInputChange}
-              />
-              <span className="pl-4">{props.children}</span>
-          </label>
-      </div>
+    <div className="py-2 flex justify-start items-center text-sm sm:text-lg">
+      <label htmlFor={inputId} className="cursor-pointer flex items-center">
+        <input
+          type="checkbox"
+          id={inputId}
+          checked={inputChecked}
+          onChange={onInputChange}
+        />
+        <span className="pl-4">{props.children}</span>
+      </label>
+    </div>
   )
 }
 
@@ -60,6 +60,13 @@ const Addons = props => {
       >
         display visitors count badge
       </AddonsItem>
+      <AddonsItem
+        inputId="github-profile-trophy"
+        inputChecked={props.data.githubProfileTrophy}
+        onInputChange={() => props.handleCheckChange("githubProfileTrophy")}
+      >
+        display github trophy
+      </AddonsItem>
       <AddonsItem
         inputId="github-stats"
         inputChecked={props.data.githubStats}

src/components/markdown.js

@@ -92,6 +92,20 @@ const Markdown = props => {
     }
     return ""
   }
+  const GithubProfileTrophy = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <>
+          {`<p align="left"> <a href="https://github.com/ryo-ma/github-profile-trophy"><img src="${link}" alt="${props.github}" /></a> </p>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const GitHubStats = props => {
     let link =
       "https://github-readme-stats.vercel.app/api?username=" +
@@ -211,6 +225,12 @@ const Markdown = props => {
           github={props.social.github}
         />
       </>
+      <>
+        <GithubProfileTrophy
+          show={props.data.githubProfileTrophy}
+          github={props.social.github}
+        />
+      </>
       <>
         <DisplayWork
           prefix={props.prefix.currentWork}
@@ -424,7 +444,15 @@ const Markdown = props => {
           username={props.social.rssurl}
         />
       </>
-      {isSocial(props.social) ? <>{`</p>`}<br/><br/></> : ""}
+      {isSocial(props.social) ? (
+        <>
+          {`</p>`}
+          <br />
+          <br />
+        </>
+      ) : (
+        ""
+      )}
       <>
         <DisplaySkills skills={props.skills} />
       </>

src/components/markdownPreview.js

@@ -233,6 +233,21 @@ const MarkdownPreview = props => {
     }
     return null
   }
+  const GithubProfileTrophyPreview = props => {
+    let link =
+      "https://github-profile-trophy.vercel.app/?username=" + props.github
+    if (props.show) {
+      return (
+        <div className="text-left my-2">
+          {" "}
+          <a href="https://github.com/ryo-ma/github-profile-trophy">
+            <img src={link} alt={props.github} />
+          </a>{" "}
+        </div>
+      )
+    }
+    return null
+  }
   const GitHubStatsPreview = props => {
     let link =
       "https://github-readme-stats.vercel.app/api?username=" +
@@ -294,6 +309,10 @@ const MarkdownPreview = props => {
         show={props.data.visitorsBadge}
         github={props.social.github}
       />
+      <GithubProfileTrophyPreview
+        show={props.data.githubProfileTrophy}
+        github={props.social.github}
+      />
       <WorkPreview work={props} />
       <SocialPreview social={props.social} />
       <SkillsPreview skills={props.skills} />

src/constants/skills.js

@@ -172,6 +172,11 @@ const categorizedSkills = {
     skills: ["gatsby", "gridsome", "hugo", "jekyll", "nextjs", "nuxtjs"],
   },
 
+  game_engines:{
+    title: "Game Engines",
+    skills: ["unity"],
+  },
+
   other: {
     title: "Other",
     skills: ["linux", "git"],
@@ -370,7 +375,9 @@ const icons = {
   elasticsearch:
     "https://www.vectorlogo.zone/logos/elastic/elastic-icon.svg",
   circleci:
-    "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg"
+    "https://www.vectorlogo.zone/logos/circleci/circleci-icon.svg",
+  unity:
+    "https://www.vectorlogo.zone/logos/unity3d/unity3d-icon.svg"
 }
 
 const skillWebsites = {
@@ -492,7 +499,8 @@ const skillWebsites = {
   kibana: "https://www.elastic.co/kibana",
   grafana: "https://grafana.com",
   elasticsearch: "https://www.elastic.co",
-  circleci: "https://circleci.com"
+  circleci: "https://circleci.com",
+  unity: "https://unity.com/"
 }
 
 const initialSkillState = {}

src/pages/index.js

@@ -54,6 +54,7 @@ const DEFAULT_DATA = {
   contact: "",
   funFact: "",
   visitorsBadge: false,
+  githubProfileTrophy: false,
   githubStats: false,
   topLanguages: false,
   devDynamicBlogs: false,
@@ -221,7 +222,12 @@ const IndexPage = () => {
     trimDataValues(social, setSocial)
     trimDataValues(link, setLink)
     resetCopyMarkdownButton()
-    if (data.visitorsBadge || data.githubStats || data.topLanguages) {
+    if (
+      data.visitorsBadge ||
+      data.githubProfileTrophy ||
+      data.githubStats ||
+      data.topLanguages
+    ) {
       if (social.github && isGitHubUsernameValid(social.github)) {
         generate()
       }
@@ -466,7 +472,10 @@ const IndexPage = () => {
             handleCheckChange={handleCheckChange}
           />
           <div className="section">
-            {(data.visitorsBadge || data.githubStats || data.topLanguages) &&
+            {(data.visitorsBadge ||
+              data.githubProfileTrophy ||
+              data.githubStats ||
+              data.topLanguages) &&
             !social.github ? (
               <div className="warning">
                 * Please add github username to use these add-ons