A
Anonymous

Portfolio - Copy this React, Tailwind Component to your project

Title: Personal Portfolio Website (MERN Stack Developer) Overview: Build a modern, responsive portfolio website using React (with Vite for development) that showcases your skills, projects, and experience as a MERN stack developer. The website will have several sections: Home, About, Skills, Projects, and Contact. Each section should be designed with a clean and professional layout to effectively display your profile. Design Details: Header Section: Add navigation links for Home, About, Skills, Projects, and Contact. A simple, fixed navbar for easy navigation across sections. Home Section: Layout: Divide the section into two parts: Right side: Display a professional profile photo. Left side: Include a brief introduction about yourself, such as your name, role, and a few lines about what you do (e.g., "I am a MERN stack developer specializing in building modern web applications"). Add an eye catching background or subtle animation to enhance the design. Skills Section: Showcase your front end and back end skills with icons. Front end skills: HTML, CSS, JavaScript, React, Redux, Bootstrap, Material UI, Tailwind CSS. Back end skills: Node.js, Express, MongoDB, REST APIs, GraphQL. Use tool icons (e.g., React, Node.js logos) to visually represent your tech stack. About Section: Add a detailed description about yourself, your education, work experience, and your journey as a developer. Include a brief paragraph on your passion for coding and what excites you about working in the MERN stack. Project Section: Display your projects inside cards, with each project including: A title, a brief description, and the tech stack used. A video embedded inside the card that autoplays on hover or card click, showcasing a demo of the project. Include a button that links to the live project or GitHub repository for each project. Contact Section: Add a contact form with fields for name, email, and message. Include your professional email, phone number, and social media links (GitHub, LinkedIn, etc.). Make sure the social icons are clickable and open the respective links.

Prompt
Component Preview

About

Portfolio - Build a responsive personal site showcasing skills, projects, and experience with sections like Home, About, Skills, and. Copy component code!

Share

Last updated 1 month ago