https://github.com/realfranser/portfolio
My personal portfolio
https://github.com/realfranser/portfolio
bootstrap html javascript scss
Last synced: 4 months ago
JSON representation
My personal portfolio
- Host: GitHub
- URL: https://github.com/realfranser/portfolio
- Owner: realfranser
- License: mit
- Created: 2021-03-10T22:48:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-08T19:23:15.000Z (about 3 years ago)
- Last Synced: 2025-06-21T07:03:03.539Z (4 months ago)
- Topics: bootstrap, html, javascript, scss
- Language: SCSS
- Homepage: https://www.realfranser.com
- Size: 22.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# My portfolio ⚡️ [](https://github.com/realfranser/portfolio/blob/master/LICENSE.md)  
## A minimal portfolio template for Developers!
**_IMPORTANT NOTE_**: New fastest version came out, built with React + Gatsby! 🎉🎉🎉 See more: [Gatsby Simplefolio](https://github.com/cobidev/gatsby-simplefolio)
## Features
⚡️ Modern UI Design + Reveal Animations\
⚡️ One Page Layout\
⚡️ Styled with Bootstrap v4.3 + Custom SCSS\
⚡️ Fully Responsive\
⚡️ Valid HTML5 & CSS3\
⚡️ Optimized with Webpack\
⚡️ Well organized documentation
To view a demo example, **[click here](https://simplfolio.netlify.com/)**\
To view a live example, **[click here](https://cobidev.com/)**
---
## Getting Started 🚀
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
### Prerequisites 📋
You'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [NPM](http://npmjs.com)) installed on your computer.
```
node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher
```
Also, you can use [Yarn](https://yarnpkg.com/) instead of NPM ☝️
```
yarn@v1.21.1 or higher
```
---
## How To Use 🔧
From your command line, first clone Simplefolio:
```bash
# Clone this repository
$ git clone https://github.com/cobidev/simplefolio
# Go into the repository
$ cd simplefolio
# Remove current origin repository
$ git remote remove origin
```
Then you can install the dependencies either using NPM or Yarn:
Using NPM:
```bash
# Install dependencies
$ npm install
# Start development server
$ npm start
```
Using Yarn:
```bash
# Install dependencies
$ yarn
# Start development server
$ yarn start
```
**NOTE**:
If your run into issues installing the dependencies with NPM, use this command:
```bash
# Install dependencies with all permissions
$ sudo npm install --unsafe-perm=true --allow-root
```
Once your server has started, go to this url `http://localhost:8080/` and you will see the website running on a Development Server:
---
## Template Instructions:
### Step 1 - STRUCTURE
Go to `/src/template.html` and fill your information, they are 5 sections:
### Hero Section
- On `.hero-title`, put your custom title.
- On `.hero-cta`, put your custom button cta.
```html
```
### About Section
- On `![]()
` tag, fill the `src` property with your profile picture, your picture must be located inside `assets/` folder.
- On `
` tag with class-name `.about-wrapper__info-text`, include information about you, I recommend to use 2 paragraphs in order to work well and a maximum of 3 paragraphs.
- On last `` tag, include your resume url on `href` property.
```html
```
### Projects Section
- Each project lives inside on a `row`.
- On `
` tag with class-name `.project-wrapper__text-title`, include your project title.
- On `
` tag with `loremp ipsum` text, include your project information.
- On first `` tag, put your project url on `href` property.
- On second `` tag, put your project repository url on `href` property.
---
- Inside `
` tag with class-name `.project-wrapper__image`, put your project image url on the `src` of the `![]()
` and put again your project url on `href` property of `` tag.
- Recommended size for project image (1366 x 767px), your project image must live on `assets/` folder.
```html
...
...
```
### Contact Section
- On `
` tag with class-name `.contact-wrapper__text`, include some custom call-to-action message.
- On `` tag, put your email address on `href` property.
```html
```
### Footer Section
- Put your social media link on each `
` links.
- If you have more social-media accounts, see [Font Awesome Icons](https://fontawesome.com/v4.7.0/icons/) to put the corresponding additional social icon `.class`
- You can delete or add as many `a` links your want.
```html
...
...
```
### Step 2 - STYLES
Change the color theme of the website ( choose 2 colors to create a gradient ):
Go to `src/styles/abstracts/_variables.scss` and only change the values on this classes `$main-color` and `$secondary-color` to your prefered HEX color
```scss
// Default values
$main-color: #02aab0;
$secondary-color: #00cdac;
```
**NOTE**: I highly recommend to checkout gradients variations on [UI Gradient](https://uigradients.com/#BrightVault)
---
## Deployment 📦
Once you have done with your setup. You need to put your website online!
I highly recommend to use [Netlify](https://netlify.com) to achieve this on the EASIEST WAY
Because this template use Webpack maybe you can get errors during deployment, Please watch my step-by-step video tutorial to successfully upload your Simplefolio Website on Netlify!
**[WATCH NOW MY STEP-BY-STEP TUTORIAL FOR DEPLOYMENT](https://www.youtube.com/watch?v=soaG3GNSxJY)**
## Others versions 👥
[Gatsby Simplefolio](https://github.com/cobidev/gatsby-simplefolio) by [Jacobo Martinez](https://github.com/cobidev)\
[Ember.js Simplefolio](https://github.com/sernadesigns/simplefolio-ember) by [Michael Serna](https://github.com/sernadesigns)
## Technologies used 🛠️
- [Webpack](https://webpack.js.org/concepts/) - Static module bundler
- [Bootstrap 4](https://getbootstrap.com/docs/4.3/getting-started/introduction/) - Front-end component library
- [Sass](https://sass-lang.com/documentation) - CSS extension language
- [ScrollReveal.js](https://scrollrevealjs.org/) - JavaScript library
- [Tilt.js](https://gijsroge.github.io/tilt.js/) - JavaScript tiny parallax library
- [Popper.js](https://popper.js.org/) - JavaScript popover library
## Other tools 🧰
- [Gif Maker](https://gifcap.dev/) - Online simple gif creator (no download required!)
- [Google Drive](https://www.google.com/drive) - Links to pdf documents
## Authors
- **Jacobo Martinez** - [https://github.com/cobidev](https://github.com/cobidev)
- **Francisco Javier Serrano** - [https://github.com/realfranser](https://github.com/realfranser)
## Status
[](https://app.netlify.com/sites/simplfolio/deploys)
## License 📄
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments 🎁
I was motivated to create this project because I wanted to contribute on something useful for the dev community, thanks to [ZTM Community](https://github.com/zero-to-mastery) and [Andrei](https://github.com/aneagoie)
