Plataforma web moderna de ALTER Studio, un estudio boutique de diseño digital basado en Bogotá.
- Node.js >= 18
- npm o yarn
# Clonar el repositorio
git clone https://github.com/DeveloperAlejandroS/alter-design-studio.git
cd alter-design-studio
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run dev
# Compilar para producción
npm run build
# Servir preview de build
npm run preview| Tecnología | Versión | Propósito |
|---|---|---|
| React | ^18 | Librería UI |
| TypeScript | ^5 | Type safety |
| Vite | ^5 | Build tool & dev server |
| React Router | ^6 | Routing |
| Tailwind CSS | ^3 | Styling |
| Framer Motion | ^11 | Animaciones |
| PostCSS | ^8 | CSS processing |
| ESLint | ^8 | Code linting |
src/
├── components/ # Componentes reutilizables
│ ├── BrandbookDownloadLink.tsx
│ ├── FixedFooter.tsx
│ ├── FixedNavbar.tsx
│ ├── MainNavLinks.tsx
│ ├── OrganicShape.tsx
│ └── SiteLogo.tsx
├── pages/ # Páginas (rutas principales)
│ ├── Home.tsx
│ ├── Estudio.tsx
│ ├── Equipo.tsx
│ └── Contacto.tsx
├── assets/ # Recursos estáticos
├── App.tsx # Componente raíz
├── main.tsx # Entry point
├── index.css # Estilos globales
└── vite-env.d.ts # Type definitions
# Desarrollo
npm run dev # Inicia servidor en http://localhost:5173
# Producción
npm run build # Compila TypeScript y empaqueta para prod
npm run preview # Previsualizacion del build local
# Linting
npm run lint # Ejecuta ESLint- FixedNavbar — Navegación persistente en la parte superior
- FixedFooter — Footer fijo en la parte inferior
- MainNavLinks — Links de navegación principal
- OrganicShape — Componente de formas orgánicas SVG
- BrandbookDownloadLink — Link para descargar brandbook
Configurado en tailwind.config.js con variables personalizadas de marca.
Procesamiento CSS configurado en postcss.config.js.
Las rutas principales están definidas en App.tsx:
/— Home/estudio— About Studio/equipo— Team/contacto— Contact
- Los componentes están organizados por tipo (components vs pages)
- Se utiliza TypeScript para type safety
- Tailwind CSS para estilos — no CSS modules
- Framer Motion para animaciones suaves
- Hot Module Replacement (HMR) habilitado con Vite
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
ALTER Studio — Bogotá, Colombia