As part of the IWDV202 Semester Assignment 1, I developed a professional online profile that represented my digital work. This project aimed to demonstrate my ability to integrate HTML, CSS, and JavaScript/JQuery using modern tools and design principles. Below is the detailed structure of the project:
- Development Tools: Visual Studio Code was used to create and manage the project files.
- Template Source: A responsive and professional template was downloaded from BootstrapMade and customized for this project.
Note
The project emphasized tailoring a pre-designed template to match individual branding, showcasing creativity and technical skills.
The project is structured as a single-page website with 5 sections, each serving a specific purpose.
-
Home
- A visually appealing landing page with a background image, name, and career interests.
- Clear and concise messaging to engage visitors upon arrival.
-
About
- Personal or company details, including:
- Short biography or company overview.
- Extramural activities or services provided.
- Presented with professional styling and animations for readability.
- Personal or company details, including:
-
Qualifications
- Comprehensive listing of:
- Education history.
- Relevant skills and certifications.
- Professional achievements.
- Comprehensive listing of:
-
Job Interests
- A detailed description of:
- Desired jobs or career paths for individuals.
- Services offered by the individual (Tinotenda Mhedziso - yes me lol).
- Includes visual enhancements such as icons and images to highlight key areas.
- A detailed description of:
-
Contact
- A functional email form integrated with email.js to send inquiries.
- Fields included:
- Name
- Email Address
- Phone Number
- Message
- Optional Budget Dropdown (for service inquiries).
- An embedded Google Maps feature displaying an address.
- Links to at least 3 social media profiles.
| Feature | Description | Implementation |
|---|---|---|
| Responsive Design | The site adapts seamlessly to various screen sizes, ensuring usability on desktops, tablets, and mobile devices. | Bootstrap grid system and media queries. |
| Interactive Form | Contact form sends emails directly to my NMU email address using Formspree. | JavaScript handles form validation and integration. |
| Custom Modifications | The downloaded template was modified to reflect unique branding, including content updates and visual enhancements. | Custom CSS and JavaScript functionality added. |
| Social Media Links | Provides quick access to professional profiles or business pages on platforms such as LinkedIn, Twitter, and Facebook. | Hyperlinked icons with hover effects. |
Tip
The Google Maps integration improves the accessibility of the address and adds a professional touch to the Contact section.
- Customization: Learning to adapt a pre-made template to fit specific requirements helped me understand HTML structure and CSS customization.
- Third-Party Integration: Implementing Formspree and Google Maps was challenging initially but taught me the importance of APIs in modern web development.
- Responsiveness: Ensuring the design was visually consistent across all devices deepened my understanding of Bootstrap’s grid system.
-
Video Presentation:
- A short, 2-minute video was recorded using screen capture software to demonstrate the original template and my customized website.
- The video highlights the changes I made, including updated content, functionality, and design.
-
Submission Package:
- The project was submitted as a Zip folder containing:
- All project files.
- The video presentation.
- A document with my name, student number, and video link.
- The video was uploaded to YouTube with an accessible link, ensuring no login is required to view.
- The project was submitted as a Zip folder containing:
- Marking Criteria: The project was assessed based on the functionalities demonstrated in the video, with no live code execution required during evaluation.
- Best Practices: I ensured file names were concise to avoid issues during extraction and maintained a professional presentation throughout.
This project helped me improve my web development skills and taught me how to showcase my abilities effectively through a digital portfolio.