-
-
-
- Copyright © 2020 YOUR NAME
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
Copyright © 2020 YOUR NAME
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
diff --git a/package-lock.json b/package-lock.json
index e1b1c3b4ef..a2522ba360 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -907,6 +907,15 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@choojs/findup": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/@choojs/findup/-/findup-0.2.1.tgz",
+ "integrity": "sha512-YstAqNb0MCN8PjdLCDfRsBcGVRN41f3vgLvaI0IrIcBp4AqILRSS0DeWNGkicC+f/zRIPJLc+9RURVSepwvfBw==",
+ "dev": true,
+ "requires": {
+ "commander": "^2.15.1"
+ }
+ },
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3302,6 +3311,18 @@
"integrity": "sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==",
"dev": true
},
+ "gulp-rtlcss": {
+ "version": "1.4.2",
+ "resolved": "https://registry.npmjs.org/gulp-rtlcss/-/gulp-rtlcss-1.4.2.tgz",
+ "integrity": "sha512-wd807z/xq4XKtSwgrEetbx/aPoI5gV0yWV2rNqEBRwe2cJvNKLDsYR9A968c3gZtaKRMGAue5g3pHn40R+GWSA==",
+ "dev": true,
+ "requires": {
+ "plugin-error": "^1.0.1",
+ "rtlcss": "^2.4.0",
+ "through2": "^2.0.5",
+ "vinyl-sourcemaps-apply": "^0.2.1"
+ }
+ },
"gulp-sass": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.0.2.tgz",
@@ -5115,6 +5136,38 @@
"glob": "^7.1.3"
}
},
+ "rtlcss": {
+ "version": "2.6.2",
+ "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz",
+ "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==",
+ "dev": true,
+ "requires": {
+ "@choojs/findup": "^0.2.1",
+ "chalk": "^2.4.2",
+ "mkdirp": "^0.5.1",
+ "postcss": "^6.0.23",
+ "strip-json-comments": "^2.0.0"
+ },
+ "dependencies": {
+ "postcss": {
+ "version": "6.0.23",
+ "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+ "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+ "dev": true,
+ "requires": {
+ "chalk": "^2.4.1",
+ "source-map": "^0.6.1",
+ "supports-color": "^5.4.0"
+ }
+ },
+ "source-map": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+ "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+ "dev": true
+ }
+ }
+ },
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -5525,6 +5578,12 @@
"get-stdin": "^4.0.1"
}
},
+ "strip-json-comments": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+ "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+ "dev": true
+ },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 22a840832a..6916734afb 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"gulp-babel": "^8.0.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
+ "gulp-rtlcss": "^1.4.2",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.2",
"gulp-wait": "0.0.2"
diff --git a/rtl-index.html b/rtl-index.html
new file mode 100644
index 0000000000..f70e05fb64
--- /dev/null
+++ b/rtl-index.html
@@ -0,0 +1,319 @@
+
+
+
+
+
+
+
رزومه ی من
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
ریان فیتزگرالد
+
مهندس نرم افزار
+
دانلود رزومه
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
درباره ی من
+
+
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
+ بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح
+ گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
+ ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید
+
+
+
+
+
+
+
+
+
سوابق کاری
+
+
+
نام مهارت
+
عنوان شغلی
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
+ بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح
+ گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
+ ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید
+
+
+
+
+
نام مهارت
+
عنوان شغلی
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
+ بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح
+ گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
+ ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید
+
+
+
+
+
نام مهارت
+
عنوان شغلی
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: lorem ipsum) به متنی آزمایشی و
+ بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح
+ گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
+ ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید
+
+
+
+
+
+
+
+
تحصیلات
+
+
دانشگاه شریف
+
بهمن 1400 تا فروردین 1404
+
کارشناسی نرم افزار
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: lorem ipsum) به متنی آزمایشی و
+ بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح
+ گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
+ ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید
+
+
+
+
+
+
دانشگاه شریف
+
بهمن 1400 تا فروردین 1404
+
کارشناسی نرم افزار
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: lorem ipsum) به متنی آزمایشی و
+ بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود. طراح
+ گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
+ ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید
+
+
+
+
+
+
+
+
پروژه ها
+
+
+
+
+
+
+
+
+
نام پروژه اینجا بنویسید
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: lorem ipsum) به متنی آزمایشی
+ و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود.
+ طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن
+ صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده
+ می نماید
+
+
مشاهده پروژه
+
+
+
+
+
+
+
+
+
+
+
+
نام پروژه اینجا بنویسید
+
+ لورم ایپسوم یا طرحنما (به انگلیسی: lorem ipsum) به متنی آزمایشی
+ و بیمعنی در صنعت چاپ، صفحهآرایی و طراحی گرافیک گفته میشود.
+ طراح گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن
+ صفحه و ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده
+ می نماید
+
+
مشاهده پروژه
+
+
+
+
+
+
+
+
+
+
+
مهارت ها
+
+ JavaScript
+ Python
+ Ruby
+ Go
+ Node.js
+ AngularJs
+ React
+ Elixir
+ Java
+ C
+ C#
+ C++
+ Ruby on Rails
+ JavaScript
+ Python
+ Ruby
+ Go
+ Node.js
+ AngularJs
+ React
+ Elixir
+ Java
+ C
+ C#
+ C++
+ Ruby on Rails
+
+
+
+
+
+
+
+
+
+
+
+
کپی رایت 2020 © نام شما
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scss/styles.scss b/scss/styles.scss
index a7929d3727..edac8a63bc 100644
--- a/scss/styles.scss
+++ b/scss/styles.scss
@@ -1,38 +1,36 @@
/*!
- Title: Dev Portfolio Template
- Version: 1.2.2
- Last Change: 03/25/2020
- Author: Ryan Fitzgerald
- Repo: https://github.com/RyanFitzgerald/devportfolio-template
- Issues: https://github.com/RyanFitzgerald/devportfolio-template/issues
-
- Description: This file contains all the styles associated with the page
- that don't come from third party libraries. This file gets compiled using
- Gulp and send to the /css folder which is then loaded on the page.
-*/
+Title: Dev Portfolio Template
+Version: 1.2.2
+Last Change: 03/25/2020
+Author: Ryan Fitzgerald
+Repo: https://github.com/RyanFitzgerald/devportfolio-template
+Issues: https://github.com/RyanFitzgerald/devportfolio-template/issues
+
+Description: This file contains all the styles associated with the page
+that don't come from third party libraries. This file gets compiled using
+Gulp and send to the /css folder which is then loaded on the page.
+ */
/*
- File Contents:
-
- 1. Variables
- 2. Mixins
- 3. Global Styles
- 4. Lead Styles
- 5. About Styles
- 6. Experience Styles
- 7. Education Styles
- 8. Project Styles
- 9. Skills Styles
- 10. Contact Styles
- 11. Optional Section Styles
- 12. Media Queries
-*/
-
+File Contents:
+
+1. Variables
+2. Mixins
+3. Global Styles
+4. Lead Styles
+5. About Styles
+6. Experience Styles
+7. Education Styles
+8. Project Styles
+9. Skills Styles
+10. Contact Styles
+11. Optional Section Styles
+12. Media Queries
+ */
/*
- ------------------------
- ----- 1. Variables -----
- ------------------------
-*/
-
+------------------------
+----- 1. Variables -----
+------------------------
+ */
// Define base and accent colors
$base-color: #3498db;
$base-color-hover: darken($base-color, 10%);
@@ -49,86 +47,87 @@ $heading: #374054;
$text: #74808a;
/*
- ---------------------
- ----- 2. Mixins -----
- ---------------------
-*/
+---------------------
+----- 2. Mixins -----
+---------------------
+ */
@mixin transition($duration: 0.5s, $func: ease, $property: all) {
- transition: #{$duration} #{$func} #{$property};
+ transition: #{$duration} #{$func} #{$property};
}
@mixin placeholder {
- &::-webkit-input-placeholder {
- @content;
- }
+ &::-webkit-input-placeholder {
+ @content;
+ }
- &:-moz-placeholder {
- @content;
- opacity: 1;
- }
+ &:-moz-placeholder {
+ @content;
+ opacity: 1;
+ }
- &::-moz-placeholder {
- @content;
- opacity: 1;
- }
+ &::-moz-placeholder {
+ @content;
+ opacity: 1;
+ }
- &:-ms-input-placeholder {
- @content;
- }
+ &:-ms-input-placeholder {
+ @content;
+ }
}
/*
- ----------------------------
- ----- 3. Global Styles -----
- ----------------------------
-*/
+----------------------------
+----- 3. Global Styles -----
+----------------------------
+ */
body {
- font-family: 'Lato', sans-serif;
- font-size: 16px;
+ font-family: "Lato", sans-serif;
+ font-size: 16px;
- &.active {
- overflow: hidden;
- z-index: -1;
- }
+ &.active {
+ overflow: hidden;
+ z-index: -1;
+ }
}
// No JS styles
.no-js {
- #experience-timeline {
- > div {
- background: $background;
- padding: 10px;
- margin-bottom: 10px;
- border: 1px solid $border;
-
- h3 {
- font-size: 1.5em;
- font-weight: 300;
- color: $heading;
- display: inline-block;
- margin: 0;
- }
-
- h4 {
- font-size: 1.2em;
- font-weight: 300;
- color: #7e8890;
- margin: 0 0 15px 0;
- }
-
- p {
- color: $text;
- font-size: 0.9em;
- margin: 0;
- }
- }
-
- &:before, &:after {
- content: none;
- }
+ #experience-timeline {
+ > div {
+ background: $background;
+ padding: 10px;
+ margin-bottom: 10px;
+ border: 1px solid $border;
+
+ h3 {
+ font-size: 1.5em;
+ font-weight: 300;
+ color: $heading;
+ display: inline-block;
+ margin: 0;
+ }
+
+ h4 {
+ font-size: 1.2em;
+ font-weight: 300;
+ color: #7e8890;
+ margin: 0 0 15px 0;
+ }
+
+ p {
+ color: $text;
+ font-size: 0.9em;
+ margin: 0;
+ }
+ }
+
+ &:before,
+ &:after {
+ content: none;
}
+ }
}
@keyframes dropHeader {
@@ -141,861 +140,886 @@ body {
}
header {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ text-align: center;
+ z-index: 10;
+ animation-name: dropHeader;
+ animation-iteration-count: 1;
+ animation-timing-function: ease;
+ animation-duration: 0.75s;
+
+ ul {
+ display: inline-block;
+ background: $background;
text-align: center;
- z-index: 10;
- animation-name: dropHeader;
- animation-iteration-count: 1;
- animation-timing-function: ease;
- animation-duration: 0.75s;
+ padding: 10px;
+ margin: 0;
+ border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
- ul {
- display: inline-block;
- background: $background;
- text-align: center;
- padding: 10px;
- margin: 0;
- border-bottom-right-radius: 4px;
- border-bottom-left-radius: 4px;
- }
+ li {
+ display: inline-block;
+ }
- li {
- display: inline-block;
- }
+ a {
+ display: block;
+ color: $base-color;
+ padding: 10px;
- a {
- display: block;
- color: $base-color;
- padding: 10px;
-
- &:hover {
- color: $base-color-hover;
- text-decoration: none;
- background: #eee;
- border-radius: 4px;
- }
-
- &:focus {
- color: $base-color;
- text-decoration: none;
- }
+ &:hover {
+ color: $base-color-hover;
+ text-decoration: none;
+ background: #eee;
+ border-radius: 4px;
}
- &.active {
- display: block;
+ &:focus {
+ color: $base-color;
+ text-decoration: none;
}
+ }
- &.sticky {
- position: fixed;
- z-index: 999;
- }
+ &.active {
+ display: block;
+ }
+
+ &.sticky {
+ position: fixed;
+ z-index: 999;
+ }
+}
+
+#lang-bar {
+ position: absolute;
+ top: 11px;
+ left: 8px;
+ z-index: 11;
+ color: white;
+}
+
+#lang-bar a {
+ color: white;
+ display: inline-block;
+ border: 5px solid white;
+ padding: 5px;
+ margin: 0 2px;
+ border-radius: 5px;
+}
+#lang-bar a:hover {
+ text-decoration: none;
}
#menu {
- &.active {
- display: block;
- }
+ &.active {
+ display: block;
+ }
}
#mobile-menu-open {
- display: none;
- cursor: pointer;
- position: fixed;
- right: 15px;
- top: 10px;
- color: $base-color;
- font-size: 1.5em;
- z-index: 20;
- padding: 0 7px;
- border-radius: 4px;
- background: $background;
+ display: none;
+ cursor: pointer;
+ position: fixed;
+ right: 15px;
+ top: 10px;
+ color: $base-color;
+ font-size: 1.5em;
+ z-index: 20;
+ padding: 0 7px;
+ border-radius: 4px;
+ background: $background;
}
#mobile-menu-close {
- display: none;
- text-align: right;
- width: 100%;
- background: $background;
- font-size: 1.5em;
- padding-right: 15px;
- padding-top: 10px;
- cursor: pointer;
- color: $base-color;
-
- span {
- font-size: 0.5em;
- text-transform: uppercase;
- }
+ display: none;
+ text-align: right;
+ width: 100%;
+ background: $background;
+ font-size: 1.5em;
+ padding-right: 15px;
+ padding-top: 10px;
+ cursor: pointer;
+ color: $base-color;
+
+ span {
+ font-size: 0.5em;
+ text-transform: uppercase;
+ }
- i {
- vertical-align: middle;
- }
+ i {
+ vertical-align: middle;
+ }
}
footer {
- padding: 50px 0;
+ padding: 50px 0;
}
.copyright {
- padding-top: 20px;
+ padding-top: 20px;
- p {
- margin: 0;
- color: $text;
- }
+ p {
+ margin: 0;
+ color: $text;
+ }
}
.top {
- text-align: center;
+ text-align: center;
- span {
- cursor: pointer;
- display: block;
- margin: 15px auto 0 auto;
- width: 35px;
- height: 35px;
- border-radius: 50%;
- border: 3px solid lighten($text, 25%);
- text-align:center;
- }
+ span {
+ cursor: pointer;
+ display: block;
+ margin: 15px auto 0 auto;
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ border: 3px solid lighten($text, 25%);
+ text-align: center;
+ }
- i {
- color: $text;
- }
+ i {
+ color: $text;
+ }
}
.social {
- text-align: right;
+ text-align: right;
- ul {
- margin: 5px 0 0 0;
- padding: 0;
- }
+ ul {
+ margin: 5px 0 0 0;
+ padding: 0;
+ }
- li {
- display: inline-block;
- font-size: 1.25em;
- list-style: none;
- }
+ li {
+ display: inline-block;
+ font-size: 1.25em;
+ list-style: none;
+ }
- a {
- display: block;
- color: $text;
- padding: 10px;
+ a {
+ display: block;
+ color: $text;
+ padding: 10px;
- &:hover {
- color: $base-color;
- }
+ &:hover {
+ color: $base-color;
}
+ }
}
.btn-rounded-white {
- display: inline-block;
- color: #fff;
- padding: 15px 25px;
- border: 3px solid #fff;
- border-radius: 30px;
- @include transition();
-
- &:hover {
- color: $base-color;
- background: #fff;
- text-decoration: none;
- }
+ display: inline-block;
+ color: #fff;
+ padding: 15px 25px;
+ border: 3px solid #fff;
+ border-radius: 30px;
+ @include transition();
+
+ &:hover {
+ color: $base-color;
+ background: #fff;
+ text-decoration: none;
+ }
}
.shadow {
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.shadow-large {
- box-shadow: 0 3px 6px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.15);
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.15);
}
.heading {
- position: relative;
- display: inline-block;
- font-size: 2em;
- font-weight: 300;
- margin: 0 0 30px 0;
+ position: relative;
+ display: inline-block;
+ font-size: 2em;
+ font-weight: 300;
+ margin: 0 0 30px 0;
- &:after {
- position: absolute;
- content: '';
- top: 100%;
- height: 1px;
- width: 50px;
- left: 0;
- right: 0;
- margin: 0 auto;
- background: $base-color;
- }
+ &:after {
+ position: absolute;
+ content: "";
+ top: 100%;
+ height: 1px;
+ width: 50px;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ background: $base-color;
+ }
}
.background-alt {
- background: $background-alt;
+ background: $background-alt;
}
/*
- --------------------------
- ----- 4. Lead Styles -----
- --------------------------
-*/
+--------------------------
+----- 4. Lead Styles -----
+--------------------------
+ */
#lead {
- position: relative;
- height: 100vh;
- min-height: 500px;
- max-height: 1080px;
- background: url(../images/lead-bg.jpg);
- background-size: cover;
- padding: 15px;
- overflow: hidden;
+ position: relative;
+ height: 100vh;
+ min-height: 500px;
+ max-height: 1080px;
+ background: url(../images/lead-bg.jpg);
+ background-size: cover;
+ padding: 15px;
+ overflow: hidden;
}
#lead-content {
- position: absolute;
- z-index: 10;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
-
- h1, h2 {
- margin: 0;
- }
+ position: absolute;
+ z-index: 10;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+
+ h1,
+ h2 {
+ margin: 0;
+ }
- h1 {
- color: #fff;
- font-weight: 900;
- font-size: 5em;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- line-height: 0.9em;
- }
+ h1 {
+ color: #fff;
+ font-weight: 900;
+ font-size: 5em;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ line-height: 0.9em;
+ }
- h2 {
- color: lighten($base-color, 25%);
- font-weight: 500;
- font-size: 2.25em;
- margin-bottom: 15px;
- }
+ h2 {
+ color: lighten($base-color, 25%);
+ font-weight: 500;
+ font-size: 2.25em;
+ margin-bottom: 15px;
+ }
}
#lead-overlay {
- position: absolute;
- height: 100%;
- width: 100%;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background: rgba($base-color-hover, 0.8);
- z-index: 1;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba($base-color-hover, 0.8);
+ z-index: 1;
}
#lead-down {
- position: absolute;
- left: 0;
- right: 0;
- width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ width: 100%;
+ text-align: center;
+ z-index: 10;
+ bottom: 15px;
+ color: #fff;
+
+ span {
+ cursor: pointer;
+ display: block;
+ margin: 0 auto;
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ border: 3px solid lighten($base-color, 25%);
text-align: center;
- z-index: 10;
- bottom: 15px;
- color: #fff;
-
- span {
- cursor: pointer;
- display: block;
- margin: 0 auto;
- width: 35px;
- height: 35px;
- border-radius: 50%;
- border: 3px solid lighten($base-color, 25%);
- text-align:center;
- }
+ }
- i {
- animation: pulsate 1.5s ease;
- animation-iteration-count: infinite;
- padding-top: 5px;;
- }
+ i {
+ animation: pulsate 1.5s ease;
+ animation-iteration-count: infinite;
+ padding-top: 5px;
+ }
}
@keyframes pulsate {
- 0% {
- transform: scale(1, 1);
- }
+ 0% {
+ transform: scale(1, 1);
+ }
- 50% {
- transform: scale(1.2, 1.2);
- }
+ 50% {
+ transform: scale(1.2, 1.2);
+ }
- 100% {
- transform: scale(1, 1);
- }
+ 100% {
+ transform: scale(1, 1);
+ }
}
/*
- ---------------------------
- ----- 5. About Styles -----
- ---------------------------
-*/
+---------------------------
+----- 5. About Styles -----
+---------------------------
+ */
#about {
- padding: 75px 15px;
- border-bottom: 1px solid $border;
+ padding: 75px 15px;
+ border-bottom: 1px solid $border;
- h2 {
- color: $heading;
- }
+ h2 {
+ color: $heading;
+ }
- p {
- color: $text;
- margin: 0;
- }
+ p {
+ color: $text;
+ margin: 0;
+ }
}
/*
- --------------------------------
- ----- 6. Experience Styles -----
- --------------------------------
-*/
+--------------------------------
+----- 6. Experience Styles -----
+--------------------------------
+ */
#experience {
- padding: 50px 15px;
- text-align: center;
- border-bottom: 1px solid $border;
+ padding: 50px 15px;
+ text-align: center;
+ border-bottom: 1px solid $border;
- h2 {
- color: $heading;
- }
+ h2 {
+ color: $heading;
+ }
}
#experience-timeline {
- margin: 30px auto 0 auto;
- position: relative;
- max-width: 1000px;
-
- &:before {
- position: absolute;
- content: '';
- top: 0;
- bottom: 0;
- left: 303px;
- right: auto;
- height: 100%;
- width: 3px;
- background: $base-color;
- z-index: 0;
- }
+ margin: 30px auto 0 auto;
+ position: relative;
+ max-width: 1000px;
- &:after {
- position: absolute;
- content: '';
- width: 3px;
- height: 40px;
- background: $base-color;
- background: linear-gradient(to bottom, $base-color, rgba($base-color, 0));
- top: 100%;
- left: 303px;
- }
+ &:before {
+ position: absolute;
+ content: "";
+ top: 0;
+ bottom: 0;
+ left: 303px;
+ right: auto;
+ height: 100%;
+ width: 3px;
+ background: $base-color;
+ z-index: 0;
+ }
+
+ &:after {
+ position: absolute;
+ content: "";
+ width: 3px;
+ height: 40px;
+ background: $base-color;
+ background: linear-gradient(to bottom, $base-color, rgba($base-color, 0));
+ top: 100%;
+ left: 303px;
+ }
}
.vtimeline-content {
- margin-left: 350px;
- background: #fff;
- border: 1px solid #e6e6e6;
- padding: 15px;
- border-radius: 3px;
- text-align: left;
-
- h3 {
- font-size: 1.5em;
- font-weight: 300;
- color: $heading;
- display: inline-block;
- margin: 0;
- }
+ margin-left: 350px;
+ background: #fff;
+ border: 1px solid #e6e6e6;
+ padding: 15px;
+ border-radius: 3px;
+ text-align: left;
+
+ h3 {
+ font-size: 1.5em;
+ font-weight: 300;
+ color: $heading;
+ display: inline-block;
+ margin: 0;
+ }
- h4 {
- font-size: 1.2em;
- font-weight: 300;
- color: #7e8890;
- margin: 0 0 15px 0;
- }
+ h4 {
+ font-size: 1.2em;
+ font-weight: 300;
+ color: #7e8890;
+ margin: 0 0 15px 0;
+ }
- p {
- color: $text;
- font-size: 0.9em;
- margin: 0;
- }
+ p {
+ color: $text;
+ font-size: 0.9em;
+ margin: 0;
+ }
}
.vtimeline-point {
- position: relative;
- display: block;
- vertical-align: top;
- margin-bottom: 30px;
+ position: relative;
+ display: block;
+ vertical-align: top;
+ margin-bottom: 30px;
}
.vtimeline-icon {
- position: relative;
- color: #fff;
- width: 50px;
- height: 50px;
- background: $base-color;
- border-radius: 50%;
- float: left;
- z-index: 99;
- margin-left: 280px;
-
- i {
- display: block;
- font-size: 2em;
- margin-top: 10px;
- }
+ position: relative;
+ color: #fff;
+ width: 50px;
+ height: 50px;
+ background: $base-color;
+ border-radius: 50%;
+ float: left;
+ z-index: 99;
+ margin-left: 280px;
+
+ i {
+ display: block;
+ font-size: 2em;
+ margin-top: 10px;
+ }
}
.vtimeline-date {
- width: 260px;
- text-align: right;
- position: absolute;
- left: 0;
- top: 10px;
- font-weight: 300;
- color: #374054;
+ width: 260px;
+ text-align: right;
+ position: absolute;
+ left: 0;
+ top: 10px;
+ font-weight: 300;
+ color: #374054;
}
/*
- -------------------------------
- ----- 7. Education Styles -----
- -------------------------------
-*/
+-------------------------------
+----- 7. Education Styles -----
+-------------------------------
+ */
#education {
- padding: 50px 15px 20px 15px;
- border-bottom: 1px solid $border;
- text-align: center;
+ padding: 50px 15px 20px 15px;
+ border-bottom: 1px solid $border;
+ text-align: center;
- h2 {
- color: $heading;
- margin-bottom: 50px;
- }
+ h2 {
+ color: $heading;
+ margin-bottom: 50px;
+ }
}
.education-block {
- max-width: 700px;
- margin: 0 auto 30px auto;
- padding: 15px;
- border: 1px solid $border;
- text-align: left;
-
- h3 {
- font-weight: 500;
- float: left;
- margin: 0;
- color: $heading;
- }
+ max-width: 700px;
+ margin: 0 auto 30px auto;
+ padding: 15px;
+ border: 1px solid $border;
+ text-align: left;
+
+ h3 {
+ font-weight: 500;
+ float: left;
+ margin: 0;
+ color: $heading;
+ }
- span {
- color: $text;
- float: right;
- }
+ span {
+ color: $text;
+ float: right;
+ }
- h4 {
- color: $text;
- clear: both;
- font-weight: 500;
- margin: 0 0 15px 0;
- }
+ h4 {
+ color: $text;
+ clear: both;
+ font-weight: 500;
+ margin: 0 0 15px 0;
+ }
- p, ul {
- margin: 0;
- color: $text;
- font-size: 0.9em;
- }
+ p,
+ ul {
+ margin: 0;
+ color: $text;
+ font-size: 0.9em;
+ }
- ul {
- padding: 0 0 0 15px;
- }
+ ul {
+ padding: 0 0 0 15px;
+ }
}
/*
- -------------------------------
- ----- 8. Project Styles -----
- -------------------------------
-*/
+-------------------------------
+----- 8. Project Styles -----
+-------------------------------
+ */
#projects {
- padding: 50px 15px;
- border-bottom: 1px solid $border;
- text-align: center;
+ padding: 50px 15px;
+ border-bottom: 1px solid $border;
+ text-align: center;
- h2 {
- color: $heading;
- margin-bottom: 50px;
- }
+ h2 {
+ color: $heading;
+ margin-bottom: 50px;
+ }
}
.project {
- position: relative;
- max-width: 900px;
- margin: 0 auto 30px auto;
- overflow: hidden;
- background: #fff;
- border-radius: 4px;
+ position: relative;
+ max-width: 900px;
+ margin: 0 auto 30px auto;
+ overflow: hidden;
+ background: #fff;
+ border-radius: 4px;
}
.project-image {
- float: left;
+ float: left;
+ width: 300px;
}
-.project-info {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- margin-left: 300px;
- padding: 15px;
+.project-image img {
+ max-width: 100%;
+}
- h3 {
- font-size: 1.5em;
- font-weight: 300;
- color: $heading;
- margin: 0 0 15px 0;
- }
+.project-info {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ margin-left: 300px;
+ padding: 15px;
+ width: 65%;
+
+ h3 {
+ font-size: 1.5em;
+ font-weight: 300;
+ color: $heading;
+ margin: 0 0 15px 0;
+ }
- p {
- color: $text;
- margin: 0 0 15px 0;
- font-size: 0.9em;
- }
+ p {
+ color: $text;
+ margin: 0 0 15px 0;
+ font-size: 0.9em;
+ }
}
.no-image {
- .project-info {
- position: relative;
- margin: 0;
- padding: 30px 15px;
- transform: none;
- }
+ .project-info {
+ position: relative;
+ margin: 0;
+ padding: 30px 15px;
+ transform: none;
+ }
}
#more-projects {
- display: none;
+ display: none;
}
/*
- -------------------------------
- ----- 9. Skills Styles -----
- -------------------------------
-*/
+-------------------------------
+----- 9. Skills Styles -----
+-------------------------------
+ */
#skills {
- padding: 50px 15px;
- text-align: center;
+ padding: 50px 15px;
+ text-align: center;
- h2 {
- color: $heading;
- margin-bottom: 50px;
- }
+ h2 {
+ color: $heading;
+ margin-bottom: 50px;
+ }
- ul {
- display: block;
- margin: 0 auto;
- padding: 0;
- max-width: 800px;
- }
+ ul {
+ display: block;
+ margin: 0 auto;
+ padding: 0;
+ max-width: 800px;
+ }
- li {
- display: inline-block;
- margin: 7px;
- padding: 5px 10px;
- color: $heading;
- background: darken($background-alt, 5%);
- list-style: none;
- cursor: default;
- font-size: 1.2em;
- }
+ li {
+ display: inline-block;
+ margin: 7px;
+ padding: 5px 10px;
+ color: $heading;
+ background: darken($background-alt, 5%);
+ list-style: none;
+ cursor: default;
+ font-size: 1.2em;
+ }
}
/*
- -------------------------------
- ----- 10. Contact Styles -----
- -------------------------------
-*/
+-------------------------------
+----- 10. Contact Styles -----
+-------------------------------
+ */
#contact {
- padding: 50px 15px;
- background: $base-color;
- text-align: center;
+ padding: 50px 15px;
+ background: $base-color;
+ text-align: center;
- h2 {
- margin: 0 0 15px 0;
- color: #fff;
- font-weight: 500;
- }
+ h2 {
+ margin: 0 0 15px 0;
+ color: #fff;
+ font-weight: 500;
+ }
}
#contact-form {
- max-width: 500px;
- margin: 0 auto;
+ max-width: 500px;
+ margin: 0 auto;
- input, textarea {
- display: block;
- width: 100%;
- padding: 10px;
- border-radius: 4px;
- border: none;
- margin-bottom: 10px;
- background: darken($base-color, 15%);
- color: #fff;
- @include transition();
- @include placeholder {
- color: #fff;
- }
-
- &:focus {
- outline: none;
- background: darken($base-color, 25%);
- }
+ input,
+ textarea {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ border-radius: 4px;
+ border: none;
+ margin-bottom: 10px;
+ background: darken($base-color, 15%);
+ color: #fff;
+ @include transition();
+ @include placeholder {
+ color: #fff;
}
- textarea {
- height: 150px;
- resize: none;
+ &:focus {
+ outline: none;
+ background: darken($base-color, 25%);
}
+ }
+
+ textarea {
+ height: 150px;
+ resize: none;
+ }
+
+ button {
+ display: block;
+ width: 100%;
+ background: #fff;
+ border-radius: 4px;
+ padding: 5px 10px;
+ border: none;
+ color: $base-color;
+ font-weight: 700;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+ @include transition();
- button {
- display: block;
- width: 100%;
- background: #fff;
- border-radius: 4px;
- padding: 5px 10px;
- border: none;
- color: $base-color;
- font-weight: 700;
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
- @include transition();
-
- &:hover {
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
- }
+ &:hover {
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
+ }
}
/*
- ---------------------------------------
- ----- 11. Optional Section Styles -----
- ---------------------------------------
-*/
+---------------------------------------
+----- 11. Optional Section Styles -----
+---------------------------------------
+ */
.optional-section {
- padding: 50px 15px;
- text-align: center;
- border-top: 1px solid $border;
+ padding: 50px 15px;
+ text-align: center;
+ border-top: 1px solid $border;
- h2 {
- color: $heading;
- }
+ h2 {
+ color: $heading;
+ }
}
.optional-section-block {
- max-width: 700px;
- margin: 0 auto 30px auto;
- padding: 15px;
- border: 1px solid $border;
- background: #fff;
- text-align: left;
-
- h3 {
- font-weight: 500;
- margin: 0 0 15px 0;
- color: $heading;
- }
+ max-width: 700px;
+ margin: 0 auto 30px auto;
+ padding: 15px;
+ border: 1px solid $border;
+ background: #fff;
+ text-align: left;
+
+ h3 {
+ font-weight: 500;
+ margin: 0 0 15px 0;
+ color: $heading;
+ }
- h4 {
- color: $text;
- clear: both;
- font-weight: 500;
- margin: 0 0 15px 0;
- }
+ h4 {
+ color: $text;
+ clear: both;
+ font-weight: 500;
+ margin: 0 0 15px 0;
+ }
- p, ul {
- margin: 0 0 15px 0;
- color: $text;
- font-size: 0.9em;
- }
+ p,
+ ul {
+ margin: 0 0 15px 0;
+ color: $text;
+ font-size: 0.9em;
+ }
- ul {
- padding: 0 0 0 15px;
- }
+ ul {
+ padding: 0 0 0 15px;
+ }
}
/*
- -----------------------------
- ----- 12. Media Queries -----
- -----------------------------
-*/
+-----------------------------
+----- 12. Media Queries -----
+-----------------------------
+ */
// Collapse timeline
@media only screen and (max-width: 750px) {
-
- #experience-timeline {
- &:before, &:after {
- left: 23px;
- }
-
- }
-
- .vtimeline-date {
- width: auto;
- text-align: left;
- position: relative;
- margin-bottom: 15px;
- display: block;
- margin-left: 70px;
+ #experience-timeline {
+ &:before,
+ &:after {
+ left: 23px;
}
+ }
- .vtimeline-icon {
- margin-left: 0;
- }
+ .vtimeline-date {
+ width: auto;
+ text-align: left;
+ position: relative;
+ margin-bottom: 15px;
+ display: block;
+ margin-left: 70px;
+ }
- .vtimeline-content {
- margin-left: 70px;
- }
+ .vtimeline-icon {
+ margin-left: 0;
+ }
+ .vtimeline-content {
+ margin-left: 70px;
+ }
}
// Medium Devices
-@media only screen and (max-width : 992px) {
-
- #lead {
- height: auto;
- min-height: auto;
- max-height: auto;
- padding: 100px 15px;
- }
+@media only screen and (max-width: 992px) {
+ #lead {
+ height: auto;
+ min-height: auto;
+ max-height: auto;
+ padding: 100px 15px;
+ }
- #lead-content {
- position: relative;
- transform: none;
- left: auto;
- top: auto;
+ #lead-content {
+ position: relative;
+ transform: none;
+ left: auto;
+ top: auto;
- h1 {
- font-size: 3em;
- }
+ h1 {
+ font-size: 3em;
+ }
- h2 {
- font-size: 1.75em;
- }
+ h2 {
+ font-size: 1.75em;
}
+ }
- #about {
- text-align: center;
+ #about {
+ text-align: center;
- p {
- text-align: left;
- }
+ p {
+ text-align: left;
}
-
+ }
}
// Small Devices
-@media only screen and (max-width : 768px) {
-
- header {
- position: fixed;
- display: none;
- z-index: 999;
- animation: none;
- bottom: 0;
- height: 100%;
- }
-
- #mobile-menu-open, #mobile-menu-close {
- display: block;
- }
-
- #menu {
- height: 100%;
- overflow-y: auto;
- box-shadow: none;
- border-radius: 0;
- width: 100%;
-
- li {
- display: block;
- margin-bottom: 10px;
- }
- }
+@media only screen and (max-width: 768px) {
+ header {
+ position: fixed;
+ display: none;
+ z-index: 999;
+ animation: none;
+ bottom: 0;
+ height: 100%;
+ }
- #lead-content {
- h1 {
- font-size: 2em;
- }
+ #mobile-menu-open,
+ #mobile-menu-close {
+ display: block;
+ }
- h2 {
- font-size: 1.3em;
- }
+ #menu {
+ height: 100%;
+ overflow-y: auto;
+ box-shadow: none;
+ border-radius: 0;
+ width: 100%;
- a {
- padding: 10px 20px;
- }
+ li {
+ display: block;
+ margin-bottom: 10px;
}
+ }
- #lead-down {
- display: none;
+ #lead-content {
+ h1 {
+ font-size: 2em;
}
- .education-block {
- h3, span {
- float: none;
- }
+ h2 {
+ font-size: 1.3em;
}
- .project-image {
- display: none;
+ a {
+ padding: 10px 20px;
}
+ }
- .project-info {
- position: relative;
- margin: 0;
- padding: 30px 15px;
- top: auto;
- transform: none;
- }
+ #lead-down {
+ display: none;
+ }
- footer {
- text-align: center;
+ .education-block {
+ h3,
+ span {
+ float: none;
}
+ }
- .social {
- text-align: center;
- }
+ .project-image {
+ display: none;
+ }
-}
+ .project-info {
+ position: relative;
+ margin: 0;
+ padding: 30px 15px;
+ top: auto;
+ transform: none;
+ width: 100%;
+ }
-// Extra Small Devices
-@media only screen and (max-width : 480px) {
+ footer {
+ text-align: center;
+ }
- #lead-content {
- h1 {
- font-size: 1.5em;
- }
+ .social {
+ text-align: center;
+ }
+}
- h2 {
- font-size: 1em;
- }
+// Extra Small Devices
+@media only screen and (max-width: 480px) {
+ #lead-content {
+ h1 {
+ font-size: 1.5em;
+ }
- a {
- font-size: 0.9em;
- padding: 5px 10px;
- }
+ h2 {
+ font-size: 1em;
}
+ a {
+ font-size: 0.9em;
+ padding: 5px 10px;
+ }
+ }
}
-