mruud.com (IndiePortfolio_M) is my previous personal portfolio website, which I have now open-sourced after creating a new version. It was designed to showcase my projects, skills, and professional experience, built with a focus on performance and modern web technologies.

Features

• Project Showcase with Live Previews: Display detailed descriptions of projects with embedded live previews and links to repositories.
• Skills Section: Highlight technical skills in an organized manner.
• Responsive Design: Optimized for seamless viewing across devices.
• Contact Form: Allow visitors to get in touch directly through the website.

Tech Stack

• Frontend: Built using React with Vite for a fast development experience.
• Styling: Styled with Tailwind CSS for a clean and modern UI.
• Hosting: Deployed on Vercel for fast and reliable performance.

Implementation

Frontend

• React components used to create reusable and modular UI elements.
• Vite utilized for rapid development and optimized builds.
• React Router for navigation between different sections.

Styling

• Tailwind CSS for utility-first styling, ensuring a responsive and consistent design.
• Custom animations and transitions to enhance user experience.

Deployment

• Continuous deployment using Vercel with automatic build triggers from GitHub.
• Optimized performance with code splitting and asset optimization.

How It Works

1. Landing Page: Visitors are greeted with an introduction and a summary of skills and experience.
2. Projects Section: Detailed view of projects with embedded live previews and GitHub repositories.
3. Skills Section: Overview of technical proficiencies.
4. Contact Form: A user-friendly form for inquiries, integrated with email handling services.

Challenges Faced

• Ensuring optimal performance and fast load times.
• Designing a responsive layout that maintains usability across devices.
• Managing state and navigation in a single-page application.

Why Open Source?

After building a new personal portfolio, I decided to open-source this version so others can learn from it, contribute, or use it as a template for their own portfolios.

Future Enhancements

• Adding a blog section to share articles and insights.
• Implementing dark mode for improved accessibility.
• Enhancing the contact form with validation and spam protection.

This project reflects my past work in modern web development and now serves as an open-source resource for developers looking to build their own portfolios.