` container.
## Real Portfolio Examples
Here are the actual portfolio items from the template at **lines 356-399**:
### Example 1: WhatsApp Bot Project
```html index.html theme={null}
```
### Example 2: CRM System
```html index.html theme={null}
```
### Example 3: Travel Agency Website
```html index.html theme={null}
```
### Example 4: Ticket Administrator
```html index.html theme={null}
```
## Project Categories
The `portfolio-category` span is used to tag your projects. Common categories include:
* **Web** - Web applications and websites
* **Mobile** - Mobile applications
* **API** - Backend and API projects
* **Design** - UI/UX design work
* **En Construccion** - Projects in progress
* **Open Source** - Open source contributions
Keep category names short (1-2 words) for better visual appearance on the category badge.
## Image Requirements
### Recommended Specifications
| Property | Recommendation |
| -------------- | ------------------------------ |
| **Dimensions** | 800x600px (4:3 ratio) |
| **Format** | JPG or PNG |
| **File Size** | Under 500KB (optimize for web) |
| **Quality** | 80-90% compression |
### Image Optimization Tips
Resize images to 800x600px before uploading to reduce file size and improve loading speed.
Use tools like [TinyPNG](https://tinypng.com/) or [Squoosh](https://squoosh.app/) to compress images without losing quality.
Always include descriptive `alt` attributes for accessibility and SEO:
```html theme={null}
```
Large, unoptimized images can significantly slow down your portfolio page. Always optimize images before adding them.
## Portfolio Grid Styling
The portfolio grid uses CSS Grid for responsive layout. Here's the actual styling from `style.css` at **lines 296-408**:
```css style.css theme={null}
.portfolio-grid-container {
padding: 20px 0 30px;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 0 15px;
max-width: 1200px;
margin: 0 auto;
}
.portfolio-item {
position: relative;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
height: 100%;
}
.portfolio-img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.portfolio-info {
padding: 15px;
background: rgba(13, 17, 23, 0.9);
color: #fff;
position: relative;
z-index: 2;
}
```
### Hover Effects
The template includes smooth hover animations at **lines 342-369**:
```css style.css theme={null}
/* Hover effects */
.portfolio-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(74, 144, 226, 0.2);
border-color: var(--accent-color);
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.05);
}
/* Add overlay on hover */
.portfolio-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.portfolio-item:hover::after {
opacity: 1;
}
```
## Customizing the Grid Layout
### Adjust Number of Columns
```css style.css theme={null}
.portfolio-grid {
/* Show 2 columns minimum */
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
```
### Change Image Height
```css style.css theme={null}
.portfolio-img {
height: 240px; /* Taller images */
}
```
### Modify Gap Between Items
```css style.css theme={null}
.portfolio-grid {
gap: 30px; /* Larger spacing */
}
```
## Responsive Behavior
The portfolio grid automatically adjusts for different screen sizes at **lines 389-408**:
```css style.css theme={null}
/* Responsive Adjustments */
@media (max-width: 991px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.portfolio-img {
height: 180px;
}
}
@media (max-width: 576px) {
.portfolio-grid {
grid-template-columns: 1fr;
padding: 0 10px;
}
.portfolio-img {
height: 200px;
}
}
```
On tablets (991px), the grid shows 2 columns. On mobile (576px), it shows 1 column for optimal viewing.
## Linking Projects
You can link projects to different destinations:
### GitHub Repository
```html index.html theme={null}
```
### Live Demo
```html index.html theme={null}
```
### Case Study or Project Page
```html index.html theme={null}
```
### Multiple Links (Add Buttons)
For projects with both demo and repository:
```html index.html theme={null}
```
When adding buttons inside a linked portfolio item, use `onclick="event.stopPropagation();"` to prevent the parent link from triggering.
## Removing Projects
To remove a project, simply delete the entire `
Add `loading="lazy"` to portfolio images to improve initial page load performance.
```
...
` block for that project.
## Complete Full Example
Here's a complete portfolio item with all best practices:
```html index.html theme={null}
```
