Pathway

A Home for Voices, A Hub for Change.

Comment

🌍 About the Project: Pathway

🎯 Inspiration

Pathway was born from a desire to address two deeply interconnected global issues:
SDG 5 – Gender Equality and SDG 10 – Reduced Inequalities.

I’ve always believed that technology should do more than function — it should uplift. With this project, I sought to create a digital space that fosters empathy, raises awareness, and allows users to reflect on inequality, while also promoting stories of hope and unity.

The inspiration stemmed from real-world challenges: unequal access to education, silenced voices, and systemic barriers. Pathway is my small, creative response to these big issues.

🧠 What I Learned

Throughout this project, I gained hands-on experience with:

  • Semantic HTML and responsive CSS layout systems
  • Designing emotion-driven interfaces through color theory and typography
  • Creating lightweight, scrollable user experiences
  • Building accessible designs that center the user
  • Leveraging storytelling in code to serve a social mission

🛠 How I Built It

Pathway is built entirely with HTML and CSS, with intentional focus on clarity, compassion, and usability.

  • The site uses a one-scroll layout — not just for simplicity, but as a metaphor for a continuous journey toward empathy and change.
  • A soft gradient background (lavender #d5d0f2 to sky blue #cce6ff) sets a calm, hopeful tone.
  • Each section features subtle, semi-transparent imagery that symbolizes growth, unity, and resilience.
  • Montserrat, a modern, humanist typeface, was selected to convey professionalism with warmth.
  • The fixed navbar with backdrop-filter ensures users stay grounded while scrolling — both visually and metaphorically.
  • Each card or story tile includes hover animation to symbolize that every shared voice moves the conversation forward.
.card:hover {
  transform: rotate(-1deg) scale(1.01);
  transition: transform 0.3s ease;
}
  • The layout is fully responsive, adapting smoothly to phones, tablets, and desktops using media queries and flexible grid spacing.

🌐 Why a One-Scroll Design?

I also opted for a one-scroll webpage to enhance both usability and narrative. This design eliminates any type of distraction, keeping users immersed in a seamless flow. It reflects the idea that progress is continuous, and each section contributes to a larger journey.

🚧 Challenges I Faced

  • Blending emotion with structure — making sure the site feels empathetic while staying clean and functional
  • Balancing background visuals and legible content
  • Fine-tuning animations for elegance, not distraction
  • Maintaining accessibility and mobile responsiveness across all devices

🛤 Why the Name: Pathway

The name Pathway reflects a deeper mission. It’s not just a website — it’s a guided route through understanding, compassion, and action. In the spirit of SDG 5 and SDG 10, it encourages users to walk alongside others, to listen, to learn, and ultimately — to act.

This project represents what I believe technology can and should be:
Purposeful, people-centered, and profoundly human.

Share this project:

Updates