Project Deep Dive

MDS school - From React to Jamstack: A Homepage Challenge

With the guidance of my mentors, I took on the challenge of recreating the homepage of a website for a children’s school, based on a Figma design they provided. This project was an opportunity to strengthen my skills in React and CSS while ensuring an accurate replication of the original design and implementing functional routing. Later, I rebuilt the same page using Next.js and Sanity, embracing the Jamstack architecture for a more dynamic and scalable solution. Styled Components helped me achieve modularity and maintainability. This experience taught me the importance of precision, adaptability, and continuous learning.

Challenges & solutions

Replicating the Design with Precision - Parallax Scrolling Effect

Challenge

One of the significant design challenges was implementing a parallax scrolling effect. The goal was to create a visually engaging background that moves at a different speed than the foreground content, enhancing the depth and dynamics of the page. Since I developed this project twice—first with React and CSS, then with Next.js, Sanity, and Styled Components—this challenge became an opportunity to understand and adapt to different approaches. In the first version, I relied on CSS and JavaScript event listeners to achieve the effect, while in the second version, I leveraged Next.js optimization techniques and Styled Components to improve performance and maintainability. This process helped me refine my problem-solving skills and deepen my understanding of both traditional and modern frontend architectures.

Solution

To achieve this effect, I used CSS background properties and positioned elements strategically. In the React + CSS version, I relied on background-attachment: fixed, while in the Next.js + Sanity version, I utilized Styled Components to maintain modularity and theming consistency.

React + CSS vs. Nextjs +Styled Components

Since I developed this project twice—first with React and CSS, then with Next.js, Sanity, and Styled Components—this challenge became an opportunity to understand and adapt to different approaches. In the first version, I relied on CSS and JavaScript event listeners to achieve the effect, while in the second version, I leveraged Next.js optimization techniques and Styled Components to improve performance and maintainability.

This process helped me refine my problem-solving skills and deepen my understanding of both traditional and modern frontend architectures.

React + CSS Implementation

javascript

import React from "react";
import "./OneSection.css";

const OneSection = () => {
  return (
    <section className="section2 parallax">
      <div className="parallax-inner">
        <h2>
          Our curriculum sharpens minds, expands horizons, and hones critical
          skills in Judaic and general studies.
        </h2>
        <p>
          From the wisdom of Hashem, and the love of Israel, to humanities and
          social sciences to STEM and the arts, students engage in a dynamic
          exploration of the world around them, cultivating skills and knowledge
          that are core for success.
        </p>
      </div>
    </section>
  );
};

export default OneSection;

.parallax {
  background: url("../../../public/assets/FireBackground.svg") fixed no-repeat;
  background-position: left;
  background-size: 95% 50% 45% 35%;
  margin-top: 0px;
}
.parallax-inner {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: auto auto;
}
.parallax-inner h2 {
  grid-column: 2/9;
  font-size: 2rem;
  font-weight: 500;
  color: #0741a4;
  text-align: left;
  margin: 20px;
}
.parallax-inner p {
  grid-column: 2/9;
  font-size: 1rem;
  color: #161718;
  margin-left: 1.5rem;
  margin-bottom: 8rem;
  text-align: left;
}

Next.js + Sanity with Styled Components

javascript

import Link from "next/link";
import styled from "styled-components";

const SectionOne = () => {
  return (
    <Parallax>
      <BluRectangle>
        <ParallaxInner>
          <h1>
            For over 80 years, we've illuminated young minds through Jewish Education
          </h1>
          <p>
            Manhattan Day School Yeshiva Ohr Torah is a Modern Orthodox
            Yeshiva day school located on the Upper West Side of Manhattan,
            serving Toddlers through Eighth Grade.
          </p>
          <h2>Ready to become a part of MDS?</h2>
          <Button>
            <Link href="./apply">Apply Now</Link>
          </Button>
        </ParallaxInner>
      </BluRectangle>
    </Parallax>
  );
};
export default SectionOne;

const Parallax = styled.section`
  background: url("/assets/fire_background.svg") fixed no-repeat;
  background-position: left;
  background-size: cover;
  padding-bottom: 40px;
`;

const ParallaxInner = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 40px;
  h1 {
    font-size: 2.5rem;
    color: gold;
  }
  p {
    font-size: 1.2rem;
    color: white;
  }
`;

const Button = styled.div`
  background: white;
  padding: 10px 20px;
  border-radius: 5px;
  &:hover {
    background: orange;
    color: white;
  }
`;

const BluRectangle = styled.div`
  background-color: rgba(26, 96, 215, 0.8);
  padding-bottom: 40px;
  border-radius: 0% 0% 15% 15%;
`;

Conclusion

Reproducing the same homepage with two different stacks was an insightful experience. While the React + CSS approach was more straightforward, the Next.js + Sanity implementation offered greater modularity and scalability. The parallax effect was one of the biggest design challenges, but by leveraging CSS techniques and Styled Components, I achieved a visually engaging and performant solution.

Implementing Functional Routing

Challenge

Integrating functional routing into the site, ensuring all pages are properly linked and navigable for a smooth user experience.