Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3ad099e

Browse files
feat: about page (#296)
* Create About.jsx create about component * add images for about * added about page and assets * Update src/components/Header.jsx * Update src/components/Header.jsx * Update src/components/Header.jsx * Update src/components/Header.jsx --------- Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>
1 parent 77227c1 commit 3ad099e

6 files changed

Lines changed: 218 additions & 8 deletions

File tree

src/app/about/page.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Content } from '@/components/About'
2+
import { Footer } from '@/components/Footer'
3+
import { Header } from '@/components/Header'
4+
5+
export default function About() {
6+
return (
7+
<>
8+
<Header />
9+
<main>
10+
<Content />
11+
</main>
12+
<Footer />
13+
</>
14+
)
15+
}

src/components/About.jsx

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import { Container } from '@/components/Container'
2+
import Image from 'next/image'
3+
import GithubStar from '@/images/about/2021star.png'
4+
import Support from '@/images/about/support.png'
5+
import Eddiebot from '@/images/about/eddiebot.png'
6+
7+
export function Content() {
8+
return (
9+
<section id="about" className="relative overflow-hidden bg-slate-50 py-32">
10+
<Container className="relative">
11+
<div>
12+
<h1 className="mt-3 text-4xl font-semibold text-gray-900">About</h1>
13+
<p className="my-4 text-lg tracking-tight">Read more about where EddieHub started and the core values of the community.</p>
14+
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
15+
Our Background
16+
</h2>
17+
<Image
18+
className="mx-auto"
19+
src={GithubStar}
20+
alt="github star 2021 badge"
21+
width="auto"
22+
height="250"
23+
/>
24+
<p className="mt-4 text-lg tracking-tight">
25+
EddieHub was founded by Eddie Jaoude, GitHub Star, GitHub Star of
26+
the Year 2020 and winner of the GitHub Community Growth Award 2021.
27+
As a passionate advocate of Open Source who has always believed in
28+
giving back to the tech community, Eddie’s particular focus is
29+
creating and supporting opportunities for those wanting to start a
30+
career in tech.
31+
</p>
32+
<p className="mt-4 text-lg tracking-tight">
33+
Recognising that starting in Open Source can be daunting, Eddie was
34+
keen to build a community which focused on Open Source for those
35+
with varying tech abilities and at different stages of their tech
36+
journey.
37+
</p>
38+
39+
<p className="mt-4 text-lg tracking-tight">
40+
The main objective was for members to share their experiences by
41+
adopting both a mentor and mentee role on the premise that everyone
42+
has something to teach but also something to learn. “Collaboration
43+
First, Code Second” quickly became what the community members live
44+
by.
45+
</p>
46+
<h2 className="font-display mt-5 text-3xl tracking-tight sm:text-4xl">
47+
Our Aims
48+
</h2>
49+
<p className="mt-4 text-lg tracking-tight">
50+
EddieHub’s overall aim is to support members in: accelerating their
51+
learnings so that they can have the career they want.
52+
</p>
53+
54+
<p className="mt-4 text-lg tracking-tight">
55+
This can be broken down into two components:
56+
</p>
57+
<ol className="mt-4 list-decimal text-lg tracking-tight">
58+
<li>
59+
Improving your technical expertise through Open Source
60+
<p className="mt-4 text-lg tracking-tight"></p>Through tutorials
61+
explaining key concepts of Open Source ranging from; how to get
62+
started on Github, to Documentation, Automated Testing and
63+
Continuous Delivery (CI and CD), guest interviews with experts in
64+
the field to live streams where your projects can be reviewed and
65+
you can receive feedback and encouragement.
66+
<p>
67+
Technical knowledge is also built upon in the Discord channels
68+
and GitHub Discussions where members can ask questions and share
69+
their projects, whilst getting the guidance and support from
70+
Eddie, our expert moderators as well as all members of the
71+
community.
72+
</p>
73+
</li>
74+
<Image
75+
className="mx-auto"
76+
src={Support}
77+
alt="github support"
78+
width="auto"
79+
height="500"
80+
/>
81+
<li>
82+
Building upon your communication skills
83+
<p className="mt-4 text-lg tracking-tight">
84+
For EddieHub, learning how to collaborate is key and we believe
85+
that a vital part of knowing how to collaborate with others is
86+
through effective communication skills.
87+
</p>
88+
<p className="mt-4 text-lg tracking-tight">
89+
Often there are limited opportunities to expand upon these
90+
skills. You may work within a small team and liaise with the
91+
same colleagues on a daily basis, work on your own or, as a
92+
result of geographic location, there may not be opportunities
93+
(such as clubs or meet-up groups) to develop your communication
94+
style and confidence.
95+
</p>
96+
<p className="mt-4 text-lg tracking-tight">
97+
By creating a community with members from all around the world
98+
and with different technical levels, EddieHub has generated an
99+
opportunity for members to interact with a large diversity of
100+
people. This constant interaction between members means that the
101+
way they receive feedback has an impact on how they communicate
102+
feedback to others.
103+
</p>
104+
<p className="mt-4 text-lg tracking-tight">
105+
Recognising that at the outset these communication skills were
106+
primarily through the Discord written messages and GitHub Issues
107+
and Pull Requests, EddieHub has launched initiatives for regular
108+
Public Speaking events, tutorials and “Ask me Anything” sessions
109+
to further support its members.
110+
</p>
111+
<p className="mt-4 text-lg tracking-tight">
112+
We are pleased that members have reported that this approach has
113+
been invaluable to them. Had they not made their projects Open
114+
Source, they would not have been able to progress these in the
115+
same way as a private project. In addition, whilst feedback was
116+
either not sought or viewed as a negative critique, it is now
117+
both actively encouraged and more confidently given.
118+
</p>
119+
</li>
120+
</ol>
121+
<h2 className="font-display mt-5 text-3xl tracking-tight sm:text-4xl">
122+
Our Core Values
123+
</h2>
124+
<p>Behind these aims are EddieHub’s core values:</p>
125+
<ol className="mt-4 list-decimal text-lg tracking-tight">
126+
<li>
127+
An inclusive and welcoming environment
128+
<p className="mt-4 text-lg tracking-tight">
129+
As with many other communities, EddieHub has a Code of Conduct
130+
and Equality, Diversity & Inclusion policy. In addition we have
131+
excellent moderators who keep a close eye to ensure that members
132+
feel EddieHub is a safe space where they can learn, network and
133+
share their experiences.
134+
</p>
135+
<p className="mt-4 text-lg tracking-tight">
136+
We had observed that many other communities had a very “male
137+
orientated” language, as well as making assumptions that
138+
everyone went by the “he/him” gender pronoun. We wanted EddieHub
139+
to be different and use gender neutral language to ensure that
140+
we did not alienate any members whilst making a clear stance
141+
against the “bro culture” which often dominates the tech space.
142+
</p>
143+
<p className="mt-4 text-lg tracking-tight">
144+
Through a community discussion we achieved this through our
145+
Discord bot named “EddieBot”, which picks up and suggests
146+
alternatives to gender favouring, polarising, race related,
147+
religion inconsiderate or other unequal phrasing. In addition,
148+
Eddiebot was built by the community members and we feel this is
149+
an accurate reflection to members’ commitment to these core
150+
values.
151+
</p>
152+
<Image
153+
className="mx-auto"
154+
src={Eddiebot}
155+
alt="eddiebot"
156+
width="auto"
157+
height="300"
158+
/>
159+
</li>
160+
<li>
161+
The wellbeing of our community members.
162+
<p className="mt-4 text-lg tracking-tight">
163+
Moderators and members advocate for taking time for self care
164+
and avoiding burning out. We have a Discord channel dedicated to
165+
our members sharing what they do in their down time, which in
166+
turn reminds others to take a break. We want to lead by example
167+
in the tech space and stop glamourising overworking and the
168+
“hustle” culture, through sharing tips and tutorials on the
169+
EddieHub Blog as to how you can ensure you are looking after
170+
yourself.
171+
</p>
172+
</li>
173+
<li>
174+
Achieve your goals whilst having fun!
175+
<p className="mt-4 text-lg tracking-tight">
176+
Whilst no EddieHub member is the same, one thing we all have in
177+
common - Open Source is our hobby, our passion - not just a job.
178+
</p>
179+
<p className="mt-4 text-lg tracking-tight">
180+
At EddieHub we will always encourage members to make their next
181+
Open Source contribution and we are their biggest cheerleaders.
182+
Whether we might nudge members directly to check on how their
183+
project is going, to hackathons and challenges as well as asking
184+
them to come out of their comfort zone to moderate a call or
185+
speak in public for the first time.
186+
</p>
187+
</li>
188+
</ol>
189+
</div>
190+
</Container>
191+
</section>
192+
)
193+
}

src/components/Header.jsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,12 @@ function MobileNavigation() {
7979
as="div"
8080
className="absolute inset-x-0 top-full mt-4 flex origin-top flex-col rounded-2xl bg-white p-4 text-lg tracking-tight text-slate-900 shadow-xl ring-1 ring-slate-900/5"
8181
>
82-
<MobileNavLink href="#projects">Projects</MobileNavLink>
83-
<MobileNavLink href="#testimonials">Testimonials</MobileNavLink>
84-
<MobileNavLink href="https://eddiehub.substack.com">Blog</MobileNavLink>
85-
{/* <hr className="m-2 border-slate-300/40" />
86-
<MobileNavLink href="/login">Sign in</MobileNavLink> */}
82+
<MobileNavLink href="/about">About</MobileNavLink>
83+
<MobileNavLink href="/#projects">Projects</MobileNavLink>
84+
<MobileNavLink href="/#testimonials">Testimonials</MobileNavLink>
85+
<MobileNavLink href="/#moderators">Moderators</MobileNavLink>
86+
<hr className="m-2 border-slate-300/40" />
87+
<MobileNavLink href="/login">Sign in</MobileNavLink>
8788
</Popover.Panel>
8889
</Transition.Child>
8990
</Transition.Root>
@@ -101,9 +102,10 @@ export function Header() {
101102
<Logo className="h-10 w-auto" />
102103
</Link>
103104
<div className="hidden md:flex md:gap-x-6">
104-
<NavLink href="#projects">Projects</NavLink>
105-
<NavLink href="#testimonials">Testimonials</NavLink>
106-
<NavLink href="https://eddiehub.substack.com">Blog</NavLink>
105+
<NavLink href="/about">About</NavLink>
106+
<NavLink href="/#projects">Projects</NavLink>
107+
<NavLink href="/#testimonials">Testimonials</NavLink>
108+
<NavLink href="/#moderators">Moderators</NavLink>
107109
</div>
108110
</div>
109111
<div className="flex items-center gap-x-5 md:gap-x-8">

src/images/about/2021star.png

23.3 KB
Loading

src/images/about/eddiebot.png

28.4 KB
Loading

src/images/about/support.png

54.5 KB
Loading

0 commit comments

Comments
 (0)