minor improvements

karimhossenbux · Mar 22, 2021 · 77a211a · 77a211a · vercel · Mar 22, 2021
1 parent b201a65
commit 77a211a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/components/About.js b/components/About.js
@@ -8,19 +8,35 @@ const About = (props) => {
     <div className="section mt-2">
       <div className="flex items-center justify-center">
         <div className="m-2 text-right">
-          <h1 className="text-lg md:text-3xl font-extrabold tracking-tight">
+          <h1 className="text-2xl md:text-3xl font-extrabold tracking-tight">
             {info.name}
           </h1>
           <h2 className="text-xs uppercase font-bold text-green-500">
             {info.label}
           </h2>
+          <div className="mt-2 text-xs text-gray-500 md:hidden">
+            <div>
+              {info.email}
+            </div>
+            <div className="tabular-nums">
+              {info.phone}
+            </div>
+            <div>
+              <Link href={info.website}>
+                <a>{info.website}</a>
+              </Link>
+            </div>
+          </div>
         </div>
 
+        <div className="relative flex my-2 mx-4">
           <Link href={twitter.url}>
             <a className="relative z-10"><img className="w-20 h-20 md:w-16 md:h-16 rounded-full ring-4 ring-green-400 ring-offset-2 dark:ring-offset-gray-900" src={info.image} alt={`Picture of ${info.name}`} /></a>
           </Link>
+          <div className="absolute inline-flex w-20 h-20 md:w-16 md:h-16 rounded-full ring-8 ring-green-400 animate-ping opacity-20"></div>
+        </div>
 
-        <div className="m-2 text-xs text-gray-500">
+        <div className="ml-2 mb-2 md:mb-0 text-xs text-gray-500 hidden md:block">
           <div>
             {info.email}
           </div>

diff --git a/components/Interests.js b/components/Interests.js
@@ -7,7 +7,7 @@ const Interests = (props) => {
     <div className="section">
       <Title title="Interests" icon={`<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path></svg>`} />
 
-      <div className="pl-8">
+      <div className="pl-8 text-sm text-gray-600 dark:text-gray-500">
         {items.map((item, index) => 
           <span key={index}>
             {item.name}

diff --git a/components/Item.js b/components/Item.js
@@ -3,7 +3,7 @@ import Title from './Title'
 
 const Item = (props) => {
   return (
-      <div className="mb-4 pl-4 border-l-4 border-gray-200 dark:border-gray-600">
+      <div className={`mb-4 pl-4 border-l-4 border-${props.endDate ? 'gray-200' : 'green-100'} dark:border-${props.endDate ? 'gray-600' : 'green-200'}`}>
         <div className="tracking-tight flex items-baseline justify-between">
           <div>
             <span className="font-extrabold mr-1">{props.title}</span>
@@ -20,17 +20,15 @@ const Item = (props) => {
             </small>
           </div>
 
-          <span className="text-xs text-gray-400 font-mono md:w-auto w-12 text-center">
+          <span className="text-xs text-gray-400 font-mono md:w-auto w-12 text-center ml-2">
             <span className="block md:inline">{props.startDate}</span>
             <span className="px-1 hidden md:inline">-</span>
             <span>{props.endDate ? props.endDate : 'Present'}</span>
           </span>
         </div>
 
         { props.content &&
-          <p className="text-sm mt-1 text-gray-600 w-3/4">
-            {props.content}
-          </p>
+          <p className="text-sm mt-1 text-gray-600 dark:text-gray-500 w-3/4" dangerouslySetInnerHTML={{__html: props.content}}></p>
         }
       </div>
   )

diff --git a/components/Languages.js b/components/Languages.js
@@ -13,9 +13,9 @@ const Languages = (props) => {
             <div className="mr-2 text-sm">
               {item.flag}
             </div>
-            <div>
+            <div className="text-sm">
               <span className="mr-1">{item.language}</span>
-              <small className="text-gray-400">[{item.fluency}]</small>
+              <small className="text-gray-400 text-sm">[{item.fluency}]</small>
             </div>
           </div>
         )}