{"componentChunkName":"component---src-templates-project-tsx","path":"/work/project/jynx","result":{"data":{"sanityProjects":{"comingSoon":false,"featured":false,"title":"Jynx","tagline":"Responsive, themable and type-safe React components","slug":{"current":"work/project/jynx"},"publishedAt":"2022-04-04","projectCategories":[],"thumbnail":{"altText":"Macbook Pro showing Jynx documentation website.","image":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAfABQDASIAAhEBAxEB/8QAGgAAAgIDAAAAAAAAAAAAAAAAAAQBBQMGCP/EACUQAAEDBAAFBQAAAAAAAAAAAAEAAgMEBRESBhUhUZFBcYSSlP/EABYBAQEBAAAAAAAAAAAAAAAAAAEAAv/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oADAMBAAIRAxEAPwDpdRkdx5SlfE2aSmifnRz+oBxlFTaqWNo0Y7JPq8rdYhvI7jyhYW2ejIB0f9yhFMKXh9bGIJLfTNqJGOyWufqMe6Rdc+IHHrZof0LYEJgqhbduIWjHJYT8hCvkKir/2Q==","aspectRatio":0.6391478029294274,"src":"https://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg","srcSet":"https://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg?w=240&h=376&fit=crop 240w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg?w=480&h=751&fit=crop 480w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg 960w","srcWebp":"https://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg?fm=webp","srcSetWebp":"https://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg?w=240&h=376&fit=crop&fm=webp 240w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg?w=480&h=751&fit=crop&fm=webp 480w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg?fm=webp 960w","sizes":"(max-width: 960px) 100vw, 960px"},"extension":"jpg","url":"https://cdn.sanity.io/images/vjjaejga/production/e40e42716419889170abbbae0384e94409aefb3c-960x1502.jpg"}}},"heroImage":{"altText":"Macbook Pro showing Jynx documentation website.","image":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAMABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAwj/xAAjEAABBAEBCQAAAAAAAAAAAAABAAIDBBEhEjEyM0FScnOx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDRjIprNiYMsGJrMAANypiqTyFwFx4we0K6jzbfkPiai0k06qgRqF5iIkdtOa4tzjehFXhk9jkJD//Z","aspectRatio":1.6485403548941042,"src":"https://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg","srcSet":"https://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg?w=720&h=437&fit=crop 720w,\nhttps://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg?w=1440&h=874&fit=crop 1440w,\nhttps://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg 2880w","srcWebp":"https://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg?fm=webp","srcSetWebp":"https://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg?w=720&h=437&fit=crop&fm=webp 720w,\nhttps://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg?w=1440&h=874&fit=crop&fm=webp 1440w,\nhttps://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg?fm=webp 2880w","sizes":"(max-width: 2880px) 100vw, 2880px"},"extension":"jpg","url":"https://cdn.sanity.io/images/vjjaejga/production/a1e5e24bd6f81b461d57942b23bb0f2c0922f094-2880x1747.jpg"}}},"moduleContent":[{"__typename":"SanityProjectHeroInfo","_key":"0689e1b17cab","_type":"projectHeroInfo","_rawDescription":[{"_key":"57773fa6920e","_type":"block","children":[{"_key":"c84d9f5efdef","_type":"span","marks":[],"text":"Jynx is a performant and intuitive utility library for the "},{"_key":"fb0c6b46f095","_type":"span","marks":["em"],"text":"'CSS-in-JS era'"},{"_key":"06b3645a6f2f","_type":"span","marks":[],"text":", allowing for responsive, theme-focused, type-safe styled-components to be rapidly created and controlled directly from your jsx."}],"markDefs":[],"style":"normal"},{"_key":"79d381fb18b7","_type":"block","children":[{"_key":"700722e56a94","_type":"span","marks":[],"text":"Originally built in-house as a tool to streamline our own development pipeline, Jynx is now available to use in your own projects and comes with support for:"}],"markDefs":[],"style":"normal"},{"_key":"8089965b89bd","_type":"block","children":[{"_key":"ba13101c3aff0","_type":"span","marks":[],"text":"Rapid component styling through the use of style-props"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"be5f97501b46","_type":"block","children":[{"_key":"5c18fa83d8710","_type":"span","marks":[],"text":"Using objects and arrays to create mobile-first, responsive designs"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"2ed241e91d24","_type":"block","children":[{"_key":"b38fdcf0044e0","_type":"span","marks":[],"text":"Integration with a global theme that's accessed directly from your props"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"3c105055e49c","_type":"block","children":[{"_key":"f5be7460a4410","_type":"span","marks":[],"text":"Written in Typescript and fully type-safe"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"341441579fb5","_type":"block","children":[{"_key":"f86543f1e35b","_type":"span","marks":[],"text":"The library also has its own dedicated documentation site which covers where and how to use the package. Check it out here: "},{"_key":"b5a5e9c70901","_type":"span","marks":["2eada0b2c430"],"text":"https://jynx.vercel.app"}],"markDefs":[{"_key":"2eada0b2c430","_type":"link","href":"https://jynx.vercel.app/"}],"style":"normal"}],"client":"In house","dateCompleted":"Jan 2022","location":"UK","services":[{"title":"Software engineering"},{"title":"Web development"}]},{"__typename":"SanityVideo","_key":"e6cea76d37a6","_type":"video","asset":{"url":"https://cdn.sanity.io/files/vjjaejga/production/ad2460ece92f5fb3c7e26db5fd8750f461e6fe8a.mp4"}},{"__typename":"SanityImageGrid","_key":"968d9617f5f5","_type":"imageGrid","images":[{"_key":"70daef4fee80","altText":"Jynx library logo","image":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAfABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAUHBgT/xAAgEAABBQACAgMAAAAAAAAAAAACAAEDBBEhMQUTFCJR/8QAGAEAAwEBAAAAAAAAAAAAAAAAAwUHAgb/xAAgEQABAwQCAwAAAAAAAAAAAAABAAIDBAUREgYxEyEi/9oADAMBAAIRAxEAPwCuyw/XUqtYOp9ZwK7kXTdpH5CB3rFOJM47mJ5TOx2lFitEU8Yc9Z+zbcZXZCW3Cf3khbMzs9qiR8dptR8qrSRDLCQG2i/bJXer5AUYNg/idi3C5rEes6BH6K5CxDxtAKm12q/yC4QtNcpM9gn4QhukGSqEysGoX//Z","aspectRatio":0.6390625,"src":"https://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg","srcSet":"https://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg?w=307&h=480&fit=crop 307w,\nhttps://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg?w=614&h=961&fit=crop 614w,\nhttps://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg 1227w","srcWebp":"https://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg?fm=webp","srcSetWebp":"https://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg?w=307&h=480&fit=crop&fm=webp 307w,\nhttps://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg?w=614&h=961&fit=crop&fm=webp 614w,\nhttps://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg?fm=webp 1227w","sizes":"(max-width: 1227px) 100vw, 1227px"},"extension":"jpg","url":"https://cdn.sanity.io/images/vjjaejga/production/f8227b4a288a9777d0c0821f81793b622076de35-1227x1920.jpg"}}},{"_key":"3417c8a2cba0","altText":"Jynx documentation website mobile layout","image":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAYABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAcI/8QAKxAAAAQDBgQHAAAAAAAAAAAAAAECEQMFCAcSEyEiMVFScbEEFzdhgZLR/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgH/xAAVEQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEQMRAD8Ao1NPpDJjPZ19xTo6YZKvnk258RL6bVEix+UGtiTrz+RTLxL0qT79SDgsJ1JZ2uzhttDfUAqSbzdnDG5aOwAE0tT0cRFjkmWllJK+6eJOKNEmGPCRB8PnE5+Uv0ACRh2oeHhWrzdBu5XHfoAACr//2Q==","aspectRatio":0.8310249307479224,"src":"https://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif","srcSet":"https://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif?w=150&h=181&fit=crop 150w,\nhttps://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif?w=300&h=361&fit=crop 300w,\nhttps://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif 600w","srcWebp":"https://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif?fm=webp","srcSetWebp":"https://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif?w=150&h=181&fit=crop&fm=webp 150w,\nhttps://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif?w=300&h=361&fit=crop&fm=webp 300w,\nhttps://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif?fm=webp 600w","sizes":"(max-width: 600px) 100vw, 600px"},"extension":"gif","url":"https://cdn.sanity.io/images/vjjaejga/production/b85c69e0fbc9a554265b75addd771935d1a34206-600x722.gif"}}},{"_key":"7d5dc8909331","altText":"Jynx example code snippet","image":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAfABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMBBAUI/8QAIRAAAgIBAwUBAAAAAAAAAAAAAAECETEDBCESNEFRYYH/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAMAwEAAhEDEQA/AOoXKKy0HVH2jO3XcPFDU1WTcZXU08AK0eYAIKe6hKWs6Uq+ExjLymvw0QLTSdFVCuQHAQf/2Q==","aspectRatio":0.6390625,"src":"https://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg","srcSet":"https://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg?w=307&h=480&fit=crop 307w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg?w=614&h=961&fit=crop 614w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg 1227w","srcWebp":"https://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg?fm=webp","srcSetWebp":"https://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg?w=307&h=480&fit=crop&fm=webp 307w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg?w=614&h=961&fit=crop&fm=webp 614w,\nhttps://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg?fm=webp 1227w","sizes":"(max-width: 1227px) 100vw, 1227px"},"extension":"jpg","url":"https://cdn.sanity.io/images/vjjaejga/production/e7cd7026c3326f86b5ad428fea113b6fda210096-1227x1920.jpg"}}},{"_key":"4132d361e35e","altText":"Jynx documentation site search functionality","image":{"asset":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAUABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAECAwj/xAAgEAACAgEFAAMAAAAAAAAAAAABAgADEQQSITFRMkGB/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAED/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAMAwEAAhEDEQA/AOd66FY1gvhn64ml+lSlctaPwSqhwaHRQ20exqWuuG01gc/Rm1ZsbF2NgHI7zEtqPnjwCJUZ5jJ9iIEREQP/2Q==","aspectRatio":1,"src":"https://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg","srcSet":"https://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg?w=375&h=375&fit=crop 375w,\nhttps://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg?w=750&h=750&fit=crop 750w,\nhttps://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg 1500w","srcWebp":"https://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg?fm=webp","srcSetWebp":"https://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg?w=375&h=375&fit=crop&fm=webp 375w,\nhttps://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg?w=750&h=750&fit=crop&fm=webp 750w,\nhttps://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg?fm=webp 1500w","sizes":"(max-width: 1500px) 100vw, 1500px"},"extension":"jpg","url":"https://cdn.sanity.io/images/vjjaejga/production/5016d718faaeafd7a761d713c27b202422260a6b-1500x1500.jpg"}}}]}]}},"pageContext":{"slug":"work/project/jynx"}},"staticQueryHashes":["2176663992","2176663992","2176663992"]}