HowToRun.txt

(mostly note to self, perhaps someone else;)


## How to run


Because this website uses PHP, fiveServer and such don't work correctly.
You can run it with a local server like Xampp 

1. Place folder in xampp/htdocs
2. start xampp, activate Apache
3. open localhost/foldername
 (WITHOUT the index.php extension, then you just see the file contents without styling).


Compile css: npm run build:css -> also for menu bar, otherwise conflicts with tailwind on save


Live reload: php server & live server plugin vscode, live server chrome extension, 
click 'start live' bottom bar vscode, open index.php, right click 'php open file', 
open browser at localhost/foldername
(https://stackoverflow.com/questions/60678203/is-it-possible-to-use-live-server-for-php-with-autoreload-on-save)

## Chrome/edge clear cache extension


Because of not using five server, changes don't immediately show.
To easily clear cache, the 'clear cache' extension in chrome/edge was a lifesaver

#deploying:
With cpanel git version control -> use .cpanel.yml and acceptance branch
make sure htaccess is set correctly for url redirecting

# SASS/SCSS


I used scss for styling, which compiles into CSS. It allows you to use nesting, variables, 
and adds styles for Mozilla/IOS automatically.To use this, install the live SASS compiler,
and indicate where the CSS should be saved. Make sure you've clicked 'watch scss' in the 
bottom bar to enable this extension (In VSCode)



## Making your own portfolio


If you are making your own portfolio or website,
feel free to take some inspiration from here and see how things work to apply to your own
code/system. Must note that I'm a beginner, so probably not everything here is 'best practice'.



## Explanation for the PHP structure instead of using React;


I read somewhere it's important to show you can make websites with plain HTML/CSS/JS, without frameworks,
(which sounded logical to me), so that's what I started with. 

However, I soon realized I missed React components and I didn't want to 
copy/paste for example the menu code everywhere only to have to do that again for every change.
Rather than start over, I opted to use PHP to import code snippets into multiple pages, 
and mimicked React props with PHP variables, to re-use these snippets in multiple ways (e.g. the projects).

Therefore, running this code is a bit more complicated than with React, but I did learn a lot from making it this way.


*Add isset for not-working php commands, some dont work well in a local server for example, 
and then they will be ignored rather than crashing your system.