Skip to content

Latest commit

 

History

History
95 lines (65 loc) · 3.27 KB

README.md

File metadata and controls

95 lines (65 loc) · 3.27 KB
Raw

🚀 Portfolio Website

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!

🛠️ Tech Stack

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.

🎨 Features

  • 🌐 Multi-Language Support: Built with next-intl for seamless internationalization.
  • 🖼️ Interactive 3D Globe: Powered by three and three-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, and Lottie.
  • 📚 Syntax Highlighting: Neat code samples with react-syntax-highlighter.
  • 🗂️ Redux Persist: State persistence for seamless user experience.

📦 Installation

Clone the repository and install the dependencies:

git clone https://github.com/yourusername/portfolio-hm.git
cd portfolio-hm
npm install

🧑‍💻 Development

Start the development server:

npm run dev

Your app will be running locally at http://localhost:3000.

🔧 Building for Production

Build the optimized production version of the app:

npm run build
npm run start

💡 Key Libraries

  • @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.

🚀 Deployment

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:

  1. Connect your repository.
  2. Configure the environment variables if needed.
  3. Deploy!

🎉 What's Next?

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.

🤝 Contributing

Feel free to submit issues and pull requests. Let's make this portfolio even better together!

📫 Contact

Want to reach out? Feel free to connect with me:

Made with ❤️ by Hubert Miernik