Introduction
Welcome to my new portfolio! This isn't my first time building a portfolio website, but it's definitely the most ambitious one yet. As someone who's chronically ill and needs to be mindful of my energy levels, I've learned to pace myself while working on passion projects like this. The combination of frequent medical appointments and managing my health takes up a significant portion of my time, but I'm determined to create something beautiful and functional.
Honestly, my first portfolio was pretty sick too! I mean, I liked it at the beginning, but then I started to believe that I could do better than that and explore a new style or... continue my style, in a new way. As you can notice, I really love some effects and designs in particular, and this is kinda obvious when we see my other personal website, luvrksknskyejourney↗ when we pay attention to the details. I ABSOLUTELY LOVE glassmorphism and the UI of iOS/macOS and other OS like Arch Linux or Debian with Hyprland. I love clean design, but also with some personal touch and color.
🎨 Design
The design of this portfolio is inspired by modern UI trends, particularly the beautiful glass morphism aesthetic that's become popular in recent years. I wanted to create something that feels both contemporary and timeless, with careful attention to every detail. At least that's what I try to achieve.
Visual Elements
- Glass Morphism: Translucent panels with backdrop-filter blur effects create depth and visual interest
- Smooth Animations: Every interaction is accompanied by carefully crafted transitions and animations
- Video Background: A dynamic background that adds movement without being distracting
- Color Palette: Subtle gradients and carefully chosen colors that work in harmony
Technical Architecture
One of the things I'm most proud of is the modular architecture I implemented. Instead of writing spaghetti code in a single file (like my first portfolio or like I'm used to lol), I organized everything into separate manager classes that handle specific functionality. Each module has the necessary imports from other modules, exports its class as a singleton, global registration for compatibility, communication methods between modules, and an event system for coordination. Index.js imports and coordinates everything as the main entry point, while core.js is the central coordinator that handles all the managers. The structure is quite simple, but I still had fun creating it for my portfolio. The modules are automatically loaded when I simply include index.js in the main HTML!
Core Structure
The project is organized around a central Core that orchestrates all other managers. This approach makes the code more maintainable, testable, and easier to understand. Here's how it's structured:
- Core: The brain of the application, coordinating all other managers
- NavigationManager: Handles smooth page transitions and routing
- AnimationsManager: Controls all animations and visual effects
- MusicManager/SoundManager: Manages the audio player and playlist, manages also the sound effects of the UI
- GalleryManager: Handles the image gallery with categories
- ContactManager: Manages the contact form and messaging
Key Features
The website includes several interactive features that make it more than just a static page:
- Music Player: An integrated audio player with playlist support
- Photo Gallery: A categorized image gallery with smooth transitions
- YouTube Integration: Embedded video with custom controls
- iMessage-Style Chat: A unique contact interface that mimics Apple's iMessage
- Dark/Light Mode: Theme switching with persistent preferences
- Interactive Panels: Hover effects and animations on every element
Development Process
Building this portfolio has been and still is a learning experience. I wanted to challenge myself by using vanilla JavaScript instead of relying on frameworks like React or Vue. This decision taught me a lot about DOM manipulation, event handling, and state management. In fact, almost all the time I love to use vanilla Javascript tbh, it's just so flexible and powerful.
Here are some of the development techniques I employed:
- Used CSS transforms and opacity for better animation performance
- Implemented lazy loading for images and media
- Built a centralized sound manager to coordinate all audio playback
🎯 What's Next
This portfolio is a living project that will continue to evolve. I have several features planned for future updates:
- 📊 Project Case Studies: Detailed breakdowns of my work
- 🎮 Interactive Demos: Live examples of my code experiments
- 🌍 Multilingual Support: Content in English and Spanish maybe...
💭 Personal Thoughts
Creating this portfolio has been more than just a technical exercise—it's been a way to express myself and my journey as a developer. Every animation, every color choice, every interaction has been carefully considered to reflect who I am and what I care about.
I'm grateful for my boyfriend, who's also a developer and has been incredibly supportive throughout this process. He made the entire backend of this portfolio possible, and his insights have been invaluable. Fr, I think that it's important to have a support system in place, especially when tackling complex projects like this. He is always there for me when I need help or a fresh perspective.
Thank You
If you've made it this far, thank you for taking the time to read about my journey. I hope this portfolio inspires you in some way, whether you're a fellow developer, a potential friend, or just someone who appreciates good design.
Feel free to explore the rest of the site, check out my work, and don't hesitate to reach out if you'd like to connect. The code for this portfolio is open source, so if you want to use any part of it for your own projects, please do! I believe in sharing knowledge and helping others grow. Soon I will upload the complete code to GitHub, so stay tuned with that!