Landing page changes (#172)

* Changes: - landing page title - landing page description - project page title * Changes: - modify projects page description * Changes: - Change project title back to project - Change project card content - Change learning card to end with an exclamation mark * Changes: - Make project card styling align with other cards
uclaacm · May 31, 2024 · e91df15 · e91df15
1 parent e1b8eeb
commit e91df15
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 55 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -13,16 +13,17 @@ function Layout(props: LayoutProps): JSX.Element {
       <Head>
         <meta charSet="UTF-8" />
         <meta name="title" content="opensource at acm at ucla" />
-        <meta name="description" content="open source at acm at ucla!"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <meta name="description" content="open source at acm at ucla!" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, minimum-scale=1"
+        />
 
         <title>open source at acm at ucla</title>
         <link rel="icon" href="/logo.png" />
       </Head>
       <Navbar />
-      <main>
-        {props.children}
-      </main>
+      <main>{props.children}</main>
       <Footer />
     </>
   );

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -28,38 +28,30 @@ export default function Home({
           title="open source at ACM at UCLA"
           description="at the largest computer science community at UCLA, we care about open-source"
           openGraph={{
-            images: [{
-              url: 'https://opensource.uclaacm.com/logo.png',
-              width: 1200,
-              height: 1200,
-              alt: 'The ACM at UCLA logo',
-            }],
+            images: [
+              {
+                url: 'https://opensource.uclaacm.com/logo.png',
+                width: 1200,
+                height: 1200,
+                alt: 'The ACM at UCLA logo',
+              },
+            ],
             site_name: 'open source at ACM at UCLA',
           }}
         />
-        <h1>
-          open source at{' '}
-          <ELink link="https://uclaacm.com">
-            ACM at UCLA
-          </ELink>
-        </h1>
+        <h1>open source at UCLA</h1>
         <hr />
         <p className="knockout-description">
-          at the largest computer science community at UCLA,
-          <br /> <b>we care about open-source.</b>
+          maintained by <ELink link="https://uclaacm.com">ACM at UCLA</ELink>,
+          the largest computer science community at UCLA
         </p>
         <div className="row">
           <div className="col-6">
             <div className="card">
               <div className="card-body">
                 <Link href="/projects">
-
                   <h3>Projects &rarr;</h3>
-                  <p>
-                    All of our projects are open-source! Literally, all of
-                    them.
-                  </p>
-
+                  <p>Check out current UCLA open source projects!</p>
                 </Link>
               </div>
             </div>
@@ -69,7 +61,7 @@ export default function Home({
               <div className="card-body">
                 <ELink link="https://dev-pathways.netlify.app/">
                   <h3>Learning &rarr;</h3>
-                  <p>Pick up the skills to write great software.</p>
+                  <p>Pick up the skills to write great software!</p>
                 </ELink>
               </div>
             </div>
@@ -91,10 +83,8 @@ export default function Home({
             <div className="card">
               <div className="card-body">
                 <Link href="/contribute">
-
                   <h3>Contribute &rarr;</h3>
                   <p>Make your first pull request with us!</p>
-
                 </Link>
               </div>
             </div>
@@ -104,7 +94,8 @@ export default function Home({
 
         <h2>featured project</h2>
         <ProjectCard
-          project={randomProject ? randomProject : projects[projNumToDisplay]} preload={true}
+          project={randomProject ? randomProject : projects[projNumToDisplay]}
+          preload={true}
           githubColors={githubColors}
         />
         <h2>what we&apos;ve been doing recently...</h2>
@@ -116,15 +107,12 @@ export default function Home({
             ))}
             <p>
               see more activity{' '}
-              <ELink link="https://github.com/uclaacm/">
-                on our org
-              </ELink>
-              !
+              <ELink link="https://github.com/uclaacm/">on our org</ELink>!
             </p>
           </div>
         </div>
-      </div >
-    </Layout >
+      </div>
+    </Layout>
   );
 }
 
@@ -141,7 +129,6 @@ export const getStaticProps: GetStaticProps = async () => {
   });
   const recentEvents = eventResponse.data;
 
-
   const githubColors = await getGithubColors();
 
   const projects = await getProjects();

diff --git a/pages/projects.tsx b/pages/projects.tsx
@@ -6,14 +6,12 @@ import ProjectCard from '../components/ProjectCard';
 import SearchFilter from '../components/SearchFilter/SearchFilter';
 import { getProjects, Project, GitHubColors, getGithubColors } from '../util';
 
-
 interface ProjectsProps {
   projects: Project[];
-  githubColors: GitHubColors
+  githubColors: GitHubColors;
 }
 
 function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
-
   // projects is a master list of all the projects that we fetched, filteredProjects is the one that we render
   // to the user
   const [filteredProjects, setFilteredProjects] = useState(projects);
@@ -25,38 +23,45 @@ function Projects({ projects, githubColors }: ProjectsProps): JSX.Element {
           title="projects | open source at ACM at UCLA"
           description="a heads-up overview of the projects that power ACM at UCLA"
           openGraph={{
-            images: [{
-              url: 'https://opensource.uclaacm.com/logo.png',
-              width: 1200,
-              height: 1200,
-              alt: 'The ACM at UCLA logo',
-            }],
+            images: [
+              {
+                url: 'https://opensource.uclaacm.com/logo.png',
+                width: 1200,
+                height: 1200,
+                alt: 'The ACM at UCLA logo',
+              },
+            ],
             site_name: 'open source at ACM at UCLA',
           }}
         />
-        <h1>
-          projects
-        </h1>
+        <h1>projects</h1>
         <p>
-          a (work-in-progress) heads-up overview of the projects that power ACM at UCLA.
+          an overview of all open-source projects affiliated with UCLA,
+          extending beyond those managed by ACM at UCLA.
         </p>
         <hr />
         <SearchFilter
           projects={projects}
           setFilteredProjects={setFilteredProjects}
         />
-        <hr/>
+        <hr />
         <div className="row same-height-grid">
-          {filteredProjects.length > 0
-            ? filteredProjects.map((project, i) => {
+          {filteredProjects.length > 0 ? (
+            filteredProjects.map((project, i) => {
               return (
                 <div className="col-4" key={project.name}>
-                  <ProjectCard project={project} vertical preload={i < 3} githubColors={githubColors} />
+                  <ProjectCard
+                    project={project}
+                    vertical
+                    preload={i < 3}
+                    githubColors={githubColors}
+                  />
                 </div>
               );
             })
-            : <h2>No results found</h2>
-          }
+          ) : (
+            <h2>No results found</h2>
+          )}
         </div>
       </div>
     </Layout>