mirror of
https://github.com/liyunze-coding/coworking-website.git
synced 2026-11-06 13:13:34 +00:00
updated content
This commit is contained in:
liyunze
parent
304c08f132
commit
c39ee1d98b
9 changed files with 78 additions and 131 deletions
123
draft.md
123
draft.md
|
|
@ -1,123 +0,0 @@
|
|||
# Draft
|
||||
|
||||
For me to plan out how the structure of the content.
|
||||
|
||||
## nav bar
|
||||
|
||||
- left: Coworking Guide (leads to home page)
|
||||
- center: Get Started, Guide, Blog, Credits
|
||||
- right: Dark mode toggle
|
||||
|
||||
## Get Started
|
||||
|
||||
Get started with streaming
|
||||
|
||||
### What is co-working streaming?
|
||||
|
||||
Coworking (or study) streaming is an opportunity to share a virtual, productive, space with others and to connect based on interests and studies - in some ways replicating the in-person office, library, or cafe. Often, study streaming follows a pomodoro counter so that streamers can focus on working for a set amount of time and then converse with chat during another set amount of time for break.
|
||||
|
||||
Many viewers like to watch coworking streams because it provides motivation and accountability, which is especially hard if you're trying to focus at home. In the light of Covid, where working from home is becoming more common, it can nice to find an environment with like-minded people. Plus, the sense of community attracts many people - often coworking streams are very welcoming and supportive!
|
||||
|
||||
### Pre-requisites
|
||||
|
||||
Hardware:
|
||||
- Internet capacity
|
||||
- in depth guide from reddit
|
||||
- RAM
|
||||
- CPU
|
||||
- GPU
|
||||
|
||||
Software:
|
||||
- OBS
|
||||
|
||||
For mobile streamers:
|
||||
- Good camera
|
||||
- RAM
|
||||
- Twitch / YouTube app
|
||||
|
||||
## Guide
|
||||
|
||||
Guide on how to do coworking streams
|
||||
|
||||
### General tips:
|
||||
|
||||
- Should I mute my mic?
|
||||
|
||||
Muting = less distraction, BUT
|
||||
unmuted + keyboard ASMR / office noise = comfy
|
||||
|
||||
- Don't get distracted by chat
|
||||
|
||||
Distracted by chat = less productivity
|
||||
|
||||
- Fixed schedule
|
||||
|
||||
1. Sticking to a regular schedule
|
||||
2. Viewers can expect when to catch your stream
|
||||
3. Good viewer retention
|
||||
|
||||
- Chat commands
|
||||
|
||||
Setup commands for chat to use (!pomo, !muted, !welcome)
|
||||
|
||||
- have control over your advertisements
|
||||
|
||||
```
|
||||
https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel
|
||||
```
|
||||
|
||||
- Listen to music without getting vod muted
|
||||
- https://www.youtube.com/watch?v=0Lj5rkqSp48
|
||||
|
||||
### Growing your stream tips:
|
||||
|
||||
- Grow your other social medias
|
||||
|
||||
Twitch discovery bad
|
||||
YouTube (shorts/videos), TikTok, Instagram discovery better
|
||||
|
||||
- Network with other streamers
|
||||
|
||||
Go fast, go alone; go far, go together
|
||||
|
||||
- Good stream layout
|
||||
|
||||
Attractive thumbnail + title
|
||||
|
||||
- Use stream tags
|
||||
- use `coworking`, `studywithme` tags
|
||||
|
||||
### Closed Captions on Twitch
|
||||
|
||||
https://youtu.be/cQzJL9uoIbg
|
||||
|
||||
### Emotes
|
||||
|
||||
- Setup channel emotes
|
||||
- 7tv
|
||||
- Frankerfacez
|
||||
- BetterTTV
|
||||
|
||||
### Layout
|
||||
|
||||
- Canva
|
||||
- PixelChat
|
||||
- TriggerFyre https://overlays.thefyrewire.com/widgets/triggerfyre/
|
||||
|
||||
### Music
|
||||
|
||||
DMCA-free:
|
||||
- Lofi Girl
|
||||
- Chillhop
|
||||
- Twitch Soundtrack
|
||||
|
||||
- Listen to music without getting vod muted
|
||||
- https://www.youtube.com/watch?v=0Lj5rkqSp48
|
||||
|
||||
### Other tips:
|
||||
|
||||
- macOS users, BlackHole Audio: https://www.youtube.com/watch?v=H4VPbMvBuLg
|
||||
- Don't self-promo
|
||||
- Don't worry about view count
|
||||
- Don't spend too much money
|
||||
- Avoid display / screen capture, unless you blur it / minimize it. Don't leak sensitive info, including personal email / sensitive work related stuff.
|
||||
|
|
@ -17,8 +17,10 @@ export function formatTitle(title: string): string {
|
|||
|
||||
export async function setup() {
|
||||
// setup navigation
|
||||
const getStartedFiles = await Astro.glob("../../pages/get-started/*.md");
|
||||
const guideFiles = await Astro.glob("../../pages/guide/*.md");
|
||||
// MD files
|
||||
const getStartedFiles = await Astro.glob("../../pages/get-started/*");
|
||||
const guideFiles = await Astro.glob("../../pages/guide/*");
|
||||
|
||||
const markdownFiles = [...getStartedFiles, ...guideFiles];
|
||||
const navigation: Navigation = {};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class="bg-[white] h-[34vmax] aspect-square absolute rounded-full bg-[linear-gradient(to_right,#FF7782,_mediumpurple)] animate-[rotate_20s_infinite] opacity-80 origin-center left-1/2 top-1/2"
|
||||
class="bg-[white] h-[34vmax] aspect-square absolute rounded-full bg-[linear-gradient(to_right,#41C9E2,#FF7782)] animate-[rotate_20s_infinite] opacity-80 origin-center left-1/2 top-1/2"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
from {
|
||||
rotate: 0deg;
|
||||
translate: -50% -50%;
|
||||
scale: 1.5 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
to {
|
||||
rotate: 360deg;
|
||||
translate: -50% -50%;
|
||||
scale: 1.5 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Emotes
|
||||
layout: "../../layouts/GuideLayout.astro"
|
||||
description: Learn how to add emotes to your streams!
|
||||
order: 4
|
||||
order: 5
|
||||
---
|
||||
|
||||
# Emotes
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Moderation and Trolls
|
||||
layout: "../../layouts/GuideLayout.astro"
|
||||
description: Learn how to moderate your coworking streams!
|
||||
order: 5
|
||||
order: 6
|
||||
---
|
||||
|
||||
# Moderation and Trolls
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Stream Bots
|
||||
layout: "../../layouts/GuideLayout.astro"
|
||||
description: Stream bots for your coworking streams!
|
||||
order: 2
|
||||
order: 3
|
||||
---
|
||||
|
||||
# Stream Bots
|
||||
66
src/pages/guide/stream-layout.md
Normal file
66
src/pages/guide/stream-layout.md
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: Stream Layouts
|
||||
layout: "../../layouts/GuideLayout.astro"
|
||||
description: Learn how to moderate your coworking streams!
|
||||
order: 2
|
||||
---
|
||||
|
||||
# Stream Layouts
|
||||
|
||||
An organized layout structures information effectively, allowing viewers to easily find the elements they need, such as timers, chat windows, and your work area.
|
||||
|
||||
---
|
||||
|
||||
## [Canva 🔗](https://www.canva.com/)
|
||||
|
||||
Canva is a free graphic design platform that is fairly intuitive to use and quick to pick up on! You can use this site to build any layout or to get inspired with templates. You can upload this into your software as a image or gif.
|
||||
|
||||
---
|
||||
|
||||
## [Figma 🔗](https://www.figma.com/)
|
||||
|
||||
Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows.
|
||||
|
||||
---
|
||||
|
||||
## Royalty free images & icons
|
||||
|
||||
### [Pexels 🔗](https://www.pexels.com/license/)
|
||||
|
||||
Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages.
|
||||
|
||||
### [The Noun Project 🔗](https://thenounproject.com/)
|
||||
|
||||
The Noun Project is a website that aggregates and catalogs symbols that are created and uploaded by graphic designers around the world.
|
||||
|
||||
---
|
||||
|
||||
## Fonts
|
||||
|
||||
### [DaFont](https://www.dafont.com/)
|
||||
|
||||
DaFont is a popular online platform where you can download fonts for various purposes. Whether you’re working on a design project, creating digital art, or just want to add a unique touch to your documents.
|
||||
|
||||
### [Google Fonts](https://fonts.google.com/)
|
||||
|
||||
Google Fonts is a service provided by Google that offers a wide selection of high-quality web fonts for use in web projects.
|
||||
|
||||
|
||||
## Principles of Grouping
|
||||
|
||||
The principles of grouping explain how our brains see patterns. We naturally group things that are close together, look similar, or are connected. This helps us make sense of the visual world around us.
|
||||
|
||||
There are five main principles of grouping:
|
||||
|
||||
- **Proximity**: Objects close together are perceived as being related. Imagine scattered stars. We tend to see groups or constellations based on closeness, even if the stars aren't truly connected.
|
||||
|
||||
- **Similarity**: Objects that look similar are seen as belonging together. A row of red balls amongst yellow ones will likely be perceived as a separate group.
|
||||
|
||||
- **Continuity**: Elements arranged along a line or curve are perceived as following a path and being related. Think of stepping stones leading across a stream.
|
||||
|
||||
- **Closure**: We tend to fill in gaps to create a complete whole. A broken circle can still be recognized as a circle despite the missing portion.
|
||||
|
||||
- **Connectedness**: Elements linked by lines or shapes are seen as a unit. Imagine overlapping squares – our brains will likely group them based on the connection.
|
||||
|
||||
These principles are used extensively in various fields like design, art, and advertising. By understanding how we group things visually, designers can create layouts that are clear, organized, and engaging.
|
||||
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
title: Stream Widgets
|
||||
layout: "../../layouts/GuideLayout.astro"
|
||||
description: Stream widgets for your coworking streams!
|
||||
order: 3
|
||||
order: 4
|
||||
---
|
||||
|
||||
# Stream widgets
|
||||
|
|
@ -5,7 +5,7 @@ module.exports = {
|
|||
extend: {
|
||||
backgroundImage: (theme) => ({
|
||||
"gradient-pink-cyan":
|
||||
"linear-gradient(to right, #FF7782, aquamarine)",
|
||||
"linear-gradient(to right, #F7418F,#FF7782 , aquamarine)",
|
||||
}),
|
||||
keyframes: {
|
||||
rotate: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue