Personal Website Portfolio

Overview

This is a personal website portfolio showcasing my professional background, skills, experience, and data visualization projects. The website is built using HTML Java Script CSS and a lot of w3 school documentation.

Project Structure

A2-Personal-Website/ ├── index.html # Homepage with resume-like content ├── visualizations.html # Visualization portfolio page ├── style.css # Main stylesheet for the entire website ├── main.js # JavaScript for interactive elements and form validation ├── vis.js # JavaScript for generating SVG visualizations └── README.md # Project documentation

Features

Homepage

• Has a lot of information about my skills and work experience as well as methods by which to contact me.

Visualizations Page

• Data Visualization: Highlightable Bar chart showing the popularity of desktop operating systems.
• Creative SVG Art: A system of orbiting particles which follow the mouse and the user can click to re generate
• Both visualizations are generated dynamically using JavaScript and SVG

Interactive Elements

• Form validation for contact form
• Smooth scrolling navigation
• Hover effects on visualizations
• Click to re generate.

How to Navigate

1. Homepage Navigation:

   • Use the fixed navigation bar to jump between sections
   • Click on "Visualizations" to view the visualization portfolio
   • Use the contact form to send messages

2. Visualizations Page:

   • View the data visualization (bar chart)
   • Interact with the creative SVG art by hovering and clicking
   • Click anywhere on the creative art section to regenerate the pattern

3. Responsive Design:

   • The website automatically adapts to different screen sizes
   • Mobile-friendly navigation with collapsible menu
   • Optimized layouts for tablets and smartphones

Browser Compatibility

• Tested with Firefox and Safari

File Descriptions

• index.html: Main homepage with professional portfolio
• visualizations.html: Dedicated page for data visualizations
• style.css: Comprehensive styling with CSS variables and responsive units
• main.js: Form validation, smooth scrolling, and general interactivity
• vis.js: SVG generation for data visualization and creative art
• README.md: This documentation file

Setup Instructions

1. Download all files to a local directory
2. Open index.html in a web browser
3. No additional dependencies or build process required

Contact

• Name: Cohen ter Heide
• Email: support@lumpology.com © 2025 Cohen ter Heide. All rights reserved.