🔥 build(profile): updating my profile

myanmar-software-engineers · Oct 21, 2023 · 495b3e5 · 495b3e5
1 parent 995303d
commit 495b3e5
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 54 deletions.
diff --git a/content/profile/lwinmoepaing.mdx b/content/profile/lwinmoepaing.mdx
@@ -10,58 +10,32 @@ tags:
   - SolidJS
 ---
 
-<div className="h-28 w-28 rounded-full overflow-hidden mx-auto">
-  <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
-</div>
-
-<h3 className="flex flex-row max-w-[240px] mt-5 mx-auto">
-  <img
-    src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
-    className="h-[20px] object-contain mr-2"
-  />
-  <span> Hi, I'm Lwin Moe Paing </span>
-</h3>
-
-<div className="container max-w-[720px] mx-auto">
-
-- 🤝 I’m looking for help with **Javascript Language to build Many Free Softwares to help people who can't afford to pay !!**
-- 💬 Ask me about **React, React Native & Nodejs.**
-- 📫 How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**
-
-<div className="flex flex-row gap-2">
-  <img
-    className="h-5"
-    src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png"
-  />
-  <img
-    className="h-5"
-    src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png"
-  />
-  <img
-    className="h-5"
-    src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"
-  />
-  <img
-    className="h-5"
-    src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/nodejs/nodejs.png"
-  />
-</div>
-
-<div className="flex flex-row gap-2 my-2">
-  <img
-    className="h-5"
-    src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"
-  />
-  <span>A little more about me...</span>
-</div>
-
-```javascript
-const Lwin = {
-  code: [Javascript, Typescript, HTML, CSS, PHP],
-  tools: [React, Redux, Node, Storybook, Styled - Components, Jest],
-  architecture: ["Microservices", "Event-Driven", "Design System Pattern"],
-  challenge: "Nothing in life is permanent. so i'm trying to be always humble",
-};
-```
-
+<div className="flex flex-col md:flex-row">
+  <div className="md:w-6/12 mb-5 flex flex-col justify-center items-center">
+    <div className="h-28 w-28 rounded-3xl overflow-hidden mx-auto">
+      <img src="https://avatars.githubusercontent.com/u/49163775?v=4" />
+    </div>
+    <h3 className="flex flex-row max-w-[240px] mt-5 mx-auto">
+      <img
+        src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/gitto.gif"
+        className="h-[20px] object-contain mr-2"
+      />
+      <span> Hi, I'm Lwin Moe Paing </span>
+    </h3>
+    <p className="text-center text-sm my-2"><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>I’m looking for help with Javascript Language to build Many Free Softwares to help people who can't afford to pay!!</p>
+    <p className="text-center text-sm my-2 "><img className="h-5 inline-block mr-1 relative -top-1" src="https://raw.githubusercontent.com/lwinmoepaing/lwinmoepaing/main/img/katto.gif"/>How to reach me **[email protected] (or) [facebook](https://www.facebook.com/lwin.im/)**</p>
+  </div>
+  <div className="flex flex-1 flex-row justify-center items-center">
+    <div className="ph-container">
+      <div className="phone">
+        <div className="notch-container">
+          <div className="notch"></div>
+        </div>
+        <iframe
+          src="https://lwinmoepaing.github.io/"
+          className="h-full relative"
+        />
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -9,3 +9,39 @@
     rgb(132, 53, 142) 80.8%
   );
 }
+
+.ph-container {  
+  max-height: 700px;
+  height: 80vh;
+  width: auto;
+}
+
+.phone , .phone img {
+  height: 100%;
+}
+
+.phone {
+  position: relative;
+}
+
+.phone .notch-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100px;
+}
+
+.phone .notch-container .notch {
+  width: 20vh;
+  height: 4.25vh;
+  margin: 0 auto;
+  background-color: #111;
+  border-bottom-left-radius: 2.334vh;
+  border-bottom-right-radius: 2.334vh;
+}
+
+.phone img, .phone iframe {
+  display: block;
+  border: 1.334vh solid #111;
+  border-radius: 4.5vh;
+}