Made my profile in github.jsx clickable

jjia1 · Nov 1, 2022 · a96e9d2 · a96e9d2
1 parent bd557de
commit a96e9d2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 28 deletions.
diff --git a/pages/github.jsx b/pages/github.jsx
@@ -15,41 +15,43 @@ const GithubPage = ({ repos, user }) => {
 
   return (
     <>
-      <div className={styles.user}>
-        <div>
-          <Image
-            src={user.avatar_url}
-            className={styles.avatar}
-            alt={user.login}
-            width={50}
-            height={50}
-          />
-          <h3 className={styles.username}>{user.login}</h3>
-        </div>
-        <div>
-          <h3>{user.public_repos} repos</h3>
+      <a href="https://github.com/drkostas" target="_blank" rel="noopener" className={styles.no_color}>
+        <div className={styles.user}>
+          <div>
+            <Image
+              src={user.avatar_url}
+              className={styles.avatar}
+              alt={user.login}
+              width={50}
+              height={50}
+            />
+            <h3 className={styles.username}>{user.login}</h3>
+          </div>
+          <div>
+            <h3>{user.public_repos} repos</h3>
+          </div>
+          <div>
+            <h3>{user.followers} followers</h3>
+          </div>
         </div>
-        <div>
-          <h3>{user.followers} followers</h3>
-        </div>
-      </div>
+      </a>
       <div> <center><h3>My Most Popular Repositories on Github</h3></center></div>
       <div className={styles.container}>
         {repos.map((repo) => (
           <RepoCard key={repo.id} repo={repo} />
         ))}
       </div>
       <div><center><h3>My Github Calendar</h3></center></div>
-      <br/>
+      <br />
       <center>
-      <div className={styles.contributions}>
-        <GitHubCalendar
-          username={process.env.NEXT_PUBLIC_GITHUB_USERNAME}
-          theme={theme}
-          hideColorLegend
+        <div className={styles.contributions}>
+          <GitHubCalendar
+            username={process.env.NEXT_PUBLIC_GITHUB_USERNAME}
+            theme={theme}
+            hideColorLegend
           // hideMonthLabels
-        />
-      </div>
+          />
+        </div>
       </center>
     </>
   );
@@ -83,9 +85,9 @@ export async function getStaticProps() {
       if (b.html_url.includes('EESTech') || b.html_url.includes('COSC')) {
         return a
       }
-      
-      return (b.stargazers_count+b.watchers_count+b.forks_count) - (a.stargazers_count+a.watchers_count+a.forks_count)
-    })  
+
+      return (b.stargazers_count + b.watchers_count + b.forks_count) - (a.stargazers_count + a.watchers_count + a.forks_count)
+    })
     .slice(0, 8);
 
   return {

diff --git a/styles/GithubPage.module.css b/styles/GithubPage.module.css
@@ -56,3 +56,12 @@
     display: none;
   }
 }
+
+a.no_color {
+  color: var(--text-color)!important;
+  text-decoration: none;
+}
+a.no_color:visited {
+  color: var(--text-color)!important;
+  text-decoration: none;
+}