Engineering Portfolio

Astro.js + Tailwind CSS ile oluşturulmuş modern, hızlı ve SEO uyumlu portfolio sitesi.

🚀 Kurulum

npm install

Environment Variables

Projeyi çalıştırmadan önce .env dosyası oluşturun:

cp .env.example .env

.env dosyasını düzenleyin ve gerekli değişkenleri ekleyin:

PUBLIC_GOOGLE_SHEETS_WEB_APP_URL=https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec

Google Sheets Web App URL Nasıl Alınır?

Detaylı kurulum için GOOGLE_APPS_SCRIPT.md dosyasına bakın. Kısaca:

1. Google Sheets oluşturun
2. Extensions → Apps Script'e gidin
3. GOOGLE_APPS_SCRIPT.md dosyasındaki kodu yapıştırın
4. Deploy → New deployment → Web app
5. Oluşan URL'yi .env dosyasına ekleyin

📝 Geliştirme

Geliştirme sunucusunu başlatmak için:

npm run dev

Tarayıcıda http://localhost:4321 adresini açın.

🏗️ Build

Production build için:

npm run build

Build çıktısı dist/ klasöründe oluşur. Bu klasörü Nginx sunucusuna yükleyebilirsiniz.

📁 Proje Yapısı

/
├── public/          # Statik dosyalar (görseller, favicon, vb.)
├── src/
│   ├── components/  # Astro bileşenleri
│   ├── layouts/     # Layout şablonları
│   └── pages/       # Sayfalar (routing otomatik)
├── astro.config.mjs # Astro konfigürasyonu
└── tailwind.config.mjs # Tailwind CSS konfigürasyonu

🎨 Özellikler

• ⚡ Astro.js ile sıfır JavaScript runtime overhead
• 🎨 Tailwind CSS ile modern ve responsive tasarım
• 📱 Mobile-first yaklaşım
• 🔍 SEO optimizasyonu
• 🚀 Statik site generation (SSG)
• 💰 Düşük hosting maliyeti (Nginx ile)
• 📊 Google Sheets ile form verilerini otomatik kaydetme

📄 Sayfalar

• / - Ana sayfa
• /about - Hakkımızda
• /products - Ürünler
• /contact - İletişim

📸 Ekran Görüntüleri

Ana Sayfa

Ürünler Sayfası

İletişim Sayfası

Hakkımızda Sayfası

📊 Google Sheets Entegrasyonu

İletişim formu, Google Apps Script kullanarak form verilerini Google Sheets'e otomatik olarak kaydeder.

Hızlı Kurulum

1. Google Sheets oluşturun ve başlık satırını ekleyin (Tarih, Ad Soyad, E-posta, Telefon, Konu, Mesaj)
2. GOOGLE_APPS_SCRIPT.md dosyasındaki adımları takip edin
3. Google Apps Script'i Web App olarak deploy edin
4. Web App URL'sini .env dosyasına ekleyin

Detaylı kurulum için: GOOGLE_APPS_SCRIPT.md

🔧 Teknolojiler

• Astro
• Tailwind CSS
• TypeScript
• Google Apps Script (Form entegrasyonu)