1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import Carousel from "./carousel";
import './project.css';
enum ProjectType {
GAME = "game",
PROJECT = "project",
}
export enum ProjectTech {
CSHARP = "csharp",
RUST = "rust",
C = "c",
CPP = "cpp",
JAVASCRIPT = "javascript",
TYPESCRIPT = "typescript",
HTML = "html",
CSS = "css",
PREACT = "preact",
UNITY = "unity",
GODOT = "godot",
MONOGAME = "monogame",
}
export enum ProjectTarget {
WEB = "html5",
WINDOWS = "windows",
LINUX = "linux",
MACOS = "macos",
ANDROID = "android",
XBOX = "xbox",
PLAYSTATION = "playstation",
SWITCH = "switch",
HYPRLAND = "hyprland",
}
export interface ProjectDescriptor {
name: string;
name_normalized: string;
type: ProjectType;
link: string;
tech: ProjectTech[];
targets: ProjectTarget[];
images: string[];
description: string;
}
function getProjectImageLink(project: ProjectDescriptor, image: string) {
return `assets/${project.type}s/${project.name_normalized}/${image}`;
}
function getProjectTechIconLink(tech: ProjectTech) {
return `assets/images/${tech}.png`;
}
function getProjectTargetIconLink(target: ProjectTarget) {
return `assets/images/${target}.png`;
}
export function Project(props: ProjectDescriptor) {
return (
<div class="project">
<div class="project-title"><a href={props.link}>{props.name}</a></div>
<div class="project-info">
<div class="icon-row">
<div class="icon-text">Made using</div>
<div class="icon-container">
{props.tech.map((tech) => (
<img class="grow icon" src={getProjectTechIconLink(tech)} />
))}
</div>
</div>
<div class="icon-row">
<div class="icon-text">Available on</div>
<div class="icon-container">
{props.targets.map((target) => (
<img class="grow icon" src={getProjectTargetIconLink(target)} />
))}
</div>
</div>
<hr />
<div class="project-description">
{
// use description as html
<div dangerouslySetInnerHTML={{ __html: props.description }} />
}
</div>
</div>
<Carousel>
{props.images.map((image) => (
<img class="project-image" src={getProjectImageLink(props, image)} />
))}
</Carousel>
</div>
);
}
|
