Syed Noor Ul Absar — Frontend Web Developer Portfolio

A modern, high-performance developer portfolio and single-page ATS curriculum vitae built with pure, human-written Vanilla JavaScript, responsive CSS3, and semantic HTML5.

---

Preview

Live Demo: syedabsar99.github.io/portfolio

---

Overview

Designed and crafted by Syed Noor Ul Absar, a frontend developer and Bachelor of Computer Applications (BCA) graduate from Chandigarh University (8.35 SGPA).

This portfolio showcases real-world web applications, interactive utilities, and responsive landing pages without relying on heavy frameworks or bloated abstractions. It demonstrates core frontend fundamentals: clean DOM manipulation, asynchronous REST API integration, browser storage persistence, and accessible UI engineering.

---

Key Features

• Hash-Based SPA Multi-Page Routing — Native Vanilla JS router (#home, #about, #education, #skills, #projects, #contact) enabling smooth client-side page transitions with browser history support (Back/Forward navigation).
• Synchronized Typewriter Intro — Humanized dynamic headline animation synchronized with introductory hero copy.
• Real-Time Project Search & Filtering — Live search bar filtering 12+ projects by keyword, technology, or category with real-time matching counter badges and empty-state fallback.
• Recruiter Snapshot Card — 30-second hiring overview highlighting availability (Immediate Joiner), work models (Remote / Hybrid / Relocation), and core competencies.
• Integrated ATS-Optimized Single-Page Resume — Complete standalone CV (resume.html) with clean typography, A4 print layout, and direct PDF download (resume.pdf).
• Direct WhatsApp & Telegram Integration — 1-click messaging triggers (+91 9622497806) featuring dynamic message pre-fill that synchronizes typed inquiries directly to WhatsApp.
• 1-Click Clipboard Copy — Instant copy buttons for direct phone and email with animated "Copied!" feedback tooltips.
• Functional Contact Form — Validated contact form connected to FormSubmit AJAX for direct Gmail inbox delivery, backed by instant messaging fallbacks.
• Persistent Dark / Light Theme — Tailored HSL color system with glassmorphism effects, high-contrast badges, and LocalStorage state persistence.
• Mobile-First Responsive Layout — Optimized for all viewports from 320px mobile screens to large desktop monitors.

---

Tech Stack

Layer	Technologies	Key Highlights
Structure	HTML5	Semantic elements (<main>, <nav>, <section>, <article>), ARIA labels, Open Graph & SEO metadata
Styling	Modern CSS3 (Vanilla)	CSS custom properties (variables), Glassmorphism (backdrop-filter), CSS Grid, Flexbox, keyframe animations, @media print
Logic	Vanilla JavaScript (ES6+)	Native DOM traversal, hashchange routing, Fetch API, LocalStorage API, Clipboard API, regular expressions
Typography & Icons	Google Fonts & Remix Icon	Plus Jakarta Sans, JetBrains Mono, Remix Icon vector icon library
Hosting & CI/CD	GitHub Pages & Vercel	Production CDN deployment, HTTPS termination, zero build step overhead

---

Featured Projects Highlighted

Project	Category	Tech Stack	Live Demo	Source Code
Music Player	JavaScript App	HTML5, CSS3, Audio API, JS	Live Demo	GitHub
Weather Dashboard	JavaScript App	OpenWeather API, Fetch, JS	Live Demo	GitHub
Notes App	JavaScript App	LocalStorage, Theme Picker, JS	Live Demo	GitHub
To-Do List App	JavaScript App	DOM Events, LocalStorage, JS	Live Demo	GitHub
QR Code Generator	JavaScript App	QR API, Canvas, Download, JS	Live Demo	GitHub
Live Words Counter	JavaScript App	Regex Tokenizer, Text Metrics, JS	Live Demo	GitHub
Age Calculator	JavaScript App	Date API, Validation, JS	Live Demo	GitHub
Password Generator	JavaScript App	Crypto API, Clipboard, JS	Live Demo	GitHub
Kashmir Shawl Store	Landing Page	Semantic HTML, CSS3, Responsive	Live Demo	GitHub
Glozin Theme Clone	UI Clone	Bootstrap 5, Flexbox, Sliders	Live Demo	GitHub
Hotel Zante Clone	UI Clone	Bootstrap 5, Responsive Grid	Live Demo	GitHub
Real Estate Landing	Landing Page	Bootstrap 5, Modern Layout	Live Demo	GitHub

---

Project Structure

portfolio/
├── assets/
│   ├── preview.png              # High-resolution portfolio showcase image
│   └── syed-portrait.jpg        # Developer portrait photo
├── .gitignore                   # Standard version control exclusions
├── index.html                   # Core single-page application & routing views
├── LICENSE                      # Open-source MIT License
├── README.md                    # Comprehensive repository documentation
├── resume.html                  # Single-page ATS-formatted printable curriculum vitae
├── resume.pdf                   # Pre-compiled high-ATS score PDF resume
├── script.js                    # SPA routing, search, typewriter, clipboard, form handler
└── style.css                    # Complete design system, themes, and responsive rules

---

Getting Started

No build tools, bundlers, or package installations are required.

1. Clone the repository

git clone https://github.com/syedabsar99/portfolio.git

2. Open locally

Open index.html directly in your web browser:

cd portfolio
start index.html

Or serve via any static HTTP server (e.g., Live Server in VS Code, npx serve, or Python):

python -m http.server 8080

---

Author & Contact

Syed Noor Ul Absar

• Role: Frontend Web Developer
• Education: Bachelor of Computer Applications (BCA), Chandigarh University (8.35 SGPA)
• Location: Budgam, Jammu & Kashmir, India - 191111
• Phone / WhatsApp: +91 9622497806
• Telegram: t.me/+919622497806
• Email: syedabsar99@gmail.com
• GitHub: @syedabsar99
• LinkedIn: linkedin.com/in/syednoorulabsar

---

License

This project is licensed under the MIT License — feel free to reference the code structure for your own projects.