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
- Clone the repository:
git clone https://github.com/B-KEY/BIBEK-PORTFOLIO.git
- Install dependencies:
npm install
# or
yarn install
- Run the development server:
npm run dev
# or
yarn dev
- Open
http://localhost:3000in your browser.
If You Prefer Docker Setup
- Build the Docker image:
docker build -t portfolio .
- 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:
- Push your code to GitHub
- Connect your repository to Vercel
- 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
- Fork the repository
- Create your feature branch (git checkout -b feature/AmazingFeature)
- Commit your changes (git commit -m 'Add some AmazingFeature')
- Push to the branch (git push origin feature/AmazingFeature)
- 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
Top comments (18)
It's niceπ€π€
BTW, can you please check out mine??π
shafayet.zya.me
Thank you!! I will check out yours.
Hi Shafayet! Your website looks great! It is clear and easy to follow. I suggest that you don't share your complete address publicly for security reasons (in the public CV)
Thanks so much for your feedback Brun! π I really appreciate the tip about not sharing my full address publicly, itβs a great point for security. Iβll definitely make that update. Thanks again for looking out!π€π€
You're welcome! Happy to help :)
This portfolio tutorial is fantastic! The step-by-step guide on creating a stunning, interactive website with Next.js is really well laid out, especially with all the cool features like smooth transitions, particle animations, and dynamic project showcases. I love how youβve incorporated Tailwind CSS, Framer Motion, and Docker support for a modern and scalable setup.
For anyone looking to build their own portfolio site, this is an excellent resource. Check out SparkOut for more tutorials and web development tips to help you create impressive interactive websites like this one!
Use astro.build/ instead of Next
I lost $53,000 to a sophisticated scam, and the emotional and financial impact was devastating. Amidst my distress, I discovered Recoveryeagles TRUST HACKER. Their reputation for successful asset recovery and their expertise in handling such cases gave me a glimmer of hope. The recovery process was not only effective but also efficient. Thanks to Recoveryeagles TRUST HACKER, I was able to recover $50,350 of my initial $53,000 loss. ( Recoveryeagles aT gmail com
It's looks awesome! I need to create some website for myself eventually.
Thank you! You definitely shouldβitβs a great way to showcase your skills and projects. Let me know if you need any tips or resources when you start building your site!
I need practice some design skills, I'm very good with complex logic, but design lag behind.
Absolutely! Your strength in logic will be a huge asset as you work on design. With a solid foundation in problem-solving, youβre already halfway thereβdesign is just another skill set to build on top. Keep experimenting and practicing, and soon enough, those design skills will catch up!
Awesome!! I will try it next week. Thanks for sharing πIt will be very helpful
Youβre very welcome! Iβm glad you found it helpful. Excited to see what you createβfeel free to share your progress or ask if you have any questions along the way! π
Hey there! I got engaged with the project πͺ I went ahead and made my deployment, which you can check at vinbrun.com. Then, I had some ideas to contribute and wrote them down in the GitHub Issues section. I really enjoyed deploying your code and would be happy to contribute π All the best
love to see more features I saw the github issue section. i will clean my code in upcoming days and make more readable and understandable..
You did awesome with this bro! really like it
Thank you