The main objectives of the CUSEC website are as follows:

a. Inform and Engage: The website should effectively communicate key details about the conference, including dates, location, schedule, speakers, and workshops. It should engage visitors by showcasing the benefits of attending CUSEC and create a sense of excitement.

b. Registration and Ticketing: The website should provide an intuitive and secure registration system, allowing attendees to purchase tickets, select workshops, and manage their registration details.

c. Speaker and Sponsor Promotion: The website should highlight the speakers and sponsors, providing comprehensive information about their backgrounds and contributions. It should also offer advertising and promotional opportunities for sponsors.

d. Seamless User Experience: The website should be user-friendly, responsive, and accessible across various devices and browsers. It should offer intuitive navigation, quick access to information, and clear calls to action to enhance user engagement.

a. Home Page: A visually appealing landing page with essential conference details, highlights, and a prominent call to action for registration.

b. Schedule and Sessions: A detailed schedule of conference events, including keynote speeches, workshops, and breakout sessions, with the ability to filter by date, time, and category.

c. Speaker and Sponsor Profiles: Individual profiles for speakers and sponsors, showcasing their biographies, affiliations, and contributions.

d. Registration and Ticketing: An intuitive registration system allowing attendees to purchase tickets, select workshops, and manage their registration details. Integration with a secure payment gateway for online transactions.

e. News and Updates: A section for news and updates related to the conference, including announcements, changes in schedule, and important information for attendees.

f. FAQ and Support: A comprehensive FAQ section addressing common queries and providing support to attendees, speakers, sponsors, and volunteers.

g. Contact and Feedback: A contact form for general inquiries and feedback, along with contact information for specific conference organizers and departments.

h. Mobile Responsiveness: Ensuring the website is optimized for mobile devices to provide a seamless experience for users on smartphones and tablets.

a. Visual Appeal: Engaging and modern design elements, including high-quality images, videos, and graphics.

b. Color Palette: Select a color scheme that aligns with the conference branding and creates a visually cohesive experience.

c. Typography: Use legible fonts that are consistent with the conference's visual identity.

d. Branding: Incorporate the CUSEC logo and branding elements throughout the website to reinforce brand recognition.

a. Content Management System (CMS): Implement a user-friendly CMS to allow conference organizers to easily update and manage website content.

b. Responsive Web Design: Develop a responsive website that adapts to different screen sizes and resolutions.

c. Security and Privacy: Implement robust security measures to protect user data and ensure compliance with data protection regulations.

d. Search Engine Optimization (SEO): Optimize the website for search engines to improve visibility and organic traffic.

e. Analytics and Reporting: Integrate analytics tools to track website performance, user engagement, and conversion rates.

• Effectively communicating and collaborating with a designer to build a website from scratch🤝
• Using developer mode in figma🧑‍💻
• Using Next.js 13 app router, and using <Link> and <Image> components instead of <a> and <img> tags🔗🖼️
• Defining custom types using TypeScript✅
• Using Tailwind to rapidly create layouts and basic styling🚀
• Making custom tailwind colors and using the [] syntax💄
• Soft resetting the head to undo the most recent commit, but not getting rid of the changes locally🧠
• Reverting git commits and resetting the head back to past commits🕜
• Adding files to past git commits that weren't pushed➕
• Adding files to past git commits that were pushed, and force pushing them➕➕
• Creating grid backgrounds using vanilla CSS⏹️
• Giving texts gradient backgrounds🟣🟡
• Creating better adaptive layouts with custom breakpoints🧐
• Creating a frosted Navbar❄️
• Creating a custom animated hamburger icon using hover groups, transforms, and transition timing functions🍔
• Passing states up and down parent and child components using the createContext() and useContext() React hooks🪝
• Creating more complex two-dimensional layouts using grid instead of flexbox⬛
• Creating a responsive ribbon in Tailwind CSS🎗️
• Making a footer that's fairly responsive and doesn't suck🦶
• Finally understanding how absolute and relative positionings work in CSS🤯
• Using the 'styles' prop in conjunction with Tailwind to add advanced inline styles, such as clip paths and svg rendering💅
• Using CSS clip path with the 'path' function to create custom cubic bezier curves for components🛣️
• Setting types for images that are expected as props inside a child component🖼️
• Making certain props optional using the '?' operator❓
• Using the Swiper.js React API to create image carousels🎡
• Customizing pagination bullets and navigation arrows in Swiper.js carousels🔨
• Relatively positioning html elements for hover effects🖱️
• Selectively merging certain commits from one branch to another using git cherry-pick🍒
• Using the <a> tag when using the 'mailto:' functionality instead of the <Link> tag. The <Link> tag is meant to interface with Next.js' file-based routing. Using it for 'mailto:' will result in buggy behaviour. In my case constantly opening the email whenever the page is brought back into window context📨
• Next's <Image> tag's width and height properties aren't necessarily for the actual size that the image will be displayed at. That's determined by the 'sizes' property⁉️
• Routing to sections in different pages using url paths in href tag🛣️
• Using Framer Motion to add smooth, performant, customized animations🤸
• Routing to an id on different page and making the scroll behaviour smooth🧈
• Refactoring code can be a nightmare🤦‍♂️
• Dynamically rendering social media icons📸
• Using react-countup to implement a counting up effect for numbers when they're scrolled into the viewport⬆️
• Setting up Vercel Analytics🔬
• Using Google Search Console to debug SEO issues🕷️
• Generating a sitemap with a script to improve SEO🗺️
• Learning about DNS and configuring domains🌐
• Sending emails through code is a nightmare💀
• Using the Resend email service to verify domain, generate API key, and implement a functional contact form📨
• Creating email templates for automatic responses from the Resend server to user that filled out the contact form; thus providing confirmation that their message has been received by the team👍
• Using the react-toastify library to display notifications to the user once they hit the submit button on the contact form🔔
• Reducing bundle sizes through code refactor, resulting in improved performance🚀
• Carefully architecting a page before jumping into development. Deeply thinking about the html structure first🏗️
• Storing data in nested JSON files and accessing them📃
• You can't use for loops, if...else statements, and switch...case statements directly inside jsx🤯
• Setting custom screen breakpoints on Tailwind📱
• Adding calendar integration using the Add to Calendar Button library📅
• Using git merge main --ff-only to merge commits from main to dev branch while avoiding merge commits✅
• Adding a popup modal using the reactjs-popup library🎉