MERN Stack Portfolio Application

Build a reusable header for the mer n stack portfolio application, featuring the k-s-r initials and a home route via react-router-dom, with a three-color theme and Montserrat font for admin.

Explore the intro of the mern stack portfolio application, where the self description and a get started button are presented in a simple text-only section with animations planned for later.

Build the about me section for a MERN stack portfolio by creating a reusable section title component, embedding a Lottie animation, and outlining descriptions and technologies with responsive layout.

Learn to make the MERN stack portfolio application's intro and section components responsive by implementing tailwind breakpoints and media queries for web and mobile views.

Develop and style the experience section of a MERN stack portfolio to display role, company, and description with responsive horizontal tabs and custom scrollbars.

Create the projects section in the mern stack portfolio app by mirroring the experiences layout, displaying project titles, images, descriptions, technologies, and optional demo links using static data.

Replicate the projects section as the courses section in the MERN stack portfolio application, wiring courses data with title, image, and navigate links, and adjust layout for dynamic content.

Build the say hello contact section by rendering a developer object with details like name, email, and mobile in a flex layout, and include a right-side image animation.

Design and implement a simple footer component with two parts: designed and developed by and the developer name, centered in white text with an underline divider and reduced opacity.

Create a left social media sidebar for the MERN portfolio app with remix icons as anchor links to Facebook, mail, Instagram, LinkedIn, and GitHub, fixed for web view and mobile-friendly.

Build a full screen loader component for a MERN stack portfolio app, handling API calls to Node.js and MongoDB with a dynamic animated KSR overlay during loading.

Set up a Node.js express server for the MERN portfolio by configuring Express, Mongoose, dotenv, and nodemon, creating server.js, and port handling (process.env.PORT or 5000) for backend integration with MongoDB.

Connect the node backend to a MongoDB Atlas database using mongoose and a dot env file for the Mongo URL. Verify the connection is successful.

Build six mongoose models for a MERN portfolio backend—intro, about, experience, projects, courses, and contact—defining string fields, a skills array, and exporting models to MongoDB.

Create and insert static json data into MongoDB collections (intro, about, projects, experiences, courses, contacts) to prepare for the get portfolio data api.

Integrate portfolio data into the MERN stack app by wiring a frontend api call to the backend via a proxy to localhost:5000 using axios and redux toolkit.

Learn to populate dynamic portfolio data across intro, about, experiences, projects, and courses in a MERN stack app using reducers and selectors, with a loader and admin panel planning.