Welcome to Portfolio Website, a modern and dynamic portfolio built with the latest technologies. This project showcases my skills and experience as a developer, featuring interactive animations, 3D elements, and a polished design—all powered by React, Next.js, and Three.js. Let's dive in!
This project leverages a powerful combination of technologies:
- Next.js: SSR, SSG, and optimized performance.
- React 18: The backbone of the app with hooks and concurrent features.
- Redux Toolkit: Efficient state management.
- Tailwind CSS: Utility-first styling for responsive design.
- Three.js / react-three-fiber: 3D rendering and animations.
- Framer Motion: Smooth animations and transitions.
- Lottie: Beautiful vector animations.
- AOS: Scroll animations for an engaging user experience.
- Day.js: Handling date and time elegantly.
- 🌐 Multi-Language Support: Built with
next-intlfor seamless internationalization. - 🖼️ Interactive 3D Globe: Powered by
threeandthree-globe. - 💻 Responsive Design: Works perfectly on any device with
tailwindcss. - 🚀 Optimized Performance: Thanks to Next.js' static and server-side rendering.
- 🔥 Animations Everywhere: Beautiful animations with
AOS,Framer Motion, andLottie. - 📚 Syntax Highlighting: Neat code samples with
react-syntax-highlighter. - 🗂️ Redux Persist: State persistence for seamless user experience.
Clone the repository and install the dependencies:
git clone https://github.com/yourusername/portfolio-hm.git
cd portfolio-hm
npm installStart the development server:
npm run devYour app will be running locally at http://localhost:3000.
Build the optimized production version of the app:
npm run build
npm run start- @react-three: Integrates Three.js with React for 3D visualizations.
- @mui/material: Material UI for fast and customizable components.
- Swiper.js: Modern touch slider for images and content.
- React Hook Form: Simplified form handling with validation via Yup.
To deploy the app, you can use platforms like Vercel or Netlify. Since this is a Next.js app, deployment is as simple as connecting your repo and hitting deploy!
For example, with Vercel:
- Connect your repository.
- Configure the environment variables if needed.
- Deploy!
This is just the beginning! Here's what I'm planning to add in the future:
- 📊 Analytics Integration: Google Analytics or Plausible for tracking.
- 💬 Live Chat Feature: Real-time communication via socket.io.
- 📷 Photography Showcase: A beautiful gallery to highlight my photography hobby.
Feel free to submit issues and pull requests. Let's make this portfolio even better together!
Want to reach out? Feel free to connect with me:
- Email: [email protected]
- LinkedIn: hubertmiernik
- Website: hubertmiernik.com