myanmar-software-engineers · jironemo · Nov 2, 2023 · Nov 2, 2023 · Nov 2, 2023 · Nov 2, 2023
diff --git a/content/profile/aungkhaingkhant.mdx b/content/profile/aungkhaingkhant.mdx
@@ -4,22 +4,100 @@ description: Friendly (not really) neighbourhood Java Developer.
 image: "https://avatars.githubusercontent.com/u/55285418?v=4"
 tags:
      - Java
-     - JavaScript
+     - Angular
      - Spring Boot
      - Frontend
      - Backend
      - RDBMS
+     - NoSQL
 ---
 
+import Jiro from "@/components/Contributors/Jiro/Jiro";
+
 <div className = "jiro flex flex-col content-center items-center">
-     <img src= "https://avatars.githubusercontent.com/u/55285418?v=4" className="profile"/>
-     <div className = "desc">
-          <p>Passionate Java Developer</p>
-          <p>Loves to learn.</p>
-          <p>I write mediocre code while acting like I know what I'm doing</p>
+<img src= "https://avatars.githubusercontent.com/u/55285418?v=4" className="profile"/>   
+     <div className = "flex flex-col content-center items-center text-center personal-detail">
+          <p>Hi, I am <span className="name">Aung Khaing Khant</span></p>
+          <span>{<Jiro/>}</span>
+     </div>
+     <div className="quote text-center">
+          <p>I write mediocre code pretending I know what I'm doing</p> 
+     </div>
+     <div className="flex flex-row flex-wrap">
+          <div className = "flex flex-col content-center items-center desc">
+               <h4>Current Title</h4>
+               <p>Senior Java Developer</p>
+          </div>
+          <div className = "flex flex-col content-top items-center text-center desc">
+                    <h4>Current Tech Stack</h4>
+                    <p>Java, Angular, MySQL, Linux</p>
+          </div>
+     </div>
+     <div className="detail flex flex-row flex-wrap justify-center content-left items-left">
+          <div className = "about">
+               <div className="detail-para-outer">
+                    <div className = "window-header">
+                         A little about me
+                    </div>
+                    <p className="detail-para">
+                         <span className="terminal-shell">jiro@mm-swe.com</span>:~$ cat ./aboutme.txt <br/>
+                         I started coding since I was a teen, and it's the only thing I've been passionate about.
+                         I have a bachelor's degree in Engineering, specializing in Computer Science. Very active on social media, especially Facebook.
+                         I talk about Tech (sometimes), Music (I love both classical and pop) and my girlfriend (she's so fricking cute, man).
+                         At my current job, I am developing and maintaining RESTful APIs in Java using the Spring Framework, 
+                         consuming their data from Angular front-end applications.
+                         As a senior developer, I also take part in system design decisions and stakeholder management.
+                         I did some freelance work back in the day, and I'm open for commission today.
+                    </p>
+               </div>
+          </div>
+          <div className="flex flex-col justify-left content-center gap-2">
+          Projects I am currently responsible for include:
+               <div className = "card">
+                    e-Library System
+               </div>
+               <div className = "card">
+                    e-Payment Integration (Visa, Master, MPU, e-Money)
+               </div>
+               <div className = "card">     
+                    News & Media Portal implementing Liferay CMS
+               </div>
+          </div>
      </div>
+     <div className = "info familiar text-center">
+         <h4>I am familiar with</h4>
+          <div className= "flex flex-wrap justify-center items-center badge-container gap-4">
+               <p> RESTful API Development</p>
+               <p>Spring Boot</p>
+               <p>Angular</p>
+               <p>Software Development Lifecycle</p>
+               <p>Liferay CMS</p>
+               <p> Python</p>
+               <p> SQL</p>
+               <p> NoSQL</p>
+               <p> Linux </p>
+          </div>
+     </div>
+     <div className = "info text-center">
+         <h4>I am interested in</h4>
+          <div className= "flex flex-wrap justify-center items-center badge-container gap-4">
+              <p> JavaScript</p>
+              <p> Software Engineering </p>
+              <p> Java </p>
+              <p> Cloud Technologies </p>
+              <p> DevOps </p>
+              <p> DevSecOps </p>
+              <p> Natural Languages </p>
+              <p> Music </p>
+          </div>
+     </div>
+     <div className = " text-center">
+          I am currently learning ReactJS in my free time.
+     </div>
+
      <div className = "flex flex-row content-center">
                <a href="https://www.github.com/jironemo/" target= "_blank" className = "flex flex-row content-center items-center"> <img className = "icon" src="https://cdn-icons-png.flaticon.com/512/25/25231.png"/></a>
                <a href="https://www.facebook.com/jiro.dev/" className = "flex flex-row content-center items-center"> <img className = "icon" src="https://upload.wikimedia.org/wikipedia/commons/6/6c/Facebook_Logo_2023.png"/></a>
      </div>
+     <div className="j-footer text-center">Made with 💖 by Jiro.</div>
 </div>
diff --git a/src/components/Contributors/Jiro/Jiro.jsx b/src/components/Contributors/Jiro/Jiro.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Jiro = () => {
+
+
+
+
+      const styleX={
+
+            color: '#e02514',
+            cursor:'pointer',
+            fontWeight:'bolder'
+
+      }
+
+  const handleClick = () => {
+    alert('Khit Khit ko chit tl 💖');
+  };
+
+  return (
+     <span> -- Son, <span onClick={handleClick} style={styleX}>boyfriend</span>, Software Developer, Coffee Addict. --</span>
+  );
+};
+
+export default Jiro;
diff --git a/src/styles/profiles/_jiro.scss b/src/styles/profiles/_jiro.scss
@@ -1,19 +1,224 @@
-.profile{
-    border-radius: 50%;
-    height:200px;
-    width:200px;
-}
+.jiro{
 
-.desc{
-    color:#31cd31;
-    border-radius: 40px;
-    border-bottom:5px solid rgb(115, 151, 171);
+    font-family: 'Cascadia Code', sans-serif;
+    border:5px #14b8a7 solid;
+    border-radius: 20px;
     padding:20px;
-    margin-top:20px;
+    .profile{
+        border-radius: 50%;
+        height:200px;
+        width:200px;
+        animation: profile-slide 2.5s linear infinite alternate;
+    }
+    .close{
+
+        position:absolute;
+        width:50px;
+        right:0;
+        color:red;
+    }
+
+      @keyframes quoteshadow {
+        0% {
+            color: white;
+        }
+        50%{
+            color:  #14b8a7;
+
+        }
+
+        100%{
+            color: white;
+        }
+      }
+
+    .desc{
+        border-radius: 10px;
+        background-color: #156a62;
+        margin:20px;
+        width:300px;
+        animation: bounce 0.75s linear infinite alternate;
+    }
+    .about-header{
+        font-weight:bolder;
+        text-decoration: underline;
+        font-size: 16pt;
+    }
+    .personal-header{
+        font-size:20px;
+        font-weight:bolder;
+    }
+    .detail ,.info{
+        @media screen and (min-width: 1024px) {
+            /* Styles for desktop */
+            width:60%;
+          }
+
+          @media screen and (min-width: 768px) and (max-width: 1023px) {
+            /* Styles for tablet */
+            width:100%;
+          }
+
+          @media screen and (max-width: 767px) {
+            /* Styles for mobile */
+            width:100%;
+          }
+    }
+
+
+    .info{
+        padding-bottom:20px;
+        margin-bottom:20px;
+        border-radius: 10px;
+        background-color: #076057;
+        border:2px white solid;
+    }
+    .familiar{
+        background-color: #0b5f56!important;
+    }
+    .icon{
+        height:50px;
+        width:50px;
+        margin:10px 10px;
+    }
+    .card{
+        border:3px solid white;
+        border-radius:10px;
+        padding:5px;
+        height:75px;
+        display:flex;
+        flex-direction:row;
+        align-items: center;
+        justify-content: left;
+    }
+    h4{
+        text-align: center;
+        background-color: #14b8a7;
+        width: 100%;
+        padding:10px;
+        margin:0;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        font-weight: bolder;
+    }
+
+    .desc p{
+        margin:20px;
+    }
+
+    .info p:hover{
+        animation: bounce-up 0.4s forwards;
+    }
+
+    .personal-detail{
+        margin-top: 20px;
+    }
+    .badge-container{
+        padding:20px;
+        padding-bottom:0px;
+    }
+    .quote {
+        font-weight: bolder;
+        padding:20px;
+        margin:10px;
+        display:flex;
+        justify-content: center;
+        align-items: center;
+        justify-items: center;
+        border-bottom-left-radius: 20px;
+        border-top-right-radius: 20px;
+        animation-name: quoteshadow;
+        animation-duration: 2s;
+        animation-iteration-count: infinite;
+    }
+    .name{
+        font-size: 20px;
+        font-weight:900;
+        color:#14b8a7
+    }
+    .detail{
+        margin:20px;
+    }
+    .detail-para{
+        height:200px;
+        overflow: auto;
+        text-align: justify;
+        padding:20px;
+        padding-top:10px;
+        background-color: black;
+    }
+
+    .detail-para-outer{
+        overflow: hidden;
+        border:2px solid white;
+        border-radius:20px;
+        box-shadow: 4px 4px rgb(36, 17, 123);
+        margin-top:10px;
+    }
+    .badge-container > p{
+
+        padding:5px 10px;
+        border:0.5px solid white;
+        border-radius:5px;
+    }
+    .terminal-shell{
+        color:rgb(0, 255, 0)!important;
+
+    }
+
+    .window-header{
+        background-color: #14b8a7;
+        font-weight: bolder;
+        font-family:Verdana, Geneva, Tahoma, sans-serif;
+        height:30px;
+        padding:4px;
+        text-align: center;
+        padding-left:10px;
+        width: 100%;
+    }
+
+    .badge-container > p:hover{
+        background-color: white;
+        color:rgb(44, 44, 139);
+        font-weight: bold;
+        cursor: pointer;
+    }
+
+    .about{
+        margin-bottom:20px;
+    }
+    .j-footer{
+        position:absolute;
+        bottom:0;
+        width:100%;
+    }
+
+
+
+    @keyframes profile-slide {
+        0% {
+            transform: translateX(-70px);
+        }
+        100% {
+            transform: translateX(70px); /* Adjust the distance as needed */
+        }
+    }
+
+    @keyframes bounce {
+        0%{
+            transform: translateY(20px);
+        }
+        100%{
+            transform: translateY(0px);
+        }
+    }
+    @keyframes bounce-up {
+        0%{
+            transform: translateY(0px);
+        }
+        100%{
+            transform: translateY(-2px);
+        }
+    }
 }
 
-.icon{
-    height:30px;
-    width:30px;
-    margin:10px 10px;
-}