CarneiroTech/QUICK_START.md

# Quick Start Guide - Carneiro Tech Website

## Immediate Next Steps

### 1. Test Locally (5 minutes)

```bash
cd aspnet/CarneiroTech
dotnet run
```

Then open: `http://localhost:5000`

**What to check:**
- ✅ Homepage loads with all sections
- ✅ Click "Cases" in navbar → should show 3 cases
- ✅ Click on a case → should show full details
- ✅ Click on tags → should filter cases
- ✅ Sitemap at `/sitemap.xml` works
- ✅ Responsive design (resize browser)

---

### 2. Customize for Your Brand (30 minutes)

#### A. Update Logo Colors

Open `/wwwroot/css/custom.css` and update:

```css
/* Find and replace #ffc800 with your primary color */
/* Find and replace #667eea and #764ba2 with your gradient colors */
```

To extract colors from your logo:
1. Open `/logo/LogoNovo.svg` in a browser
2. Use browser DevTools to inspect
3. Copy hex color codes
4. Replace in custom.css

#### B. Update LinkedIn URL

Open `/Views/Shared/_Layout.cshtml` (line ~93):

```html
<a class="btn btn-dark btn-social mx-2"
   href="https://linkedin.com/in/ricardo-carneiro" <!-- UPDATE THIS -->
```

#### C. Update Domain URLs

Find and replace `carneirotech.com` with your actual domain:

Files to update:
- `/Views/Shared/_Layout.cshtml` (lines 12, 16, 47, 48)
- `/Controllers/HomeController.cs` (sitemap URLs)

---

### 3. Add Your Own Cases (15 minutes per case)

#### Create New Case File

```bash
cd Content/Cases
# Create new file (use VSCode, Notepad, etc.)
touch my-new-case.md
```

#### Copy Template

Use one of the existing cases as template:
- `sap-integration-healthcare.md` (technical integration)
- `legacy-modernization.md` (architecture/migration)
- `mvp-definition.md` (consulting/strategy)

#### Fill Front Matter

```yaml
---
title: "Your Project Title"
slug: "your-project-slug"  # Will be URL: /cases/your-project-slug
summary: "Short description for cards (2-3 lines)"
client: "Client Name or Confidential"
industry: "Industry"
timeline: "X months"
role: "Your Role"
image: ""  # Leave empty for gradient or add /img/cases/yourimage.jpg
tags:
  - Tag1
  - Tag2
  - Tag3
featured: true  # Shows on homepage
order: 1  # Lower number = higher priority
date: 2024-01-15  # YYYY-MM-DD format
seo_title: "SEO Title (max 60 chars)"
seo_description: "SEO description (max 160 chars)"
seo_keywords: "keyword1, keyword2, keyword3"
---
```

#### Write Content

```markdown
## Overview

Brief overview...

---

## Challenge

What was the problem?

### Pain Points:
- Point 1
- Point 2

---

## Solution

How did you solve it?

\`\`\`csharp
// Code examples work
public void Example() {}
\`\`\`

---

## Results

Metrics and outcomes.

---

## Tech Stack

\`Tag1\` \`Tag2\` \`Tag3\`

---

[Call to action link](/#contact)
```

#### Preview

Restart app or wait 60min (cache expires):

```bash
dotnet run
# Navigate to: http://localhost:5000/cases/your-project-slug
```

---

### 4. Configure Email (30 minutes)

For the contact form to work, you need to implement email sending.

#### Option A: SendGrid (Recommended)

1. Sign up at sendgrid.com
2. Get API key
3. Add NuGet package:
   ```bash
   dotnet add package SendGrid
   ```
4. Update `HomeController.cs` Contact method:
   ```csharp
   // Replace TODO with SendGrid code
   var apiKey = Configuration["SendGrid:ApiKey"];
   var client = new SendGridClient(apiKey);
   var from = new EmailAddress("noreply@carneirotech.com", "Carneiro Tech");
   var subject = $"Novo contato: {model.Name}";
   var to = new EmailAddress("ricardo@carneirotech.com");
   var plainTextContent = model.Message;
   var htmlContent = $"<strong>Nome:</strong> {model.Name}<br>...";
   var msg = MailHelper.CreateSingleEmail(from, to, subject, plainTextContent, htmlContent);
   await client.SendEmailAsync(msg);
   ```

#### Option B: SMTP (Gmail, Outlook, etc.)

1. Add NuGet package:
   ```bash
   dotnet add package MailKit
   ```
2. Configure SMTP settings in appsettings.json
3. Implement SMTP sending logic

---

### 5. Add Portfolio Images (Optional)

1. Create folder: `/wwwroot/img/cases/`
2. Add your images (jpg, png, webp)
3. Update case markdown front matter:
   ```yaml
   image: "/img/cases/my-project.jpg"
   ```

**Recommended image size:** 800x600px (4:3 ratio)

---

### 6. Docker Deployment (Production)

#### Build

```bash
cd aspnet/CarneiroTech
docker build -t carneirotech:latest .
```

#### Run

```bash
docker run -d \
  -p 80:80 \
  -p 443:443 \
  --name carneirotech \
  -v $(pwd)/Content:/app/Content:ro \
  carneirotech:latest
```

#### Or use Docker Compose

```bash
docker-compose up -d
```

**Access:** `http://localhost:8080`

---

## Common Issues & Solutions

### Issue: "404 Not Found" on case pages

**Solution:** Check slug in markdown matches URL
- Markdown: `slug: "my-case"`
- URL: `/cases/my-case` (must match exactly)

### Issue: Cases not appearing

**Solution:**
1. Check markdown file is in `Content/Cases/`
2. Verify front matter YAML is valid
3. Restart app (cache clears)
4. Check date format: `YYYY-MM-DD`

### Issue: Build fails

**Solution:**
```bash
dotnet clean
dotnet restore
dotnet build
```

### Issue: CSS not loading

**Solution:**
1. Check file exists: `/wwwroot/css/custom.css`
2. Verify `_Layout.cshtml` includes it
3. Clear browser cache (Ctrl+Shift+R)

### Issue: Logo not appearing

**Solution:**
1. Check file: `/wwwroot/img/logo.svg`
2. Verify navbar reference in `_Layout.cshtml`
3. Check image dimensions (logo should be ~40px height)

---

## Performance Tips

1. **Enable Response Caching**
   - Add to `Program.cs`: `builder.Services.AddResponseCaching();`
   - Add to pipeline: `app.UseResponseCaching();`

2. **Enable Response Compression**
   - Add to `Program.cs`: `builder.Services.AddResponseCompression();`

3. **Optimize Images**
   - Use WebP format
   - Compress before uploading
   - Tools: TinyPNG, Squoosh

4. **CDN for Static Assets**
   - Upload `/wwwroot/` to CDN
   - Update references in `_Layout.cshtml`

---

## Production Deployment Checklist

- [ ] Update all `carneirotech.com` URLs to your domain
- [ ] Configure SSL certificate (Let's Encrypt recommended)
- [ ] Set `ASPNETCORE_ENVIRONMENT=Production`
- [ ] Configure email sending (SendGrid or SMTP)
- [ ] Add Google Analytics (optional)
- [ ] Test all pages
- [ ] Test contact form
- [ ] Verify sitemap: `/sitemap.xml`
- [ ] Verify robots.txt: `/robots.txt`
- [ ] Test responsive design
- [ ] Run Lighthouse audit
- [ ] Set up monitoring (e.g., Application Insights)
- [ ] Configure backup for Content folder
- [ ] Test Docker deployment
- [ ] Set up CI/CD (optional)

---

## Resources

- **README.md** - Full documentation
- **IMPLEMENTATION_SUMMARY.md** - What was built
- **Example Cases** - 3 markdown examples in `Content/Cases/`

---

## Support

If you encounter issues:

1. Check the README.md for detailed documentation
2. Review IMPLEMENTATION_SUMMARY.md for architecture
3. Look at example cases for markdown syntax
4. Check Controller code for logic

---

**Ready to launch in ~2 hours** (including customizations)

Good luck! 🚀