HTMLPortfolioBlog

Mj-Porfolio — HTML Portfolio Template

By JawadAbbasi14

MJ Abbasi personal portfolio website template built with HTML5, CSS3, and vanilla JavaScript, including Home, About, Services, Projects, Blog, and Contact pages, with dark/light theme toggle and deployment via GitHub Pages.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-13View source

What stands out

A quick read of the recorded project description.

01

Provides dark and light themes, with colors changeable via a toggle button

02

Includes multiple page sections such as Home, About, Services, Projects, Blog, and Contact

03

Includes a downloadable PDF resume file

04

Built with HTML5, CSS3, and vanilla JavaScript, with no front-end framework dependencies

05

Styles are split into main styles, responsive rules, and theme variable files

06

The README notes that the contact form feature is still under development

Template Details

This template is MJ Abbasi's personal portfolio website; the README states it is used to showcase Python development skills and programming work. The page structure includes Home, About, Services, Projects, Blog, and CV sections, and provides a downloadable PDF resume. The tech stack is HTML5, CSS3, and vanilla JavaScript; interactions such as theme switching are implemented in JavaScript, and styles are organized into separate files for main styles, responsive rules, and dark/light theme variables. The README lists features including dark/light mode, responsive layout, project showcase, multi-section layout, CV integration, and SEO optimization, with the contact form marked as in progress. To run locally, you can double-click to open index.html, or use Python to start a static server; online deployment is via GitHub Pages. The README does not specify framework versions, backend services, content management approach, or data sources, nor does it provide browser compatibility testing details.

HTMLPortfolioBlog

Is it right for your project?

Use Cases

  • Individual developers building a portfolio website to showcase programming skills and project experience
  • Static personal sites that need dark/light theme switching and a multi-page structure
  • Personal homepages hosted for free and shared publicly via GitHub Pages

Suitable For

  • Developers with basic HTML, CSS, and JavaScript knowledge who want to modify content themselves
  • Technical professionals who need to display projects, resumes, and contact information
  • Users looking for a lightweight static portfolio starting point and willing to edit files manually

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, you can open index.html directly in a browser, or run python -m http.server 8000 to start a local server for access

  2. 2

    Modify index.html to update the main content, adjust css/style.css to change styles, and edit js/main.js to adjust interaction logic

  3. 3

    Replace the images in assets/images/ and assets/documents/resume.pdf with your own assets

  4. 4

    The email, LinkedIn, and Twitter links in the README are example placeholders and need to be replaced with real information

  5. 5

    The README does not provide instructions for build tools, dependency installation, or automated deployment configuration

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in a public repository under the MIT license; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Allows free use, modification, commercial use, and distribution of this version's code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/JawadAbbasi14/Mj-Porfolio/blob/main/LICENSEhttps://github.com/JawadAbbasi14/Mj-Porfolio/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 85 / 100
Technologies
HTML
Website type
Portfolio · Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-05-14
Screenshot last checked
2026-10-13

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies HTML as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: 53b6fde86bd1dfd649381860783e08e39e1818bd6cff01cbcfa70a54d454110a

2026-10-13T02:33:20.693Z

Source file / repository
# 🚀 MJ Abbasi – Personal Portfolio Website

<div align="center">

[![Portfolio Banner](https://img.shields.io/badge/🚀_MJ_Abbasi-Portfolio-blue?style=for-the-badge&labelColor=1a1a1a&color=4285f4&logo=github&logoColor=white)](https://jawadabbasi14.github.io/Mj-Porfolio/)
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-222222?style=for-the-badge&logo=GitHub%20Pages&logoColor=white)

**A modern, responsive personal portfolio website showcasing Python development skills and programming expertise.**

[🌐 **Live Demo**](https://jawadabbasi14.github.io/Mj-Porfolio/) • [📧 **Contact**](mailto:[email protected]) • [💼 **LinkedIn**](https://linkedin.com/in/yourprofile)

</div>

---

## 📋 Table of Contents
- [🎯 About](#-about)
- [✨ Features](#-features)
- [🖼️ Screenshots](#️-screenshots)
- [🛠️ Tech Stack](#️-tech-stack)
- [📁 Project Structure](#-project-structure)
- [🚀 Getting Started](#-getting-started)
- [📱 Responsive Design](#-responsive-design)
- [🎨 Design Philosophy](#-design-philosophy)
- [📊 Performance](#-performance)
- [🤝 Contributing](#-contributing)
- [📄 License](#-license)
- [📞 Contact](#-contact)

---

## 🎯 About

Welcome to the official portfolio of **MJ Abbasi**, a passionate Python Developer & Programmer crafting elegant solutions to complex problems. This project showcases my work, skills, and personality — all wrapped in a modern, responsive, and elegant web experience.

### 🌟 Key Highlights
- **Modern Design**: Clean, professional aesthetic with attention to detail
- **Python Focus**: Specialized in Python development and programming solutions  
- **Problem Solver**: Crafting elegant solutions to complex technical challenges
- **SEO Friendly**: Optimized for search engines and social media sharing

---

## ✨ Features

| Feature | Description | Status |
|---------|-------------|--------|
| 🌓 **Dark/Light Mode** | Toggle between soft-light and sleek-dark themes seamlessly | ✅ Complete |
| 📱 **Fully Responsive** | Optimized for all devices — mobile, tablet, desktop | ✅ Complete |
| 💼 **Project Showcase** | Interactive portfolio with project details and live demos | ✅ Complete |
| 🎨 **Multi-Section Layout** | Home, About, Services, Projects, Blog, CV sections | ✅ Complete |
| 📄 **CV/Resume Integration** | Embedded downloadable PDF resume | ✅ Complete |
| ⚡ **Fast Loading** | Optimized images and efficient code structure | ✅ Complete |
| 🔍 **SEO Optimized** | Meta tags, structured data, and semantic HTML | ✅ Complete |
| 📧 **Contact Form** | Working contact form with validation | 🔄 In Progress |

---

## 🖼️ Screenshots

<div align="center">

### 🌞 Light Mode
![Light Mode Preview](litemode.png)

### 🌙 Dark Mode  
![Dark Mode Preview](darkmode.png)

</div>

---

## 🛠️ Tech Stack

### Frontend
![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)

### Tools & Deployment
![GitHub](https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=github&logoColor=white)
![GitHub Pages](https://img.shields.io/badge/GitHub%20Pages-222222?style=flat-square&logo=GitHub%20Pages&logoColor=white)
![VS Code](https://img.shields.io/badge/VS%20Code-007ACC?style=flat-square&logo=visual-studio-code&logoColor=white)

| Technology | Purpose | Version |
|------------|---------|---------|
| **HTML5** | Semantic structure and content | Latest |
| **CSS3** | Styling, animations, and responsive design | Latest |
| **Vanilla JavaScript** | Interactive functionality and theme switching | ES6+ |
| **GitHub Pages** | Static site hosting and deployment | Latest |

---

## 📁 Project Structure

```
Mj-Portfolio/
├── 📄 index.html              # Main landing page
├── 📄 README.md               # Project documentation
├── 📄 LICENSE                 # MIT License file
├── 📁 css/
│   ├── 🎨 style.css          # Main stylesheet
│   ├── 🎨 responsive.css     # Responsive design rules
│   └── 🎨 themes.css         # Light/Dark theme variables
├── 📁 js/
│   ├── ⚡ main.js            # Core JavaScript functionality
│   ├── ⚡ theme-toggle.js    # Theme switching logic
│   └── ⚡ animations.js      # Page animations and effects
├── 📁 assets/
│   ├── 📁 images/
│   │   ├── 🖼️ profile.jpg    # Profile picture
│   │   ├── 🖼️ litemode.png  # Light mode screenshot
│   │   ├── 🖼️ darkmode.png  # Dark mode screenshot
│   │   └── 📁 projects/      # Project screenshots
│   ├── 📁 icons/
│   │   ├── 🎯 favicon.ico    # Website favicon
│   │   └── 📱 touch-icon.png # Mobile touch icon
│   └── 📁 documents/
│       └── 📄 resume.pdf     # Downloadable CV/Resume
├── 📁 pages/
│   ├── 📄 about.html         # About me page
│   ├── 📄 services.html      # Services offered page
│   ├── 📄 projects.html      # Portfolio projects page
│   ├── 📄 blog.html          # Blog/Articles page
│   └── 📄 contact.html       # Contact information page
└── 📁 vendor/
    ├── 📚 bootstrap/         # Bootstrap framework (if used)
    └── 📚 fontawesome/       # Font Awesome icons
```

---

## 🚀 Getting Started

### Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Basic knowledge of HTML, CSS, and JavaScript (for modifications)
- Git (for version control)

### Installation & Setup

1. **Clone the repository**
   ```bash
   git clone https://github.com/jawadabbasi14/Mj-Porfolio.git
   cd Mj-Porfolio
   ```

2. **Open locally**
   ```bash
   # Option 1: Open directly in browser
   open index.html
   
   # Option 2: Use a local server (recommended)
   python -m http.server 8000
   # Then visit: http://localhost:8000
   ```

3. **Customize the content**
   - Edit `index.html` for main content
   - Modify `css/style.css` for styling changes
   - Update `js/main.js` for functionality tweaks
   - Replace images in `assets/images/` with your own

### 🌐 Live Deployment
The portfolio is automatically deployed via GitHub Pages at:
**[https://jawadabbasi14.github.io/Mj-Porfolio/](https://jawadabbasi14.github.io/Mj-Porfolio/)**

---

## 📱 Responsive Design

The portfolio is fully responsive and tested across multiple devices:

| Device Type | Screen Size | Status |
|-------------|-------------|---------|
| 📱 Mobile | 320px - 768px | ✅ Optimized |
| 📟 Tablet | 768px - 1024px | ✅ Optimized |
| 💻 Desktop | 1024px+ | ✅ Optimized |
| 🖥️ Large Screens | 1440px+ | ✅ Optimized |

### Key Responsive Features:
- ✅ Flexible grid layouts
- ✅ Scalable typography
- ✅ Touch-friendly navigation
- ✅ Optimized images for different screen densities
- ✅ Hamburger menu for mobile devices

---

## 🎨 Design Philosophy

### Visual Design Principles
- **Minimalism**: Clean, uncluttered interface focusing on content
- **Consistency**: Uniform spacing, typography, and color usage
- **Accessibility**: High contrast ratios and semantic HTML structure
- **Performance**: Optimized images and efficient CSS/JS

### Color Palette
```css
/* Light Theme */
--primary-color: #2563eb;
--secondary-color: #64748b;
--background-color: #ffffff;
--text-color: #1e293b;

/* Dark Theme */
--primary-color: #3b82f6;
--secondary-color: #94a3b8;
--background-color: #0f172a;
--text-color: #f1f5f9;
```

---

## 📊 Performance

### Performance Metrics
- ⚡ **Page Load Time**: < 2 seconds
- 🎯 **Lighthouse Score**: 95+ (Performance, Accessibility, Best Practices, SEO)
- 📦 **Bundle Size**: < 500KB (including images)
- 🚀 **First Contentful Paint**: < 1.2s

### Optimization Techniques
- Compressed and optimized images
- Minified CSS and JavaScript
- Efficient loading strategies
- Semantic HTML for better SEO

---

## 🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/jawadabbasi14/Mj-Porfolio/issues).

### How to Contribute
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

---

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

## 📞 Contact

**MJ Abbasi** - Python Developer & Programmer

[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/yourprofile)
[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/yourhandle)
[![Email](https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])
[![Portfolio](https://img.shields.io/badge/Portfolio-000000?style=for-the-badge&logo=About.me&logoColor=white)](https://jawadabbasi14.github.io/Mj-Porfolio/)

---

<div align="center">

**⭐ If you found this project helpful, please give it a star!**

Made with ❤️ by [MJ Abbasi](https://github.com/jawadabbasi14)

</div>
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

simplefolio

simplefolio

Simplefolio is a minimal single-page portfolio template for developers, built with HTML, Bootstrap, SCSS, and Parcel under the MIT license. It includes Hero, About, Projects, Contact, and Footer sections, with content edited in /src/index.html and theme colors controlled by two SCSS variables.

HTML · Portfolio

Freelancer

Freelancer

A bright, single-page Bootstrap portfolio template for freelancers, designers, and small studios. It includes a responsive portfolio grid with modal detail windows and an SB Forms contact form that requires an API token.

HTML · Portfolio

Casper

Casper

Casper is Ghost's official classic blog theme, long used as the default and still maintained.

HTML · Magazine

Resume

Resume

A single-page resume and CV template from Start Bootstrap, built on Bootstrap with a fixed sidebar and content sections.

HTML · Portfolio

Creative

Creative

A single-page marketing template by Start Bootstrap for creative agencies and product services, built on Bootstrap with SCSS, featuring a portfolio grid and call-to-action sections. It includes pre-set SB Forms markers for form integration and npm build scripts for source customization.

HTML · Corporate Website

startbootstrap-clean-blog

startbootstrap-clean-blog

Clean Blog by Start Bootstrap is a responsive Bootstrap blog theme with a home page, about page, contact page, and sample post page, plus a working PHP contact form preconfigured for SB Forms.

HTML · Blog