Studio is a complement to patrikarvidsson.com which lists commercial projects, in a portfolio setting.
It is a lightweight website built with NextJS and a few additional packages, hosted on Vercel. This project is still under development and is subject to change.
In addition to nextjs, the codebase utilizes several packages:
- Emotion — Styled-components alternative.
- Tailwind — Utility-first CSS framework.
- twin.macro — Combines Emotion and Tailwind.
- Framer Motion — Animations library.
- reat-smooth-scrollbar — Smooth scrollbar support.
- next-mdx-remote — MDX-support for Next.
- next-seo — SEO-support for Next.
- next-plausible — Plausible for Next.
Clone project
git clone https://github.com/patrikarvidsson/horizon-studio
cd horizon-studio
Install packages
yarn
Start development server
yarn dev
Build site
yarn build
Vercel (formerly Now) can automatically identify the configuration and deploy easily with now-cli. Run the following command to set it up.
now
Deploy to production by adding --prod.
now --prod
Administration can then be done on Vercel.
If you used Tachyons before, you know about the benefits utility first CSS can provide compared to CSS framework like Bootstrap.
Because Tailwind gives you alot of classes as utilities, the file gets bloated very quickly. Most developers solve this by using tools like purgeCSS which effectively decreases the file size. Yet, it gets you into the habit of loading styles that isn't necessary everywhere.
More information on how you can control file size
This respository uses Emotion together wtih twin.macro which allows us to only load the required styles using tailwind utility classes on the component you're working with. In return, the file size gets smaller.
Read more on twin.macro for specific usage examples.
MIT