Skip to content

Revamp About Page – Illustrations, Animations & Responsive Design #90

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

Merged
radhika-droid merged 5 commits into from
Oct 8, 2025
Merged

Revamp About Page – Illustrations, Animations & Responsive Design #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eca900d
Revamped About page with illustrations, animations, and responsive de…
Lakshmihollat Sep 28, 2025
1889805
Temporarily ignore db.sqlite3 to fix branch issues
Lakshmihollat Sep 28, 2025
a6b5d7d
Ignore db.sqlite3 to resolve conflicts
Lakshmihollat Sep 28, 2025
c09e836
Merge branch 'main' into about-page-update
Lakshmihollat Sep 28, 2025
faf578e
Merge branch 'main' into about-page-update
Lakshmihollat Sep 29, 2025
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
4 changes: 4 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,12 @@ Thumbs.db
/dist
/build


/outdb.sqlite3
db.sqlite3
/out"db.sqlite3"


/out

# Django-specific
Expand Down
106 changes: 81 additions & 25 deletions core/templates/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,46 @@
transform: translateY(-10px) scale(1.03);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.feature {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s forwards;
}

.feature-icon i {
font-size: 2rem;
color: #00e6ff;
}

.card.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s forwards;
animation-delay: 0.2s;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Responsive adjustments */
@media (max-width: 768px) {
.cards {
flex-direction: column;
gap: 1rem;
}
.feature {
flex-direction: column;
text-align: center;
}
}

</style>
<!-- About Header -->
Expand All @@ -93,34 +133,50 @@ <h1>About PeerPrep</h1>

<!-- About Content Sections -->
<section class="about-section">
<h2>Our Mission</h2>
<p>At PeerPrep, our mission is to empower open-source communities by giving project maintainers and contributors the tools they need to collaborate effectively.
We believe in making project management transparent, efficient, and engaging.</p>
</section>
<h2>Our Mission</h2>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-bullseye"></i>
</div>
<div class="feature-text">
<p>At PeerPrep, our mission is to empower open-source communities by giving project maintainers and contributors the tools they need to collaborate effectively.</p>
</div>
</div>
</section>

<section class="about-section">
<h2>Our Vision</h2>
<p>We envision a future where open-source development is seamless, where contributors feel valued, and where project maintainers
can focus on innovation instead of repetitive management tasks.</p>
</section>
<section class="about-section">
<h2>Our Vision</h2>
<div class="feature">
<div class="feature-icon">
<i class="fas fa-eye"></i>
</div>
<div class="feature-text">
<p>We envision a future where open-source development is seamless, contributors feel valued, and maintainers focus on innovation.</p>
</div>
</div>
</section>

<section class="about-section">
<h2>What We Offer</h2>
<div class="cards">
<div class="card">
<h3>Collaboration</h3>
<p>Streamlined dashboards for project admins and contributors to stay in sync.</p>
</div>
<div class="card">
<h3>Transparency</h3>
<p>Track contributions, pull requests, and issues with clear visibility.</p>
</div>
<div class="card">
<h3>Community</h3>
<p>Encourage growth and engagement within open-source projects.</p>
</div>
<section class="about-section">
<h2>What We Offer</h2>
<div class="cards">
<div class="card fade-in">
<i class="fas fa-users fa-2x"></i>
<h3>Collaboration</h3>
<p>Streamlined dashboards for admins and contributors to stay in sync.</p>
</div>
</section>
<div class="card fade-in">
<i class="fas fa-search fa-2x"></i>
<h3>Transparency</h3>
<p>Track contributions, pull requests, and issues with clear visibility.</p>
</div>
<div class="card fade-in">
<i class="fas fa-handshake fa-2x"></i>
<h3>Community</h3>
<p>Encourage growth and engagement within open-source projects.</p>
</div>
</div>
</section>


<section class="about-section">
<h2>Looking Ahead</h2>
Expand Down