341 lines
6.9 KiB
Markdown
341 lines
6.9 KiB
Markdown
# 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! 🚀
|