Personal Portfolio Website

A modern, responsive portfolio website for AI & LLM researcher Vikash Singh, designed for deployment on GitHub Pages.

✨ Features

Fully Responsive Design - Optimized for desktop, tablet, and mobile with touch-friendly interactions
Mobile-First Architecture - Progressive enhancement with mobile overlay navigation
Dark/Light Mode Toggle - User preference saved locally with smooth transitions
Enhanced Blog System - Dynamic blog with Markdown support and client-side processing
Modern Glassmorphism UI - Beautiful glass effects with gradient accents
Accessibility First - WCAG compliant with keyboard navigation and screen reader support
Touch Optimized - 44px minimum touch targets and gesture support
Publication Management - List-style entries with Abstract & BibTeX toggles (copy-to-clipboard)
Performance Optimized - Hardware acceleration and optimized animations

🚀 Quick Start

Prerequisites

Node.js (v14 or higher)
Git

Local Development

Clone the repository

git clone https://github.com/vicky157/vikash-singh.me.git
cd vikash-singh.me

Run the build script
```
./build.sh
```
Start local server
```
npm run serve
```
Visit http://localhost:8080

📱 Mobile Responsiveness Improvements

Comprehensive Mobile Support

Navigation System:

Full-screen mobile overlay menu with smooth animations
Touch-friendly hamburger menu (44px minimum touch target)
Proper z-index layering and backdrop blur effects
Escape key and outside-click dismissal

Responsive Breakpoints:

Desktop: 1024px+ (original design maintained)
Tablet: 768px-1023px (adjusted layouts and spacing)
Mobile Large: 480px-767px (optimized for phones)
Mobile Small: 320px-479px (compact layouts)

Typography & Spacing:

Fluid typography scaling from 14px to 18px base size
Responsive heading scales (h1: 1.8rem to 2.5rem)
Optimized line heights for readability
Proper touch target spacing (minimum 44px)

Layout Optimizations:

Single-column layouts on mobile devices
Reduced padding and margins for small screens
Flexible grid systems with proper wrapping
Safe area support for notched devices (iPhone X+)

Performance Enhancements:

Hardware-accelerated animations
Optimized CSS transforms and transitions
Reduced motion support for accessibility
Touch feedback with visual state changes

Technical Implementation

CSS Improvements:

/* Mobile-first media queries */
@media (max-width: 768px) { /* Tablet and mobile styles */ }
@media (max-width: 480px) { /* Mobile-specific optimizations */ }
@media (max-width: 320px) { /* Small mobile devices */ }

/* Safe area support for notched devices */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);

JavaScript Enhancements:

Mobile menu initialization and event handling
Touch event optimization
Viewport meta tag enforcement
Window resize handling with debouncing

🔧 Publication Page Button Fixes

BibTeX Toggle Functionality

Issues Resolved:

Fixed broken button click handlers on publication page
Corrected CSS custom property references
Enhanced mobile interaction patterns
Added copy-to-clipboard functionality

Technical Fixes:

CSS Variable Corrections:

/* Fixed incorrect variable references */
border: 2px solid var(--current-glass-border); /* was --current-border-color */

Enhanced JavaScript Functionality:

function toggleBibtex(publicationId) {
    const bibtexDiv = document.getElementById(`bibtex-${publicationId}`);
    const button = document.querySelector(`[onclick="toggleBibtex('${publicationId}')"]`);
    
    // Toggle visibility with smooth animation
    if (bibtexDiv.style.display === 'none' || !bibtexDiv.style.display) {
        bibtexDiv.style.display = 'block';
        button.textContent = 'Hide BibTeX';
        
        // Mobile: scroll to BibTeX content
        if (window.innerWidth <= 768) {
            setTimeout(() => {
                bibtexDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }, 100);
        }
    } else {
        bibtexDiv.style.display = 'none';
        button.textContent = 'Show BibTeX';
    }
}

Copy-to-Clipboard Feature:

Added copy buttons to all BibTeX entries
Visual feedback for successful copying
Fallback for older browsers
Touch-friendly button sizing (44px minimum)

Mobile Optimizations:

Auto-scroll to revealed BibTeX content
Larger touch targets for better usability
Improved button spacing and visual hierarchy
Enhanced accessibility with proper ARIA labels

📝 Content Management

Resume/CV

Compile your LaTeX CV into a PDF
Save as CV_Vikash_PhD.pdf in the assets/ directory

Blog Posts

Create new blog posts as Markdown files in the _blogs/ directory:

---
title: "Your Amazing Post Title"
date: "2025-07-08"
keywords: "research, AI, machine learning"
summary: "A brief summary of your post..."
---

Your **Markdown** content goes here!

## Use headings, lists, and formatting

- Bullet points work
- Images are automatically converted to base64
- Math expressions supported with MathJax

Important: After adding new blog posts, run:

npm run build:blog

Customizing Content

Home Page: Edit index.html directly
About Section: Edit the merged About content directly in index.html (section id about). about.html now redirects to avoid duplicate content.
Publications: Update publications.html
Experience: Modify education_experience.html
Contact Info: Update contact.html

🛠️ Development

Available Scripts

npm run build:blog          # Generate blog data from Markdown files
npm run serve              # Serve with Python (port 8000)
npm run serve:php          # Serve with PHP (port 8000)

Project Structure

├── assets/
│   ├── blog_image/        # Blog post images
│   ├── icons/            # Favicons and icons
│   └── resume/           # CV/Resume files
├── css/
│   ├── style.css         # Main stylesheet (enhanced with responsive design)
│   └── footer_clean.css  # Footer styling
├── js/
│   ├── lib/              # Third-party libraries
│   ├── blogs.js          # Blog functionality
│   ├── main.js           # Core JavaScript (enhanced with mobile support)
│   └── blogs-data.json   # Generated blog data
├── scripts/
│   └── generate-blog-data.js  # Blog build script
├── _blogs/               # Markdown blog posts
├── *.html               # Website pages
└── package.json         # Dependencies and scripts

Code Quality

The codebase follows modern best practices:

Mobile-First Design - Progressive enhancement from mobile to desktop
Modular JavaScript - Functions are organized and well-documented
CSS Custom Properties - Easy theming and maintenance
Semantic HTML - Accessible and SEO-friendly markup
Error Handling - Graceful fallbacks for all features
Touch Optimization - Proper touch event handling and feedback

🚢 Deployment

GitHub Pages (Recommended)

Create Repository
- For user site: yourusername.github.io
- For project site: any name (e.g., portfolio)
Push Code
```
git push origin main
```
Enable Pages
- Go to repository Settings → Pages
- Select "Deploy from a branch"
- Choose main branch and / (root) folder
- Save
Access Site
- User site: https://yourusername.github.io
- Project site: https://yourusername.github.io/repository-name

Other Hosting Platforms

The site works with any static hosting service:

Netlify
Vercel
AWS S3
Firebase Hosting

🔧 Troubleshooting

Mobile Issues

Menu Not Working:

Ensure JavaScript is enabled
Check for console errors in browser dev tools
Verify touch events are properly bound

Layout Problems:

Clear browser cache
Check viewport meta tag is present
Verify CSS media queries are loading

Blog Posts Not Showing

Check that Markdown files have proper frontmatter
Run npm run build:blog to regenerate data
Ensure js/blogs-data.json exists and is valid

Publication Buttons Not Working

Check browser console for JavaScript errors
Verify CSS custom properties are properly defined
Ensure proper event binding on page load

Theme Not Persisting

Check browser localStorage support
Ensure JavaScript is enabled

Images Not Loading

Verify image paths are relative to the Markdown file
Run blog build script to convert to base64

📱 Browser Support

Desktop Browsers

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+

Mobile Browsers

iOS Safari 13+
Chrome Mobile 80+
Firefox Mobile 75+
Samsung Internet 12+

Accessibility Features

Screen reader compatibility
Keyboard navigation support
High contrast mode support
Reduced motion preferences

🎯 Performance Metrics

Mobile PageSpeed Score: 95+
Desktop PageSpeed Score: 98+
First Contentful Paint: < 1.5s
Largest Contentful Paint: < 2.5s
Cumulative Layout Shift: < 0.1

📄 License

MIT License - see LICENSE file for details

🤝 Contributing

Feel free to submit issues and enhancement requests!

Recent Improvements

v2.2.0 - Publications List & Abstract Toggle

Converted publications from card grid to clean list format
Added accessible Abstract toggle (aria-expanded) with mobile auto-scroll
Unified BibTeX and Abstract visibility behavior
Updated About section merge (single source in index.html)
Improved accessibility for toggle buttons

v2.1.0 - Mobile Responsiveness Overhaul

Complete mobile-first redesign
Enhanced touch interactions
Improved accessibility
Performance optimizations

v2.0.1 - Publication Page Fixes

Fixed BibTeX toggle functionality
Added copy-to-clipboard feature
Enhanced mobile interactions
Improved button accessibility

Made with ❤️ by Vikash Singh

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
.github/workflows		.github/workflows
_blogs		_blogs
assets		assets
blogs		blogs
contact		contact
css		css
education-experience		education-experience
js		js
node_modules		node_modules
publications		publications
scripts		scripts
.DS_Store		.DS_Store
.gitignore		.gitignore
.nojekyll		.nojekyll
README.md		README.md
about.html		about.html
blogs.html		blogs.html
build.sh		build.sh
contact.html		contact.html
education_experience.html		education_experience.html
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
publications.html		publications.html

vicky157/vicky157.github.io

Folders and files

Latest commit

History

Repository files navigation