2025
DELL
Done By
Keith Thabani Rusere
Junction Adventist High School
r
🧑💻 Web Development Project: Building a Personal
Portfolio Website
Junction Adventist High School
📌 Stage 1: Problem Identification
In today's digital world, students need a professional space to present themselves online. However,
many still lack a structured platform to showcase their achievements, skills, and projects.
A personal portfolio website acts as a digital resume and creative portfolio. It allows students to:
Share their work with colleges, scholarship boards, and employers.
Express their personality and technical abilities.
Build a personal brand early in their academic or career journey.
🔍 Problem Identified:
Students do not have a centralized, well-designed platform to professionally present their academic and
personal accomplishments online.
🧠 Stage 2: Investigation of Related Ideas to the Problem/Innovation
To find a suitable solution, research was conducted on:
🔎 Existing Portfolio Websites:
GitHub Pages
Behance
Personal developer websites
Tools & Technologies Explored:
HTML, CSS, JavaScript
React (JavaScript framework)
Jekyll (static site generator)
🧩 Key Design Principles:
Responsive design for mobile & desktop
User-friendly navigation
Accessibility for all users (fonts, contrast, etc.)
📋 Common Portfolio Sections:
About Me
Projects
Resume/CV
Contact Form
Skills
💡 Inspiration: Clean, modern designs that focus on simplicity, interactivity, and clear content layout.
🧪 Stage 3: Generation of Possible Solutions
Different solutions were considered to build the website:
💻 Options:
1. Use a website builder (e.g., Wix, WordPress)
2. Build a static website with HTML, CSS, JavaScript
3. Use a React-based frontend framework
4. Host using GitHub Pages or Netlify
5. Add backend features using Formspree or Firebase for contact forms
✅ Stage 4: Selecting the Most Suitable Solution
✔️Final Choice:
Build a static website using HTML, CSS, and JavaScript
Use GitHub Pages for free hosting
Apply responsive design techniques using Flexbox/Grid
🎯 Why this solution?
Easy to learn and build from scratch
Offers full creative control
Free and reliable hosting
Great learning experience in web development
🔧 Stage 5: Refinement of Selected Solution
After developing the basic site, several enhancements were made:
🔄 Improvements:
✅ Responsive navigation menu (mobile-friendly)
✅ Better color scheme and typography
✅ Smooth animations and transitions
✅ Integrated Formspree contact form
✅ Tested on multiple devices and browsers
Feedback Incorporated:
Suggestions from teachers and classmates helped refine the design and usability.
Stage 6: Presentation of the Final Solution
The website was showcased with a live demo and classroom presentation.
🌐 Live Site:
Hosted at: [Insert your GitHub Pages link]
📄 Website Sections:
🏠 Home Page – Welcome message and photo
👤 About Me – Personal background, goals
Projects – Screenshots, links, and descriptions
📄 Resume/CV – Downloadable PDF
📞 Contact Form – Formspree + social media links
🎨 Design Note: The theme reflects the developer's personal style while maintaining professionalism.
🧪 Stage 7: Evaluation and Recommendations
📈 Evaluation:
✅ Successfully presents skills and projects
✅ Fully responsive and visually appealing
✅ Functionally sound with contact form and links
✅ Skills gained: HTML, CSS, JavaScript, GitHub usage
📝 Recommendations:
Use React or [Link] to make the site more dynamic
Add a blog section to regularly update content
Keep projects and resume up-to-date
Improve SEO for search engine visibility
📷 Suggested Images & Diagrams to Include
You can create or add these visual elements to enhance your report or presentation:
Image/Diagram Title Description
🌐 Screenshot of Final Website Full-page screenshot of your homepage
📱 Responsive Design Showcase Side-by-side mobile and desktop views
🧩 Wireframe Sketch Basic layout design for each section (hand-drawn or digital)
Tools Used Icons/logos of HTML, CSS, JS, GitHub
📊 Development Process Flowchart A diagram showing the 7 stages in order
