Mobile Formatting

Author: anncli

src/content/config.ts

@@ -50,6 +50,7 @@ const projects = defineCollection({
         description: z.string(),
         url: z.string().url(),
         featured: z.boolean().optional().default(false),
+        date: z.coerce.date().optional(),
         techs: z.array(z.string()).optional(),
     })
 });

src/content/projects/geoguessr-travel-map.md

@@ -3,5 +3,6 @@ title: "GeoGuessr Travel Map"
 description: "A GeoGuessr tool that extracts, parses, and maps all locations you have 'visited' in the game on an interactive map. Implemented with multi-threaded API calls and Plotly frontend."
 url: "https://github.com/anncli/GeoGuessr-Travel-Map"
 featured: true
+date: 2025
 techs: ["Python", "Google Maps Platform", "Plotly", "BeautifulSoup"]
 --- 

src/content/projects/grouptinerary.md

@@ -2,6 +2,7 @@
 title: "GROUPtinerary"
 description: "AI-powered group trip itinerary generator that ensures everyone's travel preferences are considered."
 url: "https://www.youtube.com/watch?v=LXPizp6aFr4&ab_channel=AnnLi"
-featured: true
+featured: false
+date: 2024
 techs: ["React"]
 --- 

src/content/projects/munch-meter.md

@@ -3,5 +3,6 @@ title: "Munch Meter"
 description: "A dining hall food rating forum with an easy-to-use dashboard featuring the top rated menu items for each meal and more. Won Best Web App at DivHacks 2023."
 url: "https://devpost.com/software/munch-meter#"
 featured: true
+date: 2023
 techs: ["HTML", "CSS", "JavaScript", "Python", "BeautifulSoup"]
 --- 

src/content/projects/wordle-ai.md

@@ -3,5 +3,6 @@ title: "Wordle AI Solver"
 description: "AI Solver with multiple game modes and 98% success solving words under 4 attempts by calculating entropy scores for guesses."
 url: "https://github.com/anncli/Wordle-AI"
 featured: true
+date: true
 techs: ["Python", "Colorama"]
 --- 

src/content/resume/resume.md

@@ -11,13 +11,13 @@ Here is a brief overview of my education, experiences, projects, and skills. Con
 <small>Sep 2023 - May 2027</small><br>
 **Columbia University** | B.S. Computer Science<br>
 <u>Relevant Coursework</u>: Data Structures and Algorithms, Operating Systems, Artificial Intelligence, Advanced (Systems) Programming in C, Fundamentals of Computer Systems, Intro to Databases, Linear Algebra and Probability, Multivariable Calculus, Discrete Math<br>
-<i><a href="./blog/fun-courses">Check out other interesting courses I've taken!</a></i><br>
+<i><a href="../blog/fun-courses">Check out other interesting courses I've taken!</a></i><br>
 <u>Extracurricular</u>: Women in CS (Board Member), Girls Who Code (Board Member), Columbia Robotics Club (AV Perception Lead), Undergraduate CS Research Fair (Organizer)
 
 <small>Jan 2025 - June 2025</small><br>
 **Universidad Carlos III de Madrid** | International Exchange Student<br>
 Coursework in Computer Science and Spanish Culture<br>
-<i><a href="./blog/study-abroad">Check out my study abroad page!</a></i>
+<i><a href="../blog/study-abroad">Check out my study abroad page!</a></i>
 
 
 ## Experience

src/content/site/config.json

@@ -6,15 +6,15 @@
     "sections": {
       "experience": {
         "title": "Experience",
-        "viewAllText": "View full résumé"
+        "viewAllText": "View resume"
       },
       "projects": {
         "title": "Projects",
         "viewAllText": "View all projects"
       },
       "blog": {
         "title": "Blogs",
-        "viewAllText": "View all posts"
+        "viewAllText": "View all blogs"
       }
     },
     "socialLinks": [

src/pages/experience/index.astro

@@ -34,6 +34,13 @@ const { Content } = resume ? await render(resume) : { Content: null };
     padding: 2rem 1.5rem;
   }
 
+  @media (max-width: 640px) {
+    main {
+      padding: 1rem;
+      padding-top: 2rem;
+    }
+  }
+
   .post {
     margin-top: 2rem;
   }

src/pages/projects/index.astro

@@ -7,15 +7,16 @@ import Container from "../../components/ui/Container.astro";
 const projects = await getCollection("projects");
 const sortedProjects = projects.sort(
   (a: CollectionEntry<"projects">, b: CollectionEntry<"projects">) =>
-    b.data.startDate?.getTime?.() - a.data.startDate?.getTime?.()
+    b.data.date?.getTime?.() - a.data.date?.getTime?.()
 );
 ---
 
 <BaseLayout title="Projects" description="All projects">
+  <main>
   <Container>
     <section class="section">
       <div class="section-header">
-        <h2>Projects</h2>
+        <h1>Projects</h1>
       </div>
       <div class="content-list">
         {
@@ -40,18 +41,22 @@ const sortedProjects = projects.sort(
       </div>
     </section>
   </Container>
+  </main>
 </BaseLayout>
+
 <style>
-  .section {
-    margin: 4rem 0;
+  main {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 4rem 0rem;
   }
 
   .section-header {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     margin-bottom: 2rem;
-    opacity: 0.7;
   }
 
   .title-row {