Muhammed Rashid — Portfolio

Personal portfolio built with vanilla HTML, CSS, and JavaScript — no frameworks, no build step, deployed on GitHub Pages.

Run locally

npx serve .

Project structure

├── index.html          # markup
├── styles.css          # all styles (tokens, reset, layout, components, animations)
├── main.js             # all logic (config, APIs, UI, entry point)
├── favicon.svg
├── robots.txt
├── sitemap.xml
├── LICENSE
└── assets/
    ├── images/
    │   └── profile.webp
    └── resume.pdf

Stack

• HTML / CSS / JS — no framework, no build step, single file each
• Fira Code font via Google Fonts (preloaded)
• Font Awesome 6 icons via CDN
• GitHub API — user stats, repos, languages
• GitHub Contributions API — contribution chart & streak
• npm Registry / npmjs API — package card with live demo
• Bundlephobia — gzip bundle size
• Komarev — profile view counter
• Formspree — contact form

Configuration

All constants are at the top of main.js:

var GITHUB_USERNAME    = 'devmdrd';
var NPM_PACKAGE        = 'axios-react-hook';
var NPM_DEMO_URL       = 'https://stackblitz.com/...';
var CONTACT_EMAIL      = 'mdrd.muhammedrashid@gmail.com';
var FORMSPREE_ENDPOINT = 'https://formspree.io/f/mnnvvnwp';
var FEATURED_REPOS     = ['axios-react-hook'];
var ROLES              = ['Full Stack Developer', ...];
var CAREER_START       = new Date(2023, 5, 1);

Features

• Dark / light theme — persists to localStorage; respects prefers-color-scheme
• Typing animation — cycles through role titles with typewriter effect
• Scroll-in animations — IntersectionObserver-based; respects prefers-reduced-motion
• Scroll spy — highlights active nav section as you scroll
• Command palette — Cmd+K (or Ctrl+K) for quick navigation and actions
• GitHub stats sidebar — live followers, repos, stars, contributions, profile views, language bar, streak
• Contribution chart — year selector, tooltips, theme-aware colours
• Project grid — search, language filter, sort, hover OG image preview
• npm package card — live demo with status cycling animation, API docs, install snippets, download sparkline
• Contact form — real-time validation, Formspree submission, auto-dismissing feedback
• Print styles — cleans up UI for printing / PDF export

Keyboard shortcuts

Key	Action
Cmd / Ctrl + K	Open command palette
R	Trigger demo refetch (when demo pane is active)
Esc	Close command palette / sidebars

Theming

Colours are CSS custom properties at the top of styles.css:

:root {
  --bg: #000000;
  --fg: #ffffff;
  --fg-muted: #b3b3b3;
  --border: #383838;
  /* ... */
}
[data-theme='light'] { /* light overrides */ }

License

MIT