TNTT
July 2023
I made a website for TNTT (Thiếu Nhi Thánh Thể) which is translated as "The Vietnamese Eucharistic Youth Movement" with nextjs, tailwindcss, and framer motion. On the website, they can find about, division, news, schedule, contact, and socials. It also comes with a Vietnamese translation for those that are Vietnamese and wanted to get a better understanding.
Transition Effect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<motion.div
className="fixed top-0 bottom-0 right-full w-screen h-screen z-70 bg-red"
initial={{ x: "100%", width: "100%" }}
animate={{ x: "0%", width: "0%" }}
exit={{ x: ["0%", "100%"], width: ["0%", "100%"] }}
transition={{ duration: 0.8, ease: "easeInOut", delay: 0 }}
/>
<motion.div
className="fixed top-0 bottom-0 right-full w-screen h-screen z-60 bg-brown"
initial={{ x: "100%", width: "100%" }}
animate={{ x: "0%", width: "0%" }}
transition={{ duration: 0.8, ease: "easeInOut", delay: 0.2 }}
/>
<motion.div
className="fixed top-0 bottom-0 right-full w-screen h-screen z-50 bg-yellow"
initial={{ x: "100%", width: "100%" }}
animate={{ x: "0%", width: "0%" }}
transition={{ duration: 0.8, ease: "easeInOut", delay: 0.4 }}
/>
<motion.div
className="fixed top-0 bottom-0 right-full w-screen h-screen z-40 bg-blue"
initial={{ x: "100%", width: "100%" }}
animate={{ x: "0%", width: "0%" }}
transition={{ duration: 0.8, ease: "easeInOut", delay: 0.6 }}
/>
<motion.div
className="fixed top-0 bottom-0 right-full w-screen h-screen z-30 bg-green"
initial={{ x: "100%", width: "100%" }}
animate={{ x: "0%", width: "0%" }}
transition={{ duration: 0.8, ease: "easeInOut", delay: 0.8 }}
/>These React components create fullscreen colored overlays that slide in from the right, covering the screen with different colors and z-index values. It's what you see when navigating to other pages
Language Translation
1
2
3
import { FormattedMessage, useIntl } from "react-intl";
<FormattedMessage id="veym" />This code imports two components, FormattedMessage and useIntl, from the react-intl library. It then uses the FormattedMessage component to render a message with the ID "veym".
1
2
3
4
// en.json
{
"veym": "The Vietnamese Eucharistic Youth Movement"
}1
2
3
4
// vn.json
{
"veym": "Thiếu Nhi Thánh Thể"
}In the en.json file, the message corresponding to the ID "veym" is "The Vietnamese Eucharistic Youth Movement".
In the vn.json file, the message corresponding to the same ID "veym" is "Thiếu Nhi Thánh Thể".
When the FormattedMessage component is used in the application, it will display the appropriate message based on the selected language, either English or Vietnamese, as defined in the respective JSON files.
Challenges
- My first experience with Tailwind CSS was straightforward, as it was easy to grasp. However, delving into Framer Motion posed a bit of a challenge, particularly in achieving the animations I envisioned. Through diligent study of documentation and watching instructional videos on YouTube, I eventually found the guidance I needed to utilize the transitionEffect component effectively.
Outcome
The interface is complete and mobile-friendly. While most of the website's text has been translated into Vietnamese, due to time constraints, not all pages have complete translations. Additionally, a few pages may still lack some content. We are currently working on constructing a blog post feature, which will allow members of the youth group to contribute posts.
