Skip to content

Commit d2cd007

Browse files
muhammad-awais-web-devmuhammad-awais-web-dev
committed
Skills section and CSS updates
1 parent e46a296 commit d2cd007

File tree

3 files changed

+173
-4
lines changed

3 files changed

+173
-4
lines changed

‎index.html‎

Lines changed: 62 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<title>Muhammad Awais | Web Developer & Ux/Ui Designer</title>
77
<link rel="stylesheet" href="styles.css">
88
<link rel="stylesheet" href="Decor.css">
9-
<link rel="stylesheet" href="card.css" />
9+
<link rel="stylesheet" href="card.css" />
10+
<link rel="stylesheet" href="skill.css" />
1011
<link rel="icon" href="Favicon.svg" type="image/x-icon">
1112
<meta name="description" content="Portfolio of Muhammad Awais, showcasing web development and UX/UI design skills.">
1213
<meta name="keywords" content="Web Developer, UX/UI Designer, Portfolio, Muhammad Awais, Frontend Developer, Web Design, User Experience, User Interface">
@@ -178,16 +179,73 @@ <h2>About Me</h2>
178179
</div> -->
179180
</div>
180181
</section>
181-
<section id="skills">
182-
<h2>Skills</h2>
182+
<!-- Skills ↔ Projects Section -->
183+
<section class="skills-projects-section" id="skills">
184+
<div class="container">
185+
<!-- Skills Column -->
186+
<div class="column">
187+
<h2>Skills</h2>
188+
<div class="skills-grid">
189+
<div class="skill" data-skill="html">HTML5</div>
190+
<div class="skill" data-skill="css">CSS3</div>
191+
<div class="skill" data-skill="js">JavaScript</div>
192+
<div class="skill" data-skill="wp">WordPress</div>
193+
<div class="skill" data-skill="elementor">Elementor</div>
194+
<div class="skill" data-skill="woocommerce">WooCommerce</div>
195+
<div class="skill" data-skill="figma">Figma</div>
196+
<div class="skill" data-skill="ux">UX Design</div>
197+
<div class="skill" data-skill="uxr">UX Research</div>
198+
<div class="skill" data-skill="usability">Usability Testing</div>
199+
<div class="skill" data-skill="wireframing">Wireframing</div>
200+
<div class="skill" data-skill="prototyping">Prototyping</div>
201+
<div class="skill" data-skill="branding">Branding</div>
202+
<div class="skill" data-skill="responsive">Responsive Design</div>
203+
<div class="skill" data-skill="communication">Communication</div>
204+
</div>
205+
</div>
183206

184-
207+
<!-- Projects Column -->
208+
<div class="column">
209+
<h2>Projects</h2>
210+
<div class="projects-list">
211+
<div class="project" data-skills="html,css,wp,elementor">
212+
<div class="project-title">Sindhri Restaurant Demo</div>
213+
<div class="project-desc">Responsive restaurant website built with WordPress + Elementor.</div>
214+
</div>
215+
<div class="project" data-skills="html,css,js,figma,ux">
216+
<div class="project-title">Landing Page Prototype</div>
217+
<div class="project-desc">Figma to live HTML/CSS/JS landing page with UX improvements.</div>
218+
</div>
219+
<div class="project" data-skills="wp,woocommerce,css,figma">
220+
<div class="project-title">Small Business eCommerce</div>
221+
<div class="project-desc">WooCommerce shop setup with custom Elementor styling.</div>
222+
</div>
223+
<div class="project" data-skills="uxr,usability,figma,wireframing,prototyping">
224+
<div class="project-title">CtrlAlt Shop – UX Design Case Study</div>
225+
<div class="project-desc">
226+
Mobile e-commerce concept for gaming gear.
227+
<a href="https://drive.google.com/file/d/1Mku4B2tyCME5JuWsHLbX8Vj01tVByW1l/view?usp=drivesdk" target="_blank">Case Study</a>
228+
</div>
229+
</div>
230+
<div class="project" data-skills="ux,wp,elementor,branding,responsive,communication">
231+
<div class="project-title">Freelancer Portfolios Initiative</div>
232+
<div class="project-desc">5 custom portfolio sites for creatives using WordPress & Elementor.</div>
233+
</div>
234+
<div class="project" data-skills="html,css,js,responsive">
235+
<div class="project-title">Portfolio Website</div>
236+
<div class="project-desc">This portfolio site built with HTML, CSS, and JavaScript.</div>
237+
</div>
238+
</div>
239+
</div>
240+
</div>
185241
</section>
242+
186243
<section id="certifications"><h2>Certifications</h2></section>
187244
<section id="contact"><h2>Contact</h2></section>
188245
</main>
189246
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
190247
<script src="card.js"></script>
248+
<script src="skill.js"></script>
191249
<script src="javascript.js"></script>
192250
<script src="https://kit.fontawesome.com/4cfda748cf.js" crossorigin="anonymous"></script>
193251
</body>

‎skill.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.skills-projects-section {
2+
padding: 40px;
3+
color: white;
4+
}
5+
.container {
6+
display: grid;
7+
grid-template-columns: 1fr 1fr;
8+
gap: 30px;
9+
max-width: 1200px;
10+
margin: auto;
11+
}
12+
.column {
13+
background: rgba(255,255,255,0.03);
14+
border-radius: 10px;
15+
padding: 20px;
16+
}
17+
.column h2 {
18+
margin-top: 10px;
19+
margin-bottom: 20px;
20+
}
21+
.skills-grid {
22+
display: grid;
23+
grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
24+
gap: 12px;
25+
}
26+
.skill {
27+
background: rgba(0,0,0);
28+
padding: 10px;
29+
border-radius: 8px;
30+
text-align: center;
31+
cursor: pointer;
32+
transition: background 0.3s, transform 0.2s;
33+
}
34+
.skill.highlight {
35+
background: #fffe;
36+
color: #000;
37+
font-weight: bold;
38+
transform: scale(1.05);
39+
}
40+
.projects-list {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 12px;
44+
}
45+
.project {
46+
background: rgba(0,0,0);
47+
padding: 12px;
48+
border-radius: 8px;
49+
cursor: pointer;
50+
transition: background 0.3s, transform 0.2s;
51+
}
52+
.project.highlight {
53+
background: #fffe;
54+
color: #000;
55+
transform: scale(1.02);
56+
}
57+
.project-title {
58+
font-weight: bold;
59+
margin-bottom: 5px;
60+
}
61+
.project-desc {
62+
font-size: 0.9em;
63+
}
64+
a {
65+
color: #66b3ff;
66+
text-decoration: none;
67+
}
68+
a:hover {
69+
text-decoration: underline;
70+
}
71+
72+
/* Responsive layout */
73+
@media (max-width: 768px) {
74+
.container {
75+
grid-template-columns: 1fr;
76+
}
77+
}

‎skill.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const skills = document.querySelectorAll('.skill');
2+
const projects = document.querySelectorAll('.project');
3+
4+
projects.forEach(project => {
5+
project.addEventListener('mouseenter', () => {
6+
clearHighlights();
7+
project.classList.add('highlight');
8+
const relatedSkills = project.dataset.skills.split(',');
9+
relatedSkills.forEach(s => {
10+
const skillEl = document.querySelector(`.skill[data-skill="${s}"]`);
11+
if (skillEl) skillEl.classList.add('highlight');
12+
});
13+
});
14+
project.addEventListener('mouseleave', clearHighlights);
15+
});
16+
17+
skills.forEach(skill => {
18+
skill.addEventListener('mouseenter', () => {
19+
clearHighlights();
20+
skill.classList.add('highlight');
21+
const skillName = skill.dataset.skill;
22+
projects.forEach(project => {
23+
if (project.dataset.skills.includes(skillName)) {
24+
project.classList.add('highlight');
25+
}
26+
});
27+
});
28+
skill.addEventListener('mouseleave', clearHighlights);
29+
});
30+
31+
function clearHighlights() {
32+
skills.forEach(s => s.classList.remove('highlight'));
33+
projects.forEach(p => p.classList.remove('highlight'));
34+
}

0 commit comments

Comments
 (0)