Adrian Lobato - Portfolio Website

Welcome to my portfolio website! This is a modern, responsive web application showcasing my professional information, projects, qualifications, and experience.

🌟 Features

• Home: Landing page with introduction and overview
• About: Personal information and professional summary
• Qualification: Educational background and certifications
• Experience: Work history and professional experience
• Portfolio: Showcase of projects with live demos
• Contact: Get in touch form with email integration

🛠️ Technologies Used

• Frontend Framework: React 18.2.0
• Build Tool: Vite 5.0.8
• Styling: Bootstrap 5.3.2 with Bootstrap Icons
• Animations: Framer Motion 11.0.3
• Icons: FontAwesome (Solid & Brand icons)
• Routing: React Router DOM 6.21.3
• Forms: React Hook Form 7.49.3
• Email Service: EmailJS Browser 4.1.0
• PDF Handling: React PDF 7.7.1
• SEO: React Helmet 6.1.0
• HTTP Client: Axios 1.6.7

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/adrian1715/portfolio-website-code.git
cd portfolio-website-code

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and visit http://localhost:5173 (or the port shown in your terminal)

📁 Project Structure

portfolio-website-code/
├── public/                # Static assets
├── src/
│   ├── components/         # Reusable React components
│   ├── pages/             # Main page components (Home, About, etc.)
│   ├── projects/          # Project-related components and data
│   ├── utils/             # Utility functions and helpers
│   ├── App.jsx            # Main application component
│   ├── main.jsx           # Application entry point
│   └── index.css          # Global styles
├── .eslintrc.cjs         # ESLint configuration
├── .gitignore            # Git ignore file
├── README.md             # Project documentation
├── index.html            # HTML template
├── package.json          # Project dependencies and scripts
├── package-lock.json     # Project dependencies lock file
└── vite.config.js        # Vite configuration

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint for code quality checks

✨ Key Features

Responsive Design

Built with Bootstrap 5, ensuring the website looks great on all devices and screen sizes.

Smooth Animations

Powered by Framer Motion for fluid, professional animations and transitions.

Contact Form

Integrated with EmailJS for seamless contact form functionality without a backend server.

Project Showcase

Dedicated portfolio section with live project demos and detailed descriptions.

PDF Support

Built-in PDF viewing capabilities for documents like resumes or certificates.

SEO Optimized

React Helmet integration for better search engine optimization.

🌐 Deployment

To deploy the website:

1. Build the project:

npm run build

2. The dist folder will contain all the files ready for deployment to any static hosting service (Netlify, Vercel, GitHub Pages, etc.)

🤝 Contributing

This is a personal portfolio project, but suggestions and improvements are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

This project is private and for portfolio purposes.

🔗 Live Demo

Visit the live website to see the portfolio in action and explore all the features mentioned above.

portfolio-website-adrian-lobato.onrender.com

---

Thank you for visiting my portfolio! I hope you find the content valuable and that my projects and ideas can contribute in some meaningful way.