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/megabarto.rocks - 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.
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