Skip to content

Commit 8c28446

Browse files
Ravas7Ravas7
authored
Merge branch 'zero-to-mastery:master' into gh-pages
2 parents 8a52981 + 9b481b0 commit 8c28446

29 files changed

Lines changed: 6564 additions & 0 deletions

‎LICENSE.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Jacobo Martínez
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 356 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,356 @@
1+
# Simplefolio ⚡️ [![GitHub](https://img.shields.io/github/license/cobidev/simplefolio?color=blue)](https://github.com/cobidev/simplefolio/blob/master/LICENSE.md) ![GitHub stars](https://img.shields.io/github/stars/cobidev/simplefolio) ![GitHub forks](https://img.shields.io/github/forks/cobidev/simplefolio)
2+
3+
## A minimal portfolio template for Developers!
4+
5+
<h2 align="center">
6+
<img src="https://github.com/cobidev/gatsby-simplefolio/blob/master/examples/example.gif" alt="Simplefolio" width="600px" />
7+
<br>
8+
</h2>
9+
10+
## Features
11+
12+
⚡️ Modern UI Design + Reveal Animations\
13+
⚡️ One Page Layout\
14+
⚡️ Styled with Bootstrap v4.3 + Custom SCSS\
15+
⚡️ Fully Responsive\
16+
⚡️ Valid HTML5 & CSS3\
17+
⚡️ Optimized with Parcel\
18+
⚡️ Well organized documentation
19+
20+
To view the demo: **[click here](https://the-simplefolio.netlify.app/)**
21+
22+
---
23+
24+
## Why do you need a portfolio? ☝️
25+
26+
- Professional way to showcase your work
27+
- Increases your visibility and online presence
28+
- Shows you’re more than just a resume
29+
30+
## Getting Started 🚀
31+
32+
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.
33+
34+
### Prerequisites 📋
35+
36+
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.
37+
38+
```
39+
node@v16.4.2 or higher
40+
npm@7.18.1 or higher
41+
git@2.30.1 or higher
42+
```
43+
44+
Also, you can use [Yarn](https://yarnpkg.com/) instead of NPM ☝️
45+
46+
```
47+
yarn@v1.22.10 or higher
48+
```
49+
50+
---
51+
52+
## How To Use 🔧
53+
54+
From your command line, first clone Simplefolio:
55+
56+
```bash
57+
# Clone the repository
58+
$ git clone https://github.com/cobidev/simplefolio
59+
60+
# Move into the repository
61+
$ cd simplefolio
62+
63+
# Remove the current origin repository
64+
$ git remote remove origin
65+
```
66+
67+
After that, you can install the dependencies either using NPM or Yarn.
68+
69+
Using NPM: Simply run the below commands.
70+
71+
```bash
72+
# Install dependencies
73+
$ npm install
74+
75+
# Start the development server
76+
$ npm start
77+
```
78+
79+
Using Yarn: Be aware of that you'll need to delete the `package-lock.json` file before executing the below commands.
80+
81+
```bash
82+
# Install dependencies
83+
$ yarn
84+
85+
# Start the development server
86+
$ yarn start
87+
```
88+
89+
**NOTE**:
90+
If your run into issues installing the dependencies with NPM, use this below command:
91+
92+
```bash
93+
# Install dependencies with all permissions
94+
$ sudo npm install --unsafe-perm=true --allow-root
95+
```
96+
97+
Once your server has started, go to this url `http://localhost:1234/` to see the portfolio locally. It should look like the below screenshot.
98+
99+
<h2 align="center">
100+
<img src="https://github.com/cobidev/gatsby-simplefolio/blob/master/examples/example.png" alt="Simplefolio" width="100%">
101+
</h2>
102+
103+
---
104+
105+
## Template Instructions:
106+
107+
### Step 1 - STRUCTURE
108+
109+
Go to `/src/index.html` and put your information, there are 5 sections:
110+
111+
### (1) Hero Section
112+
113+
- On `.hero-title`, put your custom portfolio title.
114+
- On `.hero-cta`, put your custom button label.
115+
116+
```html
117+
<!-- **** Hero Section **** -->
118+
<section id="hero" class="jumbotron">
119+
<div class="container">
120+
<h1 class="hero-title load-hidden">
121+
Hi, my name is <span class="text-color-main">Your Name</span>
122+
<br />
123+
I'm the Unknown Developer.
124+
</h1>
125+
<p class="hero-cta load-hidden">
126+
<a rel="noreferrer" class="cta-btn cta-btn--hero" href="#about">
127+
Know more
128+
</a>
129+
</p>
130+
</div>
131+
</section>
132+
<!-- /END Hero Section -->
133+
```
134+
135+
### (2) About Section
136+
137+
- On `<img>` tag, fill the `src` property with your profile picture path, your picture must be located inside `/src/assets/` folder.
138+
- On `<p>` tag with class name `.about-wrapper__info-text`, include information about you, I recommend to put 2 paragraphs in order to work well and a maximum of 3 paragraphs.
139+
- On last `<a>` tag, include your CV (.pdf) path on `href` property, your resume CV must be located inside `/src/assets/` folder.
140+
141+
```html
142+
<!-- **** About Section **** -->
143+
<section id="about">
144+
<div class="container">
145+
<h2 class="section-title load-hidden">About me</h2>
146+
<div class="row about-wrapper">
147+
<div class="col-md-6 col-sm-12">
148+
<div class="about-wrapper__image load-hidden">
149+
<img
150+
alt="Profile Image"
151+
class="img-fluid rounded shadow-lg"
152+
height="auto"
153+
width="300px"
154+
src="assets/profile.jpg"
155+
alt="Profile Image"
156+
/>
157+
</div>
158+
</div>
159+
<div class="col-md-6 col-sm-12">
160+
<div class="about-wrapper__info load-hidden">
161+
<p class="about-wrapper__info-text">
162+
This is where you can describe about yourself. The more you describe
163+
about yourself, the more chances you can!
164+
</p>
165+
<p class="about-wrapper__info-text">
166+
Extra Information about you! like hobbies and your goals.
167+
</p>
168+
<span class="d-flex mt-3">
169+
<a
170+
rel="noreferrer"
171+
target="_blank"
172+
class="cta-btn cta-btn--resume"
173+
href="assets/resume.pdf"
174+
>
175+
View Resume
176+
</a>
177+
</span>
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
</section>
183+
<!-- /END About Section -->
184+
```
185+
186+
### (3) Projects Section
187+
188+
- Each project lives inside a `row`.
189+
- On `<h3>` tag with class name `.project-wrapper__text-title`, include your project title.
190+
- On `<p>` tag with `loremp ipsum` text, include your project description.
191+
- On first `<a>` tag, put your project url on `href` property.
192+
- On second `<a>` tag, put your project repository url on `href` property.
193+
194+
---
195+
196+
- Inside `<div>` tag with class name `.project-wrapper__image`, put your project image url on the `src` of the `<img>` and put again your project url in the `href` property of the `<a>` tag.
197+
- Recommended size for project image (1366 x 767), your project image must be located inside `/src/assets/` folder.
198+
199+
```html
200+
<!-- **** Projects Section **** -->
201+
<section id="projects">
202+
...
203+
<!-- Notice: each .row is a project -->
204+
<div class="row">
205+
<div class="col-lg-4 col-sm-12">
206+
<div class="project-wrapper__text load-hidden">
207+
<h3 class="project-wrapper__text-title">Project Title</h3>
208+
<div>
209+
<p class="mb-4">
210+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi
211+
neque, ipsa animi maiores repellendus distinctio aperiam earum dolor
212+
voluptatum consequatur blanditiis inventore debitis fuga numquam
213+
voluptate ex architecto itaque molestiae.
214+
</p>
215+
</div>
216+
<a
217+
rel="noreferrer"
218+
target="_blank"
219+
class="cta-btn cta-btn--hero"
220+
href="#!"
221+
>
222+
See Live
223+
</a>
224+
<a
225+
rel="noreferrer"
226+
target="_blank"
227+
class="cta-btn text-color-main"
228+
href="#!"
229+
>
230+
Source Code
231+
</a>
232+
</div>
233+
</div>
234+
<div class="col-lg-8 col-sm-12">
235+
<div class="project-wrapper__image load-hidden">
236+
<a rel="noreferrer" href="#!" target="_blank">
237+
<div
238+
data-tilt
239+
data-tilt-max="4"
240+
data-tilt-glare="true"
241+
data-tilt-max-glare="0.5"
242+
class="thumbnail rounded js-tilt"
243+
>
244+
<img
245+
alt="Project Image"
246+
class="img-fluid"
247+
src="assets/project.jpg"
248+
/>
249+
</div>
250+
</a>
251+
</div>
252+
</div>
253+
</div>
254+
<!-- /END Project -->
255+
...
256+
</section>
257+
```
258+
259+
### (4) Contact Section
260+
261+
- On `<p>` tag with class name `.contact-wrapper__text`, include some custom call-to-action message.
262+
- On `<a>` tag, put your email address on `href` property.
263+
264+
```html
265+
<!-- **** Contact Section **** -->
266+
<section id="contact">
267+
<div class="container">
268+
<h2 class="section-title">Contact</h2>
269+
<div class="contact-wrapper load-hidden">
270+
<p class="contact-wrapper__text">[Put your call to action here]</p>
271+
<a
272+
rel="noreferrer"
273+
target="_blank"
274+
class="cta-btn cta-btn--resume"
275+
href="mailto:example@email.com"
276+
>Call to Action</a
277+
>
278+
</div>
279+
</div>
280+
</section>
281+
<!-- /END Contact Section -->
282+
```
283+
284+
### (5) Footer Section
285+
286+
- Put your Social Media URL on each `href` attribute of the `<a>` tags.
287+
- If you an additional Social Media account different than Twitter, Linkedin or GitHub, then go to [Font Awesome Icons](https://fontawesome.com/v4.7.0/icons/) and search for the icon's class name you are looking.
288+
- You can delete or add as many `<a>` tags your want.
289+
290+
```html
291+
<footer class="footer navbar-static-bottom">
292+
...
293+
<div class="social-links">
294+
<a href="#!" target="_blank">
295+
<i class="fa fa-twitter fa-inverse"></i>
296+
</a>
297+
<a href="#!" target="_blank">
298+
<i class="fa fa-linkedin fa-inverse"></i>
299+
</a>
300+
<a href="#!" target="_blank">
301+
<i class="fa fa-github fa-inverse"></i>
302+
</a>
303+
</div>
304+
...
305+
</footer>
306+
```
307+
308+
### Step 2 - STYLES
309+
310+
Change the color theme of the website - (choose 2 colors to create a gradient)
311+
312+
Go to `/src/sass/abstracts/_variables.scss` and only change the values for this variables `$main-color` and `$secondary-color` with your prefered HEX color.
313+
If you want to get some gradients inspiration I highly recommend you to check this website [UI Gradient](https://uigradients.com/#BrightVault)
314+
315+
```scss
316+
// Default values
317+
$main-color: #02aab0;
318+
$secondary-color: #00cdac;
319+
```
320+
321+
---
322+
323+
## Deployment 📦
324+
325+
Once you finish your setup. You need to put your website online!
326+
327+
I highly recommend to use [Netlify](https://netlify.com) because it is super easy.
328+
329+
## Others versions 👥
330+
331+
[Gatsby Simplefolio](https://github.com/cobidev/gatsby-simplefolio) by [Jacobo Martinez](https://github.com/cobidev)\
332+
[Ember.js Simplefolio](https://github.com/sernadesigns/simplefolio-ember) by [Michael Serna](https://github.com/sernadesigns)
333+
334+
## Technologies used 🛠️
335+
336+
- [Parcel](https://parceljs.org/) - Bundler
337+
- [Bootstrap 4](https://getbootstrap.com/docs/4.3/getting-started/introduction/) - Frontend component library
338+
- [Sass](https://sass-lang.com/documentation) - CSS extension language
339+
- [ScrollReveal.js](https://scrollrevealjs.org/) - JavaScript library
340+
- [Tilt.js](https://gijsroge.github.io/tilt.js/) - JavaScript tiny parallax library
341+
342+
## Authors
343+
344+
- **Jacobo Martinez** - [https://github.com/cobidev](https://github.com/cobidev)
345+
346+
## Status
347+
348+
[![Netlify Status](https://api.netlify.com/api/v1/badges/3a029bfd-575c-41e5-8249-c864d482c2e5/deploy-status)](https://app.netlify.com/sites/the-simplefolio/deploys)
349+
350+
## License 📄
351+
352+
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
353+
354+
## Acknowledgments 🎁
355+
356+
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)

‎examples/example.gif‎

4.81 MB
Loading

‎examples/example.png‎

25.8 KB
Loading

0 commit comments

Comments
 (0)