Life in Christ Community Church - Official Website

This project is a custom website developed for Life in Christ Community Church. It serves as a welcoming and informative digital space where church members and visitors can easily access information about the church, events, and community resources. Built with Vite for optimized performance, the website incorporates Barba.js for seamless page transitions, Swiper.js for interactive sliders, and GSAP for smooth animations, creating a dynamic and visually engaging user experience.

The focus of this project was to provide a user-friendly, modern design that enhances the online presence of Life in Christ Community Church, reflecting its mission and fostering community engagement. Each feature is carefully designed to facilitate easy navigation and ensure the website remains an inviting and vibrant hub for church-related activities and resources.

Link to live project: https://lifeinchrist.nl/

(back to top)

📋   Table of Contents

1. Project Overview
2. Features and Enhancements
3. Installation
4. Technologies Used
5. Contact

(back to top)

✏️   Project Overview

The Life in Christ Community Church website is designed to be an accessible and engaging online platform for church members, visitors, and the wider community. The primary goals of the website are to share important information about the church’s mission, events, and ministries, while fostering a sense of community online.

This project represents a thoughtful combination of design and functionality aimed at creating an online space that supports Life in Christ Community Church’s mission, helping users stay connected and informed with ease.

(back to top)

💿   Features and Enhancements

• Informative Hub:
  • Designed as a comprehensive informational resource, the website provides clear and accessible content about the church’s mission, ministries, and community events. Visitors can quickly find service times, learn about church programs, and stay updated on upcoming events, making it a central point for church-related information.
• Smooth Page Transitions:
  • Implemented using Barba.js, providing a seamless browsing experience that enhances navigation across different sections of the site.
• Interactive Sliders:
  • Integrated Swiper.js for visually appealing and interactive image and content sliders, ideal for showcasing events and important announcements.
• Animations and Visual Effects:
  • With GSAP, the site features refined animations that create a dynamic and welcoming environment, while ensuring performance remains optimized.
• Mobile Responsiveness:
  • The layout is fully responsive, providing an optimal experience across devices, whether on desktops, tablets, or smartphones.
• Privacy Policy and Cookie Control:
  • The website respects user privacy with a customizable cookie policy, enabling users to control the loading of third-party content, such as YouTube videos and Google Maps. This ensures that users can manage their data privacy preferences while still accessing all available information.

(back to top)

🛠️   Installation

1. Clone the repo:

git clone https://github.com/JonaRhood/LCCC

2. Replace the current YouTube playlist with the corresponding one:
   • In the file: .github/workflows/fetch_youtube_data.yml, add your playlist ID in the following code:

steps:
    run: |
        curl "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=YOUR-PLAYLIST-ID&key=${YOUTUBE_API_KEY}" -o src/public/data/youtubeData.json

3. Add your YouTube API Key to your GitHub repository:

   • In your new repository on GitHub, go to: Settings > Secrets and variables > Actions > Manage repository secrets (or New repository secret).
   • Create a new repository secret with the name: YOUTUBE_API_KEY.
   • Enter your YouTube API key and save the changes.

4. Install NPM packages:

npm install

3. Run the application:

npm run dev

(back to top)

⚙️   Technologies Used

(back to top)

👤   Contact

Jonathan Cano - [email protected]

(back to top)