Overview
The portfolio includes an interactive macOS-style Calendar app that displays important career milestones. Events can come from two sources:- Local events - Defined in
app/textos.ts - MongoDB events - Fetched from a MongoDB collection (NFQ category only)
Local events are for static milestones (internships, major projects). MongoDB events are ideal for ongoing updates, especially for current employers.
CalEvent Interface
All calendar events follow this TypeScript interface:app/textos.ts
Event Categories
Categories organize events by company or type:app/textos.ts
Adding a New Company Category
Local Calendar Events
Local events are defined in thecalendarEvents array in app/textos.ts.
Real Examples from Source
app/textos.ts
JavaScript Date months are 0-indexed: January = 0, February = 1, …, December = 11
Adding a Local Event
MongoDB Calendar Events
For the NFQ category, events can be dynamically loaded from MongoDB. This is useful for adding events without redeploying the application.MongoDB Configuration
Configure your MongoDB connection in.env:
.env
MongoDB Document Structure
Each MongoDB document should follow this structure:How MongoDB Events are Fetched
Themongodb.server.ts file handles fetching NFQ events:
app/lib/mongodb.server.ts
Event Merging Logic
The Calendar component merges local and MongoDB events:app/components/Calendar.tsx
- Static NFQ events in
textos.tsare filtered out - MongoDB NFQ events are converted from ISO strings to Date objects
- Both arrays are merged into a single
EVENTSarray
Adding a MongoDB Event
Ongoing Events
Events without anend date (or with end far in the future) are marked as “ongoing”:
Creating an Ongoing Event
Event Colors
Colors should match the company colors defined incalendarCompanies:
Event Display in Calendar
Events are displayed:- In the calendar grid - As colored indicators on the start date
- In the sidebar - Filterable by category
- In the detail panel - Full information when a date is selected
What Gets Displayed
When a user clicks a date with events:Optimus Price — Inetum
Oct 2024 — Jul 2025
PROBLEMA
Los precios se fijaban sin un modelo cuantitativo claro…
Best Practices
Use descriptive IDs
Event IDs should be unique and descriptive:
everis-internship, nfq-onboardingWrite clear problema/solucion
Focus on the challenge, your approach, and the outcome. Keep it concise but informative.
Match category colors
Always use the color from
calendarCompanies for consistencyUse MongoDB for frequent updates
If you’re actively adding events for your current employer, use MongoDB instead of redeploying
Troubleshooting
Events not showing in calendar
Events not showing in calendar
Check:
- The date is correct (remember months are 0-indexed)
- The category exists in
calendarCompanies - The category filter is enabled in the sidebar
- The event’s color matches the category color
MongoDB events not loading
MongoDB events not loading
Verify:
MONGODB_URIis correctly set in.env- Database and collection names match
- MongoDB documents have all required fields:
titulo,problema,solucion,aprendizaje,fecha - The server has successfully connected (check logs)
Date showing incorrectly
Date showing incorrectly
Remember:
- JavaScript months are 0-indexed: January = 0, December = 11
- Use
new Date(year, month, day)format - For MongoDB, use ISO date strings:
"2025-10-27T00:00:00.000Z"
Event details not displaying
Event details not displaying
Ensure:
- All three sections (
problema,solucion,aprendizaje) have content - The
startdate is a valid Date object - The event’s
categorymatches one of the defined categories
Related Pages
Portfolio Content
Learn about all content sections
Terminal Data
Understand data structures and navigation
MongoDB Setup
Configure MongoDB for dynamic events