Skip to content

Commit

Permalink
About me halfway done, skills and profiniencies done.
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhammadmahfuj
muhammadmahfuj committed Jul 7, 2024
1 parent a3c3ae3 commit 77aaf56
Show file tree
Hide file tree
Showing 2 changed files with 282 additions and 14 deletions.
133 changes: 126 additions & 7 deletions css/portfolio.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
--color-body-text: #7D89A6;
/* border color also gets body text color */
--color-container: #1A2034;
--color-container-border: #383E53;
--color-small-text: #CBD8F8;
/* all small titles gets this color */
--color-footer: #181B28;
--color-background: #1E2133;
--color-hover: #7091FF;
--max-width: 130rem;
}
/* dropshadow | /* offset-x | offset-y | blur-radius | spread-radius | color
box-shadow: 1px 4px 5px 0px rgba(27, 28, 37, 100%); */
Expand All @@ -28,16 +30,22 @@ body{
font-family: 'Fira Code', Arial, Helvetica, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
}
.main{
max-width: 120rem;
margin: auto;
max-width: var(--max-width);

}

/* common styles */
h1, h2, h3 {
color: var(--color-secondary);
color: var(--color-primary);
margin: 0;
}
h1 {
font-size: 4.5rem;
}
h2,h3{
font-size: 3.5rem;
}
a{
text-decoration: none;
}
Expand All @@ -63,6 +71,14 @@ li{
border-color: var(--color-body-text);
} */

.container{
border-radius: 0.37rem;
background-color: var(--color-container);
border: 0.04rem solid var(--color-container-border);
margin-bottom: 2rem;
padding: 2rem;
}

/* header */

/* navbar */
Expand Down Expand Up @@ -98,6 +114,12 @@ li{
.nav-items{
color: var(--color-small-text);
}

.nav-items:hover, .nav-items:active{
color: var(--color-hover);
}


/* hero section */

.header {
Expand All @@ -109,30 +131,127 @@ li{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0rem 7rem 0rem 13rem;
margin: 0rem 7rem 0rem 10rem;
}
.hero-image{
width: 50rem;
object-fit: cover;
}

.hero-text{
max-width: 45rem;
max-width: 60rem;
display: flex;
flex-direction: column;
gap: 0.05rem;
}



/* main */

/* about me */
.about-me{
background-color: var(--color-footer);
}
.about-me-body{
padding: 11rem 13rem ;
}
.image-container{
width: 39rem;
height: 42rem;
position: relative;

}
.small-img{
max-height: 100%;
object-fit: cover ;
/* padding-top: 1.5rem; */
transform: scaleX(-1);
/* position: absolute; */
}

.social-media-icons{
position: absolute;
top: 1rem;
left: -1rem;
display: flex;
flex-direction: column;
gap: 1.2rem;
}


/* skills */

.skillset-header{
text-align: center;
margin-top: 7.5rem;
margin-bottom: 5rem;
}

.all-skills{
display: flex;
justify-content: space-between;
align-items: center;
margin: 8rem;
}

.progressbar{
background-color: var(--color-body-text);
border-radius: 1px;
height: .5rem;
margin-top: 2rem;
margin-bottom: .5rem;
width: 35rem;
}

.skill-set{
display: flex;
flex-direction: column;
font-size: 2.5rem;
gap: 2rem;

}

.skills{
height: .5rem;
}
.html{
width: 70%; background-color: #EA580C;
}
.css{
width: 60%; background-color: #2196F3;
}
.js{
width: 10%; background-color: #FFDF00;
}



.skillset__icons{
float: left;
padding-right: 2rem;
}


.placeholder__tech{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 18rem;
height: 18rem;
}

.grid{
display: grid;
column-gap: 5rem;
font-size: 2.5rem;
}

.grid--three-col{
grid-template-columns: repeat(3, 1fr );
}

/* skills */


/* footer */
Expand Down
163 changes: 156 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,8 @@
<!-- hero section -->
<article class="hero">
<section class="hero-text">
<h1>I'm <span class="h1-first-color">Muhammad Mahfuj</span></h1>
<h2>
<span class="h1-first-color">{</span>a:Newbie Coder;<span
class="h1-first-color"
>}</span
>
</h2>
<h1><span class="h1-second-color">I'm</span> Muhammad Mahfuj</h1>
<h2>{<span class="h1-second-color">a:Newbie Coder;</span>}</h2>
<p>
Tech enthusiast passionate about learning web and software
development, aiming to make a significant impact in the tech world.
Expand All @@ -64,8 +59,162 @@ <h2>
<!-- main section -->
<main class="main">
<!-- about me -->
<article class="about-me">
<section class="about-me-body">
<section class="container image-container">
<img
class="small-img"
src="images/formal dp transparent.png"
alt=""
/>
<section class="social-media-icons">
<span class="icon-holder github-icon">
<a href="https://github.com/muhammadmahfuj" target="”_blank”"
><img
src="images/icons/github-icon.svg"
alt="image of github icon"
/></a>
</span>
<span class="icon-holder linkedin-icon">
<a
href="https://www.linkedin.com/in/muhammadmahfuj/"
target="”_blank”"
><img
src="images/icons/linkedin-icon.svg"
alt="icon of linkedin"
/></a>
</span>
<span class="icon-holder fb-icon">
<a
href="https://www.facebook.com/muhammadmahfujprofile/"
target="”_blank”"
><img src="images/icons/facebook-icon.svg" alt=""
/></a>
</span>
<span class="icon-holder whatsapp-icon">
<a href="https://wa.me/+8801747599247" target="”_blank”"
><img
src="images/icons/whatsapp-icon.svg"
alt="whatsapp icon"
/></a>
</span>
<span class="icon-holder yt-icon">
<a
href="https://www.youtube.com/@thebeduincode"
target="”_blank”"
><img src="images/icons/youtube-icon.svg" alt="Youtube icon"
/></a>
</span>
</section>
</section>
</section>
</article>

<!-- skills -->

<article>
<header class="skillset-header">
<h2>Skills and Proficiencies</h2>
<p>Mastering Digital Technologies and Tools</p>
</header>
<section class="all-skills">
<section class="skill-set">
<div class="container">
<span class="skillset__icons">
<img src="images/icons/html-icon.svg" alt="html5 icon" />
</span>
<p>Html</p>
<div class="progressbar">
<div class="skills html"></div>
</div>
</div>

<div class="container">
<span class="skillset__icons">
<img src="images/icons/css-icon.svg" alt="html5 icon" />
</span>
<p>CSS</p>
<div class="progressbar">
<div class="skills css"></div>
</div>
</div>

<div class="container">
<span class="skillset__icons">
<img src="images/icons/js-icon.svg" alt="html5 icon" />
</span>
<p>JS</p>
<div class="progressbar">
<div class="skills js"></div>
</div>
</div>
</section>

<section class="grid grid--three-col">
<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/tailwind-icon.svg" alt="html5 icon" />
</span>
<p>Tailwind</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/react-icon.svg" alt="html5 icon" />
</span>
<p>React</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/node-icon.svg" alt="html5 icon" />
</span>
<p>Node JS</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/mongodb-icon.svg" alt="html5 icon" />
</span>
<p>MongoDB</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/python-icon.svg" alt="html5 icon" />
</span>
<p>Python</p>
</div>
<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/three-icon.svg" alt="html5 icon" />
</span>
<p>Three.js</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/github-icon-2.svg" alt="html5 icon" />
</span>
<p>GitHub</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/vscode-icon.svg" alt="html5 icon" />
</span>
<p>VS Code</p>
</div>

<div class="container placeholder__tech">
<span class="technologies__icons">
<img src="images/icons/figma-icon.svg" alt="html5 icon" />
</span>
<p>Figma</p>
</div>
</section>
</section>
</article>
</main>
<footer class="footer">
<!-- connect with me -->
Expand Down

0 comments on commit 77aaf56

Please sign in to comment.