Skip to content

Commit

Permalink
✨ feat(profile): changing my profile for more info + modernized ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@jironemo
jironemo committed Nov 22, 2023
1 parent 5f665e7 commit f992122
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 56 deletions.
56 changes: 33 additions & 23 deletions content/profile/aungkhaingkhant.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ tags:
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"/>
<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>
<Jiro/>
<span>{<Jiro/>}</span>
</div>
<div className="quote">
<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">
Expand All @@ -34,28 +34,35 @@ import Jiro from "@/components/Contributors/Jiro/Jiro";
</div>
</div>
<div className="detail flex flex-row flex-wrap justify-center content-left items-left">
<div className = "about">
<p className="text-center about-header">A little about Me </p>
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:
</div>
<div className="flex flex-col justify-left content-center gap-2">
<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 className = "about">
<div className="detail-para-outer">
<div className = "window-header">
A little about me
</div>
<p className="detail-para">
<span className="terminal-shell">[email protected]</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>
Expand Down Expand Up @@ -84,6 +91,9 @@ import Jiro from "@/components/Contributors/Jiro/Jiro";
<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>
Expand Down
13 changes: 3 additions & 10 deletions src/components/Contributors/Jiro/Jiro.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<p>Son, <span onMouseEnter={setStyleX(secStyle)} onMouseLeave={setStyleX(firstStyle)} onClick={handleClick} style={styleX}>Khit's boyfriend</span>, Software Developer, Coffee Addict. --</p>
<span> -- Son, <span onClick={handleClick} style={styleX}>boyfriend</span>, Software Developer, Coffee Addict. --</span>
);
};

Expand Down
125 changes: 102 additions & 23 deletions src/styles/profiles/_jiro.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
.jiro{

font-family: 'Cascadia Code', sans-serif;
border:5px #14b8a7 solid;
border-radius: 20px;
padding: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 {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -90,6 +105,10 @@
.desc p{
margin:20px;
}

.info p:hover{
animation: bounce-up 0.4s forwards;
}

.personal-detail{
margin-top: 20px;
Expand All @@ -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;
Expand All @@ -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{
Expand All @@ -134,6 +183,7 @@
font-weight: bold;
cursor: pointer;
}

.about{
margin-bottom:20px;
}
Expand All @@ -142,4 +192,33 @@
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);
}
}
}

0 comments on commit f992122

Please sign in to comment.