Inspiration
The vision for my portfolio was sparked by a fusion of nostalgia for 1980s and 1990s computing—CRT monitors, 8-bit video games, and the iconic green glow of early terminal interfaces—and a desire to create a modern, professional showcase for my skills as an Information Systems student. I drew inspiration from the hacker culture of the early internet, particularly the "Matrix" aesthetic with its falling code, and the pixel art revival trend dominating 2025 web design. The goal was to craft a portfolio that feels like stepping into a retro game while appealing to tech recruiters with clean typography (Roboto and Press Start 2P), a sophisticated gradient palette ((#0F2027 \to #2C5364 \to #203A43)), and accessible design. The addition of a pure CSS Tic-Tac-Toe easter egg was inspired by 2025’s emphasis on playful micro-interactions, aiming to reward curious users (like judges inspecting the code) with a memorable, interactive surprise.
What It Does
This portfolio is a dynamic, interactive platform showcasing my academic journey, professional experience, and technical skills at Catanduanes State University. It highlights government internship achievements, academic projects, and proficiency in tools like SQL, PHP, JavaScript, and Python, all wrapped in a retro pixelated aesthetic. Key features include:
Engaging Hero Section: A bold introduction with pixelated typography, animated floating shapes, and a CRT scanline effect, evoking a retro game title screen.
Interactive Navigation: A glitch-effect navbar with a responsive hamburger menu, ensuring seamless access across devices.
Comprehensive Content: Sections for About, Education, Experience, Skills, and Contact, with pixelated visuals like skill bars styled as retro game HUDs and project cards with zoom effects.
Hidden Easter Egg: A pure CSS Tic-Tac-Toe game in the footer, rewarding exploration with playful interactivity.
Accessibility and Usability: High-contrast text ((#f0f0f0) on dark gradients), ARIA labels (e.g., aria-controls on menu toggle), and smooth-scroll CTAs (e.g., "Get In Touch") cater to diverse users, including recruiters and visually impaired visitors.
Downloadable Resume: A prominent button for recruiters to access my resume, enhancing professional appeal.
Back-to-Top Button: A pixelated rocket icon for easy navigation, visible on scroll with pure CSS logic.
The portfolio delivers a cohesive user journey, blending nostalgia with functionality to showcase my potential as a tech professional.
How We Built It
The portfolio was crafted using only HTML and CSS, demonstrating mastery of front-end fundamentals without JavaScript. Key technical aspects include:
Semantic HTML5: Structured with
, , , and tags for SEO and accessibility, ensuring screen readers navigate easily.CSS Architecture:
Custom Properties: Centralized variables (e.g., --primary-color: #64B5F6, --main-gradient) for maintainability and theme consistency.
Mobile-First Design: Base styles for small screens, with progressive enhancements at 768px and 480px breakpoints using media queries.
Utility Classes: Reusable .hover-glow and .glass-btn classes streamline hover effects and button styling.
Retro Aesthetic:
Pixelated patterns via SVG data URLs (e.g., --pixel-pattern) for images and skill bars, mimicking 8-bit sprites.
A layered background with radial gradients and a matrix-style falling code effect (body::before, ::after) for immersive depth.
Glitch animations on nav links and CRT scanlines in the hero section for a retro vibe.
Pure CSS Interactivity:
Hamburger menu toggle using :checked pseudo-class for mobile navigation.
Tic-Tac-Toe easter egg with checkbox-based state management for a no-JS game.
Scroll-triggered back-to-top button with :has and :target selectors for visibility control.
Performance Optimizations:
Hardware-accelerated animations (transform, opacity) with will-change for smooth rendering.
Suggested lazy-loaded images (loading="lazy") for project images to improve load times.
Accessibility: High-contrast text, ARIA labels (e.g., aria-expanded on menu toggle), and enhanced focus states for keyboard navigation.
The site is lightweight, cross-browser compatible (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+), and optimized for fast loading, aligning with 2025 Core Web Vitals standards (targeting LCP < 2s).
Challenges We Ran Into
Building a visually rich portfolio with pure HTML/CSS posed several challenges:
Complex Animations Without JavaScript:
Crafting the matrix falling code and floating shapes required intricate CSS keyframes. Balancing performance with visual impact was tough, as multiple background layers risked lag on low-end devices.
Solution: Optimized animations by reducing background-size to 40px and merging layers where possible, using will-change: transform for GPU acceleration.
Responsive Retro Aesthetic:
Maintaining pixelated visuals across devices was tricky due to inconsistent image-rendering: pixelated support (e.g., Safari blurriness). The hamburger menu needed clear toggle feedback.
Solution: Used SVG data URLs for consistent pixelation and added a :checked state to change the hamburger icon to "✖".
Accessibility Compliance:
Achieving WCAG 2.2 AA compliance was challenging with low-contrast secondary text ((#B0BEC5)) and the interactive easter egg. Screen readers struggled with the game’s state changes.
Solution: Upgraded text to (#f0f0f0) (contrast ratio (\approx 5:1)), added ARIA attributes (e.g., role="status" for game updates), and ensured focusable elements.
Easter Egg Complexity:
Building a functional Tic-Tac-Toe game without JavaScript was ambitious. Simulating game logic with :checked states was limited and complex.
Solution: Kept the game simple (manual play), with plans to explore CSS counters for pseudo-AI if time allows.
Balancing Creativity and Professionalism:
The retro theme risked being too playful for recruiters. Overloading animations could distract from content.
Solution: Limited animations to subtle effects (e.g., glitch on nav, glow on cards) and used clean typography to maintain professionalism.
Accomplishments That We're Proud Of
Pure CSS Mastery: Achieved over 15 unique animations (glitch, matrix code, floating shapes, pixel reveals) without JavaScript, showcasing deep CSS expertise and fast performance.
Unique Retro Aesthetic: The pixelated theme, CRT scanlines, and Tic-Tac-Toe easter egg create a memorable experience that stands out in a sea of generic portfolios.
Accessibility Focus: Near-WCAG 2.2 AA compliance with high-contrast text, ARIA labels, and keyboard-friendly navigation, ensuring inclusivity.
Interactive Easter Egg: The pure CSS Tic-Tac-Toe game is a hackathon highlight, rewarding curious users with a thematic surprise.
Optimized Performance: Lightweight design with hardware-accelerated animations and lazy-loaded images ensures fast load times.
Responsive and Polished: Seamless mobile-first design with a professional gradient palette and consistent spacing across devices.
What We Learned
CSS Capabilities: Mastered pseudo-classes (:checked, :has), keyframe animations, and SVG data URLs to create dynamic, interactive experiences without JavaScript.
Accessibility Best Practices: Learned to prioritize contrast ratios, ARIA attributes, and focus states early, using tools like WAVE for inclusivity.
Performance Optimization: Gained insights into optimizing CSS animations with GPU acceleration and minimizing render-blocking styles for low-end devices.
Balancing Aesthetics and Functionality: Understood how to align creative themes with professional goals, appealing to technical and non-technical audiences.
User-Centered Design: Discovered the value of micro-interactions (e.g., easter egg, back-to-top button) in engaging users and enhancing UX.
What's Next for Personal Portfolio
The portfolio is a strong hackathon entry, but there’s room to push boundaries further:
Enhanced Easter Egg: Add pseudo-AI to the Tic-Tac-Toe game using CSS counters or additional :checked states for automated opponent moves, enhancing interactivity.
Dynamic Theme Toggle: Introduce a "night vision" mode (invert filter with retro green hue), aligning with 2025’s accessibility trends, using a pure CSS checkbox toggle.
3D Pixel Effects: Implement CSS 3D transforms for the profile image (e.g., rotating cube on hover) to amplify the retro game vibe.
Scroll Animations: Add a "scanline wipe" effect for section reveals using clip-path and @keyframes for a retro loading screen feel.
Extended Pixel Art: Incorporate pixelated icons for social links and a masonry grid for skills, embracing 2025’s bold block layouts.
Deployment and Analytics: Host on GitHub Pages or Vercel with a custom domain, and add a Lighthouse audit (aiming for 95+ scores) to ensure top performance and accessibility.
Konami Code Easter Egg: Explore a pure CSS Konami code trigger (using focus order) to unlock a hidden animation, delighting tech-savvy judges.
This portfolio blends retro nostalgia with modern professionalism, showcasing my technical skills and creative vision. Future iterations will continue to innovate, ensuring it remains a standout representation of my journey as an Information Systems professional.
