WEB HACKATHON 1 Welcome to the Portfolio Website Hackathon! We are excited to have you join us in creating amazing portfolio websites. Below are the guidelines to ensure a smooth and productive hackathon experience.
Introduction The goal of this hackathon is to build a one page portfolio website that showcases your skills, projects, and professional experience. This is an excellent opportunity to create or enhance your personal brand and demonstrate your abilities to potential employers or clients.
Project Requirements Personal Information: Include sections for your name, a brief bio, contact information, and links to your social media profiles (e.g., LinkedIn, GitHub).
Portfolio: Showcase your projects with descriptions, images, and links to live demos or repositories.
Skills: List your technical and non-technical skills.
Experience: Detail your professional experience, including job titles, companies, and descriptions of your roles.
Education: Include your educational background.
Submission Guidelines Repository Setup: Submit via the GitHub classrooms submission link. Commit Messages: Use clear and descriptive commit messages to document your progress. Pull Request: Submit a pull request to the main branch once you have completed your project. Include a brief description of your website and any additional notes. Deadline: All submissions must be made by Monday 22nd July 12pm EAT
Judging Criteria Submissions will be judged based on the following criteria:
Design: Visual appeal, creativity, and user interface design. Functionality: Responsiveness, performance, and interactivity. Content: Clarity, completeness, and presentation of information. Originality: Unique features, innovative approaches, and personal touches. Code Quality: Cleanliness, organization, and use of best practices.
Happy hacking and we look forward to seeing your amazing portfolio websites!
Web Development Project - Portfolio Website (Part 2) Project Overview This part of the project involves the implementation of a responsive portfolio website with the following key features:
Dark mode toggle. Animated headline. Smooth scrolling navigation. Project showcase. Skills and technology display. Contact form. Social media links.
HTML Structure The index.html file defines the structure of the portfolio website: Header with navigation links and dark mode toggle. Main sections: Headline with profile image and introduction. Projects showcase. About me section with skills. Contact form. Footer with social media links.
CSS Styling The styles.css file contains the following key styling features: Responsive design using flexbox and grid layouts. Custom color scheme with CSS variables for easy theming. Dark mode styles. Animated hover effects for projects and buttons. Custom styling for form elements. Social media icon styling with hover effects.
JavaScript Functionality The scripts.js file implements the following interactive features: Dark Mode Toggle: Switches between light and dark themes. Saves user preference in local storage. Animated Headline: Types out the headline text character by character. Smooth Scrolling: Implements smooth scrolling for navigation links. Contact Form Handling: Prevents default form submission. Displays a thank you message and resets the form.
Key Components
Project Cards: Display project images with overlaid descriptions Hover effects to reveal project details
Skills Cards: Showcase different skill categories (Languages, Frameworks, Skills) Distinct styling for each category
Social Media Icons: Custom-styled icons with hover effects and tooltips
Responsive Design The website is designed to be responsive, with specific media queries for smaller screens:
Adjusts layout for mobile devices Resizes and repositions elements for better mobile viewing
This implementation provides a solid foundation for a modern, responsive portfolio website with key features like dark mode and smooth navigation.