Welcome to my personal portfolio! 👋 I'm Kamran Khan, a passionate Software Engineer with expertise in modern web technologies. This portfolio showcases my journey, projects, skills, and experiences in an interactive and multilingual format.
This is my personal portfolio website, crafted with cutting-edge technologies to demonstrate my skills in full-stack development, UI/UX design, and international software development. Built with Next.js 15, it features comprehensive internationalization support, smooth animations, and a modern, accessible design that reflects my attention to detail and commitment to quality.
- My Projects - Interactive carousel featuring my latest work and achievements
- Professional Experience - Detailed timeline of my career journey
- Educational Background - My academic achievements and certifications
- Technical Skills - Comprehensive overview of my technology stack
- GitHub Activity - Live contribution graph showing my coding activity
- Contact Information - Multiple ways to connect with me
- Modern Next.js 15 Architecture with App Router for optimal performance
- 7-Language Support including RTL languages (Arabic & Urdu)
- Interactive Animations using Framer Motion and GSAP for engaging UX
- Responsive Design that works beautifully on all devices
- SEO Optimized for better discoverability
- Dark/Light Themes with automatic system preference detection
- Smooth Scrolling and micro-interactions for premium feel
- Content Management through structured JSON data
- Resume Download feature for easy access to my CV
- 🇺🇸 English - My professional working language
- 🇪🇸 Español - Para la comunidad hispanohablante
- 🇫🇷 Français - Pour mes amis francophones
- 🇩🇪 Deutsch - Für deutsche Besucher
- 🇮🇳 हिन्दी - मेरी मातृभाषा
- 🇸🇦 العربية - للمجتمع العربي (RTL)
- 🇵🇰 اردو - میری قومی زبان (RTL)
As a software engineer passionate about modern web development, I've built this portfolio using the latest and most robust technologies in the industry. This tech stack reflects my expertise and commitment to best practices.
- Next.js 15 - React framework with App Router
- React 18.3 - UI library with latest features
- TypeScript - Type safety and developer experience
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Production-ready motion library
- GSAP - Professional animation library
- Tailwind CSS Animate - Animation utilities
- Lenis - Smooth scrolling library
- Radix UI - Unstyled, accessible UI components
- Dialog, Tooltip, Tabs, Toast, Hover Card, etc.
- Lucide React - Beautiful & consistent icon set
- Embla Carousel - Lightweight carousel library
- React Responsive - Media query support
- TipTap - Rich text editor with extensions
- React Markdown - Markdown rendering
- React Syntax Highlighter - Code syntax highlighting
- Prism.js - Syntax highlighting engine
- Remark GFM - GitHub Flavored Markdown support
- Custom i18n System - Lightweight translation management
- RTL Support - Right-to-left language handling
- Dynamic Locale Switching - Runtime language changes
- Translation Scripts - Automated validation and management
- JSON-based Content - Structured data storage
- GitHub API Integration - Repository and contribution data
- RSS Parser - Blog feed integration
- React Social Media Embed - Social content embedding
- ESLint - Code linting and quality
- PostCSS - CSS processing
- Sass - CSS preprocessing
- Turbopack - Fast development bundler
This portfolio represents my approach to modern web development - clean architecture, scalable code, and attention to detail.
portfolio/
├── app/ # Next.js App Router
│ ├── page.js # Homepage
│ ├── layout.js # Root layout
│ ├── contact/ # Contact page
│ ├── education/ # Education page
│ ├── experience/ # Experience page
│ └── api/ # API routes
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (Radix)
│ ├── widgets/ # Content widgets
│ ├── Header/ # Navigation components
│ └── page-transition/ # Page transitions
├── blocks/ # Animated text components
│ └── TextAnimations/ # Typography animations
├── data/ # JSON data files
│ ├── projects.json # Project information
│ ├── experiences.json # Work experience
│ ├── educations.json # Education details
│ ├── technologies.json # Skills and technologies
│ ├── blogs.json # Blog articles
│ └── certifications.json # Certifications
├── messages/ # Translation files
│ ├── en.json # English translations
│ ├── es.json # Spanish translations
│ ├── fr.json # French translations
│ ├── de.json # German translations
│ ├── hi.json # Hindi translations
│ ├── ar.json # Arabic translations
│ └── ur.json # Urdu translations
├── lib/ # Utility libraries
│ ├── contexts/ # React contexts
│ └── utils.js # Helper functions
├── hooks/ # Custom React hooks
├── scripts/ # Build and maintenance scripts
└── public/ # Static assets
├── technologies/ # Technology icons
├── projects/ # Project images
├── educations/ # Education logos
├── certifications/ # Certificate images
└── documents/ # Resume and documents
Feel free to explore my code and run this portfolio on your local machine! Here's how:
- Node.js 18+
- npm, yarn, pnpm, or bun
- Clone my repository
git clone https://github.com/kamranxdev/portfolio.git
cd portfolio- Install dependencies
npm install
# I personally prefer npm, but you can use:
# yarn install
# pnpm install- Start exploring
npm run dev- Visit the portfolio Open http://localhost:3000 and explore my work!
# Development
npm run dev # Start development server with Turbopack
# Production
npm run build # Build for production
npm run start # Start production server
# Maintenance
npm run lint # Run ESLint
npm run clean # Clean dependencies and cache
# Translation Management
npm run translations:validate # Validate translation files
npm run translations:sync # Sync translation keys
npm run translations:generate # Generate missing translations
npm run translations:create # Create new translation filesOne of the features I'm most proud of is the comprehensive internationalization system I built from scratch. It demonstrates my understanding of global software development and attention to user experience across different cultures and languages.
- Real-time Language Switching - No page reload needed, showcasing my SPA expertise
- RTL Language Support - Proper Arabic and Urdu rendering, demonstrating my attention to global audiences
- Smart Fallbacks - Graceful handling of missing translations
- Dynamic Content - Parameter interpolation for personalized messaging
- Cultural Awareness - Locale-specific date formatting and content adaptation
- User Preference Memory - Remembers your language choice across visits
# Validate all translation files
npm run translations:validate
# Sync missing keys across languages
npm run translations:sync
# Generate new translation files
npm run translations:create <locale>- Add locale configuration to
i18n.js - Create translation file in
messages/ - Update language switcher component
- Test RTL support if applicable
I've organized my portfolio content in a structured, maintainable way that reflects my approach to clean code and data organization.
Here's how I structure my project information in data/projects.json:
{
"description": "Description of what I built",
"imagePath": "/projects/project-screenshot.png",
"status": "completed",
"sourceCodeLink": "https://github.com/kamranxdev/project-repo",
"technologies": ["Next.js", "React", "Tailwind"],
"features": ["Feature 1", "Feature 2"],
"demoLink": "https://my-project-demo.com"
}My work history is maintained in data/experiences.json:
{
"company": "Company Name",
"position": "My Role",
"duration": "Employment Period",
"description": "What I accomplished",
"technologies": ["Tech Stack I Used"],
"achievements": ["My Key Achievements"]
}I keep my technical skills updated in data/technologies.json:
{
"name": "Technology Name",
"iconPath": "/technologies/tech-icon.png",
"category": "frontend|backend|mobile|devops",
"proficiency": "My skill level"
}My approach to design and user experience reflects my belief that great software should be both functional and beautiful.
- Tailwind Configuration: Custom design system in
tailwind.config.js - Global Styles: Carefully crafted base styles in
styles/globals.css - Component-First: Modular styling for maintainability
- RTL-First Design: Built with international audiences in mind
- Framer Motion: Smooth, performant component animations
- GSAP: Complex timeline animations for wow factors
- Scroll-Triggered: Engaging interactions as you explore
- Page Transitions: Seamless navigation experience
I've implemented a sophisticated theming system featuring:
- CSS custom properties for consistent design tokens
- Tailwind dark mode integration
- Automatic system preference detection
- Manual theme switching for user control
As a developer who believes in continuous improvement, here's what I'm planning to add to my portfolio:
- Personal Blog Integration - Share my thoughts on tech and development
- Analytics Dashboard - Track visitor engagement and popular content
- Performance Optimization - Even faster loading times and better Core Web Vitals
- Enhanced Accessibility - WCAG 2.1 AA compliance for inclusive design
- PWA Features - Offline access and mobile app-like experience
- AI-Powered Recommendations - Smart content suggestions based on visitor interests
- Interactive Resume Builder - Generate custom resumes on-demand
- Theme Customization - Let visitors personalize their viewing experience
- Live Chat Integration - Real-time communication with potential collaborators
- 3D Elements - WebGL animations for immersive storytelling
- Community Features - Connect with other developers and share insights
- Mentorship Platform - Help other developers grow in their careers
- Open Source Contributions - Turn this into a template for other developers
- VR/AR Portfolio - Cutting-edge immersive experiences
- Web3 Integration - Showcase blockchain projects and NFT work
- Next.js 16+ - Stay current with the latest framework features
- React Server Components - Enhanced performance and developer experience
- Edge Computing - Global content delivery optimization
- Microservices Architecture - Scalable, maintainable codebase
- Real-time Features - Live updates and collaborative features
I'm always excited to connect with fellow developers, potential clients, and anyone interested in technology. If you find my work interesting or have suggestions for improvements, I'd love to hear from you!
- Feedback: Share your thoughts on design, functionality, or user experience
- Bug Reports: Found something that doesn't work as expected? Let me know!
- Feature Suggestions: Have ideas for cool new features? I'm all ears!
- Translations: Help me improve translations for better global accessibility
- Code Reviews: I value constructive feedback on my code and architecture
- Clean, maintainable code that tells a story
- Thoughtful user experience design
- Accessibility and inclusive design principles
- Performance optimization and best practices
- Cross-cultural and multilingual considerations
I'm always open to new opportunities, collaborations, and interesting conversations about technology and software development.
Kamran Khan - Software Engineer & Full-Stack Developer
- 📧 Email: kamrankhan.sde@gmail.com
- 💼 LinkedIn: Connect with me professionally
- 💻 GitHub: Explore my code
- 🌐 Portfolio: You're already here! Feel free to explore
- 💬 Let's Chat: Always happy to discuss tech, opportunities, or just connect
💡 Built with passion and attention to detail
⚡ Powered by Next.js 15 and modern web technologies
🌍 Designed for a global audience with love from India 🇮🇳
Thank you for taking the time to explore my work!