A modern, dynamic personal portfolio website for Ruy River, built with HTML5, SASS, and JavaScript, utilizing Gulp for the build process. It features AJAX-powered navigation, smooth transitions, and interactive components to showcase Ruy's skills and experience.
- AJAX-Powered Navigation: Seamless page transitions without full reloads.
- Responsive Design: Adapts to various screen sizes (desktops, tablets, mobiles).
- Interactive Components: Engaging elements like sliders, galleries, and custom cursors.
- Gulp Build System: Automates tasks like SASS compilation, JavaScript bundling, and minification.
- Live Reloading: BrowserSync integration for efficient development workflow.
- Component-Based Structure: Organized source code with reusable SASS and JS components.
Project Showcases: Dedicated sections to display individual projects.- Custom Cursor Effects: Unique cursor interactions.
- Smooth Scrolling & Parallax: Enhanced visual experience during navigation.
- WebGL Powered Effects: Utilizes WebGL (via Three.js) for advanced graphical effects like interactive shaders for list hover and slider transitions, enhancing visual engagement.
- (Potential) Contact Form: Includes
mail.php, suggesting a PHP backend for form submissions (verify server setup).
-
Frontend:
- HTML5
- SASS (compiled to CSS3)
- JavaScript (ES6+)
- Barba.js (for PJAX transitions)
- GSAP (GreenSock Animation Platform)
- Three.js (for WebGL effects)
-
Build Tools:
- Node.js
- npm
- Gulp
-
Development:
- BrowserSync
-
Backend (for contact form):
- PHP (requires a PHP-enabled server environment for the contact form functionality in
HTML/mail.php)
- PHP (requires a PHP-enabled server environment for the contact form functionality in
portfolio/
├── .gitignore
├── HTML/ # Compiled output directory (ready for deployment)
│ ├── css/ # Compiled CSS files (vendor.css, main.css)
│ ├── img/ # Image assets
│ ├── js/ # Compiled JavaScript files (vendor.js, components.js)
│ ├── ... # Other HTML pages (index.html, project pages, etc.)
│ └── mail.php # PHP script for contact form (requires server)
├── README.md # This file: Overview, setup, and running instructions
└── SOURCE/ # Source code directory
├── .gitignore
├── README.md # Detailed build/development instructions
├── components/ # Reusable UI components (SASS & JS)
├── static/ # Static assets (base SASS/JS libraries, images, fonts)
├── gulpfile.js # Gulp configuration file
├── package.json # Project dependencies
└── package-lock.json # Dependency lock file
- Node.js: v20.3.0 or later (as specified in
SOURCE/README.md) - npm: v9.6.7 or later (comes with Node.js)
- Gulp CLI: Installed globally (
npm install --global gulp-cli)
Optional but recommended:
- NVM (Node Version Manager): To easily switch Node.js versions (
brew install nvmor see NVM installation guide).
- Clone the repository:
git clone <your-repository-url> cd portfolio/SOURCE
- Set Node.js version (if using NVM):
nvm use # If the required version isn't installed, nvm might prompt you to install it. - Install dependencies:
Note: If you haven't installed Gulp CLI globally, run
npm install
npm install --global gulp-clifirst.
-
Navigate to the SOURCE directory:
cd /path/to/your/project/portfolio/SOURCE -
Start the development server:
gulp default
This command compiles the assets, starts a local server using BrowserSync, and watches for file changes.
-
Open in browser: Your browser should automatically open to
http://localhost:3000(or the port specified by BrowserSync).
The Gulp configuration (SOURCE/gulpfile.js) handles:
- Compiling SASS files from
SOURCE/static/sassandSOURCE/componentsintoHTML/css/main.css. - Concatenating and optionally minifying vendor CSS into
HTML/css/vendor.css. - Concatenating and optionally minifying JavaScript files from
SOURCE/static/jsandSOURCE/componentsintoHTML/js/components.js. - Concatenating vendor JS into
HTML/js/vendor.js. - Running a BrowserSync server for live preview and reloading.
To clear the Gulp cache, you can run:
cd /path/to/your/project/portfolio/SOURCE
gulp clean