Personal Portfolio Website

This repository contains the source code for my personal portfolio website. The website showcases my skills, projects, and professional background as a full-stack web developer, with a focus on both frontend and backend technologies.

Table of Contents

• Project Overview
• Technologies Used
• Features
• Project Structure
• Installation and Setup
• Usage
• Future Improvements
• Contact

Project Overview

The Personal Portfolio Website is designed to highlight my professional journey and technical abilities through an interactive, responsive, and modern design. The portfolio is divided into various sections that include:

• A header section with my name, social media links, and company affiliations.
• An About Me section detailing my education, skills in frontend and backend development, and technology stack.
• A Projects section where I showcase key projects I've worked on, including project descriptions and direct links to the live applications or repositories.
• Animations and a dynamic carousel are integrated into the Projects section to enhance the user experience.
• The website is designed to be fully responsive across all device sizes, ensuring a smooth experience on both desktop and mobile devices.

Technologies Used

This project utilizes a range of modern web development tools and libraries, including:

• React: For building the user interface and handling component-based structure.
• Chakra UI: A customizable component library that provides flexible and accessible UI components.
• React-Slick: For the carousel slider feature used in the Projects section.
• JavaScript (ES6+): For interactive features and dynamic content.
• HTML5 & CSS3: For structuring and styling the webpage.
• Icon Libraries: Includes react-icons for implementing free, scalable icons.

Features

• Responsive Design: The website adapts to various screen sizes, from mobile phones to large desktop monitors.
• Projects Carousel: Interactive carousel that showcases my projects with smooth animations and scaling effects on hover.
• Modal Popups: Detailed project descriptions are accessible through modals that appear when clicking "Learn More" in the Projects section.
• Optimized Performance: Ensures fast load times with efficient asset management and lazy loading.

Project Structure

├── public
│   ├── assets
│   ├── CV.pdf
│   ├── index.html
├── src
│   ├── components
│   │   ├── Header.js
│   │   ├── AboutMe.js
│   │   ├── Projects.js
│   │   ├── ModalProject.js
│   ├── PortafolioApp.js
│   ├── index.js
├── .gitignore
├── README.md
├── package.json
└── package-lock.json

• components/: Contains the main UI components like Header, AboutMe, Projects, and ModalProject.
• assets/: Directory for storing static images or other assets.
• PortafolioApp.js: The main application file where components are imported and rendered.
• helpers/: Directory with de actual helpers for some necesary parts of the app.

Installation and Setup

To run this project locally, follow these steps:

1. Clone the repository:

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

2. Navigate into the project directory:

   cd portfolio-website

3. Install the required dependencies:

   npm install

4. Start the development server:

   npm start

   The website will be available at http://localhost:5173 in your browser.

Future Improvements

Some planned improvements for the portfolio website include:

• Multilingual Support: Add translations to make the portfolio accessible to a broader audience.
• Filter Projects: Add 2 filters for Company's Projects and Personal Projects.

Contact

Feel free to reach out to me for any questions or collaboration opportunities:

• Email: ljmora004@outlook.com
• LinkedIn: Linkedin Profile
• GitHub: GitHub Profile

---

License

Web Portafolio by Luis Mora is licensed under CC BY-NC 4.0