CarneiroTech/QUICK_START.md

Quick Start Guide - Carneiro Tech Website

Immediate Next Steps

1. Test Locally (5 minutes)

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:

/* 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):

<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

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

---
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

## 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):

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:

   dotnet add package SendGrid
   

4. Update HomeController.cs Contact method:

   // 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:

   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:

   image: "/img/cases/my-project.jpg"
   

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

---

6. Docker Deployment (Production)

Build

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

Run

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

Or use Docker Compose

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:

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! 🚀