Md Ranju Portfolio

A modern, responsive personal portfolio website showcasing skills, projects, and experiences. Built with Next.js for optimal performance and SEO, featuring sleek UI components from shadcn/ui and DevUI, all styled with Tailwind CSS. This site is currently under active development—stay tuned for more features!

Warning ⚠️

• This is my personal portfolio website. Do not copy exactly as it is. You can use it as a reference or inspiration for your own portfolio.

Table of Contents

• Features
• Tech Stack
• Installation
• Usage
• Deployment
• Project Structure
• Screenshots
• Contributing
• License
• Contact

Features

• Responsive Design: Fully adaptive layout for desktop, tablet, and mobile devices.
• Dynamic Sections: About me, projects showcase, skills highlights, and contact form with smooth animations.
• SEO Optimized: Server-side rendering via Next.js for better search engine visibility.
• Modern UI Components: Customizable, accessible elements from shadcn/ui and DevUI for an engaging user experience.
• Type-Safe Code: Powered by TypeScript for robust development and fewer runtime errors.
• Under Development: Ongoing enhancements including blog integration, resume download, and advanced animations.

Tech Stack

Category	Technology
Framework	Next.js 14
Language	TypeScript 5
Styling	Tailwind CSS 3
UI Components	shadcn/ui, DevUI
Build Tool	npm/bun
Other	ESLint, Prettier

Installation

1. Clone the Repository

   git clone https://github.com/muhammadranju/mdranju-portfolio-nextjs.git
   cd mdranju-portfolio-nextjs

2. Install Dependencies

   npm install
   # or
   bun install

3. Run the Development Server

   npm run dev
   # or
   bun dev

   The site will be available at http://localhost:3000.

Usage

• Explore Sections: Navigate through the homepage to view the about section, featured projects, skills, and contact form.
• Customize Content: Edit data in src/data/ (e.g., projects.json) to personalize your portfolio.
• Add Projects: Follow the component patterns in src/components/ to integrate new work showcases.
• For production build:

  npm run build
  npm start

Deployment

• Vercel (Recommended): Push to GitHub and deploy directly via Vercel for automatic builds and previews.
• Netlify: Drag-and-drop the built files or connect your repo.
• Custom Server: Use Node.js with the out folder from npm run build.

Environment variables are minimal; no API keys required for basic setup.

Project Structure

mdranju-portfolio-nextjs/
├── src/
│   ├── api/         # API routes
│   ├── app/         # App Router pages and layouts
│   ├── components/  # Reusable components (e.g., ProjectCard, ContactForm)
│   ├── config/      # Site configuration (e.g., metadata)
│   ├── data/        # Static data (e.g., projects, skills)
│   ├── lib/         # Utilities and helpers
│   ├── ui/          # shadcn/ui and DevUI components
│   └── utils/       # Shared utilities
├── public/          # Static assets (images, icons)
├── README.md
├── package.json
├── next.config.js
├── tailwind.config.js
└── tsconfig.json

Contributing

Contributions are welcome, especially as the project evolves! Please follow these steps:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/add-blog-section).
3. Commit your changes (git commit -m 'feat: add blog integration').
4. Push to the branch (git push origin feature/add-blog-section).
5. Open a Pull Request.

See CONTRIBUTING.md for detailed guidelines on code style, testing, and more.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

• Author: Muhammad Ranju (@muhammadranju)
• Email: [email protected]
• Issues: Report bugs or suggest features here

---

Crafted with passion for code and design. 🚀 Let's connect and collaborate!