techboi websuite

techboi websuite features

BASIC COMPONENTS


Title

<Title>A big fat title</Title>
Example

Headline

Example

Our headline component is responsive and the size depends on the device size.

<Headline>This is a headline</Headline>
Example

Text

<Text>Moderation is the key of life.</Text>
Example

Inline Text


Icon

Render an inline icon


Link

Link to internal pages or external addresses.

<Link to="https://techboi.io" openInNewTab>wow check this out</Link>
Example

Buttons

Default Button

Primary Button

Good for call to actions.


<Button type="primary">Click me</Button>

Secondary Button

The subtle version.


<Button type="secondary">Click me</Button>

LAYOUTS


Section

Wrap certain parts of a page. Apply background colors and media, center content to content column. Can have a minimum height

<Section minHeight="100vh">
  <Title>Section title</Title>
</Section>
Example

Gap

Add extra whitespace/padding between components.


<Gap/>


Box Layout

Renders columns next to each other

<BoxLayout>
 <Box></Box>
 <Video/>
 <Box>
  This is so fucked up:
  <Image/>
 </Box>
</BoxLayout>


Hide

Hide the children when certain screen size related condition matches (till/from)

<Hide from="phone" to="tablet">
Fuck you!
</Hide>

Parallax Layout

<ParallaxLayout>
 <Box scrollSpeed="100%"><Image/></Box>
 <Box scrollSpeed="80%">
  <Offset x="-2">
    <Headline>Some text here</Headline>
  </Offset>
 </Box>
</ParallaxLayout>

Story Layout

<StoryLayout>
  <Story backgroundImageId="randomId">
    <Headline>
  </Story>
  <Story videoBackgroundId="randomId">

  </Story>
</StoryLayout>

IMAGES

Image component

Our Image component is responsive by default. Every image gets optimized before we publish it.


<Image/>

Example

Image convertors

Every image gets optimized for fast loading times on all devices.

Blurry Loading

Blurry pre-loading for faster loading times.

VIDEO FEATURES


Video convertors

Every video that you upload gets converted into 3 web optimized versions with different codecs to play it on every device.


Video players

Our video player is scroll-sensitive so that the site loads only videos when the user scrolls to it.

<Video id="randomId"></Video>

Video section

Put a background video behind a section to make it look spectacular

<Section videoBackgroundId="randomId">
 <Title>wow, that looks nice!</Title>
</Section>

YouTube

YouTube needs to be enabled in our privacy manager.

<YouTube url="https://www.youtube.com/watch?v=18Q7ikjzuv8"/>

Vimeo

Vimeo needs to be enabledin our privacy manager.

<Vimeo url="" />

SPECIAL EFFECTS


Animations

<Animate>That's fucked up</Animate>

INTEGRATIONS

HubspotForm

techboi. we’re building dope products
  • Legal Notice

Your privacy is important to us!

This website stores data such as cookies to enable necessary site functionality, anonymous analytics, and embedding of external services for videos, maps and more. You may change your settings at any time.Privacy policy
Matomo
YouTube