aria label added and added icons to links

Author: muhammad-awais-web-dev

index.html

@@ -210,9 +210,8 @@ <h2>Projects</h2>
                 <div class="projects-list">
                     <div class="project" data-skills="html,css,wp,elementor">
                     <div class="project-title">Delicacy Restaurant Demo</div>
-                    <div class="project-desc">Responsive restaurant website built with WordPress + Elementor.
-                        <a href="https://www.linkedin.com/in/muhammad-awais-web-dev/" target="_blank">Delicacy Project.</a>
-                    </div>
+                    <div class="project-desc">Responsive restaurant website built with WordPress + Elementor.</div>
+                    <a href="https://www.linkedin.com/in/muhammad-awais-web-dev/" class="projects-link" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square"></i> View Project</a>
                     </div>
                     <div class="project" data-skills="html,css,js,figma,ux">
                     <div class="project-title">Landing Page Prototype</div>
@@ -223,20 +222,17 @@ <h2>Projects</h2>
                     <div class="project-desc">WooCommerce shop setup with custom Elementor styling.</div>
                     </div>
                     <div class="project" data-skills="uxr,usability,figma,wireframing,prototyping">
-                    <div class="project-title">CtrlAlt Shop – UX Design Case Study</div>
-                    <div class="project-desc">
-                        Mobile e-commerce concept for gaming gear. 
-                        <a href="https://drive.google.com/file/d/1Mku4B2tyCME5JuWsHLbX8Vj01tVByW1l/view?usp=drivesdk" target="_blank">Case Study</a>
-                    </div>
+                    <div class="project-title">CtrlAlt Shop - UX Design Case Study</div>
+                    <div class="project-desc">Mobile e-commerce concept for gaming gear.</div>
+                    <a href="https://drive.google.com/file/d/1Mku4B2tyCME5JuWsHLbX8Vj01tVByW1l/view?usp=drivesdk" class="projects-link" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square"></i> Case Study</a>
                     </div>
                     <div class="project" data-skills="ux,wp,elementor,branding,responsive,communication">
                     <div class="project-title">Freelancer Portfolios Initiative</div>
-                    <div class="project-desc">5 custom portfolio sites for creatives using WordPress & Elementor.
-                        <a href="https://www.linkedin.com/in/muhammad-awais-web-dev/" target="_blank">Portfolio Project.</a>
-                    </div>
+                    <div class="project-desc">5 custom portfolio sites for creatives using WordPress & Elementor.</div>
+                    <a href="https://www.linkedin.com/in/muhammad-awais-web-dev/" class="projects-link" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square"></i> View Project</a>
                     </div>
                     <div class="project" data-skills="html,css,js,responsive">
-                    <div class="project-title">This Portfolio Website</div>
+                    <div class="project-title">Portfolio Website</div>
                     <div class="project-desc">This portfolio site built with HTML, CSS, and JavaScript.</div>
                     </div>
                 </div>

skill.css

@@ -47,6 +47,7 @@
   padding: 12px;
   border-radius: 8px;
   cursor: pointer;
+  gap: 8px;
   transition: background 0.3s, transform 0.2s;
 }
 .project.highlight {
@@ -60,12 +61,14 @@
 }
 .project-desc {
   font-size: 0.9em;
+  margin: 10px 0;
 }
-a {
+.projects-link {
+  font-size: 1rem;
   color: #66b3ff;
   text-decoration: none;
 }
-a:hover {
+.project-link:hover {
   text-decoration: underline;
 }