Refactor image directory structure and add social share component CSS…

… styles

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jest": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": ["error", 4],
+        "linebreak-style": ["error", "windows"],
+        "quotes": ["error", "single"],
+        "semi": ["error", "always"],
+        "no-unused-vars": ["warn"],
+        "no-console": ["warn", { "allow": ["warn", "error"] }],
+        "prefer-const": "error",
+        "arrow-body-style": ["error", "as-needed"],
+        "curly": "error",
+        "eqeqeq": "error",
+        "no-var": "error"
+    }
+} 

.gitignore

@@ -1,36 +1,99 @@
 # Dependencies
 node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 package-lock.json
 yarn.lock
 
-# Environment
-.env
-.env.local
-.env.*.local
+# Build output
+dist/
+build/
+*.min.js
+*.min.css
 
-# IDE
+# IDE and editor files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
 .idea/
-.vscode/
 *.swp
 *.swo
 .DS_Store
 Thumbs.db
 
-# Build output
-dist/
-build/
-out/
-
-# Logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Environment variables
+.env
+.env.local
+.env.*.local
 
 # Testing
 coverage/
+.nyc_output/
+jest-results/
 
 # Temporary files
+*.log
 *.tmp
 *.temp
-.cache/ 
+.cache/
+
+# Generated files
+pages/*
+!pages/.gitkeep
+
+# Image source files and working copies
+*.psd
+*.ai
+*.sketch
+*.fig
+*.xd
+*.xcf
+*.raw
+*.cr2
+*.nef
+*.dng
+
+# Image optimization caches
+.imagemin-cache/
+.responsive-images-cache/
+
+# Generated image formats
+images/**/*.webp
+images/**/*-resized.*
+images/**/*-thumbnail.*
+images/**/*-optimized.*
+
+# Keep original images
+!images/**/*.svg
+!images/**/*.png
+!images/**/*.jpg
+!images/**/*.jpeg
+!images/**/*.gif
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Debug logs
+debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Rollup build cache
+.rollup.cache/ 

.vscode/extensions.json

@@ -0,0 +1,29 @@
+{
+    "recommendations": [
+        // Essential extensions
+        "dbaeumer.vscode-eslint",          // ESLint
+        "esbenp.prettier-vscode",          // Prettier
+        "ritwickdey.LiveServer",           // Live Server
+        "formulahendry.auto-rename-tag",   // Auto Rename Tag
+
+        // JavaScript/Web development
+        "christian-kohler.path-intellisense",  // Path Intellisense
+        "formulahendry.auto-close-tag",        // Auto Close Tag
+        "naumovs.color-highlight",             // Color Highlight
+        "csstools.postcss",                    // PostCSS Language Support
+
+        // Git integration
+        "eamodio.gitlens",                    // GitLens
+        "mhutchie.git-graph",                 // Git Graph
+
+        // Productivity
+        "streetsidesoftware.code-spell-checker",  // Code Spell Checker
+        "wayou.vscode-todo-highlight",            // TODO Highlight
+        "yzhang.markdown-all-in-one",            // Markdown All in One
+
+        // Theme and icons (optional but recommended)
+        "pkief.material-icon-theme",           // Material Icon Theme
+        "zhuangtongfa.material-theme"          // One Dark Pro
+    ],
+    "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -1,5 +1,77 @@
 {
-    "githubPullRequests.ignoredPullRequestBranches": [
-        "main"
-    ]
-}
+    // Git settings
+    "githubPullRequests.ignoredPullRequestBranches": ["main"],
+    "git.enableSmartCommit": true,
+    "git.confirmSync": false,
+    "git.autofetch": true,
+
+    // Editor settings
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true
+    },
+    "editor.tabSize": 4,
+    "editor.insertSpaces": true,
+    "editor.rulers": [100],
+    "editor.wordWrap": "on",
+    "editor.bracketPairColorization.enabled": true,
+
+    // File settings
+    "files.trimTrailingWhitespace": true,
+    "files.insertFinalNewline": true,
+    "files.trimFinalNewlines": true,
+    "files.eol": "\n",
+    "files.exclude": {
+        "**/.git": true,
+        "**/.DS_Store": true,
+        "**/node_modules": true,
+        "**/dist": true,
+        "**/*.min.js": true,
+        "**/*.min.css": true
+    },
+    "files.associations": {
+        "*.css": "css",
+        "*.js": "javascript",
+        "*.json": "jsonc",
+        "*.md": "markdown"
+    },
+
+    // Language specific settings
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "javascript.suggest.autoImports": true,
+    "javascript.format.enable": false, // Use Prettier instead
+
+    "css.validate": true,
+    "css.lint.duplicateProperties": "warning",
+    "css.lint.zeroUnits": "warning",
+
+    "html.format.wrapLineLength": 100,
+    "html.format.wrapAttributes": "auto",
+
+    // Extension settings
+    "prettier.singleQuote": true,
+    "prettier.printWidth": 100,
+    "prettier.tabWidth": 4,
+    "prettier.trailingComma": "es5",
+
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact"
+    ],
+
+    // Workspace settings
+    "workbench.colorCustomizations": {
+        "statusBar.background": "#00ffff",
+        "statusBar.foreground": "#000000",
+        "statusBar.noFolderBackground": "#ff00de"
+    },
+
+    // Search settings
+    "search.exclude": {
+        "**/node_modules": true,
+        "**/dist": true,
+        "**/*.min.*": true,
+        "package-lock.json": true
+    }
+}

css/base/layout.css

@@ -0,0 +1,72 @@
+/* Container */
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+/* Grid layouts */
+.grid {
+    display: grid;
+    gap: 2rem;
+}
+
+.tools-grid {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.features-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}
+
+/* Flexbox layouts */
+.flex {
+    display: flex;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Spacing utilities */
+.mt-1 { margin-top: 0.5rem; }
+.mt-2 { margin-top: 1rem; }
+.mt-3 { margin-top: 1.5rem; }
+.mt-4 { margin-top: 2rem; }
+
+.mb-1 { margin-bottom: 0.5rem; }
+.mb-2 { margin-bottom: 1rem; }
+.mb-3 { margin-bottom: 1.5rem; }
+.mb-4 { margin-bottom: 2rem; }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+
+/* Responsive utilities */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 0.5rem;
+    }
+
+    .tools-grid,
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .flex-responsive {
+        flex-direction: column;
+    }
+}