Report

Gladyreigh Dela Cruz

Email: greygladyreigh@gmail.com

Phone: +971566053401

Location: Dubai, UAE

Introduction

The portfolio site showcases my skills and experiences as a software engineer with a focus on full-stack development and mobile hardware repair. It represents my journey from a developer who started freelancing to building substantial projects such as an e-commerce platform and a 2D platformer game. The site is aimed at potential employers, clients, and collaborators interested in my technical capabilities and professional background. I opted for a clean, responsive design structure to ensure a seamless user experience across devices and to highlight my projects effectively.

Inspiration

• Site 1: Enrico Deiana - This site inspired me with its clean design and effective use of interactive elements. I learned the importance of a minimalistic layout that keeps the focus on the content.
• Site 2: Sean O’Brien - The integration of dynamic features and modern JavaScript libraries on this site demonstrated how to enhance user engagement through interactive elements.
• Site 3: Melyssa Griffin - The emphasis on responsive design and mobile optimization influenced my approach to ensuring that the site performs well on all devices.

Accessibility

• Alt Text for Images: All images include descriptive alt text to assist users who rely on screen readers.
• High Contrast: The color scheme is designed to provide high contrast between text and background, improving readability for users with visual impairments.
• Keyboard Navigation: The site supports full keyboard navigation, making it accessible for users who cannot use a mouse.

Usability

• Clear Navigation: The site features an intuitive navigation menu that allows users to easily find different sections and information.
• Responsive Design: The layout adjusts dynamically to various screen sizes, ensuring a good user experience on both desktop and mobile devices.
• Consistent Styling: Uniform use of colors, fonts, and spacing enhances readability and creates a cohesive visual experience.

Learning

• Responsive Design: I learned how to implement responsive design using CSS media queries, which I achieved through tutorials and practice.
• JavaScript Interactivity: Gaining proficiency in JavaScript to create interactive features like a scroll-driven navigation highlight and a hamburger menu involved exploring resources and experimenting with code.
• Accessibility Standards: I researched web accessibility standards and best practices to ensure that my site is usable by all, guided by resources like the W3C guidelines.

Evaluation I

A successful aspect of my work is the implementation of the responsive design and interactive elements. The site adapts well to different devices, and the interactive features, such as the hamburger menu and scroll-driven navigation highlight, significantly enhance user experience.

Evaluation II

One area for improvement is the site’s load time. To improve performance, I would optimize images and reduce the size of JavaScript files in future iterations.

Resources

• MDN Web Docs - Comprehensive documentation on HTML, CSS, and JavaScript.
• Google Fonts - Used for selecting and implementing web fonts.
• FontAwesome - Icon library used for various icons on the site.
• WCAG Guidelines - Guidelines followed for ensuring web accessibility.

Appendices

Site Map
Wireframes
Mock-ups

Back to Home