Skip to content

salmondavidp/portfolio

BranchesTags

Repository files navigation

Portfolio Website - SALMONDAVID POTAGOLI

A modern, high-performance personal portfolio website built with pure HTML, CSS, and Vanilla JavaScript. Features GSAP animations, ScrollTrigger effects, premium custom cursor, and a particle network canvas animation.

Features

  • Modern Design: Clean, minimal, agency-grade aesthetic
  • Premium Custom Cursor: Smooth follow cursor with hover states (desktop only) ✨ NEW
  • High Performance: Optimized animations and lazy loading
  • Fully Responsive: Mobile-first design for all devices
  • GSAP Animations: Smooth scroll-based animations using GSAP 3.12+ and ScrollTrigger
  • Interactive Canvas: Particle network animation on hero section
  • Project Filtering: Dynamic filtering with smooth transitions
  • Content-Safe Sections: Projects and Skills never appear empty ✨ NEW
  • Accessibility: WCAG 2.1 AA compliant with proper ARIA labels
  • SEO Optimized: Semantic HTML5 markup and meta tags
  • GitHub Pages Ready: Static site deployment compatible

Tech Stack

  • HTML5: Semantic markup
  • CSS3: Custom properties, Grid, Flexbox
  • JavaScript (ES6+): Vanilla JS, no frameworks
  • GSAP 3.12.5: Animation library
  • ScrollTrigger: Scroll-based animations

Project Structure

portfolio/
├── index.html              # Main HTML file
├── css/
│   ├── variables.css       # CSS custom properties
│   ├── reset.css           # Modern CSS reset
│   ├── layout.css          # Layout utilities
│   ├── components.css      # Reusable components
│   ├── sections.css        # Section-specific styles
│   ├── animations.css      # Animation utilities
│   └── responsive.css      # Responsive breakpoints
├── js/
│   ├── cursor.js           # Premium custom cursor ✨
│   ├── canvas.js           # Particle animation
│   ├── animations.js       # GSAP animations
│   └── main.js             # Core functionality
├── assets/
│   ├── img/
│   │   ├── profile-img.jpg
│   │   ├── favicon.png
│   │   └── projects/       # Project images
│   └── file/
│       └── res.pdf         # Resume PDF
└── README.md

Installation & Setup

1. Clone the Repository

git clone https://github.com/salmondavidp/portfolio.git
cd portfolio

2. Add Your Content

Replace placeholder content with your own:

  • Profile Image: Add your photo at assets/img/profile-img.jpg
  • Resume: Add your resume PDF at assets/file/res.pdf
  • Project Images: Add project screenshots to assets/img/projects/
  • Favicon: Add your favicon at assets/img/favicon.png

3. Customize Content

Edit index.html to update:

  • Hero section text
  • About section bio
  • Skills list
  • Project details
  • Contact information

4. Test Locally

Open index.html in your browser or use a local server:

# Using Python
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000

Visit http://localhost:8000 in your browser.

GitHub Pages Deployment

Method 1: Deploy from Main Branch

  1. Go to your repository on GitHub
  2. Click Settings → Pages
  3. Under "Source", select:
    • Branch: main
    • Folder: / (root)
  4. Click Save
  5. Your site will be live at: https://yourusername.github.io/portfolio

Method 2: Deploy from gh-pages Branch

# Create gh-pages branch
git checkout -b gh-pages

# Push to GitHub
git push origin gh-pages

# Go to Settings → Pages and select gh-pages branch

Method 3: GitHub Actions (Recommended for CI/CD)

Create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./

Customization Guide

Colors

Edit css/variables.css to change the color scheme:

:root {
  --color-primary: #0066FF;        /* Primary brand color */
  --color-accent: #00D4FF;         /* Accent color */
  --color-bg-primary: #0A0A0F;     /* Background color */
}

Typography

Change fonts in css/variables.css:

:root {
  --font-primary: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
}

Update Google Fonts link in index.html if changing fonts.

Animations

Adjust animation timing in js/animations.js:

gsap.from('.hero-title-line', {
  opacity: 0,
  y: 50,
  duration: 0.9,  // Change duration
  stagger: 0.15,  // Change stagger delay
});

Canvas Animation

Modify particle settings in js/canvas.js:

this.particleCount = 80;      // Number of particles
this.maxDistance = 120;       // Connection distance
this.mouse.radius = 150;      // Mouse interaction radius

Performance Optimization

Image Optimization

  1. Compress images before uploading:

    • Use TinyPNG or Squoosh
    • Target: < 150KB for hero images, < 80KB for project images

  2. Use WebP format with fallback:

    <picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

CSS & JS Minification

For production, minify your CSS and JavaScript:

# Using online tools:
# https://www.minifier.org/
# https://javascript-minifier.com/

# Or use build tools (optional)
npm install -g clean-css-cli uglify-js
cleancss -o style.min.css css/*.css
uglifyjs js/*.js -o script.min.js

Lazy Loading

Images already use native lazy loading:

<img src="image.jpg" loading="lazy" alt="Description">

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Accessibility Features

  • Semantic HTML5 structure
  • ARIA labels for interactive elements
  • Keyboard navigation support
  • Focus visible states
  • Screen reader friendly
  • Reduced motion support

SEO Optimization

Update Meta Tags

In index.html, customize:

<title>Your Name - AI Developer & Data Scientist</title>
<meta name="description" content="Your custom description">
<meta name="keywords" content="Your, Keywords, Here">

<!-- Open Graph -->
<meta property="og:title" content="Your Name">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">

Create sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourusername.github.io/portfolio/</loc>
    <lastmod>2026-01-03</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

Create robots.txt

User-agent: *
Allow: /

Sitemap: https://yourusername.github.io/portfolio/sitemap.xml

Troubleshooting

GSAP Not Loading

If animations don't work, check:

  1. GSAP CDN links are correct in index.html
  2. Browser console for errors
  3. Script loading order (GSAP before animations.js)

Canvas Not Showing

Check:

  1. Canvas element exists in HTML
  2. JavaScript console for errors
  3. Browser supports Canvas API

Images Not Loading on GitHub Pages

Ensure:

  1. File paths are relative (not absolute)
  2. File names match exactly (case-sensitive)
  3. Images are in the correct directory

Contributing

This is a personal portfolio, but feel free to:

  • Report bugs via GitHub Issues
  • Suggest improvements
  • Fork and customize for your own use

License

MIT License - Feel free to use this template for your own portfolio.

Credits

  • Design & Development: SALMONDAVID POTAGOLI
  • Animations: GSAP (GreenSock)
  • Fonts: Google Fonts (Inter, Space Grotesk)
  • Inspiration: web3.xmethod.de

Contact

Built with HTML, CSS & JavaScript | © 2026 SALMONDAVID POTAGOLI

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages