Portfolio - SASS - Node.js

This project is a portfolio website developed using SASS for styling and Node.js for the backend. Additionally, JavaScript is utilized to add interactivity and handle various actions on the site. The goal of this project is to showcase skills and projects in a professional and attractive manner, making it a useful tool for personal branding and career advancement. Feel free to explore, comment on, and use this code for your own portfolio or personal projects. Contributions and suggestions for improvements are always welcome!

Features

SASS: Used for more organized and maintainable CSS.
Node.js: Backend server to handle requests and serve files.
Responsive: Design adapts to different screen sizes.
Interactive: Interactive elements and navigation for a better user experience.

Project Structure

portfolio-sass-nodejs/
├── assets/
│   ├── favicons/
│   ├── files/
│   └── img/
├── node_modules/
├── scss/
│   ├── abstracts/
│   │   ├── _colors.scss
│   │   ├── _index.scss
│   │   ├── _mixings.scss
│   │   └── _variables.scss
│   ├── base/
│   │   ├── _index.scss
│   │   ├── _reset.scss
│   │   └── _typography.scss
│   ├── components/
│   │   ├── _btns.scss
│   │   ├── _header.scss
│   │   └── _nav.scss
│   └── layout/
│       └── _grid.scss
├── .gitattributes
├── app.css
├── app.js
├── app.scss
├── index.html
├── package-lock.json
├── package.json
└── README.md

Directories and Files

assets/: Contains static assets such as favicons, files, and images.
- favicons/: Stores various favicon files used for the website.
- files/: Contains miscellaneous files that might be needed for the project.
- img/: Holds image files used in the website.
node_modules/: Directory for npm packages and modules. This is automatically generated by npm when you install dependencies.
scss/: Main directory for SASS files.
- abstracts/: Contains SASS partials for variables, mixins, and other reusable code.
  - _colors.scss: Defines color variables used throughout the project.
  - _index.scss: Imports all abstract files to be included in the main SASS file.
  - _mixings.scss: Contains SASS mixins for reusable chunks of CSS.
  - _variables.scss: Defines SASS variables for consistent values across the project.
- base/: Contains base styles for the project.
  - _index.scss: Imports all base files to be included in the main SASS file.
  - _reset.scss: CSS reset to ensure consistency across different browsers.
  - _typography.scss: Defines typography styles, such as fonts and text settings.
- components/: Contains styles for specific components.
  - _btns.scss: Styles for buttons.
  - _header.scss: Styles for the header component.
  - _nav.scss: Styles for the navigation component.
- layout/: Contains layout-related styles.
  - _grid.scss: Styles for the grid layout used in the project.
app.css: Compiled CSS file from the SASS source files.
app.js: Main JavaScript file for the project.
app.scss: Main SASS file that imports all other SASS partials.

Requirements

Node.js
npm (Node Package Manager)

Installation

Clone the repository:

git clone https://github.com/PublioElio/portfolio-sass-nodejs.git
cd portfolio-sass-nodejs

Available Scripts

License

This project is licensed under the MIT License. For more details, see the LICENSE file.

Author

Adriano Díaz Benítez

Thank you for visiting this project!

PublioElio / portfolio-sass-nodejs