⚠️ This is my old portfolio. Have a look at my current one here!⚠️
My main portfolio website. Welcome!
If you find any issues or ideas for fixing them (or suggestions for content), please email me!
I would love to learn from you. alain@christe.co
My philosophy for designing this website is to use a variety of different tools to demonstrate what I've learned about web development so far. I intend to implement React for further functionality, add more content such as a blog, and periodically update my selected projects as I complete them.
The main page was developed with jQuery and Tailwind.
In order of appearance, from top scrolling down:
- Hero section with fixed position, title, and button at the bottom to scroll to the first section
- Navbar that appears at the top of the content until the user scrolls past, at which point it sticks to the top of the page for easy navigation. Background is a monochrome frosted glass effect.
- Navbar buttons that display an appropriate color when hovered over and become larger when the scroll position is inside their respective section.
- About me page with a brief overview of my take on software and links to other content.
- Links to contact section and blog pulse slightly to indicate interactivity to the user.
- Project page with responsive grid for displaying projects. Project boxes glow slightly and provide a brief description with links on hover.
- Contact page with fixed background effect on grid elements. Includes a link to my resume.
- Implement React
- Add light/dark mode toggle
- Provide multilingual support (English, Spanish) based on user locale, with navbar button to toggle between languages.
- Beautify project grid with React, allowing user to see even more information about the projects or even allow for code snippets to run within the website
- Improve performance and mobile functionality across the board
- Develop blog
Unless otherwise specified, I am running mobile testing on my own device, an iPhone 11 Pro Max.
I am running iOS 16.3.1, Chrome 113.0.5672.69, and Firefox 113.0 (30633).
- Mobile (All) Animations appear laggy
Potential fix: Replace current animations with mobile-friendly versions, possibly using frameworks to improve performance or using browser-specific settings. Evaluate performance impact of different effects and potentially remove culprits with media queries. - Mobile (All) Content doesn't fill landscape mode width
Potential fix: Change width settings, possibly replacing max-w-full. Needs research. - Mobile (All) Navbar buttons affect each other when transformed with scale.
Potential fix: Make only the text increase in size and prevent button size from changing, either with text positioning or flex properties. - Mobile (All) Background effect on contact grid doesn't work on mobile.
Potential fix: Research mobile-friendly ways of producing the effect, maybe by changing the background from being property-defined to an intermediate div layer as if trying to create a parallax effect. - Mobile (Chrome, Firefox) Overscroll is ignored at the bottom of the page. Firefox overscrolls by a few
units while Chrome overscrolls by an entire device height.
Potential fix: Research browser-specific overscroll settings or redo element positioning to ensure that the bottom of the content is the bottom of the page.