Skip to content

Instantly share code, notes, and snippets.

View Chuloo's full-sized avatar

William Chuloo

View GitHub Profile
@Chuloo
Chuloo / Features.tsx
Created March 17, 2023 20:09
Features component
import { UniformSlot } from "@uniformdev/canvas-react";
export function Features({
subtext,
title,
}: {
subtext: string;
title: string;
}) {
return (
@Chuloo
Chuloo / FeatureCard.tsx
Created March 17, 2023 20:08
Feature Card Component
export function FeatureCard({
imgUrl,
title,
description,
}: {
imgUrl: string;
title: string;
description: string;
}) {
return (
@Chuloo
Chuloo / CTAButton.tsx
Created March 17, 2023 20:07
CTA Button Component
export function CTAButton({
title,
type = "primary",
}: {
title: string;
type?: "primary" | "secondary";
}) {
return (
<>
<button
@Chuloo
Chuloo / CTA.tsx
Created March 17, 2023 20:06
CTA Component
export default function CTA({
title,
buttonText,
}: {
title: string;
buttonText: string;
}) {
return (
<div>
<div className="dark:bg-gray-900">
@Chuloo
Chuloo / index.tsx
Created January 2, 2023 12:46
Home page of a Personalized site using Uniform
import * as React from "react";
import type {
GetServerDataProps,
GetServerDataReturn,
PageProps,
} from "gatsby";
import { PageComponent } from "../components/Page";
import { Hero } from "../components/Hero";
import { CTA } from "../components/CTA";
import { GenericGrid } from "../components/GenericGrid";
@Chuloo
Chuloo / lens.vue
Created March 31, 2022 12:45
Product image zoom lens
<template>
<div>
<p class="text-center text-4xl text-gray-900 font-bold mt-8 pt-8">
E-commerce product image zoom lens in Nuxtjs
</p>
</div>
</template>
<script>
@Chuloo
Chuloo / comment.vue
Created March 29, 2022 23:42
Single comment box
<template>
<div class="comment">
<div class="comment__flex">
<p>I found this article helpful</p>
<div class="comment__flex-btn">
<button class="update">Update</button>
<button class="del">Delete</button>
</div>
</div>
@Chuloo
Chuloo / homepage.vue
Created March 29, 2022 23:29
Home blog page
<template>
<div class="container">
<Blog />
</div>
</template>
<script>
import Blog from '@/components/Blog.vue';
export default {
@Chuloo
Chuloo / blogpage.vue
Last active March 29, 2022 23:24
A sample blog page
<template>
<section class="section">
<div class="section__details">
<div class="section__details-info">
<h1>{{ title }}</h1>
<div class="section__details-img">
<img
src="https://res.cloudinary.com/terieyenike/image/upload/v1644896156/vvasmj6onychxlkkynua.png"
alt="anime character"
/>
@Chuloo
Chuloo / preview.jsx
Created March 9, 2022 15:19
Autoplay a video preview on hover in React.js
const Home = () => {
const media_urls = [
{
id: 1,
title: 'Video One',
video_url:
'https://res.cloudinary.com/chris101/video/upload/v1645684691/video_1.mp4',
},
{