GitHub - YasirAwan4831/arch-technologies-internship-task-1-portfolio-website: Task 1 – Personal Portfolio Website created for my Web Development Internship at Arch Technologies. Built using simple HTML, CSS and JavaScript to showcase skills, projects and contact information.

🌟 MUHAMMAD YASIR — FULL STACK DEVELOPER PORTFOLIO

{
  "name": "Muhammad Yasir",
  "role": "Full Stack Developer",
  "location": "Islamabad, Pakistan",
  "experience": "2+ Years",
  "projects": "12+ Completed",
  "internships": "3 in 1 Year",
  "availability": "Open to Work"
}

🎯 PURPOSE & GOALS

🎨 Design Goal	⚡ Technical Goal	🚀 Career Goal
Create a visually stunning and memorable portfolio	Demonstrate proficiency in modern frontend technologies	Attract potential employers and clients
Implement smooth, engaging animations	Showcase clean, maintainable code architecture	Land more internship opportunities
Ensure flawless responsive experience	Practice JavaScript DOM manipulation and data handling	Build a strong personal brand online

✅ Key Objectives Achieved

📚 Project Articles & Resources

Learn how this portfolio was built step-by-step through detailed articles:

🎥 Video Walkthrough

Watch the complete project explanation on YouTube:

https://youtu.be/XcyAGuaVp_E?si=C4-lFnUrNDRoJjeT![alt text](image.png))](https://youtu.be/BhO4PwLpRP4?si=w8t53QDoVybIJ4lD)

✨ KEY FEATURES

Feature	Description	Status
🏠 Hero Section	Typed animations, floating tech cards, animated stats	✅
👤 About Me	Bio, ambitions, personal info card with status indicator	✅
💼 Projects Gallery	12 projects with filters, load more, live demo links	✅
🛠️ Skills Display	4 categories, 24+ skills with colored icons, soft skills	✅
📊 Experience Timeline	3 internships with contributions and tech tags	✅
📚 Education & Certs	3 degrees + 6 certifications with hover effects	✅
🏆 Achievements	6 milestones with gradient icons and animations	✅
💬 Testimonials	Auto-sliding carousel with client reviews	✅
📝 Blog System	6 full articles with modal popup, rich formatting	✅
💰 Services Pricing	3 service categories with 3 plans each, feature lists	✅
📬 Contact Form	Validation, success/error messages, 8 social links	✅
🎭 Interactive UI	Custom cursor, page loader, scroll animations	✅
🌓 Theme Toggle	Dark/light mode with localStorage persistence	✅
📱 Mobile Menu	Hamburger menu with smooth transitions	✅

🛠️ TECHNOLOGY STACK

Frontend

Backend & Tools

Libraries & Frameworks

Design Tools

📂 PROJECT STRUCTURE

📦 muhammad-yasir-portfolio
├── 📁 assets
│ ├── 📁 images
│ │ ├── 🖼️ profile.jpg
│ │ ├── 🖼️ project-1.jpg
│ │ ├── 🖼️ project-2.jpg
│ │ └── ...
│ └── 📁 icons
│ ├── favicon.ico
│ └── ...
├── 📄 index.html # Main HTML file (structure only)
├── 📄 style.css # Complete styling (4000+ lines)
├── 📄 script.js # All data & functionality (3000+ lines)
├── 📄 README.md # Project documentation
└── 📄 LICENSE # MIT License

📊 File Statistics

LIVE DEMO

💻 INSTALLATION & SETUP

📋 Prerequisites

A modern web browser (Chrome, Firefox, Safari, Edge)
Basic understanding of HTML/CSS/JavaScript (for modifications)
Git (optional, for cloning)

⚡ Quick Start

# Clone the repository
git clone https://github.com/YasirAwan4831/muhammad-yasir-portfolio.git

# Navigate to project directory
cd muhammad-yasir-portfolio

# Open in browser
open index.html
# OR simply double-click index.html

🔧 Customization Guide

📝 How to Update Personal Information

Open `script.js` and find the `DATA` object at the top: ```javascript const DATA = { personal: { name: 'Muhammad Yasir', // Change your name role: 'Full Stack Developer', // Change your role email: 'my4831@gmail.com',// Change your email location: 'Islamabad, Pakistan', // Change your location // ... more fields }, // ... }; ```

🖼️ How to Add Your Own Images

1. Place your images in the `assets/images/` folder 2. Update image paths in `DATA.projects` array: ```javascript { title: 'Your Project', image: './assets/images/your-image.jpg', // Update this path // ... } ```

🎨 How to Change Colors

Open `style.css` and modify CSS variables at the top: ```css :root { --primary: #00e5a0; /* Main green color */ --primary-dark: #00b87a; /* Darker green */ --accent: #4d9fff; /* Blue accent */ /* ... more colors */ } ```

📱 RESPONSIVE DESIGN

<div align="center"> Device | Breakpoint | Optimization --- | --- | --- 🖥️ Desktop | > 1024px | Full layout, custom cursor, hover effects 💻 Laptop | 1024px | Grid adjustments, reduced spacing 📱 Tablet | 768px - 1024px | Hamburger menu, single column sections 📱 Mobile | < 768px | Stacked layout, touch-friendly buttons 📱 Small Mobile | < 480px | Compact cards, simplified stats </div>

📊 Responsive Features

🎨 COLOR SCHEME & TYPOGRAPHY

🌈 Color Palette

:root {
    --primary: #00e5a0;      /* Vibrant green - success, energy */
    --accent: #4d9fff;       /* Bright blue - trust, professionalism */
    --bg-base: #080c10;      /* Deep dark - sophistication */
    --text-1: #f0f4f8;       /* Light gray - readability */
    --text-2: #a0aec0;       /* Medium gray - secondary text */
    --text-3: #64748b;       /* Dark gray - muted elements */
}

🔤 Typography

| Font Family | Usage                 | Weight      | Fallback   |
|------------|----------------------|------------|-----------|
| Syne       | Headings (h1-h6)     | 700, 800   | sans-serif |
| DM Sans    | Body text, paragraphs| 300, 400, 500 | sans-serif |

📊 PERFORMANCE METRICS

🔧 CORE FUNCTIONALITY

🧠 JavaScript Architecture

The entire portfolio is powered by a single JavaScript file containing:

// 1. DATA Object - All content in one place
const DATA = {
    personal: { /* ... */ },
    projects: [ /* 12 items */ ],
    skills: [ /* 24+ items */ ],
    experience: [ /* 3 items */ ],
    blogPosts: [ /* 6 articles */ ],
    // ... 15+ data categories
}

// 2. RENDER Object - All DOM manipulation
const RENDER = {
    heroStats() { /* ... */ },
    projects() { /* ... */ },
    blog() { /* ... */ },
    // ... 15+ render functions
}

// 3. INIT Functions - All interactivity
// - Custom cursor
// - Typed animation
// - Theme toggle
// - Blog modal
// - Form handling
// - And more...

🔄 Data Flow

┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ DATA │────▶│ RENDER │────▶│ DOM │
│ (script.js)│ │ functions │ │ (HTML) │
└─────────────┘ └─────────────┘ └─────────────┘
│ │
▼ ▼
┌─────────────┐ ┌─────────────┐
│ INIT │ │ INTERACT │
│ functions │ │ (User) │
└─────────────┘ └─────────────┘

📝 BLOG SYSTEM

The blog section features 6 full-length articles with rich formatting and modal display:

Article Title	Category	Read Time
Building a Modern Portfolio with React & TypeScript	Web Dev	5 min
How I Landed 3 Internships in One Year	Career	4 min
Top 10 UI/UX Principles Every Developer Must Know	Design	4 min
Typing Master Web App (React + Vite)	Web Development
4 min
JavaScript vs TypeScript: Which First?	Web Dev	5 min
WordPress vs Custom Code: When to Use Each	Web Dev	4 min
Git & GitHub for Beginners	Tools	5 min

✨ Blog Features

✅ Modal popup with smooth animation
✅ Rich text formatting (headings, lists, blockquotes)
✅ Code snippets with syntax highlighting
✅ Tip boxes for pro advice
✅ Author info and publication date
✅ Keyboard navigation (Enter to open, Escape to close)

📬 CONTACT FORM

📧 Form Features

Feature	Implementation
✅ Validation	Client-side with regex
✅ Error Messages	User-friendly alerts
✅ Success Feedback	Confirmation message
✅ Loading State	Spinner during submission
✅ Auto-reset	Form clears after success
✅ Accessibility	ARIA labels, keyboard navigation

Form Fields

┌─────────────────────────────────────┐
│ Full Name      [______________]     │
├─────────────────────────────────────┤
│ Email          [______________]     │
├─────────────────────────────────────┤
│ Subject        [______________]     │
├─────────────────────────────────────┤
│ Service        [Dropdown ▼]         │
├─────────────────────────────────────┤
│ Message        [textarea]           │
├─────────────────────────────────────┤
│           [ SEND MESSAGE ]          │
└─────────────────────────────────────┘

🎭 INTERACTIVE ELEMENTS

🖱️ Custom Cursor

// Smooth following cursor with magnetic effect on buttons
// Dot cursor (8px) follows mouse exactly
// Ring cursor (32px) follows with lag for smooth effect
// Scales up on hover over interactive elements

⏳ Page Loader

.loader-bar::after {
    animation: loader 1.5s ease forwards; /* Simulates loading progress */
}

⌨️ Typed Animation

Full Stack Developer → Frontend Engineer → UI/UX Enthusiast → 
WordPress Developer → AI Integrations Dev → Problem Solver

📜 Scroll Animations

Elements fade up as they enter viewport

Staggered delays (100ms, 200ms, 300ms)

Counters animate when visible

🌓 DARK/LIGHT THEME


<div align="center"> | Dark Theme | Light Theme | |------------|-------------| | ![Dark Mode](https://via.placeholder.com/200x100/0d1117/00e5a0?text=Dark+Mode) | ![Light Mode](https://via.placeholder.com/200x100/f8fafc/00a572?text=Light+Mode) | </div>

🔄 Theme Switching Logic

// 1. Check localStorage for saved preference
const savedTheme = localStorage.getItem('theme') || 'dark';

// 2. Apply theme on page load
if (savedTheme === 'light') applyTheme('light');

// 3. Toggle on button click
themeBtn.addEventListener('click', () => {
    const isLight = body.classList.contains('light-theme');
    applyTheme(isLight ? 'dark' : 'light');
});

// 4. Save preference
function applyTheme(theme) {
    body.classList.toggle('light-theme', theme === 'light');
    localStorage.setItem('theme', theme);
}

🎨 Theme Variables

/* Dark Theme (Default) */
:root {
   --bg-base: #080c10;
   --text-1: #f0f4f8;
   --primary: #00e5a0;
}

/* Light Theme */
body.light-theme {
   --bg-base: #f8fafc;
   --text-1: #0f172a;
   --primary: #00a572;
}

📈 SEO OPTIMIZATION

🔍 Meta Tags

<meta name="description" content="Muhammad Yasir — Full Stack Developer Portfolio | 12+ Live Projects | Modern Web Experiences" />
<meta name="author" content="Muhammad Yasir" />
<meta name="keywords" content="Full Stack Developer, Frontend Developer, React, Node.js, Portfolio, Islamabad, Pakistan" />

🏷️ Semantic HTML

<header>, <nav>, <section>, <article>, <footer>

Proper heading hierarchy (h1 → h6)

ARIA labels for interactive elements

Alt text for all images

⚡ Performance Optimizations

Lazy loading for images (loading="lazy")
Minified CSS and JS
Font preloading
Optimized animation performance

👨‍💻 AUTHOR INFORMATION

Muhammad Yasir
Full Stack Developer | Islamabad, Pakistan

📊 GitHub Stats

📄 LICENSE

This project is licensed under the MIT License.

🙏 ACKNOWLEDGMENTS

🤝 Special Thanks To

Organization	Role
Arch Technologies	Internship Opportunity
Apexcify Technologies	Frontend Developer Experience
DevHub Corporation	Internship & Mentorship
Pakistan Career Fire	Career Development Program

📚 Resources Used

Font Awesome - Icons
Google Fonts - Syne & DM Sans
Readme Stats - GitHub Stats
Typing SVG - Animated Text
Capsule Render - Wave Headers

🔮 FUTURE ENHANCEMENTS

Feature	Status	Priority
Backend Integration with Node.js	⏳ Planned	🟡 Medium
Real Database for Blog Posts	⏳ Planned	🟢 High
User Authentication	❌ Not Started	🔴 Low
Admin Dashboard	❌ Not Started	🔴 Low
More Interactive Animations	✅ Done	-
PWA Support	⏳ Planned	🟡 Medium
Multi-language Support	❌ Not Started	🔴 Low
Print-friendly Resume	✅ Done	-

⭐ Star this repository if you found it useful! ⭐

Made by Muhammad Yasir

🔝 Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 35 Commits
assets		assets
LICENSE		LICENSE
README.md		README.md
index.html		index.html
script.js		script.js
style.css		style.css

Folders and files

Latest commit

History

Repository files navigation