Jack Syv

v1.0

Created : Jun 2021

Author : syvDesign

Personal Portfolio / CV / Online Resume

An Online profile made with the modern UI/UX design trends and smooth animations. Multiple themes with upto 8 color schemes and more to be added in later updates. Specially coded stylesheets to easily add custom color schemes. Fully responsive to all devices and scripts specificly targeted towards best performance in mobile devices. Detailed documentation and commented instructions in each template file.

Jack Syv
Documentation

Features

Themes designed with modern desing trends like Pastel colors, Nuemorphism and more in future updates
Pastel theme with Dark/Light mode + 7 color schemes
Nuemorphism theme with 8 color schemes and fluid button animations
Create custom color schemes and fonts with CSS variables
Modular JS code for easyily adding, modifying or removing funtions
Cross Browser Compatible
Fully Responsive
More themes coming in future updates

Fonts and Icons

Google fonts : Montserrat, Montserrat Alternates, Roboto
Font Awesome Free version

Images Used

Unsplash

Note: All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.

Documentation

Files Included

Content	Files
HTML	index.html
JS	main.js
Main CSS	main.css
Themes	pastel.theme.css
	neumorph.theme.css
Documentation	README.md
	README.pdf

External Libraries and Tools

Library	Version & Type	Website	Docs
Bootstrap	v4.0.0 CSS	getbootstrap.com	link
Google Fonts	CSS	fonts.google.com	link
Font Awesome	v5.15.3 CSS	fontawesome.com	link
Chocolat	v1.0.4 CSS JS	chocolat.insipi.de	link
Owl Carousel	v2.3.4 CSS JS	owlcarousel2.github.io/OwlCarousel2	link
Mobile Detect	v1.4.5 JS	hgoebl.github.io/mobile-detect.js	link
JQuery Slim	v3.2.1 JS	jquery.com	link
GSAP	v3.6.1 JS	greensock.com	link
Shuffle JS	v5.2.3 JS	vestride.github.io/Shuffle	link

Tool	Purpose	Website
Neumorphism.io	Neumorphism / Soft UI CSS shadow generator	neumorphism.io

index.html

All classes & id values defined in the local stylesheets starts with an underscore '_' character
Others classes that doesn't follow the above mentioned naming scheme are from external CSS/JS libraries

eg. : _close-btn class is defined in local stylesheet, as fas class is from Font Awesome library
```
<a class="_close-btn">
  <i class="fas fa-times"></i>
</a>
```

HTML File Structure

Head
- Required meta tags
- Page title
- Favicon
- Local stylesheets
- External library stylesheets
- Mobile detect script
Body
- Page loading animation
- Theme switcher
- Navigation menu for mobile devices
- Main container
  - Background animation elements (home)
  - Header
  - Side buttons
  - Home section
  - Content section
    - Background animation elements (content)
    - About
    - Services
    - Experience
    - Portfolio
    - Plans
    - Testimonials
    - Blogs
    - Contact
  - Footer
- Background animation elements (body)
- Scripts

Themes

body element has 3 data attributes to select themes
```
<body id="_top" data-theme="dark" data-theme-style="pastel" data-accent="blue"></body>
```
data-theme-style
- switch theme styles
- values :
```
'pastel', 'neumorph'
```
data-accent
- switch color schemes
- values :
```
'black', 'white', 'blue', 'green', 'yellow', 'red', 'purple', 'pink'
```
  Note : All colors won't be available in certain theme styles
data-theme
- toggle dark/light themes
- values :
```
'dark', 'light'
```
  Note : data-theme is only available in pastel theme style

Background Elements

Background elements are used as animated shapes in 3 locations
main container (home, footer) (logs & squares)
_content section (squares)
body (huge squares)

Portfolio Filter

using [shuffle.js] porfolio items are filtered according to the categories
each _filters in _categories have data-filter-name, specifying the category
```
<a class="_filters" data-filter-name="product">Product</a>
```

these categories can be assigned to _grid-item as data-groups

<figure class="_grid-item col-lg-4 col-sm-6" data-groups='["product","web"]' data-date-created="2016-08-12" data-title="sit amet consectetur"></figure>

data-groups can have multiple categories
data-date-created & data-title can be used for sorting functions.

main.css

CSS File Structure

Variables
Basic styles
Common elements
Loader
Theme switcher
Header
Main
- Home
- Background elements
- Content
  - About
  - Services
  - Experience
  - Portfolio
  - Plans
  - Testimononials
  - Blog
  - Contact
Footer
Responsive media queries
- Notebook
- Tablet
- Mobile

Custom color schemes

colors defined as CSS variables in main.css and assigned to element variables in specific theme stylesheets

eg :

/* main.css  */
:root {

  ...

  --dark-green: #62985a;
  --dark-green-accent: #34722e;
  --light-green: #83c179;
  --light-green-accent: #6ba963;

  ...

}

...

/* pastel.theme.css */
[data-theme-style="pastel"][data-theme="dark"][data-accent="green"] {
  --bg-main: var(--light-green);
  --bg-content: var(--dark-black);
  --bg-element: var(--light-green);
  --text-main: var(--dark-green);
  --text-element: var(--dark-content-bg);
  --small-text: var(--light-text);
  --accent: var(--dark-green-accent);
  --accent-element: var(--dark-green);
  --text-area: var(--dark-content-bg);
}

pastel.theme.css

Pastel Theme File Structure

Color variables
- Dark theme colors
- Light theme colors
Theme common styles

Pastel Color variables

variables are defined so it can be updated once and is applied to all repeating elements

[data-theme-style="pastel"][data-theme="dark"] {
  --bg-body: var(--accent-main); /* body background */
  --bg-main: var(--dark-black); /* main background */
  --bg-content: var(--dark-content-bg); /* content background */
  --bg-element: var(--dark-black); /* element background (cards) */
  --heading-main: var(--dark-text); /* headings in main */
  --heading: var(--dark-heading); /* other headings */
  --text-main-home: var(--dark-text); /* text colors */
  --text-main: var(--dark-text);
  --text: var(--dark-text);
  --text-element: var(--dark-text);
  --small-text: var(--small-text-color);
  --button-primary: var(--light-white); /* button colors */
  --button-primary-text: var(--dark-black);
  --button-secondary: var(--dark-black);
  --button-secondary-text: var(--dark-text);
  --button-primary-home: var(--light-white);
  --button-primary-text-home: var(--light-text);
  --button-secondary-home: var(--dark-content-bg);
  --button-secondary-text-home: var(--dark-text);
  --text-area: var(--dark-black); /* textarea & input  backgrounds */
  --accent-main: #0a0b0b; /* background elements */
  --accent: #0a0b0b;
  --accent-element: var(--small-text-color);
}

some variables may be shared between elements to maintain contrast and a consistant color scheme
dark / light mode is only available in pastel theme style
default data-accent will be 'black' for dark theme, 'white' will revert to default data-accent
where as, it will be default 'white' for light theme, 'black' will revert to default data-accent

neumorph.theme.css

Neumorphism Theme File Structure

Common color varibles
Black color theme
- Black color theme varibles
- Black color theme styles
White color theme
- White color theme varibles
- White color theme styles
Blue color theme varibles
Green color theme varibles
Yellow color theme varibles
Red color theme varibles
Purple color theme varibles
Pink color theme varibles
Common styles for all theme colors (except black & white)
Common styles

Neumorphism Color variables

most of the variables are same as in pastel.theme.css

some new variables are added for the neumorphism effects

/* neumorphism shadows and gradients */
--shadow1-int-low: #151617; /* 0.2px */
--shadow2-int-low: #1f2223;
--shadow1-int-med: #121414; /* 0.3px */
--shadow2-int-med: #222426;
--shadow1-int-high: #0a0b0c; /* 0.6px */
--shadow2-int-high: #2a2d2e;
--gradient1: #1c1e1f;
--gradient2: #17191a;

these effects are added using 2 box-shadow (top-left & bottom-right of the element) and linear-gradient

box-shadow: 6px 6px 15px var(--shadow1-int-high), -6px -6px 15px var(--shadow2-int-high) !important;

background: linear-gradient(145deg, var(--gradient1), var(--gradient2));

all colors are generated using Neumorphism/Soft UI CSS shadow generator
in shadow variables the int-med stands for the intensity value used to used to generate this shadow, here it denotes medium intensity. The accurate intensity value is given comments beside it ( here, 0.3px )
```
--shadow1-int-med: #121414; /* 0.3px */
--shadow2-int-med: #222426;
```

main.js

JS File Structure

Load event listener
Class App
- Class contructor - constructor()
- Initialization method - init()
- Page loading animation - loaderTransition()
- Background animation - bgAnimation()
- Portfolio category filter - portfolioFilter()
- Portfolio image lightbox - portfolioLightBox()
- Carousel for testimonials - testimonialCarousel()
- Carousel for blogs - blogCarousel()
- Active sections in nav - navActiveBtn()
- Mobile navigation animations - navMenu()
- Color scheme toggle - themeToggle()
- Theme switcher - themeSwitcher()

Working

script works using object oriented programming
all functions are defined as methods of a class App
when all resources and assets of the webpage is loaded, the load event listener is triggered

which creates an object app of the class App, which inturn triggers the constructor() method of the class

window.addEventListener("load", () => {

  const app = new App() // creates an object of class App that invokes the constructor

})

class App {

  constructor() { // called on object creation

      this.md = new MobileDetect(window.navigator.userAgent); // to detect mobile browsers

      this.init() // initailizes all class methods

  }

...

}

constructor() calls the init() method which initializes all the other methods

init() { // initailizes all class methods

      // comment out to disable functionalities

      this.bgAnimation() // bacground animations in body, _home, _footer & _content sections using gsap

      this.portfolioFilter() // portfolio category filter using shuffle js

      this.portfolioLightBox() // portfolio lightbox using chocolat

      this.testimonialCarousel() // carousel for testimonials using owl carousel

      this.blogCarousel() // carousel for blogs using owl carousel

      this.navActiveBtn() // active indicator for elements in navigation

      this.navMenu() // mobile navigation menu animations using gsap timelines

      this.themeToggle() // dark/light theme toggle (only available in PASTEL style)

      setTimeout(() => this.themeSwitcher(), 100) // theme switcher menu fuctionalities & animations using gsap timeline

      setTimeout(() => this.loaderTransition(), 100) //loader animation using gsap timeline

  }

disabling function as easy as commenting them out in init()

init() {

    //this.method1() //method disabled

    this.method2()

    ...

  }

to add new functions invoke them in init() as given above and define the function as a method inside the class App

class App {

...

  init() {

    ...

    this.newMethod() // initialize new method

  }

  ...

  newMethod() { //define new method
    // code
  }

}

all details about the working of individual methods have been added as comments in the code
external libraries used (if any) in each method will be stated in the first comment
documentation for said libraries are listed in External Libraries and Tools

Thank You for purchasing my theme. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section. Thanks so much!

- syvDesign