Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Working Clock Components #21

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add Working Clock Components #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bcc9a9c
Add Working Clock Component
duyb2111918 Nov 4, 2024
f34f803
Adding comments
duyb2111918 Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .hintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
duyb2111918 marked this conversation as resolved.
Show resolved Hide resolved
"extends": [
"development"
],
"hints": {
"compat-api/css": [
"default",
{
"ignore": [
"backdrop-filter"
]
}
],
"no-inline-styles": "off",
"typescript-config/consistent-casing": "off",
"axe/forms": [
"default",
{
"select-name": "off"
}
]
}
}
48 changes: 24 additions & 24 deletions src/artworks/0_artworks-list/artworkTags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
export enum EArtworkTags {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please do not formate files you didn't edit anything

SHAPES = "Shapes",
LOGOS = "Logos",
ICONS = "Icons",
ANIMATIONS = "Animations",
ILLUSTRATIONS = "Illustrations",
SIMPLE = "Simple",
COMPLEX = "Complex",
THREE_D = "3D",
TEXT_ART = "Text Art",
SCENES = "Scenes",
NATURE = "Nature",
UNDERWATER = "Underwater",
SPACE = "Space",
PLANETS = "Planets",
ELEMENTS = "Elements",
HOLIDAYS = "Holidays",
SEASONAL = "Seasonal",
GRAPHICS = "Graphics",
GAMES = "Games",
FILM_SERIES_VIDEOS = "Film / Series / Videos",
PIXEL_ART = "Pixel Art",
INPUTS = "Inputs (text, button, etc.)",
DEV = "DEV"
}
SHAPES = "Shapes",
LOGOS = "Logos",
ICONS = "Icons",
ANIMATIONS = "Animations",
ILLUSTRATIONS = "Illustrations",
SIMPLE = "Simple",
COMPLEX = "Complex",
THREE_D = "3D",
TEXT_ART = "Text Art",
SCENES = "Scenes",
NATURE = "Nature",
UNDERWATER = "Underwater",
SPACE = "Space",
PLANETS = "Planets",
ELEMENTS = "Elements",
HOLIDAYS = "Holidays",
SEASONAL = "Seasonal",
GRAPHICS = "Graphics",
GAMES = "Games",
FILM_SERIES_VIDEOS = "Film / Series / Videos",
PIXEL_ART = "Pixel Art",
INPUTS = "Inputs (text, button, etc.)",
DEV = "DEV",
}
74 changes: 45 additions & 29 deletions src/artworks/0_artworks-list/artworksList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,55 @@
import {ReactNode} from "react";
Copy link
Owner

@FabDonRixos FabDonRixos Nov 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please also remove your formating from this file to keep it consistent.

import Template from "../0_template/Template.tsx"
import {EArtworkTags} from "./artworkTags.ts";
import { ReactNode } from "react";
import Template from "../0_template/Template.tsx";
import { EArtworkTags } from "./artworkTags.ts";
import AnalogClock from "../AnalogClock/AnalogClock.tsx";

export interface ILink {
name: string;
href: string;
name: string;
href: string;
}

export interface IArtworkItem {
component: ReactNode;
titel: string;
description: string;
gitHubName: string;
tags?: EArtworkTags[] | string[]
backgroundColor?: `#${string}`; // No transparent backgrounds
full?: boolean; // Only use this if you really have no other but to claim more space.
oneLink?: ILink;
editedAt?: Date;
component: ReactNode;
titel: string;
description: string;
gitHubName: string;
tags?: EArtworkTags[] | string[];
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks for the ";"

backgroundColor?: `#${string}`; // No transparent backgrounds
full?: boolean; // Only use this if you really have no other but to claim more space.
oneLink?: ILink;
editedAt?: Date;
}

const artworksList: IArtworkItem[] = [
{
component: <Template />,
titel: "circle",
description: "round circle",
gitHubName: "FabDonRixos",
tags: [EArtworkTags.SIMPLE],
backgroundColor: "#000",
full: true,
oneLink: {
name: "fabian.li",
href: "https://fabian.li"
},
editedAt: new Date("2024-10-26")
{
component: <Template />,
titel: "circle",
description: "round circle",
gitHubName: "FabDonRixos",
tags: [EArtworkTags.SIMPLE],
backgroundColor: "#000",
full: true,
oneLink: {
name: "fabian.li",
href: "https://fabian.li",
},
]
editedAt: new Date("2024-10-26"),
},
{
component: <AnalogClock />,
titel: "Analog Clock",
description:
"A simple analog clock with hour, minute, and second hands animated in CSS.",
gitHubName: "duyb2111918",
tags: [EArtworkTags.COMPLEX, "TIME"],
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would add the tag animation and please only use tags inside EArtworkTags because it won't be possible to find it with tags if you make your own, also if you want to be able to find you component if you type "time" its better to add time to the title or the description.

backgroundColor: "#ffffff",
full: false,
oneLink: {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you dont have to add an extra link to you github, use this for other links of remove it because the link to you github is automatically generated out of your name.

name: "github.com/duyb2111918",
href: "https://github.com/duyb2111918",
},
editedAt: new Date("2024-11-04"),
},
];

export default artworksList;
export default artworksList;
136 changes: 136 additions & 0 deletions src/artworks/AnalogClock/AnalogClock.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
.clock {
display: grid;
place-items: center;
width: 10rem;
height: 10rem;
border-radius: 50%;
border: 8px solid #2c3e50;
background-color: #ecf0f1;
position: relative;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1), 0 0 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.clock:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1);
}
.center {
width: 10px;
height: 10px;
background-color: #2980b9;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 10;
transition: background-color 0.3s ease;
}
.clock:hover .center {
background-color: #c0392b;
}
.hour,
.minute,
.second {
position: absolute;
top: 50%;
left: 50%;
transform-origin: bottom;
transform: translate(-50%, -100%) rotate(0deg);
transition: background-color 0.3s ease;
}
.hour {
width: 6px;
height: 30px;
background-color: #2980b9;
animation: rotateHour 43200s infinite linear;
}
.minute {
width: 4px;
height: 45px;
background-color: #3498db;
animation: rotateMinute 3600s infinite linear;
}
.second {
width: 2px;
height: 55px;
background-color: #e74c3c;
animation: rotateSecond 60s infinite linear;
}
.clock:hover .hour {
background-color: #1abc9c;
}
.clock:hover .minute {
background-color: #0ea3b7;
}
.clock:hover .second {
background-color: #d08018;
}
/*Rotation for clock*/
@keyframes rotateHour {
from {
transform: translate(-50%, -100%) rotate(0deg);
}
to {
transform: translate(-50%, -100%) rotate(360deg);
}
}
@keyframes rotateMinute {
from {
transform: translate(-50%, -100%) rotate(0deg);
}
to {
transform: translate(-50%, -100%) rotate(360deg);
}
}
@keyframes rotateSecond {
from {
transform: translate(-50%, -100%) rotate(0deg);
}
to {
transform: translate(-50%, -100%) rotate(360deg);
}
}
/*Adding number*/
.clock::before {
content: "XII";
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
color: #2c3e50;
}
.clock::after {
content: "VI";
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
color: #2c3e50;
}
.three::before {
content: "III";
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
color: #2c3e50;
}
.nine::before {
content: "IX";
position: absolute;
left: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
color: #2c3e50;
}
.clock:hover::before,
.clock:hover::after,
.clock:hover .three::before,
.clock:hover .nine::before {
color: #c0392b;
}
14 changes: 14 additions & 0 deletions src/artworks/AnalogClock/AnalogClock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import style from "./AnalogClock.module.scss";

export default function AnalogClock() {
return (
<div className={style.clock}>
<div className={style.center}></div>
<div className={style.hour}></div>
<div className={style.minute}></div>
<div className={style.second}></div>
<div className={style.three}></div>
<div className={style.nine}></div>
</div>
);
}