E-Portfolio Website Development Project

Project Overview

This project focused on designing and developing a professional e-portfolio website consisting of multiple interconnected webpages. The purpose of the portfolio was to showcase my technical skills, academic achievements, completed projects, and contact information in an organized and visually appealing format.

Throughout this project, I applied front-end web development principles using HTML5, CSS3, and JavaScript to create a responsive website that demonstrates both technical ability and creativity. Each webpage serves a specific purpose while maintaining a consistent design, navigation system, and user experience.

Project Goals

  • Create a professional online portfolio.
  • Develop multiple linked webpages using HTML.
  • Implement responsive layouts with CSS.
  • Add interactive elements using JavaScript.
  • Maintain consistent navigation and design across all pages.
  • Demonstrate knowledge of modern web development practices.

Website Pages

Home Page

Serves as the landing page of the portfolio by introducing visitors to the website and providing quick navigation to each section.

About Me

Highlights my educational background, technical interests, career goals, and personal introduction.

Projects

Displays completed coursework and personal programming projects with descriptions, technologies used, screenshots, and project summaries.

Closing Document

This website was initially intended as a school project before being adopted as a personal project. As such, this webpage primarily houses the remaining feature requirements outlined on the rubric.

The document mentioned above is located here

Technologies Used

  • HTML5
  • CSS3
  • JavaScript
  • Git & GitHub
  • Visual Studio Code

Key Features

  • Responsive webpage layouts.
  • Navigation bar shared across all pages.
  • Interactive buttons and links.
  • Image galleries and project previews.
  • Custom styling with CSS.
  • JavaScript-powered user interactions.
  • Professional contact form.

Development Process

Before learning HTML I used a library called Quarto which is a language agnostic publishing system that comes pre-installed with RStudio. I wrote and designed a website using Quarto which can use R Markdown format to create a proper HTML document. Using that first webpage as a design template I created the remaining webpages myself, writing directly in HTML, CSS, and JavaScript.

Learning Outcomes

  • Designed a complete multi-page website.
  • Improved HTML semantic structure.
  • Applied modern CSS styling techniques.
  • Enhanced webpages with JavaScript interactivity.
  • Strengthened responsive web design skills.
  • Practiced organizing projects into a professional portfolio.
  • Gained experience using GitHub for website hosting.

Future Improvements

  • Add additional personal projects
  • Create downloadable project documentation.
  • Continue expanding the portfolio with additional projects over time.