https://github.com/patrikarvidsson/horizon-studio

Independent portfolio website. Built with NextJS, Emotion, Tailwind, MDX and Framer Motion.
https://github.com/patrikarvidsson/horizon-studio

emotion framer-motion mdx nextjs reactjs tailwindcss

Last synced: 10 days ago
JSON representation

Independent portfolio website. Built with NextJS, Emotion, Tailwind, MDX and Framer Motion.

• Host: GitHub
• URL: https://github.com/patrikarvidsson/horizon-studio
• Owner: patrikarvidsson
• License: mit
• Created: 2020-09-19T10:46:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-23T13:01:38.000Z (over 2 years ago)
• Last Synced: 2025-01-21T00:51:36.621Z (16 days ago)
• Topics: emotion, framer-motion, mdx, nextjs, reactjs, tailwindcss
• Language: JavaScript
• Homepage: https://studio.patrikarvidsson.com
• Size: 13 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://vercel.com/).

## Details

### Why Tailwind or Emotion?

If you used [Tachyons](https://tachyons.io/) before, you know about the benefits utility first CSS can provide compared to CSS framework like [Bootstrap](http://getbootstrap.com/).

Because [Tailwind](https://tailwindcss.com) gives you alot of classes as utilities, the file gets bloated very quickly. Most developers solve this by using tools like [purgeCSS](https://github.com/FullHuman/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](https://tailwindcss.com/docs/controlling-file-size)

This respository uses [Emotion](https://github.com/emotion-js/emotion) together wtih [twin.macro](https://github.com/ben-rogerson/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](https://github.com/ben-rogerson/twin.macro) for specific usage examples.

## License

MIT