DEVGO Studio Website

Official website for DEVGO Studio - A Cebu-based digital solutions studio specializing in web development and innovative digital solutions.

🌐 Live Site: devgo.studio

---

🚀 Tech Stack

Core

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Fonts: Montserrat (Google Fonts)

Key Libraries

• Animations: Framer Motion
• Icons: Lucide React
• Email: Resend
• Rate Limiting: Upstash Redis
• Analytics:
  • Google Analytics
  • Custom Analytics (ranlabs.space)
  • Vercel Speed Insights
• SEO: next-seo, structured data with JSON-LD
• Image Optimization: Sharp

---

📁 Project Structure

www/
├── app/
│   ├── layout.tsx          # Root layout with SEO & analytics
│   ├── page.tsx            # Landing page
│   ├── sitemap.ts          # Dynamic sitemap generation
│   ├── robots.ts           # Dynamic robots.txt
│   └── globals.css         # Global styles
├── components/
│   ├── landingPage.tsx     # Hero, Services, Portfolio, Contact sections
│   ├── navbar.tsx          # Navigation component
│   └── footer.tsx          # Footer component
├── utils/
│   ├── metadata.ts         # SEO metadata utility
│   ├── portfolioProjects.tsx  # Portfolio data
│   ├── serverActions.tsx   # Server-side actions
│   └── teamProfile.tsx     # Team member profiles
├── public/
│   ├── members/            # Team member photos
│   ├── skills/             # Skill icons
│   └── [assets]            # Other static assets
└── tailwind.config.ts      # Custom theme configuration

---

🎨 Design System

Color Palette

--background: #111715 /* Dark green-gray */ --text: #e0e0e0 /* Light gray */ --primary: #5fcba6 /* Teal green */
    --secondary: #337961 /* Dark teal */;

Each color includes a 30% opacity variant (e.g., background-30).

---

🛠️ Development

Prerequisites

• Node.js 18+
• pnpm 9.6.0+ (recommended)

Installation

# Clone the repository
git clone <repository-url>
cd www

# Install dependencies
pnpm install

Running Locally

# Development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Format code
pnpm format

The site will be available at http://localhost:3000

---

👥 Managing Team Profiles

Adding/Editing Team Members

1. Add Photo: Place a .webp photo in ./public/members/
2. Update Profile: Edit ./utils/teamProfile.tsx with member details

Available Skill Icons

• css
• figma
• framer-motion
• html
• illustrator
• javascript
• typescript
• mysql
• nextjs
• react
• tailwind
• php

To add new skills, place a .webp icon in ./public/skills/ and update the list above.

---

🔍 SEO Features

Implemented SEO Best Practices

• ✅ Dynamic sitemap (/sitemap.xml)
• ✅ Robots.txt (/robots.txt)
• ✅ Complete meta tags (title, description, keywords)
• ✅ Open Graph tags for social sharing
• ✅ Twitter Card metadata
• ✅ Canonical URLs
• ✅ Structured data (Organization JSON-LD)
• ✅ Mobile-optimized viewport
• ✅ Performance monitoring (Speed Insights)

SEO Configuration

Edit utils/metadata.ts to customize default SEO settings for all pages.

---

📧 Contact Form

The contact form uses:

• Resend for email delivery
• Upstash Redis for rate limiting (prevents spam)
• Server actions for form submission

Configure your email service in utils/serverActions.tsx.

---

🎯 Key Features

• 🎨 Modern, responsive design
• ⚡ Optimized performance with Next.js 14
• 🔒 Rate-limited contact form
• 📊 Integrated analytics
• 🌐 SEO-optimized with sitemap & structured data
• 🎭 Smooth animations with Framer Motion
• 📱 Mobile-first approach

---

📝 License

Private - © DEVGO Studio

---

🤝 Contributing

This is a private project for DEVGO Studio. For questions or contributions, contact official@devgo.studio.

---

Built with ❤️ by the DEVGO Studio team in Cebu, Philippines