A website for
🫀   Alic3   🕷️

alic3.dev

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Run the development server:

pnpm dev

Or use turbo (Installed globally)

turbo dev

Open localhost:3000 with your browser to see.

Caching issues

Sometimes you'll run into issues that can be fixed with a simple clearing of the cache

Try running this script and then re-trying what had the issue before losing hope

pnpm clean

Development

Components

Components live under @/components.

SCSS

This project uses CSS modules through SASS (with SCSS syntax).

Make sure your component styles follow the naming convention *.module.scss and import accordingly in your components tsx file

import styles from '@/components/COMPONENT_NAME.module.scss'

Applying Styles

Styles can be applied to an element as shown below

Example.module.scss

.example {
  background: rgba(145, 45, 87, 0.8);
}

Example.tsx

import styles from '@/components/Example.module.scss'

const Example = () => (
  <div className={styles.example}>
    Example: Applying a style to a component 🎨
  </div>
)

Applying Nested Styles

Nested styles can also be applied to an element as follows

Example.module.scss

.example {
  background: rgba(145, 45, 87, 0.8);

  &.active {
    background: rgba(145, 45, 87, 1);
  }
}

Example.tsx

import styles from '@/components/Example.module.scss'

const Example = () => (
  <div className={`${styles.example} ${styles.active}`}>
    Example: Applying a nested style 🪺
  </div>
)

Applying Kebab Cased Styles

Since Javascript interprets a - as an operator we have to change our syntax slightly for kebab cased style names

KebabCaseExample.module.scss

.kebab-case-example {
  background: rgba(145, 45, 87, 0.8);
}

KebabCaseExample.tsx

import styles from '@/components/KebabCaseExample.module.scss'

const KebabCaseExample = () => (
  <div className={styles['kebab-case-example']}>
    Example: Applying a Kebab cased style 🍡
  </div>
)

Credits

Happy hacking 👁️⏝🧿🪡
-alic3