Clifford's Personal Portfolio Website

This repository contains the complete source code for my personal portfolio website, built to showcase my skills in web design, UI/UX, and graphic design.

View the live site: https://cliff-de-tech.github.io/

---

About This Project

This portfolio is a static site built from the ground up using core web technologies. It serves as a central hub for my projects, skills, and professional experience. The main goal was to create a clean, modern, and performant user experience that reflects my design philosophy.

Features

• Fully Responsive: The layout seamlessly adapts to all device sizes, from mobile phones to desktop monitors.
• Dark/Light Mode: A theme-toggle feature allows users to switch between dark and light modes, with their preference saved in local storage.
• Animated Background: A subtle, GPU-friendly animated particle background (built with HTML Canvas) provides a dynamic feel without compromising performance.
• Project Filtering: The portfolio page features tabs to filter projects by category (Graphic Design, UI/UX, Web Design).
• CSS Optimizations: The site is optimized for speed, including deferred CSS loading and prioritized loading for critical content.
• CSS Animations: Subtle "reveal-on-scroll" animations and hover effects are used to enhance the user experience.

Technologies Used

This project was built without any external CSS or JS frameworks.

• HTML5: For semantic structure.
• CSS3: For all styling, including responsive design (media queries), layouts (Flexbox/Grid), and animations.
• JavaScript (ES6+): For all interactivity, including:
  • Theme toggle
  • Mobile navigation menu
  • Portfolio category filtering
  • "Read More" toggles on the About page
  • Animated background canvas
• Git & GitHub: For version control.
• GitHub Pages: For deployment and hosting.

How to Use

To run this project locally:

1. Clone the repository:

   git clone [https://github.com/cliff-de-tech/cliff-de-tech.github.io.git](https://github.com/cliff-de-tech/cliff-de-tech.github.io.git)

2. Navigate to the directory:

   cd cliff-de-tech.github.io

3. Open index.html: You can open the index.html file directly in your web browser to view the site.

Contact

Created by Clifford Opoku-Sarkodie

• LinkedIn: linkedin.com/in/clifford-opoku-sarkodie-377505369
• GitHub: @cliff-de-tech