Skip to content

improve: Enhance UI/UX of firstcontributions.github.io #588

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

Open
SahilArate wants to merge 1 commit into
base: main
Choose a base branch
from
Open

improve: Enhance UI/UX of firstcontributions.github.io #588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion .astro/data-store.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.3.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]
[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.18.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true,\"allowedDomains\":[],\"actionBodySizeLimit\":1048576},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false,\"staticImportMetaEnv\":false,\"chromeDevtoolsWorkspace\":false,\"failOnPrerenderConflict\":false,\"svgo\":false},\"legacy\":{\"collections\":false}}"]
2 changes: 1 addition & 1 deletion .astro/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"_variables": {
"lastUpdateCheck": 1759260475499
"lastUpdateCheck": 1776836023578
}
}
1 change: 0 additions & 1 deletion .astro/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
/// <reference types="astro/client" />
/// <reference path="content.d.ts" />
127 changes: 111 additions & 16 deletions src/components/App.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,47 @@ import Navbar from './Navbar.astro';
import LinkButton from './LinkButton.astro';
import ProjectList from './ProjectList.astro';
import SocialShare from './SocialShare.astro';
import Footer from './Footer.astro';
---

<div class="App">
<Navbar />

<div class="App-header">
<div class="hero-badge">🌱 Open Source for Everyone</div>
<h1>
Make your first <br/>
<a href="https://firstcontributions.github.io/contribute-to-opensource">
open source <span>contribution</span>
</a>
Make your first <br/>
<a href="https://firstcontributions.github.io/contribute-to-opensource">
open source <span>contribution</span>
</a>
<br/> in 5 minutes
</h1>
<p class="hero-subtitle">
Join thousands of developers who made their first open source contribution.
Find beginner-friendly projects and start contributing today.
</p>
<div class="hero-stats">
<div class="stat">
<span class="stat-number">100+</span>
<span class="stat-label">Projects</span>
</div>
<div class="stat-divider"></div>
<div class="stat">
<span class="stat-number">∞</span>
<span class="stat-label">Opportunities</span>
</div>
<div class="stat-divider"></div>
<div class="stat">
<span class="stat-number">5 min</span>
<span class="stat-label">To get started</span>
</div>
</div>
</div>

<LinkButton />
<ProjectList />
<SocialShare />
<Footer />
</div>

<style>
Expand All @@ -32,8 +57,24 @@ import SocialShare from './SocialShare.astro';
}

.App-header {
padding: 20px;
padding: 4rem 2rem 2rem;
color: white;
max-width: 900px;
margin: 0 auto;
width: 100%;
}

.hero-badge {
display: inline-block;
background: rgba(96, 165, 250, 0.1);
border: 1px solid rgba(96, 165, 250, 0.25);
color: #60a5fa;
padding: 0.4rem 1rem;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 1.5rem;
letter-spacing: 0.02em;
}

.App-header a {
Expand All @@ -45,7 +86,7 @@ import SocialShare from './SocialShare.astro';
font-size: 5.1rem;
letter-spacing: -0.05em;
font-weight: 700;
margin: 0 0 20px 0;
margin: 0 0 1.5rem 0;
line-height: 1.2;
}

Expand All @@ -58,29 +99,83 @@ import SocialShare from './SocialShare.astro';
animation: gradientShift 4s ease infinite;
}

.hero-subtitle {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.6);
line-height: 1.7;
max-width: 600px;
margin: 0 auto 2.5rem;
}

.hero-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}

.stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}

.stat-number {
font-size: 1.75rem;
font-weight: 700;
color: white;
letter-spacing: -0.03em;
}

.stat-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.08em;
}

.stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
}

@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@media (max-width: 700px) {
.App-header {
padding: 2.5rem 1.25rem 1.5rem;
}

.App-header > h1 {
font-size: 3.1rem;
letter-spacing: -0.05em;
font-weight: 700;
}

.hero-subtitle {
font-size: 1rem;
}

.stat-number {
font-size: 1.4rem;
}

.stat-divider {
display: none;
}
}

@media (max-width: 480px) {
.App-header > h1 {
font-size: 2.5rem;
}
}
</style>
</style>
144 changes: 144 additions & 0 deletions src/components/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
---
// Footer component
---

<footer class="footer">
<div class="footer-content">
<div class="footer-brand">
<span class="brand-icon">🌱</span>
<span class="brand-name">First Contributions</span>
<p class="footer-tagline">Helping developers make their first open source contribution since 2017.</p>
</div>

<div class="footer-links">
<div class="footer-col">
<h4>Community</h4>
<a href="https://join.slack.com/t/firstcontributors/shared_invite/zt-1n4y7xnk0-DnLVTaN6U9xLU79H5Hi62w" target="_blank" rel="noopener noreferrer">Slack</a>
<a href="https://twitter.com/1stContribution" target="_blank" rel="noopener noreferrer">Twitter</a>
<a href="https://www.youtube.com/channel/UCMXNFxCvyH5LhUwEcmY8qGQ" target="_blank" rel="noopener noreferrer">YouTube</a>
</div>
<div class="footer-col">
<h4>Resources</h4>
<a href="https://github.com/firstcontributions/first-contributions" target="_blank" rel="noopener noreferrer">GitHub</a>
<a href="https://firstcontributions.github.io/contribute-to-opensource" target="_blank" rel="noopener noreferrer">Contribute to Open Source</a>
</div>
</div>
</div>

<div class="footer-bottom">
<p>© {new Date().getFullYear()} First Contributions. Open source with ❤️</p>
</div>
</footer>

<style>
.footer {
margin-top: 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.7);
}

.footer-content {
max-width: 1100px;
margin: 0 auto;
padding: 3rem 2rem 2rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 3rem;
flex-wrap: wrap;
text-align: left;
}

.footer-brand {
max-width: 280px;
}

.brand-icon {
font-size: 1.5rem;
margin-right: 0.4rem;
}

.brand-name {
font-size: 1.1rem;
font-weight: 700;
color: white;
background: linear-gradient(90deg, #60a5fa, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.footer-tagline {
margin-top: 0.75rem;
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.45);
}

.footer-links {
display: flex;
gap: 4rem;
flex-wrap: wrap;
}

.footer-col {
display: flex;
flex-direction: column;
gap: 0.6rem;
}

.footer-col h4 {
color: white;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 0.5rem 0;
}

.footer-col a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}

.footer-col a:hover {
color: #60a5fa;
}

.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding: 1.25rem 2rem;
text-align: center;
}

.footer-bottom p {
margin: 0;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
.footer-content {
flex-direction: column;
gap: 2rem;
padding: 2rem 1.25rem 1.5rem;
text-align: center;
}

.footer-brand {
max-width: 100%;
}

.footer-links {
justify-content: center;
gap: 2.5rem;
}

.footer-bottom {
padding: 1rem 1.25rem;
}
}
</style>
Loading