Implement Moon Phases Webpage with Smooth Scroll Transitions
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Aptitud para principiantes
- 35/100
Línea de trabajo
No se nombran archivos ni pruebas; primero inspecciona el punto de entrada de React del repositorio y la estructura de página existente. Crea ocho secciones de fases lunares a pantalla completa con imágenes y descripciones, y después verifica las transiciones fluidas, la adaptabilidad y los detalles interactivos de fase solicitados.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
📌 Description:
Develop a single-page React website that visually presents the 8 phases of the moon 🌕🌖🌗🌘🌑🌒🌓🌔.
Each phase should be displayed in a dedicated full-screen section, featuring a high-quality image and a brief description.
✨ Implement smooth scroll transitions and engaging animations using Framer Motion or GSAP for a seamless and immersive experience.
✨ Display all 8 moon phases, one at a time 🌕
✨ Ensure smooth transitions between sections (e.g., fade-in, slide-in effects)
Extra Features:
⚡ Make the website responsive
💫 Add interactive elements (e.g., users can click a moon phase for more details)
🎨 Participants are encouraged to explore and express their creativity while designing the animations and transitions!
Sample Images:
Tech Stack
React JS, Framer Motion/GSAP (or any other library)
- Lenguaje dominante
- HTML
- Estrellas
- 10
- Forks
- 77
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de CommunityOfCoders/WebGenesis
-
Movie Night PlannerAbiertoHard Node + Express React
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
-
Hard Node + Express Vite React
Dificultad 4/5 3-5 días Aptitud para principiantes 45/100
-
Hard Node + Express Vite React
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
-
Flask Hard React
Dificultad 5/5 Más de una semana Aptitud para principiantes 25/100
-
Notes App with Rich Text EditorAbiertoMedium React TailwindCSS
Dificultad 5/5 Más de una semana Aptitud para principiantes 35/100
Todos los issues de CommunityOfCoders/WebGenesis
Issues similares
-
design good first issue help wanted
Dificultad 2/5 1-3 horas Aptitud para principiantes 68/100
scribe-org/Scribe-Android#739 ·
Los mantenedores suelen responder en 1 día
-
Missing icon: tangramAbierto
Dificultad 1/5 1-3 horas Aptitud para principiantes 78/100
-
enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
Los mantenedores suelen responder en 1 día
-
系统配置 - OAuth 提供商中视觉效果有点不统一Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 63/100
router-for-me/Home-Management-Center#206 ·
Los mantenedores suelen responder en 1 día
-
NumericInput rounds stepSize increments when minorStepSize has fewer decimal placesPosiblemente ocupada @auraseb la tomó hoy. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día