The Profile Page for Nnaji Benjamin, known as Benjtalkshow, is a visually appealing and informative web page designed to showcase the personal and professional details of the individual. This web project combines HTML, CSS, and JavaScript to create an engaging user experience.
-
HTML Structure: The project is built using a well-structured HTML document that includes metadata, title, and a body section. It ensures proper accessibility and responsiveness.
-
Profile Information: The profile information is presented within a container that is centered both horizontally and vertically on the page. This design choice provides a clean and focused presentation.
-
Profile Image: A circular profile image of Benjtalkshow is displayed prominently, adding a personal touch to the page. The image is neatly framed with a subtle white border.
-
User Information: The user's username, "Benjtalkshow," is prominently displayed above the profile image. It is set on a gradient background, making it visually appealing and easy to read.
-
Track Information: Benjtalkshow's professional track, in this case, "Frontend," is displayed beneath the profile image, indicating their area of expertise or interest.
-
Date and Time: The page dynamically displays the current day of the week and UTC time, providing real-time information to the user. The date and time are styled to be easily readable and are updated every second.
-
Source Code Button: A button labeled "Source Code" is provided, which, when clicked, opens a new tab with the source code for this profile page on GitHub. This button encourages further exploration of the project.
-
CSS Styling: The CSS styles have been carefully designed to enhance the visual appeal of the page. The use of gradients, border-radius, and shadows creates a modern and polished look. Responsive design considerations ensure that the page looks good on various screen sizes.
-
Google Fonts Integration: The project imports the "Poppins" font from Google Fonts, enhancing the typography and overall aesthetics of the page.
-
Media Queries: The project includes media queries to optimize the layout and styling for smaller screens, ensuring a seamless user experience on mobile devices.
-
JavaScript Functionality: JavaScript is used to dynamically update the date and time, ensuring that users always see the current information. Additionally, it handles the click event on the "Source Code" button, opening the GitHub repository in a new tab when clicked.
To view the live profile page and explore the source code, click the "Source Code" button on the page, or follow this link: Profile Page on Netlify
-
Profile Image: Link to Image
-
Font: Poppins from Google Fonts