Skip to content

Navigation Menu

Sign in
Appearance settings
Sign up
Appearance settings
Open more actions menu

Repository files navigation

Md Ranju Portfolio

License: MIT Next.js TypeScript Tailwind CSS shadcn/ui

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

  • 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


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

About

The portfolio website is made by next.js and the UI design is tailwindcss, shadcnui, and devui components

Topics

Resources

Contributing

Stars

7 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.