A modern, responsive portfolio website showcasing Yarn Development's innovative technology solutions and services.

Yarn Development is a creative technology studio that transforms innovative ideas into practical digital solutions. We specialize in:

• AI Integration - LLM-powered applications and intelligent automation
• Educational Technology - Interactive learning platforms and assessment tools
• Full-Stack Development - Scalable web and mobile applications
• Sales Enablement - Data-driven outreach and analytics platforms
• OCR & Document Processing - Real-time transcription and text extraction

AI-powered platform using LLMs for deep social media analysis and content optimization. Tech Stack: OpenAI, Supabase, React, Node.js

Generates exam-style questions with LaTeX formatting for GCSE and A-level preparation. Tech Stack: GPT-4, LaTeX, React, Express, MongoDB

AI-powered cold email platform with lead enrichment and personalization. Tech Stack: GPT-4, Hunter.io API, Supabase, TypeScript, React

Live handwriting and document transcription with translation capabilities. Tech Stack: Tesseract.js, Google Vision API, React, TypeScript

Full-stack video learning platform with AI-generated assessments. Tech Stack: React, Bootstrap, Node.js, Supabase, Stripe

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React

• Email: Nodemailer with SMTP
• Database: Supabase (PostgreSQL)
• AI Integration: OpenAI GPT-4
• Deployment: Vercel

• Package Manager: npm/yarn
• Code Quality: ESLint, Prettier
• Version Control: Git

yarn-site/
├── app/                    # Next.js App Router
│   ├── api/               # API routes
│   ├── privacy/           # Privacy policy page
│   ├── terms/             # Terms of service page
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # Reusable components
│   ├── ui/               # shadcn/ui components
│   ├── contact.tsx       # Contact form
│   ├── header.tsx        # Navigation header
│   ├── hero.tsx          # Hero section
│   ├── projects.tsx      # Projects showcase
│   └── legal-layout.tsx  # Legal pages layout
├── public/               # Static assets
└── lib/                  # Utility functions

• Node.js 18+ and npm
• Git

1. Clone the repository

git clone https://github.com/your-repo/yarn-site.git
cd yarn-site

2. Install dependencies

npm install

3. Set up environment variables

cp .env.example .env.local

Add your environment variables:

SMTP_HOST=your-smtp-host
SMTP_PORT=587
SMTP_USER=[email protected]
SMTP_PASS=your-app-password

4. Run the development server

npm run dev

5. Open your browser Navigate to http://localhost:3000

The contact form requires SMTP configuration. Supported providers:

• Gmail (with app passwords)
• SendGrid
• Mailgun
• Custom SMTP servers

• Responsive Design - Mobile-first approach with Tailwind CSS
• Smooth Animations - Custom CSS animations and transitions
• Modern UI - Clean, professional design with gradient accents
• Accessibility - WCAG compliant with proper semantic HTML
• SEO Optimized - Meta tags, structured data, and performance optimized

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript compiler

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Website: yarndev.co.uk
• Email: [email protected]
• Projects: View our live portfolio at yarndev.co.uk/#projects

Built with ❤️ by Yarn Development

Weaving Technology Into Stories