🚀 Modern corporate website for Bitlogic - A company specialized in agile software development and digital transformation for educational institutions.
- About
- Features
- Tech Stack
- Prerequisites
- Installation
- Development
- Build & Deployment
- Project Structure
- Environment Variables
- Contributing
- License
Bitlogic.io is a professional corporate website showcasing our expertise in software design, engineering, and agile development. We specialize in digital transformation solutions for educational institutions, helping them modernize their technological infrastructure and processes.
Key Services:
- Agile software development
- Digital transformation consulting
- Educational technology solutions
- Custom software engineering
- 📱 Responsive Design - Optimized for all devices
- 🚀 Performance Optimized - Built with Gatsby.js for blazing fast loading
- 📝 Content Management - Powered by Strapi headless CMS
- 📰 Blog System - Dynamic blog with categorization
- 🎨 Modern UI/UX - Built with Bootstrap 5 and custom Sass
- 🔍 SEO Optimized - Meta tags, sitemaps, and structured data
- 📊 Analytics Ready - Google Tag Manager integration
- 🌐 Multilingual Support - Spanish language optimization
- ♿ Accessibility - WCAG compliant components
- 🔧 Developer Experience - Hot reloading, linting, and formatting
- Framework: Gatsby.js 4.6+ - React-based static site generator
- UI Framework: Bootstrap 5.1+ - Responsive CSS framework
- Styling: Sass - CSS preprocessor
- Icons: FontAwesome & React Icons
- Animations: React Lottie
- CMS: Strapi - Headless content management system
- Image Processing: Gatsby Sharp & Image plugins
- Forms: Custom React components with validation
- Package Manager: Yarn
- Code Formatting: Prettier
- Build Tool: Webpack
- Bundle Analysis: Webpack Bundle Analyzer
- SEO: Gatsby SEO plugins with React Helmet
- Analytics: Google Tag Manager
- Sitemap: Automated sitemap generation
- Robots.txt: SEO optimization
Before you begin, ensure you have the following installed:
- Node.js (v16.0 or higher) - Download
- Yarn (v1.22 or higher) - Installation Guide
- Git - Download
-
Clone the repository
git clone https://github.com/bitlogic/bitlogic.io.git cd bitlogic.io -
Install dependencies
yarn install
-
Set up environment variables
cp .env.example .env.development # Edit .env.development with your configuration -
Start the development server
yarn develop
-
Open your browser Navigate to
http://localhost:8000to see the site in development mode.
# Start development server with hot reloading
yarn develop
# Build the production site
yarn build
# Serve the production build locally
yarn serve
# Clean Gatsby cache and build artifacts
yarn clean
# Format code with Prettier
yarn format
# Run tests (when implemented)
yarn test- Start development:
yarn develop - Make your changes in the
src/directory - Test locally at
http://localhost:8000 - GraphQL playground available at
http://localhost:8000/___graphql - Format code with
yarn formatbefore committing
The development server includes hot reloading for:
- React components
- Sass/CSS styles
- GraphQL queries
- Gatsby configuration
# Create optimized production build
yarn build
# Serve production build locally for testing
yarn serveCreate environment-specific files:
.env.development- Development settings.env.production- Production settings
# Site configuration
SITE_URL=https://bitlogic.io
STRAPI_URL=https://your-strapi-instance.com
# Analytics (production only)
GTM_ID=GTM-XXXXXXX
ENV_PROD=produccionbitlogic.io/
├── src/
│ ├── components/ # Reusable React components
│ │ ├── Banner/ # Hero banners
│ │ ├── BlogPage/ # Blog-related components
│ │ ├── Footer/ # Site footer
│ │ ├── NavBar/ # Navigation
│ │ ├── HomePage/ # Home page components
│ │ └── ...
│ ├── pages/ # Gatsby pages (auto-routed)
│ │ ├── index.js # Home page
│ │ ├── blog.js # Blog listing
│ │ └── 404.js # Not found page
│ ├── templates/ # Dynamic page templates
│ ├── styles/ # Global styles and Sass files
│ ├── images/ # Static images and assets
│ ├── constants/ # App constants and configuration
│ ├── context/ # React context providers
│ ├── hooks/ # Custom React hooks
│ └── schema/ # GraphQL schema definitions
├── static/ # Static assets (served as-is)
├── gatsby-config.js # Gatsby configuration
├── gatsby-node.js # Gatsby Node APIs
├── gatsby-browser.js # Gatsby Browser APIs
├── gatsby-ssr.js # Server-side rendering config
└── package.json # Dependencies and scripts
- Atomic Design: Components follow atomic design principles
- Reusability: Shared components in
/components - Styling: Each component has its own Sass file
- Props: Well-defined PropTypes for type checking
| Variable | Description | Required | Default |
|---|---|---|---|
SITE_URL |
Production site URL | Yes | - |
STRAPI_URL |
Strapi CMS API endpoint | Yes | - |
GTM_ID |
Google Tag Manager ID | No | - |
ENV_PROD |
Production environment flag | No | - |
We welcome contributions! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes following our coding standards
- Test thoroughly in development mode
- Format your code:
yarn format - Commit your changes:
git commit -m 'Add amazing feature' - Push to your branch:
git push origin feature/amazing-feature - Open a Pull Request
- JavaScript: Follow ES6+ standards
- React: Use functional components with hooks
- Styling: Use Sass with BEM methodology
- Formatting: Use Prettier (run
yarn format) - Commits: Use conventional commit messages
- All changes require a pull request
- At least one code review approval
- All CI checks must pass
- No merge conflicts
This project is licensed under the MIT License - see the LICENSE file for details.
- Website: bitlogic.io
- Email: [email protected]
- LinkedIn: Bitlogic Company Page
Built with ❤️ by the Bitlogic team | Specialized in educational technology and digital transformation