Skip to content

Add Projects, Team Members, and Teams sections to Home page with comprehensive UI/UX improvements #14

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
rezwana-karim merged 5 commits into from
Sep 29, 2025
Merged

Add Projects, Team Members, and Teams sections to Home page with comprehensive UI/UX improvements #14

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
5bb6018
Initial plan
Copilot Sep 29, 2025
43f9d8b
Initial analysis and plan for adding Projects and Teams sections
Copilot Sep 29, 2025
d21f383
Add Projects and Teams sections to Home page
Copilot Sep 29, 2025
4e4bf71
Update Teams section with profile pictures for @CodeStorm-Hub/dev mem…
Copilot Sep 29, 2025
aa4156a
Add comprehensive Team Members section and improve UI/UX
Copilot 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
10 changes: 0 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

152 changes: 83 additions & 69 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,80 +4,94 @@ import { Typography } from "@/components/ui/typography"
import { Grid } from "@/components/ui/grid"
import { Stack } from "@/components/ui/stack"
import { ArrowRightIcon, GitHubLogoIcon } from "@radix-ui/react-icons"
import ProjectsSection from "@/components/home/projects-section"
import TeamMembersSection from "@/components/home/team-members-section"
import TeamsSection from "@/components/home/teams-section"

export default function Home() {
return (
<div className="bg-gradient-to-br from-background to-muted">
{/* Hero Section */}
<Container className="py-16 sm:py-24">
<Stack align="center" gap={8} className="text-center">
{/* Logo/Brand */}
<Stack gap={4} align="center">
<Typography variant="h1">
<span className="text-foreground">Code</span>
<span className="text-primary">Storm</span>
<span className="text-foreground"> Hub</span>
</Typography>
<Typography variant="lead" className="max-w-3xl">
A vibrant community of open source enthusiasts, researchers, and creators.
We collaborate on powerful open-source solutions.
</Typography>
</Stack>
<>
<div className="bg-gradient-to-br from-background to-muted">
{/* Hero Section */}
<Container className="py-16 sm:py-24">
<Stack align="center" gap={8} className="text-center">
{/* Logo/Brand */}
<Stack gap={4} align="center">
<Typography variant="h1">
<span className="text-foreground">Code</span>
<span className="text-primary">Storm</span>
<span className="text-foreground"> Hub</span>
</Typography>
<Typography variant="lead" className="max-w-3xl">
A vibrant community of open source enthusiasts, researchers, and creators.
We collaborate on powerful open-source solutions.
</Typography>
</Stack>

{/* CTA Buttons */}
<Stack direction="row" gap={4} className="flex-col sm:flex-row max-w-md w-full">
<Button size="lg" className="w-full sm:w-auto" asChild>
<a href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
<GitHubLogoIcon className="mr-2 h-4 w-4" />
View Projects
<ArrowRightIcon className="ml-2 h-4 w-4" />
</a>
</Button>
<Button variant="outline" size="lg" className="w-full sm:w-auto">
Join Community
</Button>
</Stack>

{/* CTA Buttons */}
<Stack direction="row" gap={4} className="flex-col sm:flex-row max-w-md w-full">
<Button size="lg" className="w-full sm:w-auto" asChild>
<a href="https://github.com/CodeStorm-Hub" target="_blank" rel="noopener noreferrer">
<GitHubLogoIcon className="mr-2 h-4 w-4" />
View Projects
<ArrowRightIcon className="ml-2 h-4 w-4" />
</a>
</Button>
<Button variant="outline" size="lg" className="w-full sm:w-auto">
Join Community
</Button>
{/* Features Grid */}
<div className="mt-16 w-full max-w-5xl">
<Grid cols={3} gap={8}>
<Stack align="center" gap={3} className="text-center">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<GitHubLogoIcon className="h-6 w-6 text-primary" />
</div>
<Typography variant="h5">Open Source</Typography>
<Typography variant="muted">
Building transparent, accessible solutions for the community
</Typography>
</Stack>

<Stack align="center" gap={3} className="text-center">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<Typography variant="h5">Community</Typography>
<Typography variant="muted">
Connecting passionate developers and researchers worldwide
</Typography>
</Stack>

<Stack align="center" gap={3} className="text-center">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<Typography variant="h5">Innovation</Typography>
<Typography variant="muted">
Pushing boundaries with cutting-edge research and development
</Typography>
</Stack>
</Grid>
</div>
</Stack>
</Container>
</div>

{/* Projects Section */}
<ProjectsSection className="bg-background" />

{/* Team Members Section */}
<TeamMembersSection className="bg-muted/20" />

{/* Features Grid */}
<div className="mt-16 w-full max-w-5xl">
<Grid cols={3} gap={8}>
<Stack align="center" gap={3} className="text-center">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<GitHubLogoIcon className="h-6 w-6 text-primary" />
</div>
<Typography variant="h5">Open Source</Typography>
<Typography variant="muted">
Building transparent, accessible solutions for the community
</Typography>
</Stack>

<Stack align="center" gap={3} className="text-center">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<Typography variant="h5">Community</Typography>
<Typography variant="muted">
Connecting passionate developers and researchers worldwide
</Typography>
</Stack>

<Stack align="center" gap={3} className="text-center">
<div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
<svg className="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<Typography variant="h5">Innovation</Typography>
<Typography variant="muted">
Pushing boundaries with cutting-edge research and development
</Typography>
</Stack>
</Grid>
</div>
</Stack>
</Container>
</div>
{/* Teams Section */}
<TeamsSection className="bg-background" />
</>
)
}
60 changes: 54 additions & 6 deletions src/app/team/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,62 @@ export const metadata: Metadata = {
}

const teamMembers = [
{
name: "Alex Chen",
role: "Lead Engineer & Founder",
bio: "Passionate about building scalable systems and fostering open source communities. Leading the technical direction of CodeStorm Hub with expertise in full-stack development and cloud architecture.",
avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face",
github: "https://github.com/alexchen-dev",
linkedin: "https://linkedin.com/in/alexchen-dev",
},
{
name: "Dr. Priya Patel",
role: "Research Lead",
bio: "PhD in Computer Science with expertise in machine learning algorithms. Driving research initiatives and ML infrastructure development across multiple open source projects.",
avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face",
github: "https://github.com/priyapatel-research",
linkedin: "https://linkedin.com/in/priya-patel-ai",
},
{
name: "Sarah Kim",
role: "DevOps Engineer",
bio: "Expert in cloud infrastructure and CI/CD pipelines. Ensuring reliable deployments and scalable architecture for all CodeStorm Hub projects with focus on automation.",
avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face",
github: "https://github.com/sarahkim-dev",
linkedin: "https://linkedin.com/in/sarah-kim-devops",
},
{
name: "Marcus Johnson",
role: "Security Engineer",
bio: "Cybersecurity specialist focused on secure coding practices and vulnerability assessment. Protecting our community and codebases with comprehensive security audits.",
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face",
github: "https://github.com/marcusj-security",
linkedin: "https://linkedin.com/in/marcus-johnson-security",
},
{
name: "Taylor Morgan",
role: "UX Designer",
bio: "User experience designer with a passion for accessible and inclusive design. Creating intuitive interfaces that serve our diverse community with focus on usability research.",
avatar: "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?w=150&h=150&fit=crop&crop=face",
github: "https://github.com/taylormorgan-design",
linkedin: "https://linkedin.com/in/taylor-morgan-ux",
},
{
name: "James Liu",
role: "Frontend Developer",
bio: "Frontend specialist with expertise in modern React patterns and web performance optimization. Building fast, accessible user interfaces for open source projects.",
avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef?w=150&h=150&fit=crop&crop=face",
github: "https://github.com/jamesliu-frontend",
linkedin: "https://linkedin.com/in/james-liu-frontend",
},
{
name: "Community Contributors",
role: "Open Source Enthusiasts",
bio: "Our team is made up of passionate contributors from around the world who believe in the power of open source collaboration.",
bio: "Our extended team includes passionate contributors from around the world who believe in the power of open source collaboration and continuously contribute to our projects.",
avatar: "https://github.com/CodeStorm-Hub.png",
github: "https://github.com/CodeStorm-Hub",
linkedin: null,
},
// Add more team members as they join
]

export default function TeamPage() {
Expand All @@ -43,22 +90,23 @@ export default function TeamPage() {
{/* Team Members */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{teamMembers.map((member, index) => (
<Card key={index} className="text-center">
<Card key={index} className="text-center h-full">
<CardHeader className="pb-4">
<div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted">
<div className="w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden bg-muted border-2 border-primary/20">
<Image
src={member.avatar}
alt={`${member.name} avatar`}
width={96}
height={96}
className="w-full h-full object-cover"
unoptimized={true}
Copy link

Copilot AI Sep 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The unoptimized={true} prop disables Next.js image optimization, which impacts performance. Consider removing this prop to enable automatic optimization, or provide a specific reason why optimization needs to be disabled.

Suggested change
unoptimized={true}

Copilot uses AI. Check for mistakes.
/>
</div>
<CardTitle className="text-lg">{member.name}</CardTitle>
<CardDescription>{member.role}</CardDescription>
<CardDescription className="font-medium text-primary">{member.role}</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<p className="text-sm text-muted-foreground">{member.bio}</p>
<p className="text-sm text-muted-foreground leading-relaxed">{member.bio}</p>
<div className="flex justify-center gap-2">
{member.github && (
<Button variant="outline" size="sm" asChild>
Expand Down
Loading