NorthernBytes
Sobre el proyecto
NorthernBytes es la landing page oficial de mi empresa de desarrollo de software. Diseñada para transmitir profesionalismo y modernidad, la web presenta los servicios ofrecidos con un diseño elegante que combina tipografía serif editorial con elementos visuales orgánicos. Cuenta con animaciones avanzadas, formulario de contacto y un sistema de navegación fluido.
Características principales
- Diseño editorial con tipografía serif moderna
- Animaciones avanzadas con GSAP y Framer Motion
- Hero interactivo con código animado y rotación de palabras
- Tarjetas de servicios con formas decorativas orgánicas
- Formulario de contacto funcional
- SEO optimizado con datos estructurados
- View Transitions para navegación fluida
- Diseño responsive completamente adaptable
Desafíos técnicos
- Implementar rotación 3D de letras con GSAP letter flip
- Crear formas blob orgánicas con SVG paths
- Optimizar animaciones de scroll con ScrollTrigger
- Combinar tipografía serif y sans-serif de forma armoniosa
Stack tecnológico
Paleta de Colores
Background
#F0EEE6
Fondo principal beige claro, elegante y cálido
Foreground
#171717
Texto principal oscuro para máximo contraste
Accent
#047EDD
Azul corporativo para CTAs y enlaces
Footer BG
#141413
Fondo oscuro para el footer, creando contraste
Web Dev
#B8D8E8
Azul pastel suave para desarrollo web
E-commerce
#E8D4F0
Púrpura pastel para tiendas online
Desktop Apps
#CBCADB
Gris lavanda para apps de escritorio
Mobile Dev
#F5D5CB
Durazno pastel para desarrollo móvil
Custom Software
#C8E6C9
Verde menta pastel para software personalizado
Tipografía e Iconografía
Work Sans
Google Font (Sans-serif)
Headings, navegación, botones y elementos de UI
NorthernBytes
clamp(28px, 6vw, 48px) • 600
Transformamos ideas
clamp(32px, 8vw, 72px) • 700
Source Serif 4
Google Font (Serif)
Texto del cuerpo, descripciones y contenido editorial
Desarrollamos soluciones tecnológicas innovadoras
20px • 400
Transformamos ideas en experiencias digitales
18px • 400
- Lucide React como biblioteca principal
- SVGs inline personalizados para elementos decorativos
- Formas blob orgánicas en tarjetas de servicios
- Iconos de navegación y redes sociales integrados
Stack Tecnológico
Next.js 15
Framework React con Turbopack
- App Router
- Server Components
- Turbopack para desarrollo rápido
React 19
Biblioteca UI versión 19
- Hooks modernos
- Concurrent features
- Mejor rendimiento
Framer Motion
Animaciones declarativas fluidas
- Transiciones suaves
- Animaciones de entrada
- whileInView triggers
GSAP
Animaciones complejas y scroll
- Letter flip 3D
- ScrollTrigger
- Timeline preciso
Tailwind CSS v4
Framework de utilidades CSS v4
- Sintaxis @theme inline
- Variables CSS nativas
- JIT compiler
Lucide React
Biblioteca de iconos moderna
- Iconos SVG optimizados
- Tree-shakeable
- Consistencia visual
Detalles Técnicos
Hero Interactivo con Código
Sección hero con snippet de código animado que muestra palabras rotando con efecto 3D letter flip usando GSAP
- Rotación de palabras cada 2.5 segundos
- Efecto letter flip con transformación 3D
- Cursor parpadeante animado
- Snippet de código con syntax highlighting
const proyecto = {
tecnologia: "moderna",
diseño: "elegante",
resultado: "exitoso"
};
transform(proyecto);
// ✓ Listo para lanzarTarjetas de Servicios Animadas
Grid de servicios con animaciones de scroll y formas decorativas orgánicas únicas
- Animación on-scroll con GSAP ScrollTrigger
- Transformación 3D con rotateX y scale
- SVG paths orgánicos como decoración
- Hover effects con transición suave