A simple project for show who I am and what kind of things I can make.
Explore the docs »
View Page
·
Report Bug
Table of Contents
This portfolio is a showcase of my professional skills and technical expertise, built using cutting-edge technologies such as React, TypeScript, Vite, and Bun.
The main goal of this project is to highlight my capabilities as a professional, demonstrating my ability to create modern and efficient web applications. Through this webpage, I aim to provide potential employers and collaborators with a comprehensive view of my work and the value I can bring to their projects.
src/
├── components/ # Reusable UI components
│ ├── index.ts # Barrel export for clean imports
│ ├── Header/ # Navigation header component
│ ├── Footer/ # Site footer component
│ ├── LanguageToggle/ # Internationalization toggle
│ └── sections/ # Page sections
│ ├── index.ts # Section exports
│ ├── AutobiographySection/
│ └── ProjectsSection/
├── contents/ # Content data and configuration
│ ├── index.ts # Content exports
│ ├── projects.ts # Project data and interfaces
│ ├── navigation.ts # Navigation items configuration
│ └── footer.ts # Footer sections configuration
├── config/ # Application configuration
│ ├── index.ts # Main configuration exports
│ ├── colors.ts # Color palette and theme
│ ├── sections.ts # Section configuration
│ └── socialLinks.ts # Social media links config
├── i18n/ # Internationalization
│ ├── index.ts # i18n setup and configuration
│ └── locales/ # Translation files
│ ├── en.json # English translations
│ └── es.json # Spanish translations
└── assets/ # Static assets
└── react.svg # Component icons and images
- Component Isolation: Each component is self-contained with its own CSS, TypeScript, and index files
- Barrel Exports: Clean import statements using index.ts files throughout the project
- Section-Based Layout: Logical separation of page sections for better organization
- Centralized Content: All data structures organized in dedicated
contents/directory - Type-Safe Data: TypeScript interfaces for projects, navigation, and footer content
- Reusable Content Functions: Easy data access across multiple components
- Separation of Concerns: Content logic separated from presentation components
- react-i18next Integration: Seamless language switching between English and Spanish
- Type-Safe Translations: TypeScript support for translation keys
- Scalable Localization: Easy addition of new languages through JSON files
- Complete Coverage: All UI elements and content properly translated
- Centralized Config: All configuration files organized in dedicated config folder
- Environment Agnostic: Easy configuration changes without code modification
- Social Links Management: Dynamic social media links with activation states
- Color System: Centralized color palette and theming
- Component-Scoped CSS: Each component has its own CSS file for better maintainability
- Custom CSS Variables: Consistent theming through CSS custom properties
- Responsive Design: Mobile-first approach with modern CSS Grid and Flexbox
- Performance Optimized: No external CSS framework dependencies
- React 19: Latest React features for modern component development
- TypeScript: Full type safety and enhanced developer experience
- Vite: Lightning-fast build tool and development server
- Bun: High-performance JavaScript runtime and package manager
- react-icons: Comprehensive icon library for consistent iconography
- Custom CSS: Tailored styling without framework dependencies
- CSS Variables: Dynamic theming and color management
- react-i18next: Industry-standard i18n solution
- i18next-browser-languagedetector: Automatic language detection
- JSON-based translations: Easy translation management
This architecture ensures the project remains maintainable, scalable, and developer-friendly while providing excellent performance and user experience.
This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.
Make sure you have Node.js and npm installed, or Bun as an alternative faster JavaScript runtime and package manager.
- Bun (alternative)
curl -fsSL https://bun.sh/install | bash # or on Windows powershell -c "irm bun.sh/install.ps1 | iex"
- Clone the repo
git clone https://github.com/mega-barto/mega-barto.github.io.git
- Navigate to the project directory
cd mega-barto.github.io - Install packages (using npm or bun)
npm install # or with bun bun install - Start the development server
Your application will be available at
npm run dev # or with bun bun devhttp://localhost:5173.
This repository currently uses a GitFlow-like model with long-lived integration and release branches.
- main: production branch. It points to stable releases (for example, Release v3.0.1).
- develop: integration branch for completed features before release.
- release/vX.Y or release/vX.Y.Z: release stabilization branches (examples: release/v3.0, release/v3.0.1).
- feature__*: feature work branches (examples: feature__may_updates, feature__carousel).
- featute__astro_migration: legacy feature branch with a typo in the prefix, still valid and tracked.
- Create a feature branch from develop:
- git checkout develop
- git pull origin develop
- git checkout -b feature__short_name
- Work and commit in small logical units.
- Open PR from feature branch to develop.
- When develop is ready for publication, create or update release branch:
- git checkout -b release/vX.Y.Z develop
- Stabilize release branch (fixes, version bumps, CI/workflow adjustments).
- Merge release branch into main and tag version (for example v3.0.1).
- Sync the release changes back into develop to avoid drift.
Current history follows Conventional Commits style in most cases.
Use this format:
- type(scope): short imperative summary
Common types already used in this repository:
- feat: new feature
- fix: bug fix
- refactor: internal change without behavior change
- style: visual or formatting adjustments
- chore: maintenance, tooling, dependencies
- ci: CI/CD changes
- merge: explicit branch synchronization commits
- release: version/release commits
Examples aligned with existing history:
- feat(content): add tribu-hackathon event and scrum certificate
- refactor(home+about): move autobiography card design to landing
- chore(workflow): add Node.js setup step to deployment workflow
- merge: sync develop after release v3.0.1
- release: v3.0.1 - random hero profile per refresh, CI Node 22
Branch naming guideline:
- Preferred: feature__descriptive_name
- Keep release branches as: release/vX.Y.Z
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the CC0 1.0 Universal License. See LICENSE for more information.
Juan Alejandro Pérez Bermudez - @Mega_Barto - personal.jperez@gmail.com
Project Link: https://github.com/mega-barto/mega-barto.github.io