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
Statisfy - Social Media Analytics
AI-powered platform using LLMs for deep social media analysis and content optimization. Tech Stack: OpenAI, Supabase, React, Node.js
QGenie - AI Question Generator
Generates exam-style questions with LaTeX formatting for GCSE and A-level preparation. Tech Stack: GPT-4, LaTeX, React, Express, MongoDB
Sendix - Sales Outreach SaaS
AI-powered cold email platform with lead enrichment and personalization. Tech Stack: GPT-4, Hunter.io API, Supabase, TypeScript, React
Scrybe - Real-time OCR
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
- Clone the repository
git clone https://github.com/your-repo/yarn-site.git
cd yarn-site- Install dependencies
npm install- Set up environment variables
cp .env.example .env.localAdd your environment variables:
SMTP_HOST=your-smtp-host
SMTP_PORT=587
SMTP_USER=[email protected]
SMTP_PASS=your-app-password- Run the development server
npm run dev- 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.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - 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