Skip to content

Commit 84430b8

Browse files
anurag2787anurag2787
committed
Improved about page
1 parent f038c59 commit 84430b8

File tree

3 files changed

+166
-9
lines changed

3 files changed

+166
-9
lines changed

‎frontend/src/app/about/page.tsx‎

Lines changed: 52 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
faClock,
66
faUserGear,
77
faMapSigns,
8-
faScroll,
98
faUsers,
109
faTools,
1110
faArrowUpRightFromSquare,
@@ -24,7 +23,7 @@ import { GET_LEADER_DATA } from 'server/queries/userQueries'
2423
import type { Contributor } from 'types/contributor'
2524
import type { Project } from 'types/project'
2625
import type { User } from 'types/user'
27-
import { aboutText, technologies } from 'utils/aboutData'
26+
import { technologies, missionContent, keyFeatures, getInvolvedContent, projectHistory } from 'utils/aboutData'
2827
import AnchorTitle from 'components/AnchorTitle'
2928
import AnimatedCounter from 'components/AnimatedCounter'
3029
import LoadingSpinner from 'components/LoadingSpinner'
@@ -107,14 +106,30 @@ const About = () => {
107106
<div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
108107
<div className="mx-auto max-w-6xl">
109108
<h1 className="mt-4 mb-6 text-4xl font-bold">About</h1>
110-
<SecondaryCard icon={faScroll} title={<AnchorTitle title="History" />}>
111-
{aboutText.map((text) => (
112-
<div key={text} className="mb-4">
113-
<div key={text}>
114-
<Markdown content={text} />
109+
<div className="grid gap-6 md:grid-cols-2 mb-6">
110+
<SecondaryCard icon={faMapSigns} title={<AnchorTitle title="Mission" />}>
111+
<h3 className="mb-2 text-xl font-semibold text-blue-400">Our Mission</h3>
112+
<p className="text-gray-600 dark:text-gray-300">{missionContent.mission}</p>
113+
</SecondaryCard>
114+
115+
<SecondaryCard icon={faUsers} title={<AnchorTitle title="Who It's For" />}>
116+
<h3 className="mb-2 text-xl font-semibold text-blue-400">Target Audience</h3>
117+
<p className="text-gray-600 dark:text-gray-300">{missionContent.whoItsFor}</p>
118+
</SecondaryCard>
119+
</div>
120+
121+
<SecondaryCard icon={faCircleCheck} title={<AnchorTitle title="Key Features" />}>
122+
<div className="grid gap-4 md:grid-cols-2">
123+
{keyFeatures.map((feature, index) => (
124+
<div
125+
key={index}
126+
className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
127+
>
128+
<h3 className="mb-2 text-lg font-semibold text-blue-400">{feature.title}</h3>
129+
<p className="text-gray-600 dark:text-gray-300">{feature.description}</p>
115130
</div>
116-
</div>
117-
))}
131+
))}
132+
</div>
118133
</SecondaryCard>
119134

120135
<SecondaryCard icon={faArrowUpRightFromSquare} title={<AnchorTitle title="Leaders" />}>
@@ -224,6 +239,34 @@ const About = () => {
224239
</SecondaryCard>
225240
)}
226241

242+
<SecondaryCard icon={faUsers} title={<AnchorTitle title="Get Involved" />}>
243+
<p className="mb-4 text-gray-600 dark:text-gray-300">{getInvolvedContent.description}</p>
244+
<ul className="mb-6 list-inside list-disc space-y-2">
245+
{getInvolvedContent.ways.map((way, index) => (
246+
<li key={index} className="text-gray-600 dark:text-gray-300">{way}</li>
247+
))}
248+
</ul>
249+
<Markdown content={getInvolvedContent.callToAction} />
250+
</SecondaryCard>
251+
252+
<SecondaryCard icon={faClock} title={<AnchorTitle title="Project History" />}>
253+
<div className="space-y-6">
254+
{projectHistory.map((milestone, index) => (
255+
<div key={index} className="relative pl-8">
256+
{index !== projectHistory.length - 1 && (
257+
<div className="absolute left-[11px] top-8 h-full w-0.5 bg-blue-400"></div>
258+
)}
259+
<div className="absolute left-0 top-2 h-6 w-6 rounded-full bg-blue-400"></div>
260+
<div className="pt-1">
261+
<h3 className="text-lg font-semibold text-blue-400">{milestone.year}</h3>
262+
<h4 className="mb-1 font-medium">{milestone.title}</h4>
263+
<p className="text-gray-600 dark:text-gray-300">{milestone.description}</p>
264+
</div>
265+
</div>
266+
))}
267+
</div>
268+
</SecondaryCard>
269+
227270
<div className="grid gap-6 md:grid-cols-4">
228271
{[
229272
{ label: 'Forks', value: projectMetadata.forksCount },

‎frontend/src/types/about.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export interface KeyFeature {
2+
title: string
3+
description: string
4+
}
5+
6+
export interface ProjectHistory {
7+
year: string
8+
title: string
9+
description: string
10+
}
11+
12+
export interface GetInvolved {
13+
description: string
14+
ways: string[]
15+
callToAction: string
16+
}
17+
18+
export interface MissionContent {
19+
mission: string
20+
whoItsFor: string
21+
}
22+
23+
export type TechnologySection = {
24+
section: string
25+
tools: {
26+
[toolName: string]: {
27+
icon: string
28+
url: string
29+
}
30+
}
31+
}

‎frontend/src/utils/aboutData.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,92 @@
1+
import type {
2+
KeyFeature,
3+
ProjectHistory,
4+
GetInvolved,
5+
MissionContent,
6+
Leaders,
7+
TechnologySection,
8+
} from 'types/about'
9+
110
export const aboutText = [
211
'OWASP Nest was originally created by Arkadii Yakovets (Ark) to simplify OWASP projects navigation. Built from scratch based on Ark’s vision and discussions with Starr Brown (Starr), the platform integrates structured system design into the OWASP ecosystem. The initial frontend, based on Vue.js, was introduced by Kateryna Golovanova (Kate), who later became the project co-leader due to her invaluable frontend and project management skills.',
312
'Over time, OWASP Nest has expanded to address broader community needs, such as Google Summer of Code (GSoC) student guidance and contribution opportunities discovery. The platform, alongside NestBot, has become a central hub for OWASP projects, chapters, users, and aggregated contribution opportunities.',
413
'The code is licensed under the MIT License, encouraging contributions while protecting the authors from legal claims. All OWASP Nest leaders are certified ISC2 professionals and OWASP members who adhere to the OWASP Code of Conduct.',
514
]
615

16+
export const missionContent: MissionContent = {
17+
mission:
18+
'OWASP Nest is a comprehensive platform built to enhance collaboration and streamline contributions across the OWASP community. Acting as a central hub, it helps users discover projects, find contribution opportunities, and connect with like-minded individuals based on their interests and expertise.',
19+
whoItsFor:
20+
"OWASP Nest is designed for developers, designers, technical writers, students, security professionals, and contributors of all backgrounds. Whether you're just starting out or a seasoned OSS veteran, Nest provides intuitive tools to help you engage meaningfully in the OWASP ecosystem.",
21+
} as const
22+
23+
export const keyFeatures: KeyFeature[] = [
24+
{
25+
title: 'Advanced Search Capabilities',
26+
description:
27+
'Easily filter and explore projects or issues using keywords, tags, and contributor preferences.',
28+
},
29+
{
30+
title: 'Slack Integration',
31+
description:
32+
'Stay connected through a Slack bot that delivers updates and supports both direct and channel messaging.',
33+
},
34+
{
35+
title: 'OWASP Chapters Proximity Page',
36+
description: 'Discover and connect with nearby OWASP chapters for local engagement.',
37+
},
38+
{
39+
title: 'AI-Generated Insights',
40+
description:
41+
'Benefit from AI-powered summaries and actionable suggestions for tackling project issues.',
42+
},
43+
]
44+
45+
export const getInvolvedContent: GetInvolved = {
46+
description:
47+
"OWASP Nest thrives thanks to community-driven contributions. Here's how you can make an impact:",
48+
ways: [
49+
'Code Contributions – Fix bugs or build new features',
50+
'Code Review – Improve quality by reviewing pull requests',
51+
'Documentation – Create or enhance onboarding guides and tutorials',
52+
'Issue Reporting – Report bugs or propose improvements',
53+
'Community Engagement – Join Slack discussions and provide feedback',
54+
],
55+
callToAction:
56+
'To get started, visit the [OWASP Nest Repository](https://github.com/OWASP/Nest), explore the [Contributing Guidelines](https://github.com/OWASP/Nest/blob/main/CONTRIBUTING.md), and review the [Code of Conduct](https://github.com/OWASP/Nest/blob/main/CODE_OF_CONDUCT.md).',
57+
}
58+
59+
export const projectHistory: ProjectHistory[] = [
60+
{
61+
title: 'Project Inception',
62+
description:
63+
'Initial brainstorming and vision by Arkadii Yakovets (Ark) & Starr Brown to solve OWASP project navigation challenges',
64+
year: 'Jan 2023',
65+
},
66+
{
67+
title: 'Backend MVP',
68+
description:
69+
'Backend foundations built using Python, Django, DRF with AI capabilities integrated',
70+
year: 'Mar 2023',
71+
},
72+
{
73+
title: 'Frontend Development',
74+
description:
75+
'Frontend initially developed by Kateryna Golovanova (Kate) using Vue.js, later transitioned to React',
76+
year: 'Sep 2024',
77+
},
78+
{
79+
title: 'Platform Integrations',
80+
description: 'Slack & Algolia integrations implemented for enhanced user experience',
81+
year: 'Nov 2024',
82+
},
83+
{
84+
title: 'GSoC Integration',
85+
description: 'Scaled to support Google Summer of Code and streamline contributor onboarding',
86+
year: 'Dec 2024',
87+
},
88+
]
89+
790
export const technologies = [
891
{
992
section: 'Backend',

0 commit comments

Comments
 (0)