Plagiar-Ezy Website Development Strategy

Plagiar-Ezy Website Development Strategy

Project Overview

This document outlines the complete development strategy for the Plagiar-Ezy website (plagiar-ezy.org), a Jekyll-based static site hosted on GitHub Pages to document academic research on AI’s capability to produce university-level writing.

Requirements Capture

Original Project Requirements

From Initial Prompt:

  • Static Jekyll website on GitHub for plagiar-ezy.org domain
  • Simple theme with floating top navigation bars
  • Serif fonts (specifically Cambria)
  • Light cream/sepia backgrounds for readability
  • Website sections: About, Results, Contact (minimum)
  • About section: Present the test methodology
  • Results section: Table with Module codes, titles, awarded mark, elapsed time to submission, category of self-assessed human intervention, and links to assignment submission, assignment feedback, and assignment video
  • Strategy for storing documents, particularly large video files
  • Target audience: University colleagues and press
  • Purpose: Inform discussions of LLM impact on University assignments and push for methodological reform in assessment
  • Transparency requirement: Website and text produced with LLMs must be clearly indicated

Technical Requirements

Platform: Jekyll static site generator with GitHub Pages hosting Domain: plagiar-ezy.org (custom domain) Theme: Custom theme with professional academic appearance File Storage: Strategy needed for large files (especially videos) Responsive Design: Must work on desktop and mobile devices Performance: Fast loading, optimized for academic/professional use

Content Structure Requirements

About Section:

  • Presentation of the Plagiar-Ezy test methodology
  • Academic context and research objectives
  • Clear statement about LLM involvement in website creation

Results Section:

  • Dynamic table displaying test results
  • Columns: Module Code, Title, Awarded Mark, Elapsed Time, Human Intervention Category
  • Links to: Assignment Submission, Assignment Feedback, Assignment Video
  • Sortable and filterable functionality

Contact Section:

  • Academic contact information
  • Collaboration opportunities
  • Press inquiry information

File Storage Strategy

Challenge: GitHub Repository Limitations

  • Individual file size limit: 100MB
  • Repository size soft limit: 5GB
  • Video files typically exceed these limits
  1. Primary Option: Unlisted YouTube videos
    • Professional appearance with embedded players
    • Unlimited storage and bandwidth
    • Good academic credibility
    • Easy embedding in Jekyll
  2. Alternative Option: Vimeo Pro
    • More professional branding options
    • Better privacy controls
    • Higher quality streaming
  3. Backup Option: GitHub LFS (Large File Storage)
    • 1GB free, then paid tiers
    • Direct integration with repository
    • More complex setup

Document Storage

  • PDF assignments and feedback: Store directly in repository (typically <10MB)
  • Images and graphics: Optimize and store in assets/images/
  • Data files: Store in _data/ folder as YAML/JSON

Complete Task Breakdown

Phase 1: Foundation Setup (Tasks 1-8)

1. Repository and Environment Setup

  • 1.1. Create GitHub repository for plagiar-ezy.org
  • 1.2. Initialize Jekyll site structure ✅
  • 1.3. Configure _config.yml with site settings ✅
  • 1.4. Set up local development environment
  • 1.5. Create .gitignore file for Jekyll ✅
  • 1.6. Set up CNAME file for custom domain ✅

2. Basic Jekyll Structure

  • 2.1. Create _layouts directory and base layout
  • 2.2. Create _includes directory for components ✅
  • 2.3. Create _sass directory for styling ✅
  • 2.4. Create assets directory for CSS, JS, images ✅
  • 2.5. Create _data directory for site data ✅
  • 2.6. Set up basic folder structure ✅

3. Site Configuration

  • 3.1. Configure Jekyll settings in _config.yml ✅
  • 3.2. Set up site metadata (title, description, author) ✅
  • 3.3. Configure navigation structure ✅
  • 3.4. Set up permalink structure ✅
  • 3.5. Configure plugins (GitHub Pages compatible only) ✅

4. Base Layout Creation

  • 4.1. Create default layout template ✅
  • 4.2. Create page layout template ✅
  • 4.3. Set up HTML5 semantic structure ✅
  • 4.4. Include meta tags and SEO elements ✅
  • 4.5. Set up viewport and responsive meta tags ✅

5. Navigation Component

  • 5.1. Create navigation include file ✅
  • 5.2. Implement floating/fixed navigation bar ✅
  • 5.3. Add responsive navigation menu ✅
  • 5.4. Create smooth scrolling functionality ✅
  • 5.5. Add active page highlighting ✅

6. Basic Styling Setup

  • 6.1. Create main SCSS file structure ✅
  • 6.2. Set up CSS variables for theme colors ✅
  • 6.3. Configure font loading for Cambria ✅
  • 6.4. Create responsive grid system ✅
  • 6.5. Set up basic typography styles ✅

7. Core Pages Creation

  • 7.1. Create index.md (homepage) ✅
  • 7.2. Create about.md ✅
  • 7.3. Create results.md ✅
  • 7.4. Create contact.md ✅
  • 7.5. Set up proper front matter for each page ✅

8. Testing and Validation

  • 8.1. Test local Jekyll build
  • 8.2. Validate HTML structure
  • 8.3. Test responsive design basics
  • 8.4. Check navigation functionality
  • 8.5. Validate initial deployment to GitHub Pages

Phase 2: Theme Implementation (Tasks 9-16)

9. Typography System

  • 9.1. Implement Cambria font loading with fallbacks ✅
  • 9.2. Create typography hierarchy (h1-h6, p, etc.) ✅
  • 9.3. Set proper line heights and spacing ✅
  • 9.4. Create text styling utilities ✅
  • 9.5. Test font rendering across devices ✅

10. Color Scheme Implementation

  • 10.1. Define cream/sepia color palette ✅
  • 10.2. Create CSS custom properties for colors ✅
  • 10.3. Implement background color system ✅
  • 10.4. Design link and accent colors ✅
  • 10.5. Ensure proper contrast ratios for accessibility ✅

11. Layout and Grid System

  • 11.1. Create responsive grid layout ✅
  • 11.2. Implement container and wrapper styles ✅
  • 11.3. Design section spacing system ✅
  • 11.4. Create flexible column layouts ✅
  • 11.5. Test layout on various screen sizes ✅

12. Navigation Styling

  • 12.1. Style floating navigation bar ✅
  • 12.2. Create hover and active states ✅
  • 12.3. Implement mobile menu styling ✅
  • 12.4. Add navigation animations ✅
  • 12.5. Test navigation usability ✅

13. Component Styling

  • 13.1. Style buttons and links ✅
  • 13.2. Create card/content block styles ✅
  • 13.3. Design table styling for results ✅
  • 13.4. Create form styling for contact ✅
  • 13.5. Add utility classes ✅

14. Responsive Design

  • 14.1. Implement mobile-first approach ✅
  • 14.2. Create tablet breakpoint styles ✅
  • 14.3. Optimize desktop layout ✅
  • 14.4. Test on various devices ✅
  • 14.5. Ensure touch-friendly interface ✅

15. Performance Optimization

  • 15.1. Optimize CSS delivery
  • 15.2. Minimize JavaScript usage
  • 15.3. Optimize image loading
  • 15.4. Enable compression where possible
  • 15.5. Test site speed

16. Theme Testing and Refinement

  • 16.1. Cross-browser testing
  • 16.2. Accessibility testing
  • 16.3. Mobile device testing
  • 16.4. Performance testing
  • 16.5. Visual consistency review

Phase 3: Content Implementation (Tasks 17-24)

17. Data Structure Setup

  • 17.1. Create YAML data file for results table ✅
  • 17.2. Define data schema for test results ✅
  • 17.3. Create sample data entries ✅
  • 17.4. Test data parsing in Jekyll
  • 17.5. Document data entry process ✅

18. Results Table Implementation

  • 18.1. Create dynamic table generation from data ✅
  • 18.2. Implement sortable columns ✅
  • 18.3. Add filtering functionality ✅
  • 18.4. Create responsive table design ✅
  • 18.5. Add pagination if needed ✅

19. About Page Content

  • 19.1. Write test methodology explanation
  • 19.2. Add academic context and objectives
  • 19.3. Include LLM involvement disclosure
  • 19.4. Add researcher information
  • 19.5. Include relevant academic references

20. Results Page Functionality

  • 20.1. Implement table display logic
  • 20.2. Add link handling for documents
  • 20.3. Create document preview functionality
  • 20.4. Add download options
  • 20.5. Implement search functionality

21. Contact Page Development

  • 21.1. Add contact information
  • 21.2. Create contact form (if needed)
  • 21.3. Add collaboration information
  • 21.4. Include press contact details
  • 21.5. Add social media links

22. Media Integration

  • 22.1. Set up video embedding system ✅
  • 22.2. Create YouTube/Vimeo integration ✅
  • 22.3. Add document link handling ✅
  • 22.4. Implement image optimization ✅
  • 22.5. Test media loading performance ✅

23. SEO and Metadata

  • 23.1. Add proper meta descriptions
  • 23.2. Implement Open Graph tags
  • 23.3. Create XML sitemap
  • 23.4. Add structured data markup
  • 23.5. Optimize for academic search

24. Content Testing and Review

  • 24.1. Proofread all content
  • 24.2. Test all links and functionality
  • 24.3. Validate data accuracy
  • 24.4. Test media embedding
  • 24.5. Review academic tone and style

Phase 4: Deployment and Finalization (Tasks 25-32)

25. GitHub Pages Configuration

  • 25.1. Configure repository settings
  • 25.2. Set up custom domain
  • 25.3. Enable HTTPS
  • 25.4. Configure build settings
  • 25.5. Test deployment process

26. Domain Setup

  • 26.1. Configure DNS records at registrar
  • 26.2. Set up CNAME file in repository
  • 26.3. Verify domain ownership
  • 26.4. Test domain propagation
  • 26.5. Ensure SSL certificate

27. Final Testing

  • 27.1. Full site functionality testing
  • 27.2. Cross-browser compatibility testing
  • 27.3. Mobile responsiveness testing
  • 27.4. Performance testing
  • 27.5. Accessibility compliance testing

28. Content Finalization

  • 28.1. Add final content and data
  • 28.2. Upload and link documents
  • 28.3. Set up video hosting and embedding
  • 28.4. Final proofreading and editing
  • 28.5. Academic review of content

29. Launch Preparation

  • 29.1. Create launch checklist
  • 29.2. Prepare announcement materials
  • 29.3. Set up analytics (if desired)
  • 29.4. Create backup procedures
  • 29.5. Document maintenance procedures

30. Documentation

  • 30.1. Create user manual for content updates
  • 30.2. Document technical setup
  • 30.3. Create troubleshooting guide
  • 30.4. Document video hosting procedures
  • 30.5. Create handover documentation

31. Quality Assurance

  • 31.1. Final comprehensive testing
  • 31.2. Security review
  • 31.3. Performance optimization
  • 31.4. Content accuracy verification
  • 31.5. Professional appearance review

32. Launch and Post-Launch

  • 32.1. Official site launch
  • 32.2. Monitor for issues
  • 32.3. Gather feedback
  • 32.4. Make immediate fixes if needed
  • 32.5. Plan ongoing maintenance schedule

Technical Decisions and Rationale

Jekyll Choice

  • Rationale: Static site generator provides security, speed, and easy GitHub Pages hosting
  • Benefits: No server maintenance, excellent performance, version control integration
  • Limitations: Limited dynamic functionality, requires technical knowledge for updates

External Video Hosting

  • Rationale: GitHub’s file size limitations make repository storage impractical
  • Benefits: Unlimited storage, professional appearance, reliable streaming
  • Implementation: YouTube unlisted videos with custom thumbnails and embedded players

Data-Driven Results Table

  • Rationale: Separates content from presentation, enables easy updates
  • Benefits: Non-technical users can update results via YAML editing
  • Implementation: Jekyll data files with Liquid templating for table generation

Custom Theme Development

  • Rationale: Ensures unique branding and specific design requirements
  • Benefits: Complete control over appearance, academic credibility
  • Approach: Mobile-first responsive design with semantic HTML and accessibility focus

Maintenance Strategy

Content Updates

  • Results data: Edit YAML file in _data/ directory
  • Page content: Edit Markdown files directly
  • Media files: Upload to external hosting, update links

Technical Maintenance

  • Jekyll version updates: Test in development environment first
  • Dependency updates: Monitor for security patches
  • Performance monitoring: Regular speed and accessibility audits

Backup and Version Control

  • Git repository provides complete version history
  • External media files backed up separately
  • Documentation versioning for major changes

Success Metrics

Technical Performance

  • Page load speed < 3 seconds
  • Mobile-friendly score > 95%
  • Accessibility compliance (WCAG 2.1 AA)
  • Cross-browser compatibility

Academic Impact

  • Site traffic and engagement metrics
  • Media coverage and citations
  • Academic collaboration inquiries
  • Policy discussion influence

Risk Mitigation

Technical Risks

  • GitHub Pages downtime: Consider alternative hosting options
  • Domain issues: Maintain DNS documentation and backup contacts
  • External video hosting changes: Document migration procedures

Content Risks

  • Data accuracy: Implement review procedures for all results
  • Academic credibility: Ensure proper peer review of methodology
  • Legal compliance: Review data sharing and privacy implications

Timeline Estimate

REVISED REALISTIC TIMELINE:

  • Phase 1 (Foundation): COMPLETED ✅
  • Phase 2 (Theme): 2-3 days
  • Phase 3 (Content): 1-2 days
  • Phase 4 (Deployment): 1 day
  • Total Estimated Time: 5-8 days of focused work (1-2 weeks calendar time)

Original overestimate: 6-9 weeks (This was unrealistic for a straightforward Jekyll site)

This timeline assumes dedicated development time and may be extended based on content creation and review cycles.

This development strategy document was created using Large Language Models as part of the Plagiar-Ezy project methodology.