Prepare website for Do Good (#7)

* Don't make mobile PageLink style global

* Add a Methods page

* Add team picture

* Actually add team photo

* No more leet names

* More vertical padding, bluer dark foreground

* Make body thinner

src/components/BaseHead.astro

@@ -1,9 +1,8 @@
 ---
-// Import the global.css file here so that it is included on
+// Import the fonts.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";
 import "../styles/fonts.css";
-import "../styles/global.css";
 
 interface Props {
   title: string;
@@ -112,16 +111,16 @@ const {
   @mixin themeCommon {
     --light-bg: #fdfdff;
     --dark-bg: #0f0f23;
-    --ugly-fg: #ed7797;
+    --cyberlang-fg: #ed7797;
 
-    --divider-color: var(--fg-color);
     --logo-text-bg: var(--bg-color);
   }
 
   @mixin lightCommon {
     @include themeCommon();
     --fg-color: var(--dark-color);
     --bg-color: var(--light-color);
+    --bg-header: #00000004; // Background for header and footer
 
     --logo-path: #23324e;
     --logo-text: #ca3148;
@@ -133,6 +132,8 @@ const {
     @include themeCommon();
     --fg-color: var(--light-color);
     --bg-color: var(--dark-color);
+    --bg-header: #2e2c2c; // Background for header and footer
+    --divider-color: #d3d1d157;
 
     --logo-path: #ff7af6;
     --logo-text: #fa0d64;
@@ -167,7 +168,7 @@ const {
 
     --light-color: #ddddd7;
     --dark-color: var(--dark-bg);
-    --fg-color: var(--light-color);
+    --fg-color: #b2b8d0;
     --bg-color: var(--dark-bg);
     --bg-hoverable: #42424a;
     --bg-hover: #323234;
@@ -184,10 +185,10 @@ const {
     --timeline-color: #d35901;
   }
 
-  :global(.theme-ugly) {
+  :global(.theme-cyberlang) {
     @include lightRegular();
 
-    --fg-color: var(--ugly-fg);
+    --fg-color: var(--cyberlang-fg);
     --bg-color: #fdfdff;
     --divider-color: #273146;
 

src/components/Footer.astro

@@ -27,25 +27,30 @@ import { CONTACT_EMAIL, CONTACT_NAME, SOCIAL_MEDIA_LINKS } from "../consts";
 
   footer {
     margin-top: 2rem;
-    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
-    color: rgba(var(--fg-color), 0.7); /* Mute the text */
     border-top: solid;
+    border-width: thin;
     border-color: var(--divider-color); /* Don't mute the border */
 
     display: flex;
 
     // For phones, put Contact section above Follow us section
     flex-direction: column;
+    // Mobile-specific
+    padding-top: 1rem;
+    padding-bottom: 1.2rem;
 
-    // For laptops, put Contact and Follow us side-by-side
     @media (min-width: $tabletMinWidth) {
+      // For tablets and up, put Contact and Follow us side-by-side
       flex-direction: row;
+
+      padding-top: 3rem;
+      padding-bottom: 4rem;
     }
   }
 
   .contact-header {
     font-size: x-large;
+    margin-bottom: 0.3rem;
   }
 
   .contact-name {

src/components/header/mobile/PageLink.astro

@@ -13,7 +13,7 @@ const { link, name, leetName } = Astro.props;
 </a>
 
 <style>
-  :global(a) {
+  a {
     font-family: "PixeloidMono";
     text-decoration: none;
   }

src/components/header/tablet/ThemeDropdown.astro

@@ -106,7 +106,7 @@ import { themes } from "../../../theme";
     @include themeIcon(var(--dark-bg), var(--bg-color));
   }
 
-  .ugly-theme-icon {
-    @include themeIcon(var(--ugly-fg), var(--bg-color));
+  .cyberlang-theme-icon {
+    @include themeIcon(var(--cyberlang-fg), var(--bg-color));
   }
 </style>

src/consts.ts

@@ -8,9 +8,10 @@ export const CONTACT_NAME = "Terra Oh";
 export const CONTACT_EMAIL = "[email protected]";
 
 export const PAGES = [
-  { link: "/about", name: "About", leetName: "AB0UT" },
-  { link: "/timeline", name: "Timeline", leetName: "T1M3L1N3" },
-  { link: "/blog", name: "Blog", leetName: "B10G" },
+  { link: "/about", name: "About", leetName: "ABOUT" },
+  { link: "/methods", name: "Methods", leetName: "METHODS" },
+  { link: "/timeline", name: "Timeline", leetName: "TIMELINE" },
+  { link: "/blog", name: "Blog", leetName: "BLOG" },
 ] as const;
 
 interface SocialMediaLink {

src/layouts/BaseLayout.astro

@@ -12,7 +12,7 @@ interface Props {
   description?: string;
 }
 
-const { frontmatter} = Astro.props;
+const { frontmatter } = Astro.props;
 let { title, isBlogPost } = Astro.props;
 isBlogPost = isBlogPost ?? false;
 // If a title wasn't explicitly passed in, get it from the frontmatter
@@ -48,7 +48,7 @@ if (!title && frontmatter && "title" in frontmatter) {
     background: var(--bg-color);
     font-family: Roboto, Consolas, sans-serif;
     margin: 0 auto;
-    min-height: 1vh;
+    height: 1vh;
   }
 
   body > header {
@@ -63,18 +63,26 @@ if (!title && frontmatter && "title" in frontmatter) {
   }
 
   body > main {
-    // Padding for very small screens (phones in portrait orientation)
-    padding-left: 5vw;
-    padding-right: 5vw;
+    margin-left: auto;
+    margin-right: auto;
+    // Max width for laptops
+    max-width: 100ch;
 
-    @media (min-width: $laptopMinWidth) {
+    @media (min-width: $tabletMinWidth) {
+      margin-top: 4rem;
+      margin-bottom: 6rem;
+    }
+
+    @media (max-width: $laptopMinWidth) {
+      // Make it smaller for tablets
       padding-left: 10vw;
       padding-right: 10vw;
     }
 
-    @media (min-width: $bigLaptopWidth) {
-      padding-left: 15vw;
-      padding-right: 15vw;
+    @media (max-width: $tabletMinWidth) {
+      // Make it smaller for phones
+      padding-left: 5vw;
+      padding-right: 5vw;
     }
   }
 
@@ -118,6 +126,11 @@ if (!title && frontmatter && "title" in frontmatter) {
     }
   }
 
+  :global(h1) {
+    text-align: center;
+    padding-bottom: 1rem;
+  }
+
   :global(p) {
     font-size: large;
   }
@@ -127,11 +140,16 @@ if (!title && frontmatter && "title" in frontmatter) {
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: solid;
-    border-color: var(--divider-color); // Divider between header and content
+
     padding-top: 0.7rem;
     padding-bottom: 0.7rem;
     margin-bottom: 1.5rem;
     gap: 1.7rem;
+
+    border-bottom: solid;
+    border-width: thin;
+    border-color: var(--divider-color); // Divider between header and content
+
+    background-color: var(--bg-header);
   }
 </style>

src/pages/about.mdx

@@ -5,9 +5,17 @@ title: About
 import Member from "../components/about/Member.astro"
 import Members from "../components/about/Members.astro"
 
+# About us
+
 Team CYB3RL4NG is a class of 2026 Gemstone team at the University of Maryland.
+We are 5 undergraduate students, plus our mentor, Dr. Erik Nesse, and our librarian,
+Nevenka Zdravkovska.
 
-## Members
+<img
+  loading="lazy"
+  src="/img/team_photo.jpg"
+  alt="Team photo"
+  style="max-height: 300px; margin-left: auto; margin-right: auto; margin-bottom: 4rem; display: block;" />
 
 <Members>
   <Member name="Oliver D'Esposito" position="Financial Liaison" />

src/pages/index.mdx

@@ -2,21 +2,22 @@
 layout: ../layouts/BaseLayout.astro
 ---
 import Sponsor from "../components/index/Sponsor.astro";
+import { CONTACT_EMAIL } from "../consts";
 
 Team CYB3RL4NG is an undergraduate research team that is part of the [Gemstone Program](https://gemstone.umd.edu/) at the University of Maryland.
-Our goal is to study semantic bleaching of mental health terms used online.
+We are studying semantic change in mental health terms used online.
 
 ## Research Question
 
-How has the internet affected the use of language? This is a question that has sent Team CYB3RL4NG into its current direction. The internet has rapidly increased the flow of information from one person to another, and from one place to another. Language patterns are beginning to spread at faster rates than we could have ever predicted due to the growth of the internet.
+Has the meaning of mental health terms changed over time online? Specifically, have these terms undergone semantic broadening?
 
-As different uses of language spread more rapidly throughout the internet, we begin to see the popularization of different words and concepts to mainstream audiences. Wider populations have adopted political lingo, medical terms, and other jargon previously contained to small subsections of people. Yet, when complex concepts are introduced to a wider and more diverse range of people, are they able to maintain the weight and nuance of these topics?
+## Motivation
 
-Team CYB3RL4NG aims to explore this concept with mental health terminology coined by professionals in the field of psychology. Mental health is a topic that has gained prominence in popular discourse as of recent years, but as is the nature of the internet, these conversations become oversaturated through the constant flow of information. Certain concepts in psychological discourse become spread more and more widely, but the weight of these concepts can become lost in the process. Team CYB3RL4NG wishes to explore the chronology by which terms in psychological discourse become popularized, and whether the popularization of these terms has resulted in a dilution of their meanings and weight.
+The internet has rapidly increased the flow of information from one person to another, and from one place to another. Language patterns are beginning to spread at faster rates than we could have ever predicted due to the growth of the internet.
 
-## Methodology
+As different uses of language spread more rapidly throughout the internet, we begin to see the popularization of different words and concepts to mainstream audiences. Wider populations have adopted political lingo, medical terms, and other jargon previously contained to small subsections of people. Yet, when complex concepts are introduced to a wider and more diverse range of people, are they able to maintain the weight and nuance of these topics?
 
-We will download comments from Reddit and use embeddings and co-word analysis to study semantic bleaching.
+Team CYB3RL4NG aims to explore this concept with mental health terminology coined by professionals in the field of psychology. Mental health is a topic that has gained prominence in popular discourse as of recent years, but as is the nature of the internet, these conversations become oversaturated through the constant flow of information. Certain concepts in psychological discourse become spread more and more widely, but the weight of these concepts can become lost in the process. Team CYB3RL4NG wishes to explore the chronology by which terms in psychological discourse become popularized, and whether the popularization of these terms has resulted in a dilution of their meanings and weight.
 
 {/* ## Funding
 
@@ -25,7 +26,8 @@ Fund us from our [LaunchUMD page](https://launch.umd.edu/project/40208)!
 
 ## Sponsors
 
-If you sponsor us, we can advertise you here. Be the first here!
+If you sponsor us, we can advertise you here. Be the first!
+Contact our team liaison, Terra, at {CONTACT_EMAIL} for details.
 
 We are grateful to the Gemstone program for giving us the opportunity to work on this project.
 

src/pages/methods.mdx

@@ -0,0 +1,36 @@
+---
+title: Methods
+layout: ../layouts/BaseLayout.astro
+---
+
+# Methods
+
+We will be analyzing comments from Reddit, a popular social media platform.
+Reddit has a sizable, though not particularly diverse, user base, a significant portion
+of which is human. Additionally, it has data stretching back to 2007, all of which can
+be accessed for free. We will request data from 2010 to 2023.
+
+Once we collect our data, we will pick some commonly used mental health related words to study,
+such as "trauma" and "depression." Then, we will conduct three different analyses on it.
+
+The first will be a quali-quantitative co-word analysis, which will help us gain an understanding of the semantic
+change in the words we are studying.
+
+The second will be a quantitative analysis based on Word2vec embeddings of the words we are studying.
+We will slice up the time range under study. Within each time slice, we will generate
+Word2vec embeddings of the words under study. These embeddings will be generated in a way
+that embeddings for the same word from two different time slices can be compared.
+The comparison will be simple cosine similarity between vectors, and will allow us to quantify
+semantic change in each word between any two time slices.
+
+The third will be a quali-quantiative analysis based on BERT embeddings of the words we are studying.
+For each of the words under study, we will cluster all of its embeddings within each time slice.
+Each cluster should represent a different sense of the word, allowing us to track how each
+individual sense of the word has changed over time.
+
+Since this would be entirely unsupervised, we need to ensure that humans are in the loop.
+Threfore, we will then manually check that these clusters make sense and regenerate them
+using different hyperparamets if necessary.
+
+Finally, we will put together all of the information we have gleaned through our different
+analyses to determine how the terms we are studying have changed over time.

src/pages/timeline.mdx

@@ -6,7 +6,9 @@ import Timeline from "../components/timeline/Timeline.astro"
 import TimelineItem from "../components/timeline/TimelineItem.astro"
 import { Files } from "../consts"
 
-Gemstone is a 4-year program, so we plan to finish our research by spring 2026.
+# Timeline
+
+Gemstone is a 4-year program, so we plan to finish our research by spring of 2026.
 Below is a rough expected timeline of our research.
 
 {/* todo make cards with multiple bullet points per semester instead? */}
@@ -18,8 +20,8 @@ Below is a rough expected timeline of our research.
   <TimelineItem title="February 2024">
     Proposal defense. Our proposal is <a href={Files.Proposal}>here</a>.
   </TimelineItem>
-  <TimelineItem title="Fall 2024">
-    Data collection
+  <TimelineItem title="December 2024">
+    Finish data collection
   </TimelineItem>
   <TimelineItem title="Spring 2025">
     Data analysis

src/theme.ts

@@ -45,10 +45,10 @@ export const themes = [
     iconClass: "dark-theme-icon",
   },
   {
-    name: "Ugly",
-    theme: "theme-ugly",
+    name: "CYB3RL4NG",
+    theme: "theme-cyberlang",
     faClass: "fa-solid fa-circle",
-    iconClass: "ugly-theme-icon",
+    iconClass: "cyberlang-theme-icon",
   },
 ];