A modern, responsive personal portfolio website showcasing the achievements, work, and impact of Bea Mendez Gandica - Program Manager at Microsoft, Founder & CEO of Nuevo Foundation, and the first Venezuelan-American to have a statue in the United States.
This website tells the story of Bea Mendez Gandica, a Venezuelan-American technology leader who has dedicated her career to breaking barriers and creating opportunities for underrepresented communities in STEM. Born in San Cristóbal, Venezuela, and now making history in the United States, this portfolio showcases her journey from immigrant to industry leader.
- 22,762+ students impacted across 39 countries and territories
- First Venezuelan-American to have a statue in the United States (Smithsonian AAAS IF/THEN Collection)
- 10+ years at Microsoft as a Program Manager
- Founder & CEO of Nuevo Foundation (2018-present)
- International speaker and STEM advocate
- Responsive Layout: Optimized for all device sizes (mobile, tablet, desktop)
- Professional UI/UX: Clean, modern design with smooth animations
- Accessibility: Semantic HTML and ARIA labels for screen readers
- Performance Optimized: Fast loading with optimized images and assets
- Hero Section: Introduction with call-to-action buttons
- About: Personal story and background
- Expertise: Technical skills and areas of focus
- Achievements: Awards, recognitions, and milestones
- Nuevo Foundation: Details about her nonprofit organization
- Speaking: Information about talks and presentations
- Media Coverage: Press mentions and features
- Gallery: Professional photos and event images
- Connect: Contact information and social links
- Smooth Scrolling: Enhanced navigation experience
- Mobile Menu: Responsive hamburger navigation
- Scroll Animations: Elements fade in as you scroll
- Social Sharing: Open Graph and Twitter Card meta tags
- SEO Optimized: Proper meta descriptions and structured content
- HTML5: Semantic markup with accessibility features
- CSS3: Custom properties, Flexbox, Grid, and animations
- Vanilla JavaScript: No frameworks - pure, lightweight JS
- Google Fonts: Inter and Playfair Display typography
- Color Palette: Professional blue (#0a2540) and gold (#f59e0b) scheme
- Typography: Modern font pairing for readability and elegance
- Responsive Breakpoints: Mobile-first approach
- Component-based CSS: Modular and maintainable styles
beagandica.com/
├── index.html # Main HTML file
├── styles.css # All CSS styles and animations
├── script.js # JavaScript functionality
├── assets/
│ └── images/ # Photos and graphics
│ ├── favicon.png
│ ├── bea-prof-1.png
│ ├── Bea NF_Meany_20250207.jpg
│ ├── Bea NF_Meany_2_20250207.jpg
│ ├── Bea SDCC AI Panel 2025.jpg
│ ├── Bea-statue-PR.jpeg
│ ├── Aspire-Talks-142.jpg
│ ├── Eller_Homecoming_Awards_2023_AZ_Inn_Julius_Schlosburg_20231103_1111.jpg
│ └── NuviGif_Party.gif
└── README.md # This documentation
- A modern web browser (Chrome, Firefox, Safari, Edge)
- A local web server (optional, for development)
-
Clone the repository
git clone https://github.com/beagandica/beagandica.com.git cd beagandica.com -
Open the website
- Option A: Double-click
index.htmlto open in your default browser - Option B: Use a local server for better performance:
# Using Python python -m http.server 8000 # Using Node.js (http-server) npx http-server # Using PHP php -S localhost:8000
- Option A: Double-click
-
View the website
- Navigate to
http://localhost:8000if using a local server - Or simply open the file directly in your browser
- Navigate to
The website uses CSS custom properties for easy theming. Update these values in styles.css:
:root {
--primary: #0a2540; /* Main brand color */
--secondary: #f59e0b; /* Accent color */
--dark: #0a2540; /* Text color */
--light: #f8fafc; /* Background color */
--white: #ffffff; /* Pure white */
}- Text Content: Edit the HTML directly in
index.html - Images: Replace files in
assets/images/and update references in HTML - Social Links: Update the connect section with your preferred contact methods
- Layout: Modify CSS Grid and Flexbox properties in
styles.css - Animations: Adjust transition timings and effects
- Typography: Change font families in the Google Fonts import
The website is fully responsive with breakpoints at:
- Mobile: < 768px
- Tablet: 768px - 1023px
- Desktop: ≥ 1024px
All images are optimized and responsive, with proper alt text for accessibility.
This site is ready for deployment on GitHub Pages:
- Push your code to a GitHub repository
- Go to Settings → Pages in your repository
- Select "Deploy from a branch" and choose "main"
- Your site will be available at
https://[username].github.io/[repository-name]
- Netlify: Drag and drop the project folder
- Vercel: Connect your GitHub repository
- Traditional Hosting: Upload files via FTP to your web server
While this is a personal portfolio website, contributions for bug fixes, improvements, or accessibility enhancements are welcome:
- Fork the repository
- Create a feature branch (
git checkout -b feature/improvement) - Commit your changes (
git commit -am 'Add some improvement') - Push to the branch (
git push origin feature/improvement) - Open a Pull Request
Bea Mendez Gandica
The best way to reach out is via LinkedIn: Connect with Bea on LinkedIn
- Professional Speaking Inquiries: Through LinkedIn messaging
- Nuevo Foundation: Learn more at nuevofoundation.org
- Typography: Google Fonts (Inter & Playfair Display)
- Icons: Custom SVG icons and Font Awesome
- Photography: Professional photos from various events and sessions
- Inspiration: The amazing students and communities that drive this mission
"Si usted tiene, usted tiene que dar." - If you have, you have to give. - Bea's grandfather, Papito
Built with ❤️ by Bea Mendez Gandica
Rewriting the rules of the world, one student at a time.