Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'shing/formatting' (#2) from shing/formatting into main

Browse source 
Reviewed-on: Webmaster/dev-ieeeucsd-org#2
This commit is contained in:
Shing Hung 2024-12-24 06:09:43 +00:00
commit 84e5976541
11 changed files with 7669 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7535
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -20,8 +20,10 @@
"astro-expressive-code": "^0.38.3",
"astro-icon": "^1.1.4",
"motion": "^11.15.0",
"next": "^15.1.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"tailwindcss": "^3.4.16"
},
"devDependencies": {

BIN
public/landing.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 KiB

30
src/components/core/Navbar.astro
View file

@ -4,31 +4,30 @@ import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg
import pages from "../../data/pages.json";
---
<div class="flex items-center">
<div
class="flex flex-col border-white-500 shadow-md shadow-ieee_blue bg-nav_bg w-[98%] h-full mt-3 mx-auto rounded-[4rem] py-3"
<div class="md:w-full w-fit fixed z-10">
<div class="flex justify-between items-center bg-black/40 m-[1%] py-[0.8%] px-[1.5%] md:rounded-full md:border-[0.1vw]">
<a
href="/"
class="hover:opacity-60 duration-300 hidden md:flex"
>
<div class="flex justify-between items-center mx-6">
<div class="flex min-h-[1rem] max-h-[3rem]">
<Image
class="w-[15vw]"
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
width={300}
height={300}
/>
</div>
</a>
<!-- Desktop Navigation -->
<div class="hidden xl:flex gap-6">
<div class="hidden md:flex md:w-3/5 md:justify-between">
{
pages.map((page) => (
<a
href={page.path}
class={`uppercase font-bold text-xl px-2 py-2 rounded-[3rem] transition-colors duration-200
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw]
${
page.name === "Online Store"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white border-white hover:text-gray-300"
? "bg-ieee-yellow text-black hover:opacity-70"
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
}`}
>
{page.name}
@ -40,7 +39,7 @@ import pages from "../../data/pages.json";
<!-- Mobile Hamburger/Close Button -->
<button
id="menu-btn"
class="xl:hidden text-white p-2 focus:outline-none relative z-[60] scale-150"
class="md:hidden text-white p-2 flex justify-center items-center focus:outline-none relative z-[60] scale-150"
aria-label="Toggle menu"
>
<!-- Hamburger Icon -->
@ -71,14 +70,13 @@ import pages from "../../data/pages.json";
</svg>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div
id="mobile-menu"
class="fixed inset-0 bg-nav_bg bg-opacity-95 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
>
<div class="flex flex-col items-center justify-center h-full space-y-6">
<div class="flex flex-col items-center h-[70vh] justify-evenly bg-black">
{
pages.map((page) => (
<a

34
src/components/main_page/Landing.astro Normal file
View file

@ -0,0 +1,34 @@
---
import { Image } from "astro:assets";
import Link from "next/link";
import { landing } from "../../data/landing";
import landingimg from "../../../public/landing.png"
import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
---
<div class="w-full flex justify-between pt-[12vh]">
<div class=" pt-[7%] bg-gradient-to-t to-ieee-blue-100/30 p-[5vw] via-ieee-black from-ieee-black w-[53%] h-[85vh] border-white/70 border-[0.1vw] rounded-[3vw]">
<p class=" text-ieee-yellow font-bold text-[2.2vw] mb-[3%]">UC San Diego IEEE</p>
<p class="font-bold text-[2.8vw] text-white mb-[10%]">Join one of the largest IEEE student branch in the US!</p>
<p class="text-white font-light text-[1.3vw]">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
<div class="flex justify-end w-full mt-[15vh]">
<div class="text-white text-[2.5vw] w-1/2 flex justify-between">
<Link href="https://discord.gg/XxfjqZSjca" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
<FaDiscord />
</Link>
<Link href="https://www.facebook.com/ieeeucsd" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
<FaFacebook />
</Link>
<Link href="https://www.instagram.com/ieee.ucsd" target="_blank" className="border-[0.15vw] rounded-full p-[5%] shadow-glow hover:scale-110 duration-300">
<FaInstagram />
</Link>
</div>
</div>
</div>
<div class="w-[46%] h-[85vh] border-white/70 border-[0.1vw] rounded-[3vw] object-contain bg-gradient-to-b to-ieee-blue-100/60 from-ieee-black">
<Image src={landingimg} alt="circuit"/>
</div>
</div>

33
src/components/main_page/SplitCards.astro
View file

@ -1,33 +0,0 @@
<div class="w-[100%] mx-auto py-8">
<div class="grid lg:grid-cols-2 gap-2 h-[40rem]">
<div
class="bg-card_bg rounded-[3rem] relative overflow-hidden text-center lg:text-left lg:px-12"
>
<div
class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-card_gradient/10 to-transparent"
>
</div>
<div
class="px-6 pt-24 lg:pt-32 relative z-10 text-ieee_gold_text font-bold text-[min(4vw,1.5rem)]"
>
UC San Diego IEEE
</div>
<div
class="px-6 pt-2 relative z-10 text-card_text font-bold text-[min(6vw,2.5rem)]"
>
Join the 2nd largest IEEE student branch in the US!
</div>
<div
class="px-6 pt-2 relative z-10 text-card_text text-[min(3vw,1.2rem)]"
>
Sint occaecat laboris do cupidatat cillum laborum sint et sint
velit fugiat. Velit do et irure laboris cillum adipisicing.
Nulla dolor esse ea do laboris aliquip ullamco.
</div>
</div>
<div class="bg-card_bg rounded-[3rem]">
<div class="p-6">2</div>
</div>
</div>
</div>

8
src/components/projects/ProjectSection.astro
View file

@ -24,8 +24,8 @@ const { width = "100%" } = Astro.props;
alt={`${title} Project`}
class="w-full h-full object-cover rounded-lg transition-transform duration-500 ease-in-out md:group-hover:scale-110"
/>
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-project_card_gradient/60 rounded-lg" />
<div class="absolute bottom-0 left-0 p-6 text-project_card_text z-10 w-full transition-transform duration-300 md:[.expanded_&]:translate-y-[-30px]">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 rounded-lg" />
<div class="absolute bottom-0 left-0 p-6 text-white z-10 w-full transition-transform duration-300 md:[.expanded_&]:translate-y-[-30px]">
<h3 class="text-xl font-bold mb-2 transition-transform duration-300">
{title}
</h3>
@ -34,12 +34,12 @@ const { width = "100%" } = Astro.props;
</p>
</div>
<div
class="absolute bottom-2 right-2 bg-project_button_bg rounded-full p-2 shadow
class="absolute bottom-2 right-2 bg-white rounded-full p-2 shadow
md:opacity-0 md:[.expanded_&]:opacity-100 transition-opacity duration-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-project_button_color"
class="h-6 w-6 text-black"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"

16
src/data/landing.js Normal file
View file

@ -0,0 +1,16 @@
import { FaDiscord, FaInstagram, FaFacebook} from "react-icons/fa";
export const landing = [
{
"icon": <FaDiscord />,
"link": "https://discord.gg/XxfjqZSjca"
},
{
"icon": <FaFacebook />,
"link": "https://www.facebook.com/ieeeucsd"
},
{
"icon": <FaInstagram />,
"link": "https://www.instagram.com/ieee.ucsd"
}
];

8
src/layouts/Layout.astro
View file

@ -12,13 +12,9 @@ import Navbar from "../components/core/Navbar.astro";
<title>Astro Basics</title>
</head>
<body class="bg-bg_primary relative">
<body class="bg-ieee-black relative flex flex-col items-center">
<Navbar />
<div
class="fixed top-0 left-0 w-full h-full bg-gradient-radial from-top_gradient/80 to-transparent pointer-events-none z-[-10]"
>
</div>
<main class="w-[98%] mx-auto">
<main class="w-[95%]">
<slot />
</main>
</body>

4
src/pages/index.astro
View file

@ -1,8 +1,8 @@
---
import Layout from "../layouts/Layout.astro";
import SplitCards from "../components/main_page/SplitCards.astro";
import Landing from "../components/main_page/Landing.astro";
---
<Layout>
<SplitCards />
<Landing />
</Layout>

28
tailwind.config.mjs
View file

@ -3,30 +3,18 @@ export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
boxShadow: {
'glow': '0 0 0.5vw 0.1vw rgba(255, 255, 255, 0.3), 0 0 1vw 0.5vw rgba(255, 255, 255, 0.1)',
},
colors: {
ieee_online_store_bg: "#f3c135",
ieee_blue: "#00629b",
ieee_gold_text: "#ffbc00",
// Navigation colors
nav_bg: "#090d19",
nav_text: "#eaf7ff",
// Layout colors
bg_primary: "#0a0e1b",
top_gradient: "#1c284e",
// Main Page Card colors
card_bg: "#0d1324",
card_text: "#eaf7ff",
card_gradient: "#FFFFFF",
ieee: {
yellow: "#F3C135",
black: "#0A0E1A",
"blue-100": "#88BFEC",
},
// Project Page Card colors
project_card_bg: "#0d1324",
project_card_text: "#FFFFFF",
project_card_gradient: "#000000",
project_button_bg: "#FFFFFF",
project_button_color: "#000000",
},
backgroundImage: {
"gradient-radial":