Zigzag Hacks Hackathon Website

Hey everyone!

This website was created for the ZigzagHacks Hackathon. For this project, I used NextJS with React. As for styling, I implemented Tailwind and CSS.

One interesting aspect I want to highlight and demonstrate is how to apply text-stroke across all devices seamlessly.

To achieve this, I would suggest utilizing the text-shadow property in the CSS file instead of the text-stroke property. Below is an example of the text mentioned above.

.textStroke{
  color: #000;
  text-shadow:
  -1.5px -1.5px 0 #D8DB4A,
  1.5px -1.5px 0 #D8DB4A,
  -1.5px 1.5px 0 #D8DB4A,
  1.5px 1.5px 0 #D8DB4A; 
}

The each line in the code represents a specific shadow configuration:

• The first two values in each line denote the horizontal and vertical shadow offsets.
• The third value, set to 0 in this case, represents the blur radius.
• The last value defines the color of the shadow.

By applying multiple shadows with different offsets and colors, the text acquires a stroke effect that is visible on all devices.

You can access this project by following this link, and the source code can be found here!