Site Report
A reflection on my web development journey and the creation of this portfolio
Development Experience
Learning Process
My journey in web development began with HTML and CSS fundamentals. The initial challenges were understanding the box model and creating responsive layouts. Then I discovered the goodness of CSS Grid and Flexbox, and layout design was never the same again. I also learned JavaScript to add interactivity and dynamic content to my projects.
Design Decisions
For this portfolio, I have chosen a royal color scheme to depict professionalism and creativity. The prominent colors are imperial red to signify energy, regal gold for accentuating, and majestic purple for sophistication. I have employed a clean, contemporary font that offers readability across devices without compromising a professional look.
Technical Implementation
I implemented semantic HTML5 elements throughout the site to improve accessibility and SEO. Responsive design was achieved by utilizing CSS Grid for the general layout structure, and media queries to adjust the design to accommodate different screen sizes. The hamburger menu for the mobile design was created using JavaScript to toggle the display of the menu, and animations were added using CSS transitions for a smoother user experience.
Challenges and Solutions
One of the main problems was implementing the dark mode toggle. I fixed this by using CSS variables for color and a JavaScript function to switch between dark and light modes. Another problem was making the contact form work with form validation and form submission. I fixed this by implementing comprehensive validation rules and integrating with a form submission service.
AI Integration
I added an AI chatbot to enhance user interaction and provide immediate assistance to the visitors of the website. The chatbot is built with JavaScript and has a basic, easy-to-use interface that integrates with the overall design of the website. This feature demonstrates my ability to add modern features that enhance user experience.
Video Demo
The video demo of this portfolio can be found on the Video Demo page or directly on this YouTube link .
