Description:
A showcase of my journey into web development. This project was my first foray into using HTML and CSS. It's structured to highlight my projects, skills, and experiences, demonstrating the foundational practices of web page layout and design.
For my initial portfolio page, I aimed for a clean and minimalist design to show that a simple design can be effective for a webpage. I selected a color palette that reflects this aesthetic, using neutral tones with a few accent colors to create a visually appealing yet simple design:
#70BEBC (Soft Seafoam)
#F8F4DE (Warm Ivory)
#E22728 (Vibrant Coral)
I used Merriweather and Cardo as fonts to maintain readability and a clean look. One of the challenges I faced was integrating custom CSS with Bootstrap's default styles, particularly in ensuring that my styles did not conflict with Bootstrap’s classes. I initially struggled with this but overcame it by thoroughly reviewing the official Bootstrap documentation, which was greatly beneficial. This helped me understand how to better utilize Bootstrap’s components and grid system alongside my custom styles.I used Figma to create the wireframe and design mockup for this project. Initially, I planned for a single-page design as seen in my wireframe. However, I realized that the page was becoming too long and cluttered, which led me to add an extra page in my design mockup to improve usability and navigation.
Initially, the mockup featured a single page with sections for each project. During development, I decided to create separate pages for each project to enhance user focus and navigation. This change allows for a more detailed presentation of each project, making it easier for visitors to engage deeply with individual works without distractions. The layout adjustments were aimed at improving user experience and content accessibility, reflecting my commitment to iterative design improvements.
For the development of my Personal Portfolio Website, I used the following technologies:
For this project, I focused on improving my HTML/CSS skills and mastering Bootstrap to structure the layout. I utilized Bootstrap's containers, rows, and columns to create a responsive grid system that adapts to different screen sizes without custom CSS. My goal was to keep the design clean and semantic, using only Bootstrap's built-in classes. I also added CSS transitions and animations to enhance the user experience subtly, maintaining a minimalist and readable design.
I am dedicated to ensuring my application is accessible to all users, including those with disabilities. To achieve this, I will conduct testing using the NVDA screen reader and the AXE extension, adhering to WCAG 2.0 standards throughout the development process. As my project testing progresses, I will document my accessibility testing efforts and eventually add pictures to showcase my testing methodologies and results, highlighting my commitment to creating an inclusive application.