Merge pull request #96 from nainghtetlinn/nainghtetlinn

🐛 fix(profile): improve nainghtetlinn profile mobile view

content/profile/nainghtetlinn.mdx

@@ -10,72 +10,34 @@ tags:
   - ReactNative
 ---
 
-<section className="border-2 rounded-2xl p-4 overflow-hidden max-w-[600px] mx-auto">
-  <div className="overflow-auto">
-    <div className="w-48 mx-auto sm:mr-2 p-2 sm:float-left [clip-path:circle(50%_at_50%_50%)] [shape-outside:circle(50%_at_50%_50%)]">
-      <img
-        src="https://avatars.githubusercontent.com/nainghtetlinn"
-        className="w-full h-full rounded-full overflow-hidden ring-2 ring-white p-2"
-      />
-    </div>
-    <div className="mt-2 sm:mt-12">
-      <h3 className="text-2xl font-bold">Naing Htet Linn</h3>
-      <p>
-        I'm an passionate full-stack developer currently exploring React Native.
-        Beyond coding, I find joy in playing volleyball.
-      </p>
-    </div>
-  </div>
-
-> My keyboard is my paintbrush, and code is my canvas.
-
-<fieldset className="border-2 p-4 mt-4 rounded-lg">
-  <legend className="mx-4 px-2 font-bold">Contact Information</legend>
-  <ul>
-    <li className="w-full flex items-center">
-      <span className="w-28">Email</span>
-      <a href="mailto:[email protected]">: [email protected]</a>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">Github</span>
-      <a href="https://github.com/nainghtetlinn">: nainghtetlinn</a>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">LinkedIn</span>
-      <a href="https://www.linkedin.com/in/nainghtetlinn95">
-        : nainghtetlinn95
-      </a>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">Facebook</span>
-      <a href="https://www.facebook.com/nainghtetlinn95">: nainghtetlinn95</a>
-    </li>
-  </ul>
-</fieldset>
-
-<fieldset className="border-2 p-4 mt-4 rounded-lg">
-  <legend className="mx-4 px-2 font-bold">Languages and tools</legend>
-  <ul>
-    <li className="w-full flex items-center">
-      <span className="w-28">Languages</span>
-      <span>: JavaScript, TypeScript, NodeJS, c++</span>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">Frameworks</span>
-      <span>: ReactJS, NextJS, ExpressJS</span>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">CSS</span>
-      <span>: Material UI, TailwindCss</span>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">Others</span>
-      <span>: Redux, Firebase, Graphql, MongoDB</span>
-    </li>
-    <li className="w-full flex items-center">
-      <span className="w-28">Tools</span>
-      <span>: Git, Github, Linux, Figma</span>
-    </li>
-  </ul>
-</fieldset>
+<section className="container mx-auto">
+  <iframe
+    src="https://nainghtetlinn.github.io/mmswe-portfolio/"
+    className="w-full h-[50vh]"
+  ></iframe>
+  <fieldset className="border-2 p-2 mt-4 rounded-lg">
+    <legend className="mx-4 px-2 font-bold">Languages and tools</legend>
+    <table>
+      <tr>
+        <td className="pr-2">Languages</td>
+        <td>TypeScript, NodeJS, C++</td>
+      </tr>
+      <tr>
+        <td className="pr-2">Frameworks</td>
+        <td>ReactJS, NextJS, ExpressJS</td>
+      </tr>
+      <tr>
+        <td className="pr-2">CSS</td>
+        <td>Material UI, TailwindCss</td>
+      </tr>
+      <tr>
+        <td className="pr-2">Tools</td>
+        <td>Git, Github, Linux, Figma</td>
+      </tr>
+      <tr>
+        <td className="pr-2">Others</td>
+        <td>Redux, Firebase, Graphql, MongoDB</td>
+      </tr>
+    </table>
+  </fieldset>
 </section>