# Socrates Papasocratous - Portfolio Website

## Project Overview
This is a personal portfolio website for Socrates Papasocratous, a Full Stack Developer & Digital Entrepreneur. The website showcases professional experience, skills, projects, and contact information.

## Website URL
https://socratisp.com

## Project Structure

### Main Files
- `index.html` - Main portfolio page with sections for home, description, projects, about, tools, experience, and contact
- `styles.css` - Main stylesheet with dark theme, neon accent colors (#64ffda), and responsive design
- `script.js` - JavaScript for matrix rain effect, smooth scrolling, navbar effects, glitch animations, and intersection observers
- `cvdownload.php` - PHP script for CV download functionality
- `.htaccess` - Apache server configuration
- `robots.txt` - Search engine crawler directives
- `sitemap.xml` - XML sitemap for SEO

### Subdirectories

#### grabbit/
- `index.html` - Landing page for Grabbit Chrome Extension
- `grabbit.css` - Specific styles for Grabbit page
- Grabbit is a Chrome extension that allows users to select, open, and copy multiple links simultaneously with a drag gesture (Linkclump replacement)

#### quotes/
- `quotes.php` - PHP script to serve inspirational_quotes.json as downloadable file
- `inspirational_quotes.json` - JSON file containing inspirational quotes

### Assets
- `SPlogo.png` - Logo image

## Design System

### Color Palette (CSS Variables)
- `--bg-dark: #0a192f` - Main background
- `--bg-darker: #020c1b` - Darker background
- `--bg-light: #112240` - Lighter background for cards
- `--text-primary: #ccd6f6` - Primary text color
- `--text-secondary: #8892b0` - Secondary text color
- `--accent-neon: #64ffda` - Neon accent color (cyan/green)
- `--accent-purple: #c778dd` - Purple accent
- `--accent-blue: #58a6ff` - Blue accent

### Typography
- Primary font: 'Poppins' (Google Fonts)
- Monospace font: 'Fira Code' (for code-like elements)

## Key Features

### Interactive Elements
1. **Matrix Rain Effect** - Canvas-based animated background in hero section
2. **Smooth Scrolling** - Navigation links scroll smoothly to sections
3. **Glitch Effect** - Section headers have hover glitch animation
4. **Fade-in Animations** - Elements fade in when scrolled into view
5. **Neon Glow Effects** - Project cards and skill bars have hover glow effects
6. **Skill Progress Bars** - Animated progress bars showing skill proficiency

### Sections
1. **Hero** - Introduction with name, title, and social links
2. **Description** - Professional summary
3. **Projects** - Grid of project cards with links
4. **About** - Technical and professional skills with progress bars
5. **Tools** - Grid of software and tools icons
6. **Experience** - Timeline of work experience
7. **Contact** - Contact information

## Projects Featured

1. **BiancoRossoWatches** - Jewelry e-commerce store built with Shopify
2. **Eris Multistore** - Multi-vendor store built with Shopify
3. **Grabbit Chrome Extension** - Link selection tool (HTML/CSS/JS) - Recommended
4. **IPTV Player** - Media player application (Python)
5. **Directory Locker** - Security tool (Python)
6. **Directory Scanner** - System utility (Python) - Recommended

## Skills

### Technical Skills
- JavaScript (85%), HTML/CSS (90%), Python (70%)
- Electron JS (75%), Next JS (75%), PHP (65%)
- C# (60%), C++ (55%)
- Shopify (95%), WordPress (85%)

### Professional Skills
- SEO & Marketing (95%), Website Development (90%)
- Content Management (95%), Adobe Creative Suite (80%)
- Project Management (85%), Team Leadership (90%)
- Problem Solving (95%), UI/UX Design (85%)

## Contact Information
- Email: support@socratisp.com
- Website: https://socratisp.com
- LinkedIn: https://www.linkedin.com/in/socrates-papasocratous/
- GitHub: https://github.com/socratespap

## SEO Features
- Meta tags for description, keywords, author
- Open Graph tags for social media sharing
- Twitter Card data
- Structured data (JSON-LD) for Person, WebSite, ProfilePage, ItemList, and WorkExperience schemas
- XML sitemap
- robots.txt

## Technologies Used
- HTML5
- CSS3 (with CSS variables, flexbox, grid, animations)
- JavaScript (ES6+)
- PHP (for server-side functionality)
- Font Awesome (icons)
- Google Fonts

## Responsive Design
- Desktop-first approach with mobile breakpoints
- Navbar hidden on mobile (< 768px)
- Adjusted layouts for smaller screens
- Optimized for mobile devices

## Deployment
- Static website with PHP for specific functionality
- Apache server configuration via .htaccess
- No build process required

## Development Notes
- The site uses a dark theme with neon cyan accents
- All animations use CSS transitions and JavaScript for performance
- The matrix rain effect is implemented using HTML5 Canvas
- Intersection Observer API is used for scroll-based animations