Leo's Testing ground is a personal portfolio project, which, in a unique way presents small projects I did while I was learning HTML/CSS/JS. It is the first large-scale project I have ever built. The project has no additional frameworks or libraries.
- HTML
- CSS/SCSS
- Javascript
- Vite
- Vanilla loader
- Self-hosted fonts, no tracking by google
- Optimized lighthouse scoring
- SEO Optimized
- Fancy Horizontal Scrolling
- Projects rendered as JS objects
- A vast variety of animations, upon loading, transitioning to other pages, spinning, appearing, disappearing, fully implemented using vanilla logic, without any frameworks or libraries.
dev
production
dev Folder is the folder that a developer would see in his IDE.
production folder is the folder that would be deployed to the webserver serving static client-side rendered files.
| Folder | Description |
|---|---|
fonts |
Self-hosted fonts root directory, can be imported and named into CSS by using @font-face. |
images |
Root Directory for all images in the project. |
scripts |
Directory for all scripts that the project is using |
scripts/helpers |
Helper functions repeating in multiple spots. |
styles |
Root Style Folder following this convention. |
* Inside this folder you can find the different HTML pages, that represent the routes of the aplication.
*This folder is completely generated by the
npm run build
command
| Folder | Description |
|---|---|
assets |
Root directory for all assets, as per config.js. |
assets/images |
Root Directory for all images in the built project. |
assets/scripts |
Directory for all scripts that the built project is using. |
assets/styles |
Transpiled styles from scss to css. |
* Inside this folder you can find the different HTML pages, that represent the routes of the built aplication.