Studio

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.

Notable features

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.

Get started

Clone project

git clone https://github.com/patrikarvidsson/horizon-studio
cd horizon-studio

Install packages

yarn

Usage

Start development server

yarn dev

Build site

yarn build

Deploy

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.

Details

Why Tailwind or Emotion?

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.

License

MIT