├── .prettierrc ├── .nvmrc ├── .gitignore ├── src ├── sass │ ├── vendors │ │ └── _bootstrap.scss │ ├── abstracts │ │ ├── _helpers.scss │ │ ├── _variables.scss │ │ └── _mixins.scss │ ├── layout │ │ ├── _sections.scss │ │ └── _footer.scss │ ├── base │ │ ├── _base.scss │ │ └── _typography.scss │ ├── sections │ │ ├── _contact.scss │ │ ├── _hero.scss │ │ ├── _projects.scss │ │ └── _about.scss │ └── components │ │ └── _buttons.scss ├── assets │ ├── resume.pdf │ ├── favicon.png │ ├── profile.jpg │ └── project.jpg ├── scripts │ ├── tiltAnimation.js │ └── scrollReveal.js ├── index.js ├── styles.scss ├── data │ └── scrollRevealConfig.js └── index.html ├── examples ├── example.gif └── example.png ├── package.json ├── LICENSE.md ├── .github └── workflows │ └── gh-pages.yml └── README.md /.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 16.14.2 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .parcel-cache 4 | -------------------------------------------------------------------------------- /src/sass/vendors/_bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import "~bootstrap/scss/bootstrap"; 2 | -------------------------------------------------------------------------------- /examples/example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneagoie/simplefolio/HEAD/examples/example.gif -------------------------------------------------------------------------------- /examples/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneagoie/simplefolio/HEAD/examples/example.png -------------------------------------------------------------------------------- /src/assets/resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneagoie/simplefolio/HEAD/src/assets/resume.pdf -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneagoie/simplefolio/HEAD/src/assets/favicon.png -------------------------------------------------------------------------------- /src/assets/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneagoie/simplefolio/HEAD/src/assets/profile.jpg -------------------------------------------------------------------------------- /src/assets/project.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aneagoie/simplefolio/HEAD/src/assets/project.jpg -------------------------------------------------------------------------------- /src/sass/abstracts/_helpers.scss: -------------------------------------------------------------------------------- 1 | // Margins 2 | .mb-8 { 3 | margin-bottom: 8rem !important; 4 | } 5 | -------------------------------------------------------------------------------- /src/sass/layout/_sections.scss: -------------------------------------------------------------------------------- 1 | // Section 2 | section { 3 | padding: 5rem 0rem; 4 | 5 | @include respond(phone) { 6 | border: none; 7 | padding-left: 1rem; 8 | padding-right: 1rem; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/scripts/tiltAnimation.js: -------------------------------------------------------------------------------- 1 | import VanillaTilt from "vanilla-tilt"; 2 | 3 | export default function initTiltAnimation() { 4 | const elements = document.querySelectorAll(".js-tilt"); 5 | VanillaTilt.init(elements); 6 | } 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import initScrollReveal from "./scripts/scrollReveal"; 2 | import initTiltEffect from "./scripts/tiltAnimation"; 3 | import { targetElements, defaultProps } from "./data/scrollRevealConfig"; 4 | 5 | initScrollReveal(targetElements, defaultProps); 6 | initTiltEffect(); 7 | 8 | -------------------------------------------------------------------------------- /src/scripts/scrollReveal.js: -------------------------------------------------------------------------------- 1 | export default function initScrollReveal(targetElements, defaultProps) { 2 | if (!targetElements.length) return; 3 | 4 | ScrollReveal({ reset: false }); 5 | 6 | targetElements.forEach(({ element, animation }) => { 7 | ScrollReveal().reveal(element, Object.assign({}, defaultProps, animation)); 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /src/sass/abstracts/_variables.scss: -------------------------------------------------------------------------------- 1 | // COLORS 2 | $primary-color: #02aab0; 3 | $secondary-color: #00cdac; 4 | 5 | $white-color: #fff; 6 | 7 | $dark-grey: #333333; 8 | $light-grey: #d2d2d2; 9 | 10 | $dark-blue-text: #272341; // For Headings 11 | 12 | // FONT SIZE 13 | $default-font-size: 1.6rem; 14 | $big-font-size: 4rem; 15 | $mid-font-size: 2.5rem; 16 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @import "./sass/vendors/bootstrap.scss"; 2 | 3 | @import "./sass/abstracts/mixins"; 4 | @import "./sass/abstracts/variables"; 5 | @import "./sass/abstracts/helpers"; 6 | 7 | @import "./sass/base/base"; 8 | @import "./sass/base/typography"; 9 | 10 | @import "./sass/components/buttons"; 11 | 12 | @import "./sass/layout/footer"; 13 | @import "./sass/layout/sections"; 14 | 15 | @import "./sass/sections/about"; 16 | @import "./sass/sections/contact"; 17 | @import "./sass/sections/hero"; 18 | @import "./sass/sections/projects"; 19 | -------------------------------------------------------------------------------- /src/sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 62.5%; 3 | 4 | &.sr .load-hidden { 5 | visibility: hidden; 6 | } 7 | } 8 | 9 | body { 10 | font-family: "Montserrat", sans-serif; 11 | text-align: center; 12 | scroll-behavior: smooth; 13 | } 14 | 15 | /* Scrollbar */ 16 | ::-webkit-scrollbar { 17 | width: 10px; 18 | height: 10px; 19 | } 20 | ::-webkit-scrollbar-track { 21 | background: #f1f1f1; 22 | } 23 | ::-webkit-scrollbar-thumb { 24 | background: $light-grey; 25 | } 26 | ::-webkit-scrollbar-thumb:hover { 27 | background: $primary-color; 28 | } 29 | -------------------------------------------------------------------------------- /src/sass/sections/_contact.scss: -------------------------------------------------------------------------------- 1 | #contact { 2 | background-image: linear-gradient( 3 | 135deg, 4 | $primary-color 0%, 5 | $secondary-color 100% 6 | ); 7 | -webkit-clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%); 8 | clip-path: polygon(0 15vh, 100% 0, 100% 100%, 0 100%); 9 | padding: 15rem 0 10rem 0; 10 | margin-top: -10rem; 11 | margin-bottom: -1px; 12 | color: $white-color; 13 | 14 | @include respond(tab-land) { 15 | padding: 10rem 0; 16 | clip-path: none; 17 | margin-top: 0; 18 | -webkit-clip-path: none; 19 | } 20 | 21 | .contact-wrapper { 22 | margin-top: 3.2rem; 23 | padding: 0 2rem; 24 | backface-visibility: hidden; 25 | 26 | &__text { 27 | margin-bottom: 2.5rem; 28 | } 29 | 30 | &__text, 31 | a { 32 | font-size: 2.4rem; 33 | 34 | @include respond(phone) { 35 | font-size: 2rem; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simplefolio", 3 | "version": "1.0.1", 4 | "private": "true", 5 | "description": "A clean, beautiful and responsive portfolio template for Developers!", 6 | "source": "src/index.html", 7 | "scripts": { 8 | "start": "parcel", 9 | "build": "parcel build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/cobiwave/simplefolio" 14 | }, 15 | "keywords": [], 16 | "author": "Jacobo Martinez", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/cobiwave/simplefolio/issues" 20 | }, 21 | "homepage": "https://github.com/cobiwave/simplefolio#readme", 22 | "devDependencies": { 23 | "@parcel/transformer-sass": "^2.8.2", 24 | "parcel": "^2.8.2", 25 | "prettier": "^2.8.1" 26 | }, 27 | "dependencies": { 28 | "@popperjs/core": "^2.11.8", 29 | "bootstrap": "^5.3.3", 30 | "jquery": "^3.7.1", 31 | "popper.js": "^1.16.1", 32 | "vanilla-tilt": "^1.8.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); 2 | 3 | h1 { 4 | font-weight: 700; 5 | } 6 | 7 | p, 8 | a { 9 | font-family: "Montserrat", sans-serif; 10 | font-size: $default-font-size; 11 | } 12 | 13 | a, 14 | a:link, 15 | a:hover, 16 | a:visited, 17 | a:active { 18 | text-decoration: none; 19 | } 20 | 21 | a:hover { 22 | transition: all 0.3s ease-in-out; 23 | } 24 | 25 | .section-title { 26 | margin: 0px; 27 | margin-bottom: 4.5rem; 28 | font-size: $big-font-size; 29 | font-weight: bold; 30 | text-transform: uppercase; 31 | 32 | @include respond(phone) { 33 | font-size: 2.8rem; 34 | } 35 | } 36 | 37 | .dark-blue-text { 38 | color: $dark-blue-text !important; 39 | } 40 | 41 | .text-color-main { 42 | @include supportColorForIE11(); 43 | 44 | // Responsive text purple style 45 | @include respond(phone) { 46 | background-image: none; 47 | -webkit-text-fill-color: $secondary-color; 48 | } 49 | 50 | &:hover { 51 | transform: translateX(2px); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 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. 22 | 23 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | name: Portfolio 3 | # Controls when the action will run. Triggers the workflow on push or pull request 4 | # events but only for the main branch 5 | on: 6 | push: 7 | branches: [ main ] 8 | pull_request: 9 | branches: [ main ] 10 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 11 | jobs: 12 | # This workflow contains a single job called "build" 13 | build: 14 | # The type of runner that the job will run on 15 | runs-on: ubuntu-latest 16 | # Steps represent a sequence of tasks that will be executed as part of the job 17 | steps: 18 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 19 | - name: Check-out repository 20 | uses: actions/checkout@v2 21 | 22 | # Runs a single command using the runners shell 23 | - name: Setup Node.js environment 24 | uses: actions/setup-node@v2.1.2 25 | 26 | # Install project 27 | - name: Install project 28 | run: npm install 29 | 30 | # Build project 31 | - name: Build project 32 | run: npm run-script build 33 | 34 | # Push to Github Pages 35 | - name: Github Pages 36 | uses: crazy-max/ghaction-github-pages@v2.1.3 37 | with: 38 | # Build directory to deploy 39 | build_dir: dist 40 | env: 41 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 42 | 43 | -------------------------------------------------------------------------------- /src/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: $dark-grey; 3 | color: $white-color; 4 | padding: 4.8rem 0; 5 | 6 | @include respond(phone) { 7 | border: 0px; 8 | } 9 | 10 | &__text { 11 | color: darken($white-color, 50%); 12 | font-size: 1.3rem; 13 | 14 | a { 15 | color: darken($white-color, 50%); 16 | font-size: 1.3rem; 17 | transition: all 0.4s; 18 | display: inline-block; 19 | background-color: $dark-grey; 20 | 21 | &:hover, 22 | &:active { 23 | color: $primary-color; 24 | -webkit-box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); 25 | box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); 26 | } 27 | } 28 | } 29 | 30 | & hr { 31 | margin: 1rem auto; 32 | border: 0; 33 | width: 50%; 34 | border-top: 2px solid grey; 35 | } 36 | } 37 | 38 | .social-links { 39 | display: flex; 40 | flex-direction: row; 41 | justify-content: center; 42 | 43 | a { 44 | display: flex; 45 | flex-direction: column; 46 | justify-content: center; 47 | color: $white-color; 48 | font-size: 3rem; 49 | width: 5rem; 50 | height: 5rem; 51 | margin: $default-font-size $default-font-size; 52 | transition: all 0.2s ease-in; 53 | 54 | &:hover { 55 | transform: translateY(-2px); 56 | } 57 | } 58 | } 59 | 60 | .back-to-top i { 61 | color: $white-color; 62 | margin: 1rem 0 $default-font-size; 63 | transition: all 0.2s ease-in; 64 | 65 | &:hover { 66 | transform: translateY(-2px); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/data/scrollRevealConfig.js: -------------------------------------------------------------------------------- 1 | export const defaultProps = { 2 | easing: "cubic-bezier(0.5, 0, 0, 1)", 3 | distance: "30px", 4 | duration: 1000, 5 | desktop: true, 6 | mobile: true, 7 | }; 8 | 9 | export const targetElements = [ 10 | { 11 | element: ".section-title", 12 | animation: { 13 | delay: 300, 14 | distance: "0px", 15 | origin: "bottom", 16 | }, 17 | }, 18 | { 19 | element: ".hero-title", 20 | animation: { 21 | delay: 500, 22 | origin: window.innerWidth > 768 ? "left" : "bottom", 23 | }, 24 | }, 25 | { 26 | element: ".hero-cta", 27 | animation: { 28 | delay: 1000, 29 | origin: window.innerWidth > 768 ? "left" : "bottom", 30 | }, 31 | }, 32 | { 33 | element: ".about-wrapper__image", 34 | animation: { 35 | delay: 600, 36 | origin: "bottom", 37 | }, 38 | }, 39 | { 40 | element: ".about-wrapper__info", 41 | animation: { 42 | delay: 1000, 43 | origin: window.innerWidth > 768 ? "left" : "bottom", 44 | }, 45 | }, 46 | { 47 | element: ".project-wrapper__text", 48 | animation: { 49 | delay: 500, 50 | origin: window.innerWidth > 768 ? "left" : "bottom", 51 | }, 52 | }, 53 | { 54 | element: ".project-wrapper__image", 55 | animation: { 56 | delay: 1000, 57 | origin: window.innerWidth > 768 ? "right" : "bottom", 58 | }, 59 | }, 60 | { 61 | element: ".contact-wrapper", 62 | animation: { 63 | delay: 800, 64 | origin: "bottom", 65 | }, 66 | }, 67 | ]; 68 | -------------------------------------------------------------------------------- /src/sass/sections/_hero.scss: -------------------------------------------------------------------------------- 1 | #hero { 2 | min-height: 100vh; 3 | height: 100vh; 4 | display: flex; 5 | align-items: center; 6 | border-bottom: 0px; 7 | background: $white-color; 8 | font-weight: 400; 9 | color: $dark-blue-text; 10 | padding: 0rem 5.6rem; 11 | margin-bottom: 0; 12 | top: 0; 13 | left: 0; 14 | bottom: 0; 15 | right: 0; 16 | z-index: -1; 17 | 18 | // Set position sticky so the jumbotron stays fixed while you scroll. 19 | // position: sticky; 20 | 21 | // If you want to set a background image on the hero section, uncomment these with your custom image 22 | 23 | /* background: url("/src/assets/[your-image].png"); 24 | background-position: center; 25 | background-size: cover; */ 26 | 27 | @include respond(phone) { 28 | padding: 0rem $default-font-size; 29 | } 30 | 31 | .hero-title { 32 | font-size: 5.6rem; 33 | font-weight: 700; 34 | margin-bottom: 3.2rem; 35 | text-align: left; 36 | 37 | @include respond(tab-land) { 38 | font-size: 4rem; 39 | } 40 | @include respond(tab-port) { 41 | font-size: 3.6rem; 42 | text-align: center; 43 | } 44 | @include respond(phone) { 45 | font-size: 3.5rem; 46 | line-height: 1.5; 47 | } 48 | @include respond(phone-xs) { 49 | font-size: 2.8rem; 50 | } 51 | } 52 | 53 | .hero-cta { 54 | display: flex; 55 | 56 | @include respond(tab-port) { 57 | justify-content: center; 58 | } 59 | 60 | & a { 61 | font-size: 2.4rem; 62 | 63 | @include respond(phone) { 64 | font-size: 2rem; 65 | } 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/sass/sections/_projects.scss: -------------------------------------------------------------------------------- 1 | #projects { 2 | background-color: $white-color; 3 | color: $dark-blue-text; 4 | margin-top: -10rem; 5 | padding-top: 15rem; 6 | 7 | @include respond(tab-land) { 8 | margin-top: 0; 9 | padding-top: 5rem; 10 | } 11 | 12 | .project-wrapper { 13 | margin-bottom: 15rem; 14 | 15 | @include respond(phone) { 16 | margin-bottom: 0rem; 17 | } 18 | 19 | .row { 20 | margin-bottom: 8rem; 21 | 22 | @include respond(phone) { 23 | margin-bottom: 4rem; 24 | } 25 | } 26 | 27 | &__text { 28 | text-align: left; 29 | 30 | @include respond(phone) { 31 | margin-bottom: 2.5rem !important; 32 | } 33 | @include respond(tab-land) { 34 | margin-bottom: 4.8rem; 35 | } 36 | 37 | &-title { 38 | font-weight: bold; 39 | margin-bottom: 1.8rem; 40 | font-size: $mid-font-size; 41 | 42 | @include respond(phone) { 43 | font-size: 2rem; 44 | } 45 | } 46 | 47 | & p > a { 48 | color: $secondary-color; 49 | } 50 | } 51 | 52 | &__image { 53 | width: 90%; 54 | margin: 0 auto; 55 | 56 | @include respond(tab-land) { 57 | width: 100%; 58 | margin: 0; 59 | } 60 | 61 | & .thumbnail { 62 | border: none; 63 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 64 | transition: all 0.2s ease-out; 65 | box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05); 66 | transition: 0.5s transform cubic-bezier(0.155, 1.105, 0.295, 1.12), 67 | 0.5s box-shadow, 68 | 0.5s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12); 69 | 70 | @include respond(phone) { 71 | border: 1px solid $light-grey; 72 | box-shadow: none; 73 | margin-bottom: 3.2rem; 74 | } 75 | } 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/sass/sections/_about.scss: -------------------------------------------------------------------------------- 1 | #about { 2 | background-color: $primary-color; 3 | background-image: linear-gradient( 4 | 135deg, 5 | $primary-color 0%, 6 | $secondary-color 100% 7 | ); 8 | color: $white-color; 9 | height: 100%; 10 | border-top: 0px; 11 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 12 | clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); 13 | padding-bottom: 10%; 14 | 15 | @include respond(tab-land) { 16 | height: 100%; 17 | -webkit-clip-path: none; 18 | clip-path: none; 19 | } 20 | 21 | .about-wrapper { 22 | @include respond(phone) { 23 | padding-bottom: 5rem; 24 | } 25 | 26 | &__image { 27 | display: flex; 28 | height: 100%; 29 | align-items: center; 30 | justify-content: center; 31 | 32 | @include respond(tab-land) { 33 | height: 100%; 34 | } 35 | @include respond(tab-port-sm) { 36 | padding-bottom: 6.4rem; 37 | } 38 | } 39 | 40 | &__info { 41 | display: flex; 42 | height: 100%; 43 | justify-content: center; 44 | flex-direction: column; 45 | 46 | @include respond(tab-port-sm) { 47 | align-items: center; 48 | } 49 | 50 | &-text { 51 | text-align: left; 52 | 53 | @include respond(tab-port) { 54 | text-align: left; 55 | } 56 | @include respond(tab-port-sm) { 57 | text-align: center; 58 | } 59 | 60 | &--important { 61 | background: darken($secondary-color, 1%); 62 | display: inline-block; 63 | font-style: italic; 64 | padding: 0 0.3rem; 65 | margin: 0.3rem 0; 66 | line-height: 1.6; 67 | 68 | @include respond(phone) { 69 | display: inline; 70 | margin: 0; 71 | padding: 0; 72 | background: transparent; 73 | font-style: normal; 74 | } 75 | } 76 | } 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/sass/abstracts/_mixins.scss: -------------------------------------------------------------------------------- 1 | // MEDIA QUERY MANAGER 2 | /* 3 | 4 | 0 - 600px: Phone 5 | 600px - 900px Table Portrait 6 | 900px - 1200px Table Landscape 7 | [1200px - 1800px] Desktop Normal Styles 8 | 1800px + Big Desktop 9 | 10 | 1em = 16px 11 | 12 | ORDER: Base + Typography > Generar Layout + Grid > Page Layout > Components 13 | 14 | */ 15 | @mixin respond($breakpoint) { 16 | // Phone-xs 17 | @if $breakpoint == phone-xs { 18 | @media (max-width: 20em) { 19 | @content; 20 | } //0 - 320px 21 | } 22 | // Phone 23 | @if $breakpoint == phone { 24 | @media (max-width: 37.5em) { 25 | @content; 26 | } //0 - 600px 27 | } 28 | // Table small 29 | @if $breakpoint == tab-port-sm { 30 | @media (max-width: 48em) { 31 | @content; 32 | } //768px 33 | } 34 | // Table Portrait 35 | @if $breakpoint == tab-port { 36 | @media (max-width: 56.25em) { 37 | @content; 38 | } //900px 39 | } 40 | // Table Landscape 41 | @if $breakpoint == tab-land { 42 | @media (max-width: 75em) { 43 | @content; 44 | } //1200px 45 | } 46 | // Big Desktop 47 | @if $breakpoint == big-desktop { 48 | @media (min-width: 112.5em) { 49 | @content; 50 | } //1800px + 51 | } 52 | } 53 | 54 | // Border White Mixin 55 | @mixin section-borders { 56 | border: 1.5rem solid #fff; 57 | border-top: 0; 58 | border-bottom: 0; 59 | } 60 | 61 | @mixin supportColorForIE11 { 62 | // Fall for text-gradient not supported in IE11 63 | color: $secondary-color; 64 | -webkit-text-fill-color: $secondary-color; // fallback 65 | @supports (-webkit-background-clip: text) or (background-clip: text) { 66 | background-image: linear-gradient( 67 | 135deg, 68 | $primary-color 0%, 69 | $secondary-color 100% 70 | ); 71 | -webkit-background-clip: text; 72 | -webkit-text-fill-color: transparent; 73 | color: transparent; 74 | } 75 | } 76 | 77 | @mixin supportIE11 { 78 | // Provide your basic styles to support IE11 79 | @media screen and (-ms-high-contrast: active), 80 | screen and (-ms-high-contrast: none) { 81 | @content; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/sass/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* Call to Action Button */ 2 | .cta-btn { 3 | display: inline-block; 4 | position: relative; 5 | padding: 0.8rem $default-font-size; 6 | font-weight: bold; 7 | line-height: 1; 8 | z-index: 1; 9 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.6s; 10 | 11 | &::after { 12 | content: ""; 13 | display: block; 14 | position: absolute; 15 | width: 0px; 16 | height: 100%; 17 | left: 0; 18 | bottom: 0; 19 | z-index: -1; 20 | transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.3s; 21 | } 22 | } 23 | 24 | /* Hero Style */ 25 | .cta-btn--hero { 26 | @include supportColorForIE11(); 27 | border-width: 2px; 28 | border-style: solid; 29 | -moz-border-image: -moz-linear-gradient( 30 | 135deg, 31 | $primary-color 0%, 32 | $secondary-color 100% 33 | ); 34 | -webkit-border-image: -webkit-linear-gradient( 35 | 135deg, 36 | $primary-color 0%, 37 | $secondary-color 100% 38 | ); 39 | border-image: linear-gradient( 40 | 135deg, 41 | $primary-color 0%, 42 | $secondary-color 100% 43 | ); 44 | -webkit-border-image-slice: 1; 45 | border-image-slice: 1; 46 | @include supportIE11() { 47 | color: $secondary-color !important; 48 | &:hover { 49 | color: $white-color !important; 50 | } 51 | } 52 | 53 | @include respond(phone) { 54 | background-image: none; 55 | border: 2px solid $secondary-color; 56 | -webkit-text-fill-color: $secondary-color; 57 | } 58 | 59 | &::after { 60 | background-image: linear-gradient( 61 | 135deg, 62 | $primary-color 0%, 63 | $secondary-color 100% 64 | ); 65 | 66 | @include respond(phone) { 67 | background-image: none; 68 | } 69 | } 70 | 71 | &:hover { 72 | -webkit-text-fill-color: $white-color; 73 | text-decoration: none; 74 | 75 | @include respond(phone) { 76 | -webkit-text-fill-color: $secondary-color; 77 | } 78 | 79 | &::after { 80 | width: 100%; 81 | } 82 | } 83 | } 84 | 85 | /* Resume Style */ 86 | .cta-btn--resume { 87 | color: $white-color; 88 | border: 2px solid $white-color; 89 | 90 | &::after { 91 | background: $white-color; 92 | } 93 | 94 | &:hover { 95 | color: $secondary-color; 96 | text-decoration: none; 97 | 98 | &::after { 99 | width: 100%; 100 | } 101 | } 102 | } 103 | 104 | /* Arrow Button */ 105 | .up i { 106 | color: #272727; 107 | } 108 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simplefolio ⚡️ [![GitHub](https://img.shields.io/github/license/cobiwave/simplefolio?color=blue)](https://github.com/cobiwave/simplefolio/blob/master/LICENSE.md) ![GitHub stars](https://img.shields.io/github/stars/cobiwave/simplefolio) ![GitHub forks](https://img.shields.io/github/forks/cobiwave/simplefolio) 2 | 3 | ## A minimal portfolio template for Developers! 4 | 5 |

6 | Simplefolio 7 |
8 |

9 | 10 | 11 | ## Features 12 | 13 | ⚡️ Modern UI Design + Reveal Animations\ 14 | ⚡️ One Page Layout\ 15 | ⚡️ Styled with Bootstrap v4.3 + Custom SCSS\ 16 | ⚡️ Fully Responsive\ 17 | ⚡️ Valid HTML5 & CSS3\ 18 | ⚡️ Optimized with Parcel\ 19 | ⚡️ Well organized documentation 20 | 21 | To view the demo: **[click here](https://the-simplefolio.netlify.app/)** 22 | 23 | --- 24 | 25 | ## Why do you need a portfolio? ☝️ 26 | 27 | - Professional way to showcase your work 28 | - Increases your visibility and online presence 29 | - Shows you’re more than just a resume 30 | 31 | ## Getting Started 🚀 32 | 33 | 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. 34 | 35 | ### Prerequisites 📋 36 | 37 | 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. 38 | 39 | ``` 40 | node@v16.4.2 or higher 41 | npm@7.18.1 or higher 42 | git@2.30.1 or higher 43 | ``` 44 | 45 | Also, you can use [Yarn](https://yarnpkg.com/) instead of NPM ☝️ 46 | 47 | ``` 48 | yarn@v1.22.10 or higher 49 | ``` 50 | 51 | --- 52 | 53 | ## How To Use 🔧 54 | 55 | From your command line, first clone Simplefolio: 56 | 57 | ```bash 58 | # Clone the repository 59 | $ git clone https://github.com/cobiwave/simplefolio 60 | 61 | # Move into the repository 62 | $ cd simplefolio 63 | 64 | # Remove the current origin repository 65 | $ git remote remove origin 66 | ``` 67 | 68 | After that, you can install the dependencies either using NPM or Yarn. 69 | 70 | Using NPM: Simply run the below commands. 71 | 72 | ```bash 73 | # 2022 Update - Fix Dependencies 74 | $ npm audit fix 75 | $ npm i @parcel/transformer-sass 76 | 77 | # Install dependencies 78 | $ npm install 79 | 80 | # Start the development server 81 | $ npm start 82 | ``` 83 | 84 | Using Yarn: Be aware of that you'll need to delete the `package-lock.json` file before executing the below commands. 85 | 86 | ```bash 87 | # Install dependencies 88 | $ yarn 89 | 90 | # Start the development server 91 | $ yarn start 92 | ``` 93 | 94 | **NOTE**: 95 | If your run into issues installing the dependencies with NPM, use this below command: 96 | 97 | ```bash 98 | # Install dependencies with all permissions 99 | $ sudo npm install --unsafe-perm=true --allow-root 100 | ``` 101 | 102 | Once your server has started, go to this url `http://localhost:1234/` to see the portfolio locally. It should look like the below screenshot. 103 | 104 |

105 | Simplefolio 106 |

107 | 108 | --- 109 | 110 | ## Template Instructions: 111 | 112 | ### Step 1 - STRUCTURE 113 | 114 | Go to `/src/index.html` and put your information, there are 5 sections: 115 | 116 | ### (1) Hero Section 117 | 118 | - On `.hero-title`, put your custom portfolio title. 119 | - On `.hero-cta`, put your custom button label. 120 | 121 | ```html 122 | 123 |
124 |
125 |

126 | Hi, my name is Your Name 127 |
128 | I'm the Unknown Developer. 129 |

130 |

131 | 132 | Know more 133 | 134 |

135 |
136 |
137 | 138 | ``` 139 | 140 | ### (2) About Section 141 | 142 | - On `` tag, fill the `src` property with your profile picture path, your picture must be located inside `/src/assets/` folder. 143 | - On `

` 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. 144 | - On last `` tag, include your CV (.pdf) path on `href` property, your resume CV must be located inside `/src/assets/` folder. 145 | 146 | ```html 147 | 148 |

149 |
150 |

About me

151 |
152 |
153 |
154 | Profile Image 162 |
163 |
164 |
165 |
166 |

167 | This is where you can describe about yourself. The more you describe 168 | about yourself, the more chances you can! 169 |

170 |

171 | Extra Information about you! like hobbies and your goals. 172 |

173 | 174 | 180 | View Resume 181 | 182 | 183 |
184 |
185 |
186 |
187 |
188 | 189 | ``` 190 | 191 | ### (3) Projects Section 192 | 193 | - Each project lives inside a `row`. 194 | - On `

` tag with class name `.project-wrapper__text-title`, include your project title. 195 | - On `

` tag with `loremp ipsum` text, include your project description. 196 | - On first `` tag, put your project url on `href` property. 197 | - On second `` tag, put your project repository url on `href` property. 198 | 199 | --- 200 | 201 | - Inside `

` tag with class name `.project-wrapper__image`, put your project image url on the `src` of the `` and put again your project url in the `href` property of the `` tag. 202 | - Recommended size for project image (1366 x 767), your project image must be located inside `/src/assets/` folder. 203 | 204 | ```html 205 | 206 |
207 | ... 208 | 209 |
210 |
211 |
212 |

Project Title

213 |
214 |

215 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi 216 | neque, ipsa animi maiores repellendus distinctio aperiam earum dolor 217 | voluptatum consequatur blanditiis inventore debitis fuga numquam 218 | voluptate ex architecto itaque molestiae. 219 |

220 |
221 | 227 | See Live 228 | 229 | 235 | Source Code 236 | 237 |
238 |
239 |
240 |
241 | 242 |
249 | Project Image 254 |
255 | 256 |
257 |
258 |
259 | 260 | ... 261 |
262 | ``` 263 | 264 | ### (4) Contact Section 265 | 266 | - On `

` tag with class name `.contact-wrapper__text`, include some custom call-to-action message. 267 | - On `` tag, put your email address on `href` property. 268 | 269 | ```html 270 | 271 |

272 |
273 |

Contact

274 |
275 |

[Put your call to action here]

276 | Call to Action 283 |
284 |
285 |
286 | 287 | ``` 288 | 289 | ### (5) Footer Section 290 | 291 | - Put your Social Media URL on each `href` attribute of the `` tags. 292 | - 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. 293 | - You can delete or add as many `` tags your want. 294 | 295 | ```html 296 | 311 | ``` 312 | 313 | ### Step 2 - STYLES 314 | 315 | Change the color theme of the website - (choose 2 colors to create a gradient) 316 | 317 | 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. 318 | If you want to get some gradients inspiration I highly recommend you to check this website [UI Gradient](https://uigradients.com/#BrightVault) 319 | 320 | ```scss 321 | // Default values 322 | $main-color: #02aab0; 323 | $secondary-color: #00cdac; 324 | ``` 325 | 326 | --- 327 | 328 | ## Deployment 📦 329 | 330 | Once you finish your setup. You need to put your website online! 331 | 332 | I highly recommend to use [Netlify](https://netlify.com) because it is super easy. 333 | 334 | ## Others versions 👥 335 | 336 | [Gatsby Simplefolio](https://github.com/cobiwave/gatsby-simplefolio) by [Jacobo Martinez](https://github.com/cobiwave)\ 337 | [Ember.js Simplefolio](https://github.com/sernadesigns/simplefolio-ember) by [Michael Serna](https://github.com/sernadesigns) 338 | 339 | ## Technologies used 🛠️ 340 | 341 | - [Parcel](https://parceljs.org/) - Bundler 342 | - [Bootstrap 4](https://getbootstrap.com/docs/4.3/getting-started/introduction/) - Frontend component library 343 | - [Sass](https://sass-lang.com/documentation) - CSS extension language 344 | - [ScrollReveal.js](https://scrollrevealjs.org/) - JavaScript library 345 | - [Tilt.js](https://gijsroge.github.io/tilt.js/) - JavaScript tiny parallax library 346 | 347 | ## Authors 348 | 349 | - **Jacobo Martinez** - [https://github.com/cobiwave](https://github.com/cobiwave) 350 | 351 | ## Status 352 | 353 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3a029bfd-575c-41e5-8249-c864d482c2e5/deploy-status)](https://app.netlify.com/sites/the-simplefolio/deploys) 354 | 355 | ## License 📄 356 | 357 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details 358 | 359 | ## Acknowledgments 🎁 360 | 361 | 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) 362 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | [Your name here] | Developer 22 | 23 | 24 | 25 | 26 | 27 | 31 | 32 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 | 46 |
47 |
48 |

49 | Hi, my name is Your Name 50 |
51 | I'm the Unknown Developer. 52 |

53 |

54 | Know more 57 |

58 |
59 |
60 | 61 | 62 | 63 |
64 |
65 |

About me

66 |
67 |
68 |
69 | Profile Image 77 |
78 |
79 |
80 |
81 |

82 | This is where you can describe about yourself. The more you 83 | describe about yourself, the more chances you have! 84 |

85 |

86 | Extra Information about you! like hobbies and your goals. 87 |

88 | 89 | 95 | View Resume 96 | 97 | 98 |
99 |
100 |
101 |
102 |
103 | 104 | 105 | 106 |
107 |
108 |
109 |

Projects

110 | 111 | 112 |
113 |
114 |
115 |

Project Title 0

116 |
117 |

118 | Describe the project being very specific, you can use the Twitter standard: no more than 280 characters: 119 | complement the information: the skills learned or reinforced in its realization and how you faced it, 120 | prove to be proactive in the search for solutions. 121 |

122 |
123 | 129 | See Live 130 | 131 | 137 | Source Code 138 | 139 |
140 |
141 |
142 |
143 | 144 |
151 | Project Image 156 |
157 | 158 |
159 |
160 |
161 | 162 | 163 | 164 |
165 |
166 |
167 |

Project Title 1

168 |
169 |

170 | Demonstrate in this description the skills of a programmer: such as having commitment, 171 | having perseverance and accepting alternative solutions. Remember that being a portfolio you are not selling the project, 172 | you are selling yourself, it reflects the resources used: Frameworks, libraries, platforms, etc. 173 |

174 |
175 | 181 | See Live 182 | 183 | 189 | Source Code 190 | 191 |
192 |
193 |
194 |
195 | 196 |
203 | Project Image 208 |
209 | 210 |
211 |
212 |
213 | 214 | 215 | 216 |
217 |
218 |
219 |

Project Title 2

220 |
221 |

222 | If the project was collaborative, reflect it in this description, that will demonstrate communication and/or leadership skills. 223 | Additionally, if you made use of the mastery of a second language, it will reflect on you professionalism. 224 |

225 |
226 | 232 | See Live 233 | 234 | 240 | Source Code 241 | 242 |
243 |
244 |
245 |
246 | 247 |
254 | Project Image 259 |
260 | 261 |
262 |
263 |
264 | 265 |
266 |
267 |
268 | 269 | 270 | 271 |
272 |
273 |

Contact

274 |
275 |

[Put your call to action here]

276 | Call to Action 283 |
284 |
285 |
286 | 287 | 288 | 289 | 341 | 342 | 343 | 344 | 345 | 346 | --------------------------------------------------------------------------------