Create card component

components/github-profile.tsx

@@ -0,0 +1,48 @@
+import Image from 'next/image';
+import { parse as URIparse } from 'uri-js';
+import date from '../util/date';
+import style from '../styles/github-profile.module.css';
+
+function CardRow({label, children}: {label: string, children: JSX.Element | string}) {
+    return !children? <></> : (
+        <div className={style.cardRow}>
+            <span className={style.cardLabel}>{label}</span>
+            <span className={style.cardValue}>{children}</span>
+        </div>
+    );
+}
+function GitHubProfile({user}: any) {
+return (<>
+    <div className={style.card}>
+        <div className={style.avatarContainer}>
+            <Image 
+                layout='fixed' 
+                width={256} 
+                height={256} 
+                src={user.avatar_url} 
+                alt={`${user.login}'s GitHub profile avatar`} 
+                />
+        </div> 
+        <div className={style.cardTable}>
+            <CardRow label='Name'>{user.name}</CardRow>
+            <CardRow label='Username'>{user.login}</CardRow>
+            <CardRow label='URL'><a href={user.html_url}>{user.html_url}</a></CardRow>
+            {user.blog && <CardRow label='Blog'>
+                <a href={ !URIparse(user.blog).scheme ? `//${user.blog}`: user.blog}>{user.blog}</a>
+            </CardRow>}
+            <CardRow label='Location'>{user.location}</CardRow>
+            <CardRow label='About'>{user.bio}</CardRow>
+            <CardRow label='Created'>{user.created_at ? date.prettyPrint(user.created_at) : ''}</CardRow>
+            {user.updated_at && <CardRow label='Last Updated'>{user.updated_at ? date.prettyPrint(user.updated_at) : ''}</CardRow>}
+            {user.twitter_username && <CardRow label='Twitter'>                
+                <a className='link extern blue button' 
+                    href={`https://twitter.com/${user.twitter_username}`}>
+                        @{user.twitter_username}
+                </a>
+            </CardRow>}
+        </div>
+    </div>
+    </>);
+}
+
+export default GitHubProfile;

package-lock.json

@@ -14,7 +14,8 @@
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
     "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "uri-js": "^4.4.1"
    },
    "devDependencies": {
     "@svgr/webpack": "^6.3.1",
@@ -6378,7 +6379,6 @@
    "version": "2.1.1",
    "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
    "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-   "dev": true,
    "engines": {
     "node": ">=6"
    }
@@ -7345,7 +7345,6 @@
    "version": "4.4.1",
    "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
    "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-   "dev": true,
    "dependencies": {
     "punycode": "^2.1.0"
    }
@@ -11833,8 +11832,7 @@
   "punycode": {
    "version": "2.1.1",
    "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-   "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+   "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-   "dev": true
   },
   "queue-microtask": {
    "version": "1.2.3",
@@ -12510,7 +12508,6 @@
    "version": "4.4.1",
    "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
    "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-   "dev": true,
    "requires": {
     "punycode": "^2.1.0"
    }

package.json

@@ -15,7 +15,8 @@
   "react-dom": "^18.2.0",
   "react-markdown": "^8.0.3",
   "react-syntax-highlighter": "^15.5.0",
-  "remark-gfm": "^3.0.1"
+  "remark-gfm": "^3.0.1",
+  "uri-js": "^4.4.1"
  },
  "devDependencies": {
   "@svgr/webpack": "^6.3.1",

pages/about.tsx

@@ -1,11 +1,9 @@
 import ReactMarkdown from 'react-markdown';
-import Image from 'next/image';
 
 import ReadmeMd from '../README.md';
 import License from '../LICENSE.txt';
 import Layout from '../components/layout';
-import style from '../styles/about.module.css';
+import GitHubProfile from '../components/github-profile';
-import date from '../util/date';
 
 function AboutPage({usr}: any) {
     return (
@@ -14,52 +12,12 @@ function AboutPage({usr}: any) {
                 <p>This is a personal website written by <a href='https://github.com/LambdaPaul'>@LambdaPaul</a>.</p>
                 <p>Why did I write this?
                 I do not really know, at least the content I put here.
-                I guess I wanted a place on the web where I wanted to put everything I think is worth looking at some point in the future.
+                I wanted a place on the web where I wanted to put everything I think is worth looking at some point in the future.
                 It seems wise to have things up here even though they may not be worthwhile, as many things ultimately are not.</p>
-                <p>Got any questions, concerns, or issues? Contact me via my email: <code>lambdapaul [at] pm [dot] me</code>.</p>
+                <p>Got any questions, concerns, or issues? Contact me via email: <code>lambdapaul [at] pm [dot] me</code>.</p>
             </section>
-            {/* make this a pretty component with more info */}
             <section className='block'>
-                <h5>GitHub Profile</h5>
+                <GitHubProfile user={usr} />
-                <div className={style.githubCard}>
-                    <div className={style.githubAvatarContainer}>
-                        <Image layout='fixed' width={128} height={128} src={usr.avatar_url} alt={`${usr.login}'s GitHub profile avatar`} />
-                    </div>
-                    <div className={style.githubCardTable}>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>Name</span>
-                            <span className={style.githubCardValue}>{usr.login}</span>
-                        </div>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>URL</span>
-                            <span className={style.githubCardValue}>
-                                <a href={usr.html_url}>{usr.html_url}</a>
-                            </span>
-                        </div>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>Location</span>
-                            <span className={style.githubCardValue}>{usr.location}</span>
-                        </div>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>About</span>
-                            <span className={style.githubCardValue}>{usr.bio}</span>
-                        </div>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>Created</span>
-                            <span className={style.githubCardValue}>{date.prettyPrint(usr.created_at)}</span>
-                        </div>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>Last Updated</span>
-                            <span className={style.githubCardValue}>{date.prettyPrint(usr.updated_at)}</span>
-                        </div>
-                        <div className={style.githubCardRow}>
-                            <span className={style.githubCardLabel}>Twitter</span>
-                            <span className={style.githubCardValue}>
-                                <a className='link extern blue button' href={`https://twitter.com/${usr.twitter_username}`}>@{usr.twitter_username}</a>
-                            </span>
-                        </div>
-                    </div>
-                </div>
             </section>
             <hr />
             <section className='block'>
@@ -74,7 +32,7 @@ function AboutPage({usr}: any) {
             </section>
             <section className='block'>
                 <h2>LICENSE</h2>
-                <pre className={style.license}>{License}</pre>
+                <pre className='license'>{License}</pre>
             </section>
         </Layout>
     );

styles/about.module.css

@@ -1,45 +0,0 @@
-.license {
-    background-color: #222222;
-    padding: 1rem;
-}
-
-.githubCard {
-    display: flex;
-}
-
-.githubAvatarContainer {
-    flex: 0 0;
-    padding: 0.5rem;
-}
-
-.githubCardTable {
-    flex: 1 1;
-    padding: 0.5rem;
-}
-
-.githubCardRow {
-    display: flex;
-}
-
-
-.githubCardLabel {
-    flex: .2 1;
-    font-size: 1rem;
-    padding: .5rem;
-}
-
-.githubCardLabel:after {
-    content: ':';
-}
-
-.githubCardValue {
-    flex: 1 1;
-    background-color: #222222;
-    font-size: 1rem;
-    border-top: 1px solid;
-    padding: .5rem;
-}
-
-.githubCardRow:first-of-type .githubCardValue {
-    border-top: none;
-}

styles/github-profile.module.css

@@ -0,0 +1,55 @@
+.avatarContainer {
+    padding: 0.5rem;
+    text-align: center;
+    overflow: hidden;
+}
+
+.avatarContainer img {
+    border-radius: 1rem;
+}
+
+.cardLabel {
+    display: block;
+    font-weight: 700;
+    font-size: 1rem;
+    padding: .5rem;
+}
+
+.cardLabel:after {
+    content: ':';
+}
+
+.cardValue {
+    background-color: #303436;
+    font-size: 1rem;
+    padding: 0.25rem 1rem;
+    margin: 0.25rem 0;
+    border: none;
+    display: block;
+    border-radius: 0.5rem;
+}
+
+
+@media screen and (min-width: 800px) {
+    .card {
+        display: flex;
+    }
+
+    .cardTable {
+        flex: 1 1;
+        padding: 0.5rem;
+        align-items: stretch;
+    }
+
+    .cardRow {
+        display: flex;
+    }
+    
+    .cardLabel {
+        flex: .2 1;
+    }
+
+    .cardValue {
+        flex: 1 1;
+    }
+}

styles/global.css

@@ -366,3 +366,8 @@ code {
 .monospace {
     font-family: 'Hack', 'Source Code Pro', Consolas, monospace;
 }
+
+.license {
+    background-color: #222222;
+    padding: 1rem;
+}