Personal portfolio

Discover My Work in a New Dimension | Crafting Blockchain Frontiers & Immersive MERN Experiences

Comment

Inspiration

This is my first hackathon, and I wanted to challenge myself while gaining hands-on experience with technologies I've been eager to explore. The idea of building a personal portfolio website came naturally—I needed a space to showcase my skills, projects, and journey as a developer. What inspired me most was the opportunity to combine my passion for Blockchain and MERN development with cutting-edge web technologies like Three.js for 3D elements. I aimed to create something visually engaging and interactive that reflected my love for innovation and creativity. The thought of pushing my technical boundaries and learning something new drove me to take on this project.

What it does

My portfolio website is a dynamic and interactive platform designed to showcase my work and skills. Here’s what it offers:
Interactive 3D Skills Cube: A rotating cube built with Three.js that displays my key skills, adding an engaging visual element.

Project Showcase: A section featuring my projects, like a decentralized task manager and a job portal, with links to GitHub and live demos.

About Me Section: A creative reveal card introducing myself and my passion for Blockchain and MERN development.

Contact Form: A functional form for visitors to send me messages, with data stored in MongoDB.

Message Dashboard: A secure dashboard (protected by a secret key) where I can view contact form submissions.

Dark Mode Toggle: A seamless dark mode option for better accessibility and user preference.

Responsive Design: Ensures the site looks great on all devices, from mobile to desktop.

Dashboard: Only the owner of the project can view their client messages sent through Contact section.

How we built it

I used a modern tech stack to build a functional and visually appealing portfolio:
Frontend:
React: For reusable components and state management.

Three.js: To create the interactive 3D skills cube.

Tailwind CSS: For sleek, responsive styling.

Framer Motion: For smooth animations and transitions (e.g., text reveals and hover effects).

Acerternity UI: For enhanced interactivity, like 3D cards and reveal effects.

Backend:
Node.js & Express: To handle API requests.

MongoDB: For storing contact form messages.

JWT: To secure the message dashboard with authentication.

Deployment:
Frontend hosted on Vercel for fast, reliable performance.

Backend deployed on Render for smooth API functionality.

I also implemented lazy loading to optimize performance, ensuring components like the 3D cube and project cards load efficiently.

Challenges we ran into

Being my first hackathon, I encountered several hurdles:
Learning Three.js: As a beginner with 3D graphics, creating and animating the skills cube required significant trial and error.

Responsive Design: Making the 3D elements and UI components work seamlessly across all screen sizes (especially mobile) was tricky and needed constant tweaking.

Backend Integration: Setting up MongoDB, securing the dashboard with JWT, and managing CORS and environment variables across deployments was complex.

Time Constraints: Balancing feature development, debugging, and testing within the hackathon timeframe taught me to prioritize effectively.

Accomplishments that we're proud of

Despite the challenges, I’m thrilled with these achievements:
3D Skills Cube: Successfully integrating an interactive 3D element with Three.js gave the portfolio a modern, standout feature.

Full-Stack Contact System: Building a working contact form and secure dashboard was a rewarding full-stack accomplishment.

Smooth Animations: Using Framer Motion for fluid transitions and hover effects elevated the user experience.

Dark Mode: Implementing a seamless dark mode toggle added accessibility and polish to the design.

What we learned

This project was a huge learning curve for me. Here’s what I gained:
Three.js: Basics of creating and animating 3D objects in a web environment.

Full-Stack Skills: Connecting a React frontend to a Node.js backend with MongoDB and handling API requests.

Advanced Frontend: Improved my skills with Tailwind CSS for responsive design and Framer Motion for animations.

Security: Learned to implement JWT for authentication and manage sensitive data securely.

Optimization: Gained experience with lazy loading and asset optimization for better performance.

What's next for Personal portfolio

I’m excited to keep improving my portfolio. Future plans include:
More 3D Features: Adding additional interactive 3D elements to other sections, like projects or the about page.

Project Filtering: A filter or search feature for the projects section as my portfolio grows.

Blog Section: A space to share insights, tutorials, or updates on my developer journey.

Enhanced Dashboard: Features like message archiving or direct replies from the dashboard.

Performance Boost: Further optimizing 3D elements for faster load times, especially on mobile.

Built With

Share this project:

Updates

Submission history