From f992122ad25b3afac0ce8244b50857b09eec9c9f Mon Sep 17 00:00:00 2001 From: aung_khaing_khant Date: Wed, 22 Nov 2023 14:36:06 +0630 Subject: [PATCH] :sparkles: feat(profile): changing my profile for more info + modernized ui --- content/profile/aungkhaingkhant.mdx | 56 ++++++---- src/components/Contributors/Jiro/Jiro.jsx | 13 +-- src/styles/profiles/_jiro.scss | 125 ++++++++++++++++++---- 3 files changed, 138 insertions(+), 56 deletions(-) diff --git a/content/profile/aungkhaingkhant.mdx b/content/profile/aungkhaingkhant.mdx index 7756727..d496307 100644 --- a/content/profile/aungkhaingkhant.mdx +++ b/content/profile/aungkhaingkhant.mdx @@ -15,12 +15,12 @@ tags: import Jiro from "@/components/Contributors/Jiro/Jiro";
- +

Hi, I am Aung Khaing Khant

- + {}
-
+

I write mediocre code pretending I know what I'm doing

@@ -34,28 +34,35 @@ import Jiro from "@/components/Contributors/Jiro/Jiro";
-
-

A little about Me

- 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. - Projects I am currently responsible for include: -
-
-
- e-Library System -
-
- e-Payment Integration (Visa, Master, MPU, e-Money) -
-
- News & Media Portal implementing Liferay CMS +
+
+
+ A little about me
+

+ jiro@mm-swe.com:~$ cat ./aboutme.txt
+ 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. +

+
+
+
+ Projects I am currently responsible for include: +
+ e-Library System
+
+ e-Payment Integration (Visa, Master, MPU, e-Money) +
+
+ News & Media Portal implementing Liferay CMS +
+

I am familiar with

@@ -84,6 +91,9 @@ import Jiro from "@/components/Contributors/Jiro/Jiro";

Music

+
+ I am currently learning ReactJS in my free time. +
diff --git a/src/components/Contributors/Jiro/Jiro.jsx b/src/components/Contributors/Jiro/Jiro.jsx index 1e2f265..aa83e91 100644 --- a/src/components/Contributors/Jiro/Jiro.jsx +++ b/src/components/Contributors/Jiro/Jiro.jsx @@ -3,29 +3,22 @@ import React from 'react'; const Jiro = () => { - const [styleX,setStyleX] = useState({ - color: '#e02514', - cursor:'pointer', - fontWeight:'bolder' - }); + - const firstStyle={ + const styleX={ color: '#e02514', cursor:'pointer', fontWeight:'bolder' } - const secStyle={ - color:'white' - } const handleClick = () => { alert('Khit Khit ko chit tl 💖'); }; return ( -

Son, Khit's boyfriend, Software Developer, Coffee Addict. --

+ -- Son, boyfriend, Software Developer, Coffee Addict. -- ); }; diff --git a/src/styles/profiles/_jiro.scss b/src/styles/profiles/_jiro.scss index afe5315..acb1d16 100644 --- a/src/styles/profiles/_jiro.scss +++ b/src/styles/profiles/_jiro.scss @@ -1,5 +1,6 @@ .jiro{ + font-family: 'Cascadia Code', sans-serif; border:5px #14b8a7 solid; border-radius: 20px; padding:20px; @@ -7,6 +8,14 @@ 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 { @@ -22,41 +31,47 @@ color: white; } } - @keyframes heartcolor { - 0% { - color: white; - } - 50%{ - color: #e02514; - - } - - 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{ - width:50%; padding-bottom:20px; margin-bottom:20px; border-radius: 10px; background-color: #076057; + border:2px white solid; } .familiar{ background-color: #0b5f56!important; @@ -67,7 +82,7 @@ margin:10px 10px; } .card{ - border:3px solid rgba(255, 255, 255,0.5); + border:3px solid white; border-radius:10px; padding:5px; height:75px; @@ -90,6 +105,10 @@ .desc p{ margin:20px; } + + .info p:hover{ + animation: bounce-up 0.4s forwards; + } .personal-detail{ margin-top: 20px; @@ -102,7 +121,10 @@ 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; @@ -115,17 +137,44 @@ color:#14b8a7 } .detail{ - width:75%; 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; - background-color: transparent; - color:bisque; + } + .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{ @@ -134,6 +183,7 @@ font-weight: bold; cursor: pointer; } + .about{ margin-bottom:20px; } @@ -142,4 +192,33 @@ bottom:0; width:100%; } -} \ No newline at end of file + + + + @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); + } + } +} +