/colorstackumd-website

the official website for the University of Maryland ColorStack chapter

Primary LanguageCSS

ColorStack UMD Website

Inspiration

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
├── public/
│   └── favicon.svg
│   ├── fonts/
│   ├── images\
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── helpers/
│   │   └── util.js
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:4321
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro -- --help Get help using the Astro CLI

👀 Want to learn more?

Feel free to check our documentation.

Okay, let's structure your ColorStack at UMD website based on the content you provided. Remember, this is a first iteration focused on getting the basic structure and information up.

Basic Website Structure:

  • Homepage:
    • Hero Section
    • About Section
    • Benefits Section
    • Upcoming Events (3)
  • Events Page: (Content to be added later)

Homepage Content Breakdown

  1. Hero Section:
  • Title: "Welcome to ColorStack at UMD"
  • Subtitle/Description: "A community of Black and Latinx students who are passionate about technology and diversity."
  • Call-to-Action Button: "Become a Member" (Link this to your membership form or process, if you have one set up)
  • Visuals: Consider a large, impactful image representing diversity or technology, or a collage of images from past events.
  1. About Section:
  • Heading: "What is ColorStack at UMD?"
  • Paragraph 1: "We are a club at the University of Maryland whose goal is to increase the number of black and latinx students at UMD who get degreed and hired."
  • Paragraph 2: "Our parent/national organization, ColorStack has over 12,000+ students from Universities all over North America (CMU, AYU, NYU, WAU..) and has worked with top tech companies (Meta, Duolingo, Atlassian..) to recruit underrepresented students in tech. We plan to bring those ideas to UMD."
  • Paragraph 3: "Our strong suit is technology, but we welcome all majors as technology plays a role in all industries."
  1. Benefits Section:
  • Heading: "Benefits of Joining ColorStack"
  • Use Columns or Cards for each benefit
    • Community: "Make friends with ColorStack members through social activities" (Consider adding an image of people socializing)
    • Events: "Attend monthly workshops, webinars, and coaching sessions from industry leaders" (Image of a workshop or presentation)

Events Page (Placeholder for now):

  • Heading: "Upcoming Events"