Official website for PhilaCon Valley - Philadelphia's tech community by us, for us.
Live Site: philaconvalley.com Events: lu.ma/philaconvalley Contact: waskar@philaconvalley.com Support: Open Collective
🌟 This is an open source project! We welcome contributions from everyone. Check out our Contributing Guide to get started.
PhilaCon Valley is a community-driven tech organization centering Black, Brown, LGBTQIA+, and underrepresented folks in tech. We're building the Philadelphia tech hub we want to see through:
- Hands-on Collab Labs: Build real projects together through pair programming
- Workshops: Learn web dev, Git, APIs, and more
- Career Support: Resume reviews, interview prep, job connections
- Open Source Projects: Contribute to community tools and platforms
Mission: To make Philly the tech hub it's meant to be: by us, for us.
This website is built with modern, performant, and volunteer-friendly technologies:
- Astro 4.x: Static site generator for lightning-fast performance
- Tailwind CSS: Utility-first CSS framework
- Alpine.js 3.x: Lightweight JavaScript for interactivity
- TypeScript: Type-safe development
- Vercel: Deployment and hosting (auto-deploy on push)
- Fast: Astro ships minimal JavaScript, making pages load instantly
- Modern: Tailwind provides beautiful, responsive design out of the box
- Volunteer-Friendly: Easy to learn and contribute, even for beginners
- Content-First: Projects and resources are simple Markdown files
- Zero Config Deployment: Push to main, auto-deploys to Vercel
- Node.js 18+ and npm
- Git
# Clone the repository
git clone https://github.com/philaconvalley/website.git
cd website
# Install dependencies
npm install
# Start the development server
npm run devVisit http://localhost:4321 to see the site running locally!
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run astro # Run Astro CLI commandswebsite/
├── src/
│ ├── components/ # Reusable Astro components
│ │ ├── Header.astro # Site navigation
│ │ ├── Footer.astro # Site footer
│ │ ├── Hero.astro # Homepage hero section
│ │ ├── Button.astro # Reusable button component
│ │ ├── EventCard.astro # Event display card
│ │ ├── ProjectCard.astro # Project display card
│ │ ├── ResourceCard.astro # Resource display card
│ │ └── SEO.astro # SEO meta tags
│ ├── content/ # Content collections (Markdown)
│ │ ├── config.ts # Content collection schemas
│ │ ├── projects/ # Community project write-ups
│ │ └── resources/ # Learning resources & tutorials
│ ├── layouts/ # Page layouts
│ │ └── BaseLayout.astro # Base HTML structure
│ ├── pages/ # Routes (file-based routing)
│ │ ├── index.astro # Homepage
│ │ ├── about.astro # About page
│ │ ├── events.astro # Events page
│ │ ├── join.astro # Join/get involved page
│ │ ├── support.astro # Support/donate page
│ │ ├── contact.astro # Contact form
│ │ ├── projects/
│ │ │ ├── index.astro # Projects listing
│ │ │ └── [slug].astro # Individual project pages
│ │ └── resources/
│ │ ├── index.astro # Resources listing
│ │ └── [slug].astro # Individual resource pages
│ └── styles/
│ └── global.css # Global styles and Tailwind
├── public/ # Static assets
│ ├── images/ # Images (add your images here)
│ └── favicon.svg # Site favicon
├── astro.config.mjs # Astro configuration
├── tailwind.config.mjs # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── package.json # Dependencies and scripts
├── README.md # This file
├── CONTRIBUTING.md # Contribution guidelines
└── CODE_OF_CONDUCT.md # Community code of conduct
We welcome contributions from everyone! Whether you're fixing a typo, adding a feature, or creating content, your help makes PhilaCon Valley better.
- Fix bugs or improve existing features
- Add new projects to the showcase
- Create learning resources (tutorials, guides)
- Improve documentation
- Enhance accessibility or performance
- Design improvements
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature-name - Make your changes
- Test locally:
npm run dev - Commit your changes:
git commit -m "Add your feature" - Push to your fork:
git push origin feature/your-feature-name - Open a Pull Request
For detailed guidelines, see CONTRIBUTING.md.
Create a new Markdown file in src/content/projects/:
---
title: "My Awesome Project"
description: "Brief description of what this project does"
techStack: ["React", "Node.js", "PostgreSQL"]
githubUrl: "https://github.com/username/project"
liveUrl: "https://project.com"
contributors: ["Your Name", "Other Contributors"]
status: "active" # or "completed"
date: 2025-10-06
---
## About This Project
Write a detailed description of your project here. Include:
- What problem it solves
- How it works
- What you learned
- How others can contribute
## Features
- Feature 1
- Feature 2
## Getting Started
Instructions for running the project locally...Create a new Markdown file in src/content/resources/:
---
title: "How to Build a REST API"
description: "Learn to build a RESTful API with Node.js and Express"
category: "Tutorial" # Workshop, Tutorial, Career, or Tool
level: "Intermediate" # Beginner, Intermediate, or Advanced
author: "Your Name"
date: 2025-10-06
tags: ["api", "nodejs", "backend"]
---
## Introduction
Your tutorial content here...- Push your code to GitHub
- Go to vercel.com
- Import your GitHub repository
- Vercel will automatically detect it's an Astro project
- Click "Deploy"
- Done! Your site is live and will auto-deploy on every push to main
If you're using Formspree for the contact form, update the form action in src/pages/contact.astro:
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">Get your Formspree form ID from formspree.io.
- Fully responsive design (mobile, tablet, desktop)
- SEO optimized with meta tags and Open Graph support
- Accessible (WCAG AA compliant)
- Event calendar integration (Luma)
- Contact form (Formspree)
- Open Collective donation integration
- Project showcase with filtering
- Resource library with search
- Fast performance (Lighthouse 90+ scores)
- Content managed via Markdown files
- Auto-deployment to Vercel
- Modern gradient designs
- Philadelphia-inspired color palette
- Clean, readable typography (Inter + Poppins)
- Smooth animations and transitions
- Card-based layouts
- Sticky navigation
This site is optimized for speed:
- Static generation: Pages are pre-rendered at build time
- Minimal JavaScript: Only Alpine.js for interactive features
- Optimized images: Use WebP format and lazy loading
- Fast fonts: Google Fonts loaded asynchronously
- Tailwind CSS: Purged unused styles in production
Target metrics:
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3.5s
- Lighthouse Score: 90+ across all categories
We're committed to making this site accessible to everyone:
- Semantic HTML structure
- Proper heading hierarchy
- Alt text for all images
- Keyboard navigation support
- Focus visible states
- ARIA labels where needed
- Color contrast ratios meet WCAG AA standards
If you find an accessibility issue, please open an issue or contact us.
- Events: lu.ma/philaconvalley
- Slack: Request an invite via contact form
- Instagram: @phlconvalley
- LinkedIn: PhilaCon Valley
- Twitter/X: @PhlConValley
- GitHub: github.com/philaconvalley
We are committed to providing a welcoming and inclusive environment. Please read our Code of Conduct before contributing.
Help us keep PhilaCon Valley free and accessible:
- Donate: opencollective.com/philacon-valley
- Sponsor an Event: Contact us
- Lead a Workshop: Share your expertise
- Provide Venue Space: Help us host events
This project is licensed under the MIT License - see the LICENSE file for details.
- Email: waskar@philaconvalley.com
- Website: philaconvalley.com/contact
- Issues: GitHub Issues
Built with love in Philadelphia
Making Philly the tech hub it's meant to be: by us, for us.
