Building a Modern Personal Portfolio"?

A step-by-step tutorial on developing the perfect portfolio website using Next.js framework for better access to the portfolio resources through a visually appealing website with nice particle animations and smooth transitions and interactive resources for enhanced experiences.here is the live link my-portfolio

? Features

• Responsive design for all devices
• Interactive particle background
• Smooth page transitions
• Dynamic project showcase
• Contact form with email validation
• Downloadable CV
• Social media integration
• Blog section
• Professional skill visualization
• Docker support for containerization

?️ Built With

• Next.js 14
• React 18
• Tailwind CSS
• Framer Motion
• React Icons
• Swiper
• TSParticles
• Radix UI Components
• Docker

?‍♂️ Getting Started

Prerequisites

• Node.js 18 or higher
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/B-KEY/BIBEK-PORTFOLIO.git

1. Install dependencies:

   npm install
   # or
   yarn install

1. Run the development server:

   npm run dev
   # or
   yarn dev

1. Open http://localhost:3000 in your browser.

If You Prefer Docker Setup

1. Build the Docker image:

   docker build -t portfolio .

1. Run the container:

   docker run -p 3000:3000 portfolio

? Project Structure

portfolio/
├── app/ # Next.js app directory
│   ├── contact/ # Contact page
│   ├── resume/ # Resume page
│   ├── work/ # Projects showcase
│   └── layout.jsx # Root layout
├── components/ # Reusable components
├── public/ # Static assets
└── styles/ # Global styles

? Deployment

The project can be deployed on Vercel with these steps:

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy with one click

? Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_CONTACT_FORM_KEY=your_form_key
Also add username and api for Blog

? Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

? License

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

? Author

Bibek Thapa

• LinkedIn: bibek-thapa1
• GitHub: @B-KEY

? Acknowledgments

• Next.js team for the amazing framework
• Vercel for hosting
• All open-source contributors
• Partial inspiration from cristianmihai01

The above is the detailed content of Building a Modern Personal Portfolio"?. For more information, please follow other related articles on the PHP Chinese website!