init

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.prettier

@@ -0,0 +1,11 @@
+export default {
+    plugins: ["prettier-plugin-astro"],
+    overrides: [
+        {
+            files: "*.astro",
+            options: {
+                parser: "astro",
+            },
+        },
+    ],
+};

.src/styles/global.scss

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+    "recommendations": ["astro-build.astro-vscode"],
+    "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "prettier.documentSelectors": ["**/*.astro"],
+    "[astro]": {
+        "editor.defaultFormatter": "astro-build.astro-vscode"
+    }
+}

README.md

@@ -0,0 +1,29 @@
+# IEEE UCSD Website
+
+## Before we get started
+
+**Font**
+
+We use Open Sans as our font. You can read more about why we use it [here](https://brand-experience.ieee.org/whats-your-type/):
+
+**JS Framework**
+
+We use AstroJS in order to easily create blog posts and incorperate components from different frameworks, such as React and Vite.
+
+## Getting started
+
+To get start, clone our repo:
+
+```bash
+git clone https://github.com/ieeeucsd/ieeeucsd.org
+```
+
+and install the dependencies:
+
+```bash
+yarn install
+```
+
+## Contributing
+
+If you are not a part of IEEE but still want to contribute to the project, make sure you clone the repository and make a pull request. We will look over your code and if everything looks good, we will merge it with the main branch.

astro.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+import tailwind from "@astrojs/tailwind";
+
+import mdx from "@astrojs/mdx";
+
+// https://astro.build/config
+export default defineConfig({
+    integrations: [react(), tailwind(), mdx()],
+});

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": ".src/styles/global.scss",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/mdx": "^1.1.2",
+    "@astrojs/react": "^3.0.3",
+    "@astrojs/tailwind": "^5.0.2",
+    "@fontsource-variable/open-sans": "^5.0.16",
+    "@nextui-org/react": "^2.1.13",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^3.3.0",
+    "framer-motion": "^10.16.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "scss": "^0.2.4",
+    "tailwindcss": "^3.0.24"
+  },
+  "devDependencies": {
+    "daisyui": "^3.9.2",
+    "prettier": "^3.0.3",
+    "prettier-plugin-astro": "^0.12.0",
+    "sass": "^1.69.3"
+  }
+}

public/favicon.svg

@@ -0,0 +1,121 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.00 0.00 512.00 512.00">
+<path fill="#00679a" d="
+  M 512.00 253.08
+  L 512.00 256.51
+  C 510.94 266.81 501.78 270.59 494.56 275.75
+  Q 454.77 304.15 416.67 337.92
+  C 362.73 385.72 313.85 438.00 272.42 496.46
+  Q 269.81 500.15 268.32 501.89
+  C 262.35 508.86 253.44 510.95 245.73 506.16
+  C 241.99 503.83 238.41 499.38 235.70 495.56
+  Q 179.03 415.79 108.14 348.36
+  C 80.98 322.54 52.28 299.39 21.18 280.58
+  C 12.27 275.19 2.91 269.03 0.00 258.50
+  L 0.00 251.99
+  C 1.30 243.56 9.09 237.74 15.98 234.04
+  C 42.05 220.05 65.17 200.29 86.25 180.49
+  Q 157.52 113.51 220.46 38.68
+  C 226.38 31.64 231.52 24.15 236.05 16.77
+  C 239.39 11.31 244.78 4.62 251.41 3.58
+  C 260.00 2.22 265.06 5.27 271.19 12.31
+  C 276.03 17.86 280.56 25.49 284.89 31.01
+  C 326.56 84.17 374.75 138.21 426.55 185.22
+  C 450.40 206.86 475.68 226.45 503.98 241.99
+  Q 510.97 245.83 512.00 253.08
+  Z
+  M 248.20 442.83
+  C 259.21 448.11 268.20 442.33 277.02 436.32
+  Q 290.36 427.24 304.21 415.71
+  C 332.20 392.41 358.50 367.58 383.91 341.52
+  Q 404.94 319.96 423.54 296.25
+  Q 430.63 287.21 438.56 272.56
+  C 443.73 262.99 443.91 255.25 440.11 245.42
+  Q 437.94 239.83 436.28 236.96
+  Q 424.03 215.82 407.29 196.21
+  C 373.95 157.18 337.31 120.95 296.60 90.43
+  C 285.27 81.94 260.46 63.33 245.70 70.18
+  Q 232.06 76.51 216.08 89.32
+  Q 149.29 142.83 94.36 208.37
+  C 84.09 220.63 72.18 235.66 66.52 250.58
+  C 63.53 258.43 65.73 265.45 69.95 273.13
+  Q 77.83 287.49 88.71 300.52
+  C 111.03 327.24 134.79 351.27 159.80 374.84
+  Q 190.50 403.77 224.54 428.73
+  Q 235.34 436.65 248.20 442.83
+  Z"
+/>
+<path fill="#00679a" d="
+  M 430.32 265.06
+  Q 424.76 276.99 416.63 287.40
+  Q 396.84 312.75 374.35 335.71
+  C 343.73 366.96 311.41 397.88 276.18 423.92
+  Q 268.47 429.62 259.91 433.91
+  C 256.24 435.75 248.78 431.36 245.59 429.40
+  C 235.76 423.37 226.54 417.09 217.19 409.68
+  Q 158.49 363.12 108.64 307.11
+  Q 95.42 292.26 84.12 275.90
+  Q 79.98 269.91 77.08 263.25
+  C 75.45 259.52 75.58 256.66 77.27 252.76
+  C 83.13 239.28 94.32 225.21 104.33 213.40
+  Q 153.66 155.21 212.25 106.24
+  Q 226.26 94.53 241.61 84.65
+  C 246.95 81.21 252.01 78.19 257.73 80.00
+  C 269.78 83.83 281.58 92.46 291.61 100.15
+  C 333.00 131.90 371.47 169.66 404.47 210.04
+  C 414.20 221.94 424.55 235.52 430.38 249.82
+  Q 433.67 257.88 430.32 265.06
+  Z
+  M 264.50 201.90
+  A 0.33 0.33 0.0 0 1 264.82 201.56
+  L 286.81 201.11
+  A 0.33 0.33 0.0 0 0 287.11 200.65
+  L 253.17 120.76
+  A 0.33 0.33 0.0 0 0 252.55 120.79
+  L 226.07 200.75
+  A 0.33 0.33 0.0 0 0 226.38 201.18
+  L 243.55 201.56
+  A 0.33 0.33 0.0 0 1 243.87 201.90
+  L 241.41 278.19
+  A 0.33 0.33 0.0 0 0 241.74 278.53
+  L 266.41 278.52
+  A 0.33 0.33 0.0 0 0 266.74 278.18
+  L 264.50 201.90
+  Z
+  M 335.66 234.61
+  L 342.25 232.56
+  A 0.33 0.33 0.0 0 0 342.24 231.92
+  L 293.75 218.36
+  A 0.51 0.51 0.0 0 0 293.13 219.01
+  L 298.95 237.00
+  Q 299.15 237.62 299.81 237.62
+  Q 307.00 237.53 314.17 237.02
+  Q 316.35 236.86 318.14 237.74
+  C 325.16 241.15 337.76 249.72 336.39 258.66
+  C 334.58 270.50 315.64 276.25 305.74 278.68
+  C 278.19 285.44 248.07 287.92 221.00 282.26
+  C 211.26 280.23 198.59 275.61 190.12 269.27
+  C 166.10 251.30 208.87 236.30 219.81 232.25
+  Q 220.46 232.01 219.86 231.66
+  L 193.08 215.93
+  Q 192.68 215.69 192.24 215.84
+  C 178.12 220.45 137.57 235.18 141.49 255.53
+  C 144.61 271.72 175.28 282.91 188.62 287.22
+  Q 196.97 289.92 208.06 291.80
+  Q 240.31 297.29 275.74 295.98
+  Q 304.18 294.92 328.06 283.12
+  C 337.31 278.55 352.56 270.32 353.99 259.40
+  C 355.64 246.85 343.72 241.63 335.50 235.59
+  Q 334.61 234.93 335.66 234.61
+  Z
+  M 241.62 302.46
+  A 0.34 0.34 0.0 0 0 241.29 302.77
+  L 235.64 381.08
+  A 0.34 0.34 0.0 0 0 235.98 381.44
+  L 270.64 381.44
+  A 0.34 0.34 0.0 0 0 270.98 381.09
+  L 268.08 302.56
+  A 0.34 0.34 0.0 0 0 267.74 302.23
+  L 241.62 302.46
+  Z"
+/>
+</svg>

src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

src/components/global/Navbar.astro

@@ -0,0 +1,41 @@
+---
+import logo_with_text from '';
+---
+
+<style>
+    .grid-cols-custom {
+      grid-template-columns: 1fr auto 1fr; /* This makes the side columns take up equal space, regardless of content, while the center column takes the width of the content */
+    }
+  </style>
+  
+<nav class="mt-2">
+    <div class="hidden xl:grid grid-flow-col auto-cols-max justify-center items-center gap-4 h-32 grid-cols-custom">
+        <div class="flex justify-center space-x-12 sm:space-x-14 md:space-x-16 lg:space-x-18">
+            <!-- Left content here -->
+            <a href="/" class="text-2xl hover:scale-110 transition text-ieee-blue font-bold">Home</a>
+            <a href="/" class="text-2xl text-ieee-blue font-bold">About Us</a>
+            <a href="/" class="text-2xl text-ieee-blue font-bold">Project Space</a>
+            <!-- You can add more items here, and they will be centered -->
+        </div>
+
+        <!-- Centered image -->
+        <div class="flex justify-center">
+            <img src="/icons/logo_with_text.svg" alt="description of image" class="h-24" />
+        </div>
+
+        <div class="flex justify-center space-x-4 sm:space-x-6 md:space-x-8 lg:space-x-12">
+            <!-- Right content here -->
+            <a href="/" class="text-2xl text-ieee-blue font-bold">Events</a>
+            <a href="/" class="text-2xl text-ieee-blue font-bold">Projects</a>
+            <a href="/" class="text-2xl text-ieee-blue font-bold">Contact Us</a>
+            <!-- You can add more items here, and they will be centered -->
+        </div>
+    </div>
+    <div class="grid xl:hidden items-center h-32" >
+        <div class="flex justify-left">
+            <img src="/icons/logo_with_full_text.svg" alt="description of image" class="h-24 scale-50" />
+        </div>
+    </div>
+</nav>
+
+  

src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+    title: string;
+}
+
+const { title } = Astro.props;
+
+import "../styles/global.scss";
+import Navbar from "../components/global/Navbar.astro";
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="description" content="Astro description" />
+        <meta name="viewport" content="width=device-width" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{title}</title>
+    </head>
+    <Navbar />
+    <body>
+        <slot />
+    </body>
+</html>

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+ 
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

src/pages/index.astro

@@ -0,0 +1,6 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Card from "../components/Card.astro";
+---
+
+<Layout title="Home" />

src/styles/global.scss

@@ -0,0 +1,27 @@
+:root {
+    --accent: 136, 58, 234;
+    --accent-light: 224, 204, 250;
+    --accent-dark: 49, 10, 101;
+    --accent-gradient: linear-gradient(
+        45deg,
+        rgb(var(--accent)),
+        rgb(var(--accent-light)) 30%,
+        white 60%
+    );
+}
+html {
+    font-family: "Open Sans Variable", sans-serif;
+    background: #ffffff;
+    background-size: 224px;
+}
+code {
+    font-family:
+        Menlo,
+        Monaco,
+        Lucida Console,
+        Liberation Mono,
+        DejaVu Sans Mono,
+        Bitstream Vera Sans Mono,
+        Courier New,
+        monospace;
+}

tailwind.config.js

@@ -0,0 +1,76 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}

tailwind.config.mjs

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+    content: [
+        "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
+        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                ieee: {
+                    blue: "#00629B",
+                },
+            },
+        },
+    },
+    darkMode: "class",
+
+    plugins: [require("daisyui"), nextui()],
+
+    daisyui: {
+        themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+        darkTheme: "light", // name of one of the included themes for dark mode
+        base: true, // applies background color and foreground color for root element by default
+        styled: true, // include daisyUI colors and design decisions for all components
+        utils: true, // adds responsive and modifier utility classes
+        rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS.
+        prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+        logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+    },
+};

tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "astro/tsconfigs/strict",
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        "jsx": "react-jsx",
+        "jsxImportSource": "react"
+    }
+}