Portfolio Frontend

This repository contains the frontend of my personal portfolio website, which is built with React, Tailwind CSS, and Vite. The website showcases my projects, blogs, and contact information, and it integrates various third-party libraries for enhanced functionality.

Website Link

You can visit the live version of my portfolio here: Akith Chandinu's Portfolio

Features

• Modern UI: Built with React and styled using Tailwind CSS for a responsive and clean design.
• Blog Section: View my latest blog posts, created with React Markdown for easy content management.
• Contact Form: Get in touch with me via a simple form integrated with emailjs-com.
• AI Chatbot: An interactive chatbot created using react-chatbot-kit.
• Responsive Design: Ensures a great user experience across all devices.
• Admin Panel: Allows for blog management (creating, editing, and deleting) using modals.

Tech Stack

• React: A JavaScript library for building user interfaces.
• Vite: A fast development build tool and dev server.
• Tailwind CSS: A utility-first CSS framework for styling.
• EmailJS: A service for sending emails from the frontend.
• Multer: Middleware for handling file uploads.
• Mongoose: For working with MongoDB databases.

Installation and Setup

1. Clone the repository:

   git clone https://github.com/your-username/portfolio-frontend.git
   

2. Navigate into the project directory:

   cd portfolio-frontend
   

3. Install dependencies:

   npm install
   

4. Create a .env file in the root of the project and configure your environment variables, including your EmailJS credentials.

5. Start the development server:

   npm run dev
   

6. To build the project for production:

   npm run build
   

Scripts

• npm run dev: Starts the development server.
• npm run build: Builds the application for production.
• npm run lint: Lints the code using ESLint.
• npm run preview: Previews the built application.

Dependencies

• @heroicons/react: For icons in the UI.
• @material-tailwind/react: For responsive UI components.
• dotenv: For managing environment variables.
• emailjs-com: For email form integration.
• mongoose: For working with MongoDB in the backend.
• multer: For handling file uploads.
• react: Core library for building the UI.
• react-chatbot-kit: Library to create chatbots.
• react-dom: React's rendering engine.
• react-markdown: To render markdown content.
• react-router-dom: For client-side routing.

Dev Dependencies

• eslint: For code linting and enforcing coding standards.
• tailwindcss: For utility-first CSS styling.
• vite: For fast development and production builds.

Contact

Feel free to reach out to me through the contact form on the website, or connect with me via email.