# 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 ``` #### 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 = $"Nome: {model.Name}
..."; 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! 🚀