Skip to content

Commit 70af752

Browse files
praduman-pandeypraduman-pandey
committed
skill section added
1 parent 5d103a1 commit 70af752

File tree

3 files changed

+152
-39
lines changed

3 files changed

+152
-39
lines changed

‎about.html

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050
<h2 class="common-heading">my bio-data</h2>
5151
<p>Magento 2 Developer with expertise in custom module creation, extension development, and theme customization.Focused on building scalable and efficient e-commerce platforms that support business growth.</p>
5252
<br>
53-
<!-- <p></p> -->
54-
<div class="bio-data-stats">
53+
54+
<div class="bio-data-stats" style="display: none;">
5555
<div class="bio-stats">
5656
<h3>Design</h3>
5757
<div class="bio-progress-bar">
@@ -89,6 +89,52 @@ <h3>MERN</h3>
8989
</div>
9090
</div> -->
9191
</div>
92+
93+
<div class="skills-container">
94+
<div class="skills-header">
95+
<h2 class="heading">My Skills</h2>
96+
<p>Here are some of my technical skills</p>
97+
</div>
98+
99+
<div class="skills-items">
100+
<div class="skill-item">
101+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/magento/magento-original.svg" width="60" class="skill-icon" alt="Magento">
102+
<h3 class="skill-name">Magento</h3>
103+
</div>
104+
105+
<div class="skill-item">
106+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg" width="60" class="skill-icon" alt="Php">
107+
<h3 class="skill-name">Php</h3>
108+
</div>
109+
110+
<div class="skill-item">
111+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" width="60" class="skill-icon" alt="HTML">
112+
<h3 class="skill-name">HTML5</h3>
113+
</div>
114+
<div class="skill-item">
115+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" width="60" class="skill-icon" alt="CSS">
116+
<h3 class="skill-name">CSS3</h3>
117+
</div>
118+
<div class="skill-item">
119+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" width="60" class="skill-icon" alt="JavaScript">
120+
<h3 class="skill-name">JavaScript</h3>
121+
</div>
122+
<div class="skill-item">
123+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jquery/jquery-original.svg" width="60" class="skill-icon" alt="JQuery">
124+
<h3 class="skill-name">JQuery</h3>
125+
</div>
126+
127+
<div class="skill-item">
128+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width="60" class="skill-icon" alt="React">
129+
<h3 class="skill-name">React</h3>
130+
</div>
131+
<div class="skill-item">
132+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" class="skill-icon" width="60" alt="Git">
133+
<h3 class="skill-name">Git</h3>
134+
</div>
135+
</div>
136+
</div>
137+
92138
<div class="bio-data-btn">
93139
<a href="https://drive.google.com/file/d/1_GC0t7SGGK95lXe-ycKBebRxMxcJmA7z/view?usp=sharing"
94140
download target="_blank" class="btn">View Resume</a>

‎css/style.css

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1113,10 +1113,13 @@ Media queries
11131113
}
11141114

11151115
/* 22-09-2022 */
1116+
.home.sticky .header{
1117+
animation: bar 0.3s ease-in;
1118+
}
1119+
11161120
.home .header{
11171121
background-color: rgba(255, 255, 255, 1);
11181122
box-shadow: var(--shadow);
1119-
position: relative;
11201123
}
11211124

11221125
footer.section {
@@ -1130,3 +1133,52 @@ footer.section {
11301133
body:not(.sticky) .scrollTop-style{
11311134
display: none;
11321135
}
1136+
1137+
/* my skills */
1138+
.skills-container{
1139+
margin: 15px 0px 40px;
1140+
1141+
.skills-header .heading{
1142+
font-size: 3rem;
1143+
}
1144+
}
1145+
1146+
.skills-items{
1147+
display: flex;
1148+
justify-content: space-around;
1149+
flex-wrap: wrap;
1150+
width: 100%;
1151+
transition: all 0.5s ease-in-out;
1152+
padding: 20px;
1153+
margin-top: 20px;
1154+
background-color: white;
1155+
border-radius: 8px;
1156+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
1157+
1158+
.skill-item {
1159+
text-align: center;
1160+
margin: 15px;
1161+
width: 120px;
1162+
}
1163+
1164+
.skill-icon {
1165+
width: 60px;
1166+
height: 60px;
1167+
margin-bottom: 10px;
1168+
object-fit: contain;
1169+
}
1170+
1171+
.skill-name {
1172+
font-weight: bold;
1173+
}
1174+
}
1175+
1176+
@keyframes bar {
1177+
0% {
1178+
top: -100px;
1179+
}
1180+
1181+
100% {
1182+
top: 0;
1183+
}
1184+
}

‎index.html

Lines changed: 51 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -94,45 +94,62 @@ <h1 class="hero-heading">Praduman Pandey</h1>
9494
<h2 class="common-heading">my bio-data</h2>
9595
<p>Magento 2 Developer with expertise in custom module creation, extension development, and theme customization.Focused on building scalable and efficient e-commerce platforms that support business growth.</p>
9696
<br>
97-
<!-- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi illo nulla dicta et.</p> -->
98-
<div class="bio-data-stats">
99-
<div class="bio-stats">
100-
<h3>Design</h3>
101-
<div class="bio-progress-bar">
102-
<span>80%</span>
103-
</div>
97+
98+
<div class="skills-container">
99+
<div class="skills-header">
100+
<h2 class="heading">My Skills</h2>
101+
<p>Here are some of my technical skills</p>
104102
</div>
105-
<div class="bio-stats">
106-
<h3>HTML</h3>
107-
<div class="bio-progress-bar bio-progress-2">
108-
<span>99%</span>
103+
104+
<div class="skills-items">
105+
<div class="skill-item">
106+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/magento/magento-original.svg" width="60" class="skill-icon" alt="Magento">
107+
<h3 class="skill-name">Magento</h3>
109108
</div>
110-
</div>
111-
<div class="bio-stats">
112-
<h3>CSS</h3>
113-
<div class="bio-progress-bar bio-progress-3">
114-
<span>80%</span>
109+
110+
<div class="skill-item">
111+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/php/php-original.svg" width="60" class="skill-icon" alt="Php">
112+
<h3 class="skill-name">Php</h3>
115113
</div>
116-
</div>
117-
<div class="bio-stats">
118-
<h3>Boostrap</h3>
119-
<div class="bio-progress-bar bio-progress-4">
120-
<span>75%</span>
114+
115+
<div class="skill-item">
116+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" width="60" class="skill-icon" alt="HTML">
117+
<h3 class="skill-name">HTML5</h3>
121118
</div>
122-
</div>
123-
<div class="bio-stats">
124-
<h3>JavaScript</h3>
125-
<div class="bio-progress-bar bio-progress-5">
126-
<span>70%</span>
119+
<div class="skill-item">
120+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" width="60" class="skill-icon" alt="CSS">
121+
<h3 class="skill-name">CSS3</h3>
127122
</div>
128-
</div>
129-
<!-- <div class="bio-stats">
130-
<h3>MERN</h3>
131-
<div class="bio-progress-bar bio-progress-6">
132-
<span>70%</span>
123+
<div class="skill-item">
124+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" width="60" class="skill-icon" alt="JavaScript">
125+
<h3 class="skill-name">JavaScript</h3>
126+
</div>
127+
<div class="skill-item">
128+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/jquery/jquery-original.svg" width="60" class="skill-icon" alt="JQuery">
129+
<h3 class="skill-name">JQuery</h3>
133130
</div>
134-
</div> -->
131+
132+
<div class="skill-item">
133+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" width="60" class="skill-icon" alt="React">
134+
<h3 class="skill-name">React</h3>
135+
</div>
136+
<div class="skill-item">
137+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" class="skill-icon" width="60" alt="Git">
138+
<h3 class="skill-name">Git</h3>
139+
</div>
140+
141+
<!-- <div class="skill-item">
142+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/mysql/mysql-original-wordmark.svg" class="skill-icon" width="60" alt="MySql">
143+
<h3 class="skill-name">MySql</h3>
144+
</div>
145+
146+
<div class="skill-item">
147+
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/graphql/graphql-plain.svg" class="skill-icon" width="60" alt="MySql">
148+
<h3 class="skill-name">MySql</h3>
149+
</div> -->
150+
</div>
135151
</div>
152+
136153
<div class="bio-data-btn">
137154
<a href="https://drive.google.com/file/d/1_GC0t7SGGK95lXe-ycKBebRxMxcJmA7z/view?usp=sharing"
138155
download target="_blank" class="btn">View Resume</a>
@@ -161,16 +178,14 @@ <h2 class="common-heading">Latest Works</h2>
161178
<div class="img-overlay p-btn--1">
162179
<img src="images/folio/1.jpg" alt="my works" />
163180
<div class="overlay">
164-
<a href="http://charcounter.thapaonlineclass.com/" target="_thapa" class="common-heading">Project
165-
1</a>
181+
<a href="http://charcounter.thapaonlineclass.com/" target="_thapa" class="common-heading">Project 1</a>
166182
</div>
167183
</div>
168184

169185
<div class="img-overlay p-btn--3">
170186
<img src="images/folio/4.jpg" alt="my works" />
171187
<div class="overlay">
172-
<a href="http://charcounter.thapaonlineclass.com/" target="_thapa" class="common-heading">Project 2
173-
</a>
188+
<a href="http://charcounter.thapaonlineclass.com/" target="_thapa" class="common-heading">Project 2</a>
174189
</div>
175190
</div>
176191

0 commit comments

Comments
 (0)