Skip to content

Commit 44a50a0

Browse files
berezinantberezinant
authored
Merge pull request #61 from KotlinFoundation/KTL-1237-annual-report-last
Added annual report
2 parents 75ffed7 + c3abd86 commit 44a50a0

File tree

11 files changed

+234
-2
lines changed

11 files changed

+234
-2
lines changed

‎src/components/AnnualReport/annualReport.module.css

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
.report {
2+
margin: var(--ktl-box-page-l) 0;
3+
padding: var(--ktl-box-section-l) 0;
4+
border-top: 1px solid var(--rs-color-black-t20);
5+
border-bottom: 1px solid var(--rs-color-black-t20);
6+
7+
@media (--ktl-tl) {
8+
margin: var(--ktl-box-page-m) 0;
9+
}
10+
11+
@media (--ktl-mm) {
12+
margin: var(--ktl-box-section-l) 0;
13+
}
14+
}
15+
16+
.slides {
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
21+
@media (--ktl-tl) {
22+
flex-direction: column;
23+
}
24+
}
25+
26+
.imageContainer {
27+
position: relative;
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
width: 416px;
32+
height: 276px;
33+
34+
@media (--ktl-tl) {
35+
margin: var(--ktl-box-section-s) 0 var(--ktl-box-section-s) -50px;
36+
order: 2;
37+
}
38+
39+
@media (--ktl-mm) {
40+
margin: var(--ktl-box-section-s) 0;
41+
width: 288px;
42+
height: 176px;
43+
}
44+
}
45+
46+
.imageContainer:before {
47+
content: ' ';
48+
position: absolute;
49+
top: -49px;
50+
left: 45px;
51+
width: 374px;
52+
height: 374px;
53+
border-radius: 50%;
54+
opacity: 0.5;
55+
background: radial-gradient(50% 50% at 50% 50%, rgba(51, 0, 255, 0.5) 0%, rgba(232, 232, 232, 0) 100%);
56+
57+
@media (--ktl-mm) {
58+
top: -49px;
59+
left: 0;
60+
width: 300px;
61+
height: 280px;
62+
}
63+
}
64+
65+
.image {
66+
position: absolute;
67+
transform: perspective(3000px) rotateY(0deg);
68+
box-shadow: rgba(0, 0, 0, 0) 0 25px 50px -12px;
69+
transition:
70+
transform 1s ease 0s,
71+
box-shadow 1s ease 0s;
72+
will-change: transform, box-shadow;
73+
74+
@media (--ktl-mm) {
75+
width: 256px;
76+
height: 144px;
77+
}
78+
}
79+
80+
.imageContainer:hover .image {
81+
box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
82+
}
83+
84+
.image:nth-child(1) {
85+
top: 24px;
86+
left: 48px;
87+
88+
@media (--ktl-mm) {
89+
top: 0;
90+
left: 0;
91+
}
92+
}
93+
94+
.imageContainer:hover .image:nth-child(1) {
95+
transform: perspective(1500px) rotateY(15deg) translateX(-18px) translateY(-6px);
96+
}
97+
98+
.image:nth-child(2) {
99+
top: 48px;
100+
left: 72px;
101+
102+
@media (--ktl-mm) {
103+
top: 16px;
104+
left: 16px;
105+
}
106+
}
107+
108+
.imageContainer:hover .image:nth-child(2) {
109+
transform: perspective(1500px) rotateY(15deg);
110+
}
111+
112+
.image:nth-child(3) {
113+
top: 72px;
114+
left: 96px;
115+
116+
@media (--ktl-mm) {
117+
top: 32px;
118+
left: 32px;
119+
}
120+
}
121+
122+
.imageContainer:hover .image:nth-child(3) {
123+
transform: perspective(1500px) rotateY(15deg) translateX(18px) translateY(6px);
124+
}
125+
126+
.textContainer {
127+
display: flex;
128+
flex-direction: column;
129+
align-items: center;
130+
gap: var(--ktl-box-section-m);
131+
width: 572px;
132+
padding: var(--ktl-box-block-s) var(--ktl-box-section-s);
133+
text-align: center;
134+
135+
@media (--ktl-tl) {
136+
position: relative;
137+
width: unset;
138+
padding: 0;
139+
z-index: 1;
140+
}
141+
}
142+
143+
.button {
144+
display: block;
145+
@media (--ktl-tl) {
146+
display: none;
147+
}
148+
}
149+
150+
.buttonMobile {
151+
display: none;
152+
@media (--ktl-tl) {
153+
display: block;
154+
order: 3;
155+
}
156+
}

‎src/components/AnnualReport/assets/1-kotlin-results.png

28.4 KB
Loading

‎src/components/AnnualReport/assets/2-mission-recap.png

133 KB
Loading

‎src/components/AnnualReport/assets/3-foundation-results.png

72.5 KB
Loading

‎src/components/AnnualReport/index.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Button from "@rescui/button";
2+
import cn from "classnames";
3+
import * as styles from "./annualReport.module.css";
4+
import report1KotlinResults from "./assets/1-kotlin-results.png";
5+
import report2MissionRecap from "./assets/2-mission-recap.png";
6+
import report3FoundationResults from "./assets/3-foundation-results.png";
7+
8+
export function AnnualReport() {
9+
const renderButton = (className: string) => (
10+
<Button
11+
className={className}
12+
mode="outline"
13+
size="l"
14+
href="/kf_annual_report_2023.pdf"
15+
target="_blank"
16+
>
17+
View annual report
18+
</Button>
19+
);
20+
return (
21+
<div className={styles.report}>
22+
<section className={cn("ktl-layout ktl-layout--center", styles.slides)}>
23+
<div className={styles.imageContainer}>
24+
<img
25+
src={report3FoundationResults}
26+
alt="Foundation results"
27+
className={styles.image}
28+
width={320}
29+
height={180}
30+
/>
31+
<img
32+
src={report2MissionRecap}
33+
alt="Misson recap"
34+
className={styles.image}
35+
width={320}
36+
height={180}
37+
/>
38+
<img
39+
src={report1KotlinResults}
40+
alt="Kotlin results"
41+
className={styles.image}
42+
width={320}
43+
height={180}
44+
/>
45+
</div>
46+
<div className={styles.textContainer}>
47+
<h2 className="ktf-h2 ktf-h3--tl">
48+
Explore Kotlin Foundation <br />
49+
highlights from 2023
50+
</h2>
51+
{renderButton(styles.button)}
52+
</div>
53+
{renderButton(styles.buttonMobile)}
54+
</section>
55+
</div>
56+
);
57+
}

‎src/components/Markdown/CustomTags.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,4 @@ export { Grants, GrantsAction, GrantsTitle } from '../Grants';
1111
export { PagePreview } from '../PagePreview';
1212
export { PairedBlock } from '../PairedBlock';
1313
export { LatestNews } from '../LatestNews';
14+
export { AnnualReport } from '../AnnualReport';

‎src/pages/index.mdx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ import joinPreviewUrl from "../images/join-preview.png";
4646
</ProductHighlight>
4747

4848
<ProductHighlight title="Kotlin now">
49-
<ProductHighlightItem value="570k">Active developers use<br/> Kotlin every month.</ProductHighlightItem>
50-
<ProductHighlightItem value="1M">GitHub repositories currently use Kotlin as a primary language.</ProductHighlightItem>
49+
<ProductHighlightItem value="710k">Active developers use<br/> Kotlin every month.</ProductHighlightItem>
50+
<ProductHighlightItem value="1.2M">GitHub repositories currently use Kotlin as a primary language.</ProductHighlightItem>
5151
<ProductHighlightItem value="32">Of the top 100 universities in the THE Rankings 2023 are teaching Kotlin.</ProductHighlightItem>
5252
</ProductHighlight>
5353

@@ -58,6 +58,10 @@ import joinPreviewUrl from "../images/join-preview.png";
5858
/>
5959
</Layout>
6060

61+
<Layout>
62+
<AnnualReport />
63+
</Layout>
64+
6165
<Layout>
6266
<LatestNews />
6367
</Layout>

‎src/pages/news/annual-report-2023/cover.jpg

66.3 KB
Loading

‎src/pages/news/annual-report-2023/index.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: "The Kotlin Foundation Annual Report 2023"
3+
date: 2024-02-02 10:00
4+
coverImage: "./cover.jpg"
5+
socialImage: "./social.png"
6+
---
7+
8+
We have published our [2023 Annual Report](https://kotlinfoundation.org/kf_annual_report_2023.pdf), detailing this year's activities and plans for the Kotlin ecosystem. The report outlines several key initiatives, including the Grants Program, our participation in Google Summer of Code, and the Kotlin Multiplatform Student Contest. These programs have supported the growth of the Kotlin community and contributed to the ecosystem's development.
9+
10+
The report provides a financial overview, demonstrating our commitment to transparency. It also details the individual contributions to the Kotlin Ecosystem from each member, including JetBrains, Google, Gradle, Touchlab, and Shopify.
11+
12+
For more details on our activities in 2023 and our plans for the next year, the full report is [available on our website](https://kotlinfoundation.org/kf_annual_report_2023.pdf).
13+
14+
For further information about us and our projects, or if your company is interested in joining as a member, please contact us via the #kotlin-foundation Slack channel or email at [[email protected]](mailto:[email protected]).

‎src/pages/news/annual-report-2023/social.png

301 KB
Loading

0 commit comments

Comments
 (0)