Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abdultolba/responsive-portfolio

Responsive and minimalistic portfolio made completely in HTML5, SASS, and JavaScript.
https://github.com/abdultolba/responsive-portfolio

html5 javascript sass

Last synced: about 2 months ago
JSON representation

Responsive and minimalistic portfolio made completely in HTML5, SASS, and JavaScript.

Awesome Lists containing this project

README

        

# Responsive Portfolio

This repository contains the contents of a web project, a responsive and mobile-friendly web portfolio
built completely from HTML5, SASS/CSS, and Vanilla JavaScript.
The purpose of this project is to review and understand the basics of front end web development, as well
as to learn how to use SASS and npm packages.

The package is completely open source and free to use, as long as it is not re-distributed.

To use this portfolio:

1) Clone the contents of this repository to your local desktop.
2) - The main folder contains three files (`.gitignore`, `package.json`, & `package-lock.json`), as well as two folders (`dist` & `scss`).
- `dist` contains all the website files; this includes the javascript, html, and css files.
- `scss` contains the SASS source code that pre-processes the CSS located in `dist`.
3) - Files you may want to change:
- `index.html` (The main page of the website, which contains a menu and basic information.)
- `about.html` (A secondary page containing information about you.)
- `contact.html` (A secondary page that allows viewers to reach out to you.)
- `work.html` (This page displays samples or examples of the work you have to show.)

## Dependencies

If you are modifying the files in this project, there are some dependencies you will need:
- Node.JS
- `node-sass` which you may install though node using `npm i node-sass`
- Once you have installed it, run `npm run sass`, whcih will preprocess your SASS into CSS.

## Screenshots

Mobile Home Page | Mobile Menu
:-------------------------:|:-------------------------:
![Mobile Home](/github_images/ss_2.png?raw=true "Mobile Home") | ![Mobile Menu](/github_images/ss_3.png?raw=true "Mobile Menu")

Desktop Home Page |
:-----------------:
![Desktop Home](/github_images/ss_1.png?raw=true "Desktop Home") |