From 5a914bcbcb0e30e6047615a01c7e45ec76b0a10d Mon Sep 17 00:00:00 2001 From: joshua-demo Date: Tue, 1 Jul 2025 18:58:34 -0700 Subject: [PATCH] initial commit --- src/Pages/About/About.js | 311 ++++++++++++++++++++++++-------- tailwind.config.js | 1 + test/frontend/AboutPage.test.js | 72 ++++++-- 3 files changed, 288 insertions(+), 96 deletions(-) diff --git a/src/Pages/About/About.js b/src/Pages/About/About.js index 12c73f491..756eceed2 100644 --- a/src/Pages/About/About.js +++ b/src/Pages/About/About.js @@ -1,86 +1,239 @@ import React from 'react'; export default function AboutPage() { + const scrollToSection = (id) => { + document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); + }; + return ( -
-

What Happens at SCE

-
- -
-

Introduction

-

- The Software and Computer Engineering Society is a student-run club at San Jose State that aims to provide - students with a sense of community, industry-relevant experience, and mentorship. -

-
- -
-

Location

-

- We are located in the second floor of the Engineering Building, room 294. When the school semester is in session, our hours are: -

- - 
-          Monday - Thursday: 10:00 AM - 5:00 PM
-          


-          Friday:            10:00 AM - 2:00 PM
-
- -

- During open hours, the room is open to the public. Outside of hours, SCE members and officers may access the room with a numerical door code. -

-
- -
-

Becoming an SCE Member

-

Membership is limited to San Jose State students. Membership duration is based on semesters and require a fee:

- 
-          Single semester: $20
-          


-          Two semesters:   $30
-
-

- The membership fee must be paid in the SCE room. -

-

- Benefits include after-hours room access, free paper printing, free 3D printing, company tours, and a free T-shirt. -

-
- -
-

Development Team

-

- The development team works on projects including full stack, distributed systems, site reliability, networking, and more. - Members often land top internships and job offers through their experience and receive mentorship from SCE alumni. -

-
- -
-

Summer Internship

-

- Every summer, SCE runs a remote internship program where students design, implement, and maintain large-scale projects. -

-

- The internship begins in early June and runs for 10 weeks. We host in-person game nights, and at the end, interns present - their projects to alumni and faculty. -

-

Details and important dates are announced on our Discord as June approaches.

-
- -
-

Discord

-

- Join us using the link below. We encourage new users to ask questions in our discussion channels! -

-

- - https://sce.sjsu.edu/s/discord - -
- - sce collage +
+
+ {/* Main Content */} +
+
+

What Happens at SCE

+
+

+ The Software and Computer Engineering Society is a student-run club at San Jose State that aims to provide + students with a sense of community, industry-relevant experience, and mentorship. +

+
+ +
+

Introduction

+
+

+ SCE is more than just a club—we're a community of passionate students building the future of technology. + Our mission is to bridge the gap between academic learning and industry experience. +

+

What we offer:

+
    +
  • • Hands-on project experience with real-world applications
    • +
  • • Mentorship from industry professionals and alumni
    • +
  • • Networking opportunities with tech companies
    • +
  • • Collaborative workspace and community
    • +
  • • Professional development workshops
    • +
+
+
+ +
+

Location & Hours

+
+

+ Visit us at the Engineering Building, second floor, room 294. Our space is designed for collaboration, + learning, and innovation. +

+ +
+

Open Hours (During Semester)

+
+
+ Monday - Thursday: + 10:00 AM - 5:00 PM +
+
+ Friday: + 10:00 AM - 2:00 PM +
+
+
+ +

+ During open hours, our room is accessible to all students. SCE members enjoy 24/7 access with a + personalized door code for after-hours collaboration and study sessions. +

+
+
+ +
+

Becoming an SCE Member

+
+

+ Membership is exclusive to San Jose State students and offers incredible value for your academic + and professional journey. +

+ +
+

Membership Pricing

+
+
+ Single Semester: + $20 +
+
+ Two Semesters: + $30 +
+
+

Payment must be made in person at the SCE room.

+
+ +

Member Benefits

+
    +
  • • 24/7 room access with personal door code
    • +
  • • Unlimited free paper printing
    • +
  • • Free 3D printing for personal and academic projects
    • +
  • • Exclusive company tours and networking events
    • +
  • • Complimentary SCE t-shirt
    • +
  • • Priority access to workshops and events
    • +
  • • Access to development team opportunities
    • +
+
+
+ +
+

Development Team

+
+

+ Our development team is where students gain real-world experience working on production systems + used by thousands of students and faculty. +

+ +

What You'll Work On

+
    +
  • • Full-stack web applications
    • +
  • • Distributed systems and microservices
    • +
  • • Site reliability engineering
    • +
  • • Networking and infrastructure
    • +
  • • Mobile applications
    • +
  • • DevOps and cloud platforms
    • +
+ +

+ Many development team members secure prestigious internships at top tech companies. Our alumni + network provides ongoing mentorship and career guidance throughout your journey. +

+
+
+ +
+

Summer Internship Program

+
+

+ Each summer, we run an intensive 10-week remote internship program where students tackle + large-scale, impactful projects. +

+ +
+

Program Details

+
    +
  • • Duration: 10 weeks starting early June
    • +
  • • Format: Remote work with weekly check-ins
    • +
  • • Projects: Design, implement, and maintain production systems
    • +
  • • Networking: In-person game nights and social events
    • +
  • • Showcase: Final presentations to alumni and faculty
    • +
+
+ +

+ Application details and important dates are announced on our Discord community as June approaches. + This program is highly competitive and provides unparalleled hands-on experience. +

+
+
+ +
+

Join Our Community

+
+

+ Connect with fellow students, ask questions, and stay updated on events through our active Discord community. +

+ +
+

Ready to join? Click below to access our Discord server:

+ + Join SCE Discord + +
+ +

+ New to our community? Don't hesitate to introduce yourself and ask questions in our discussion channels! +

+
+
+ +
+ SCE community collage showing students collaborating and working on projects +
+
+ + {/* Table of Contents - Hidden on mobile/tablet, shown on desktop */} +
+
+
+

Contents

+ +
+
+
+
); } diff --git a/tailwind.config.js b/tailwind.config.js index 6cac7973b..b68ad2f54 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,7 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], + darkMode: 'media', // Enable dark mode based on system preference theme: { extend: {}, }, diff --git a/test/frontend/AboutPage.test.js b/test/frontend/AboutPage.test.js index f53022b81..20703ba38 100644 --- a/test/frontend/AboutPage.test.js +++ b/test/frontend/AboutPage.test.js @@ -10,33 +10,71 @@ Enzyme.configure({ adapter: new Adapter() }); describe('', () => { const wrapper = mount(); + it('Should render the main heading', () => { - expect(wrapper.find('h1').text()).to.equal('What Happens at SCE'); + expect(wrapper.find('h1').first().text()).to.equal('What Happens at SCE'); }); - it('Should render the Introduction text', () => { - const subheading = wrapper.find('h2').at(0); - expect(subheading.text()).to.include('Introduction'); + + it('Should render the Introduction section', () => { + const section = wrapper.find('section').filterWhere(n => n.prop('id') === 'introduction'); + expect(section.find('h2').text()).to.include('Introduction'); }); - it('Should render the Location text', () => { - const subheading = wrapper.find('h2').at(1); - expect(subheading.text()).to.include('Location'); + + it('Should render the Location section', () => { + const section = wrapper.find('section').filterWhere(n => n.prop('id') === 'location'); + expect(section.find('h2').text()).to.include('Location & Hours'); }); + it('Should render club hours information', () => { - const preformatted = wrapper.find('pre').at(0); - expect(preformatted.text()).to.include('Monday - Thursday: 10:00 AM - 5:00 PM'); - expect(preformatted.text()).to.include('Friday: 10:00 AM - 2:00 PM'); + const hoursSection = wrapper.find('section').filterWhere(n => n.prop('id') === 'location'); + expect(hoursSection.text()).to.include('Monday - Thursday:'); + expect(hoursSection.text()).to.include('10:00 AM - 5:00 PM'); + expect(hoursSection.text()).to.include('Friday:'); + expect(hoursSection.text()).to.include('10:00 AM - 2:00 PM'); }); + it('Should render membership fee information', () => { - const companies = wrapper.find('pre').at(1); - expect(companies.text()).to.include('Single semester: $20'); - expect(companies.text()).to.include('Two semesters: $30'); + const membershipSection = wrapper.find('section').filterWhere(n => n.prop('id') === 'membership'); + expect(membershipSection.text()).to.include('Single Semester:'); + expect(membershipSection.text()).to.include('$20'); + expect(membershipSection.text()).to.include('Two Semesters:'); + expect(membershipSection.text()).to.include('$30'); }); + it('Should render the image with the correct alt text', () => { - expect(wrapper.find('img').prop('alt')).to.equal('sce collage'); + expect(wrapper.find('img').prop('alt')).to.include('SCE community collage'); }); - it('Should render the link to Discord with the correct URL', () => { - const discordLink = wrapper.find('a').at(0); + + it('Should render the Discord link with the correct URL', () => { + const discordLink = wrapper.find('a').filterWhere(n => n.prop('href') === 'https://sce.sjsu.edu/s/discord'); expect(discordLink.prop('href')).to.equal('https://sce.sjsu.edu/s/discord'); - expect(discordLink.text()).to.equal('https://sce.sjsu.edu/s/discord'); + expect(discordLink.text()).to.equal('Join SCE Discord'); + }); + + it('Should render the table of contents (hidden on mobile)', () => { + // Check that the table of contents container exists with proper mobile-hiding classes + const tocContainer = wrapper.find('div').filterWhere(n => + n.hasClass('hidden') && n.hasClass('xl:block') && n.hasClass('xl:col-span-1') + ); + expect(tocContainer).to.have.length(1); + + // Check that navigation buttons exist within the table of contents + const tocButtons = tocContainer.find('button'); + expect(tocButtons.length).to.be.greaterThan(0); + expect(tocButtons.filterWhere(n => n.text() === 'Introduction')).to.have.length(1); + expect(tocButtons.filterWhere(n => n.text() === 'Location & Hours')).to.have.length(1); + expect(tocButtons.filterWhere(n => n.text() === 'Membership')).to.have.length(1); + }); + + it('Should have responsive text sizing', () => { + const mainHeading = wrapper.find('h1'); + expect(mainHeading.hasClass('text-4xl')).to.be.true; + expect(mainHeading.hasClass('md:text-5xl')).to.be.true; + }); + + it('Should have dark mode compatible classes', () => { + const mainHeading = wrapper.find('h1'); + expect(mainHeading.hasClass('text-gray-900')).to.be.true; + expect(mainHeading.hasClass('dark:text-gray-100')).to.be.true; }); });