responsive 📱

karimhossenbux · Mar 20, 2021 · 3df44d4 · 3df44d4
1 parent 2e0cb5c
commit 3df44d4
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 34 deletions.
diff --git a/components/About.js b/components/About.js
@@ -4,10 +4,10 @@ const About = (props) => {
   const info = props.info
 
   return (
-    <div className="section">
+    <div className="section mt-2">
       <div className="flex items-center justify-center">
         <div className="m-2 text-right">
-          <h1 className="text-3xl font-extrabold tracking-tight">
+          <h1 className="text-lg md:text-3xl font-extrabold tracking-tight">
             {info.name}
           </h1>
           <h2 className="text-xs uppercase font-medium text-gray-500">

diff --git a/components/DarkMode.js b/components/DarkMode.js
@@ -0,0 +1,9 @@
+const DarkMode = () => {
+  return (
+    <svg class="absolute cursor-pointer top-2 right-2 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+    </svg>
+  )
+}
+
+export default DarkMode
diff --git a/components/Item.js b/components/Item.js
@@ -3,21 +3,35 @@ import Title from './Title'
 
 const Item = (props) => {
   return (
-      <div className="mb-4">
-        <div className="tracking-tight flex items-center justify-between">
+      <div className="mb-4 pl-4 border-l-4 border-gray-200">
+        <div className="tracking-tight flex items-baseline justify-between">
           <div>
             <span className="font-extrabold mr-1">{props.title}</span>
-            <small className="text-gray-500 font-medium italic">@ {props.location}</small>
+            <small className="text-gray-500 font-medium italic">
+              {props.link && 
+                <Link href={props.link}>
+                  <a target="_blank">@ {props.location}</a>
+                </Link>
+              }
+
+              {!props.link &&
+                `@ ${props.location}`
+              }
+            </small>
           </div>
 
-          <span className="text-xs text-gray-400 font-mono">
-            {props.startDate} - {props.endDate ? props.endDate : 'Present'}
+          <span className="text-xs text-gray-400 font-mono md:w-auto w-12 text-center">
+            <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>
 
-        <p className="text-sm">
-          {props.content}
-        </p>
+        { props.content &&
+          <p className="text-sm mt-1 text-gray-600 w-3/4">
+            {props.content}
+          </p>
+        }
       </div>
   )
 }

diff --git a/components/Languages.js b/components/Languages.js
@@ -7,10 +7,10 @@ const Languages = (props) => {
     <div className="section">
       <Title title="Languages" 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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path></svg>`} />
 
-      <div className="flex justify-between pl-8">
+      <div className="md:flex justify-between pl-8">
         {items.map((item, index) => 
-          <div className="flex" key={index}>
-            <div className="mr-2 text-lg">
+          <div className="flex items-center" key={index}>
+            <div className="mr-2 text-sm">
               {item.flag}
             </div>
             <div>

diff --git a/components/Skills.js b/components/Skills.js
@@ -8,12 +8,16 @@ const Skills = (props) => {
     <div className="section">
       <Title title="Skills" 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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>`} />
 
-      <div className="flex justify-between pl-4">
+      <div className="md:flex justify-between pl-4">
         {items.map((item, index) =>
-          <div className="w-1/3 px-4" key={index}>
-            <h3 className="text-xs font-semibold uppercase mb-1">{item.name}</h3>
+          <div className="md:w-1/3 px-4 mb-4 md:mb-0" key={index}>
+            <h3 className="text-xs font-semibold uppercase mb-1">
+              {item.name}
+            </h3>
             {item.keywords.map((keyword, kindex) => 
-              <span className="inline-flex mr-2 text-xs border rounded px-1" key={kindex}>{keyword}</span>
+              <span className="inline-flex mr-2 text-xs font-semibold text-opacity-70 text-black border rounded border-purple-100 px-1 bg-purple-50" key={kindex}>
+                {keyword}
+              </span>
             )}
           </div>
         )}

diff --git a/components/Work.js b/components/Work.js
@@ -15,6 +15,7 @@ const Work = (props) => {
             key={index}
             title={item.position}
             location={item.company}
+            link={item.website}
             startDate={item.startDate}
             endDate={item.endDate}
             content={item.summary}

diff --git a/data/resume.json b/data/resume.json
@@ -40,7 +40,7 @@
       "highlights": [],
       "position": "Founder",
       "startDate": "2018/01",
-      "summary": "Moonitor is a sleek and user-friendly Desktop App (MacOS, Win10, Linux) giving you a clear overview of your cryptocurrency assets. Follow your portfolio growth in real-time and don’t miss any market opportunity.",
+      "summary": "",
       "website": "https://moonitor.io"
     },
     {
@@ -49,7 +49,7 @@
       "highlights": [],
       "position": "Full-Stack Developer",
       "startDate": "2010/08",
-      "summary": "Freelancing WordPress/Laravel work for various clients (from custom themes/plugins development, website/app from scratch, UI/UX design, server migration and so on... to consulting).\nProduct development manager for many projects.\nAlso worked on my own personal projects (web, mobile and desktop app).\n\nAll projects listed below are my own, not client work.\n",
+      "summary": "",
       "website": ""
     },
     {
@@ -123,7 +123,7 @@
       "name": "Backend"
     },
     {
-      "keywords": ["Swift", "Figma"],
+      "keywords": ["Swift", "Figma", "CSS/SVG Animation"],
       "level": "Senior",
       "name": "Extra"
     }
@@ -168,6 +168,9 @@
     },
     {
       "name": "arduino"
+    },
+    {
+      "name": "3d printing"
     }
   ]
 }
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,22 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html className="">
+        <Head />
+        <body className="dark:bg-gray-900">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/pages/index.js b/pages/index.js
@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import DarkMode from '../components/DarkMode'
 import About from '../components/About'
 import Work from '../components/Work'
 import Skills from '../components/Skills'
@@ -12,20 +13,24 @@ export default function Home() {
   console.log(resume)
 
   return (
-    <div className="container mx-auto p-4 subpixel-antialiased">
-      <Head>
-        <title>Resume</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
+    <div className="relative">
+      <DarkMode />
 
-      <main>
-        <About info={resume.basics} />
-        <Skills items={resume.skills} />
-        <Work items={resume.work} />
-        <Educations items={resume.education} />
-        <Languages items={resume.languages} />
-        <Interests items={resume.interests} />
-      </main>
+      <div className="container mx-auto p-4 subpixel-antialiased">
+        <Head>
+          <title>Resume</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+
+        <main>
+          <About info={resume.basics} />
+          <Skills items={resume.skills} />
+          <Work items={resume.work} />
+          <Educations items={resume.education} />
+          <Languages items={resume.languages} />
+          <Interests items={resume.interests} />
+        </main>
+      </div>
     </div>
   )
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'class', // or 'media' or 'class'
   theme: {
     extend: {},
   },