techboi websuite features
BASIC COMPONENTS
Title
<Title>A big fat title</Title>
Headline
ExampleOur headline component is responsive and the size depends on the device size.
<Headline>This is a headline</Headline>
Text
<Text>Moderation is the key of life.</Text>
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>
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>
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/>
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>