🌐 Live Site: https://mrxamjad.com
A modern, responsive portfolio website showcasing my journey as a Mobile Developer and Software Engineer
This is my personal portfolio website built with Next.js 14, TypeScript, and Tailwind CSS. It showcases my skills, projects, experience, and provides multiple ways to connect with me. The website features a modern, glassmorphic design with smooth animations and a fully responsive layout.
🔗 Live Website: https://mrxamjad.com
- Modern Glassmorphic Design - Beautiful glass-effect cards with backdrop blur
- Purple Gradient Theme - Consistent purple accent colors throughout
- Smooth Animations - Fade-in, slide, and scale animations for enhanced UX
- Responsive Layout - Fully optimized for desktop, tablet, and mobile devices
- Dark Mode - Elegant dark theme with high contrast
- Pill-Style Navbar - Floating navigation bar with active state indicators
- Smooth Scrolling - Seamless page transitions
- Mobile-Friendly Menu - Optimized navigation for smaller screens
- Home - Hero section with introduction and quick links
- About - Detailed information about skills, education, and achievements
- Projects - Interactive carousel showcasing portfolio projects
- Experience - Timeline view of professional experience
- Services - Overview of services offered
- Technologies - Tech stack and tools I work with
- Contact - Contact form with email integration
- GitHub Activity - Live contribution graph
- LeetCode Stats - Problem-solving statistics and heatmap
- Coding Ninjas - Profile link with activity overview
- TakeUForward - DSA learning journey on TUF+
- Email Integration - Functional contact form using Resend API
- Social Links - Direct links to GitHub, LinkedIn, Twitter, and more
- Downloadable Resume - Easy access to CV/Resume
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- React - UI library
- Resend - Email API for contact form
- Next.js API Routes - Serverless API endpoints
- Vercel - Hosting and deployment platform
- Custom Domain - mrxamjad.com
Make sure you have the following installed:
- Node.js (v18 or higher)
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/mrxdevs/portfolio.git cd portfolio -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Create a
.env.localfile in the root directory:RESEND_API_KEY=your_resend_api_key_here
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000
npm run build
npm startportfolio/
├── public/ # Static assets
│ ├── favicon.ico # Favicon
│ └── ... # Project images and icons
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── about/ # About page
│ │ ├── api/ # API routes
│ │ │ └── send/ # Email sending endpoint
│ │ ├── contact/ # Contact page
│ │ ├── experience/ # Experience page
│ │ ├── projects/ # Projects page
│ │ ├── services/ # Services page
│ │ ├── techs/ # Technologies page
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ ├── globals.css # Global styles
│ │ └── not-found.tsx # 404 page
│ ├── components/ # React components
│ │ ├── CTASection.tsx # Call-to-action component
│ │ └── ... # Other components
│ ├── data/ # Data files
│ │ └── profile.ts # Profile information
│ ├── email-template/ # Email templates
│ │ └── ContactFormEmail.tsx
│ └── services/ # Service utilities
├── .eslintrc.json # ESLint configuration
├── .gitignore # Git ignore rules
├── next.config.ts # Next.js configuration
├── package.json # Dependencies
├── postcss.config.mjs # PostCSS configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── README.md # This file
- Hero section with animated greeting
- Quick introduction
- Call-to-action buttons
- Featured projects carousel
- Personal introduction
- Skills categorized by domain
- Mobile Development
- UI/UX Design
- Backend & DevOps
- GitHub contribution graph
- LeetCode statistics
- Coding Ninjas profile
- TakeUForward activity
- Education details
- Achievements list
- Interactive project carousel
- Project details with:
- Description
- Key features
- Technologies used
- Live demo and GitHub links
- Timeline view of work experience
- Company details
- Role and responsibilities
- Duration and location
- Services offered
- Process workflow
- Call-to-action
- Tech stack overview
- Tools and frameworks
- Skill levels
- Contact form with validation
- Email integration via Resend API
- Social media links
- Direct contact information
This portfolio is deployed on Vercel with a custom domain.
-
Push to GitHub
git add . git commit -m "Initial commit" git push origin main
-
Connect to Vercel
- Go to Vercel
- Import your GitHub repository
- Configure environment variables
- Deploy
-
Custom Domain
- Add your custom domain in Vercel settings
- Update DNS records with your domain provider
Amjad Ali - Mobile Developer & Software Engineer
- 🌐 Website: mrxamjad.com
- 💼 LinkedIn: linkedin.com/in/mrxamjad
- 🐙 GitHub: @mrxdevs
- 🐦 Twitter: @mrxamjad
- 📧 Email: [email protected]
This project is open source and available under the MIT License.
- Next.js Team - For the amazing framework
- Vercel - For seamless deployment
- Tailwind CSS - For the utility-first CSS framework
- Resend - For email API integration
- GitHub - For contribution graph API
- LeetCode - For stats card API
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
If you like this project, please give it a ⭐ on GitHub!
Made with ❤️ by Amjad Ali
© 2024 Amjad Ali. All rights reserved.