',
258 | f'{indent}{HTML_INDENT * 2}
',
259 | f"{indent}{HTML_INDENT * 3}
{prj[NAME]}
",
260 | ]
261 |
262 | lines += get_description(prj[DESCRIPTION], indent + HTML_INDENT * 2)
263 | if prj[LINK]:
264 | lines.append(
265 | f'{indent}{HTML_INDENT * 3}
View Project'
266 | )
267 |
268 | lines += [f"{indent}{HTML_INDENT * x}
" for x in range(2, -1, -1)] + [""]
269 |
270 | return lines
271 |
272 |
273 | def make_skills_section(skls, indent):
274 | """
275 | Create the liens of the skill section
276 | Args:
277 | skls: the list of skills
278 | indent: the original indentation
279 |
280 | Returns:
281 | A list of lines of the skill section
282 | """
283 | lines = []
284 | for skl in skls:
285 | lines.append(f"{indent}
{skl}")
286 |
287 | return lines
288 |
289 |
290 | def make_contact_section(cons, indent):
291 | """
292 | Create the lines of the contact section
293 | Args:
294 | cons: the list of contacts
295 | indent: the original indentation
296 |
297 | Returns:
298 | A list of lines of the contact section
299 | """
300 | lines = []
301 | for con in CONTACTS:
302 | if con in cons and cons[con]:
303 | lines += [
304 | f"{indent}
",
305 | f"{indent}{HTML_INDENT}"
306 | f'',
307 | f"{indent}",
308 | ]
309 |
310 | return lines
311 |
312 |
313 | def sort_entries(entries, date_format="MMM YYYY"):
314 | """
315 | Sort entries by date
316 | Args:
317 | entries: the list of entries to be sorted
318 | date_format: the format of the date in the entries
319 |
320 | Returns:
321 | A list of sorted entries
322 | """
323 | all_entries = defaultdict(list)
324 | for exp in entries:
325 | name = exp[NAME]
326 | for entry in exp[ENTRIES]:
327 | entry[NAME] = name
328 | date = entry[DATES].split(" - ")[-1]
329 |
330 | if date.lower() == "present":
331 | arrow_date = arrow.utcnow().date()
332 | elif date:
333 | arrow_date = arrow.get(date, date_format).date()
334 | else:
335 | arrow_date = arrow.get(datetime.min).date()
336 |
337 | all_entries[arrow_date].append(entry)
338 |
339 | sorted_entries = []
340 | for key in sorted(all_entries, reverse=True):
341 | sorted_entries += all_entries[key]
342 |
343 | return sorted_entries
344 |
345 |
346 | def get_description(descs, indent):
347 | """
348 | Create the lines of the description
349 | Args:
350 | descs: the list of descriptions
351 | indent: the original indentation
352 |
353 | Returns:
354 | A list of lines of the description
355 | """
356 | lines = []
357 | if descs:
358 | lines.append(f"{indent}{HTML_INDENT}
")
359 | for desc in descs.split("\n"):
360 | desc = desc.strip("-").strip()
361 | if desc:
362 | lines.append(f"{indent}{HTML_INDENT * 2}- {desc}")
363 |
364 | lines.append(f"{indent}{HTML_INDENT}
")
365 |
366 | return lines
367 |
368 |
369 | def make_comment_line(line):
370 | return [f""]
371 |
--------------------------------------------------------------------------------
/linkedrw/scraper/background.py:
--------------------------------------------------------------------------------
1 | import time
2 |
3 | from collections import defaultdict
4 | from selenium.common.exceptions import NoSuchElementException
5 | from selenium.webdriver.common.by import By
6 |
7 | from linkedrw.constants import *
8 | from linkedrw.utils import (
9 | get_span_text,
10 | get_optional_text,
11 | get_description,
12 | scroll_to_elem,
13 | )
14 |
15 |
16 | def get_background_details(driver, by, section_id, section_type):
17 | """
18 | Scrape background details
19 | Args:
20 | driver: the selenium details
21 | by: the strategy to locate an element
22 | section_id: the section identifier
23 | section_type: the section type
24 |
25 | Returns:
26 | A list of details of all the items under the given section
27 | """
28 | # Load background section
29 | if section_type == EXPERIENCE:
30 | scroll_to_elem(driver, By.ID, "oc-background-section")
31 |
32 | # Load the rest of the page
33 | elif section_type == SKILLS:
34 | try:
35 | scroll_to_elem(
36 | driver,
37 | By.CSS_SELECTOR,
38 | ".pv-deferred-area.pv-deferred-area--pending.ember-view",
39 | )
40 | except NoSuchElementException:
41 | pass
42 |
43 | # Check if the section exists
44 | try:
45 | section = driver.find_element(by, section_id)
46 | except NoSuchElementException:
47 | return []
48 |
49 | if section_type == EXPERIENCE:
50 | return get_experience(section)
51 | elif section_type == EDUCATION:
52 | return get_education(section)
53 | elif section_type == VOLUNTEERING:
54 | return get_volunteering(section)
55 | elif section_type == SKILLS:
56 | return get_skills(driver, section)
57 |
58 |
59 | def get_experience(section):
60 | """
61 | Scrape experience details
62 | Args:
63 | section: the experience section
64 |
65 | Returns:
66 | A list of details of all experiences
67 | """
68 | ul = get_section(section)
69 | entries = ul.find_elements_by_css_selector(
70 | ".pv-profile-section__sortable-item.pv-profile-section__section-info-item.relative."
71 | "pv-profile-section__list-item.sortable-item.ember-view"
72 | )
73 | entries += ul.find_elements_by_css_selector(
74 | ".pv-entity__position-group-pager.pv-profile-section__list-item.ember-view"
75 | )
76 | exps = []
77 |
78 | for entry in entries:
79 | # Check if it is a single role in a company or multiple roles in a company
80 | try:
81 | summary = entry.find_element_by_css_selector(
82 | ".pv-entity__summary-info.pv-entity__summary-info--background-section"
83 | )
84 | exps.append(get_single_role(entry, summary))
85 | except NoSuchElementException:
86 | summary = entry.find_element_by_css_selector(
87 | ".pv-profile-section__card-item-v2.pv-profile-section.pv-position-entity.ember-view"
88 | )
89 | exps.append(get_multiple_roles(entry, summary))
90 |
91 | return exps
92 |
93 |
94 | def get_single_role(div, summary):
95 | """
96 | Scrape details of a single role
97 | Args:
98 | div: the div element
99 | summary: the summary section
100 |
101 | Returns:
102 | A dict of the details for a single role
103 | """
104 | title = summary.find_element_by_css_selector(".t-16.t-black.t-bold").text
105 | company = summary.find_element_by_class_name("pv-entity__secondary-title").text
106 | dates = get_span_text(
107 | summary, ".pv-entity__date-range.t-14.t-black--light.t-normal"
108 | )
109 | location = get_optional_text(
110 | summary, ".pv-entity__location.t-14.t-black--light.t-normal.block"
111 | )
112 | description = get_description(
113 | div, ".pv-entity__description.t-14.t-black.t-normal.ember-view"
114 | )
115 |
116 | results = {
117 | NAME: company,
118 | ENTRIES: [
119 | {TITLE: title, DATES: dates, LOCATION: location, DESCRIPTION: description}
120 | ],
121 | }
122 |
123 | return results
124 |
125 |
126 | def get_multiple_roles(div, summary):
127 | """
128 | Scrape details of multiple roles
129 | Args:
130 | div: the div element
131 | summary: the summary section
132 |
133 | Returns:
134 | A dict of the details for multiple roles
135 | """
136 | try:
137 | role_sections = div.find_elements_by_class_name(
138 | "pv-entity__position-group-role-item"
139 | )
140 | except NoSuchElementException:
141 | role_sections = div.find_elements_by_class_name(
142 | "pv-entity__position-group-role-item-fading-timeline"
143 | )
144 |
145 | roles = []
146 | for role_section in role_sections:
147 | title = get_span_text(role_section, ".t-14.t-black.t-bold")
148 | dates = get_span_text(
149 | role_section, ".pv-entity__date-range.t-14.t-black.t-normal"
150 | )
151 | location = get_optional_text(
152 | role_section, ".pv-entity__location.t-14.t-black--light.t-normal.block"
153 | )
154 | description = get_description(
155 | role_section, ".pv-entity__description.t-14.t-black.t-normal.ember-view"
156 | )
157 |
158 | roles.append(
159 | {TITLE: title, DATES: dates, LOCATION: location, DESCRIPTION: description}
160 | )
161 |
162 | results = {NAME: get_span_text(summary, ".t-16.t-black.t-bold"), ENTRIES: roles}
163 |
164 | return results
165 |
166 |
167 | def get_education(section):
168 | """
169 | Scrape education details
170 | Args:
171 | section: the education section
172 |
173 | Returns:
174 | A list of details of all educations
175 | """
176 | ul = get_section(section)
177 | edu_dict = defaultdict(list)
178 |
179 | for li in ul.find_elements_by_tag_name("li"):
180 | school = li.find_element_by_css_selector(
181 | ".pv-entity__school-name.t-16.t-black.t-bold"
182 | ).text
183 | degree_name = get_span_text(
184 | li,
185 | ".pv-entity__secondary-title.pv-entity__degree-name.pv-entity__secondary-title.t-14.t-black.t-normal",
186 | )
187 | dates = get_optional_text(li, ".pv-entity__dates.t-14.t-black--light.t-normal")
188 | description = get_description(
189 | li, ".pv-entity__description.t-14.t-black--light.t-normal.mt4"
190 | )
191 |
192 | # Check if there is a degree name, if not, skip this entry
193 | if not degree_name:
194 | continue
195 |
196 | edu_dict[school].append(
197 | {
198 | DEGREE: get_degree(li, degree_name),
199 | LOCATION: "",
200 | DATES: dates,
201 | DESCRIPTION: description,
202 | }
203 | )
204 |
205 | edu_list = []
206 | for school in edu_dict:
207 | edu_list.append({NAME: school, ENTRIES: edu_dict[school]})
208 |
209 | return edu_list
210 |
211 |
212 | def get_degree(li, degree_name):
213 | """
214 | Get the full degree description
215 | Args:
216 | li: the li element
217 | degree_name: the degree name
218 |
219 | Returns:
220 | A string of the degree description
221 | """
222 |
223 | # Check if there is a field of study
224 | try:
225 | field = get_span_text(
226 | li,
227 | ".pv-entity__secondary-title.pv-entity__fos.pv-entity__secondary-title.t-14.t-black--light.t-normal",
228 | )
229 | degree = f"{degree_name} - {field}"
230 | except NoSuchElementException:
231 | degree = degree_name
232 |
233 | return degree
234 |
235 |
236 | def get_volunteering(section):
237 | """
238 | Scrape volunteering details
239 | Args:
240 | section: the volunteering section
241 |
242 | Returns:
243 | A list of details of all volunteering
244 | """
245 | ul = get_section(section)
246 | vol_dict = defaultdict(list)
247 |
248 | for li in ul.find_elements_by_tag_name("li"):
249 | title = li.find_element_by_css_selector(".t-16.t-black.t-bold").text
250 | organisation = get_span_text(li, ".t-14.t-black.t-normal")
251 | dates = get_optional_text(
252 | li,
253 | ".pv-entity__date-range.detail-facet.inline-block.t-14.t-black--light.t-normal",
254 | )
255 | description = get_description(
256 | li, ".pv-entity__description.t-14.t-black--light.t-normal.mt4"
257 | )
258 |
259 | vol_dict[organisation].append(
260 | {TITLE: title, DATES: dates, LOCATION: "", DESCRIPTION: description}
261 | )
262 |
263 | vol_list = []
264 | for organisation in vol_dict:
265 | vol_list.append({NAME: organisation, ENTRIES: vol_dict[organisation]})
266 |
267 | return vol_list
268 |
269 |
270 | def get_skills(driver, section):
271 | """
272 | Scrape skills
273 | Args:
274 | driver: the web driver
275 | section: the skills section
276 |
277 | Returns:
278 | A list of skills
279 | """
280 |
281 | # Show all skills
282 | try:
283 | btn = scroll_to_elem(
284 | driver, By.CLASS_NAME, "pv-skills-section__chevron-icon", align="false"
285 | )
286 | btn.click()
287 | except NoSuchElementException:
288 | pass
289 |
290 | # Extract top skills
291 | skills = []
292 | for top_skill in section.find_elements_by_css_selector(
293 | ".pv-skill-category-entity__top-skill.pv-skill-category-entity.pb3.pt4.pv-skill-endorsedSkill-entity."
294 | "relative.ember-view"
295 | ):
296 | skill = top_skill.find_element_by_css_selector(
297 | ".pv-skill-category-entity__name-text.t-16.t-black.t-bold"
298 | ).text
299 | skills.append(skill.split("\n")[0])
300 |
301 | # Locate Tools & Technologies section
302 | target_div = None
303 | for div in section.find_elements_by_css_selector(
304 | ".pv-skill-category-list.pv-profile-section__section-info.mb6.ember-view"
305 | ):
306 | header = div.find_element_by_tag_name("h3")
307 | if header.text.lower() == "tools & technologies":
308 | target_div = div
309 | break
310 |
311 | # Extract the rest of the skills
312 | if target_div is not None:
313 | for li in target_div.find_elements_by_tag_name("li"):
314 | skills.append(li.text.split("\n")[0])
315 |
316 | return skills
317 |
318 |
319 | def get_section(section):
320 | """
321 | Get the items section
322 | Args:
323 | section: the section
324 |
325 | Returns:
326 | The items section
327 | """
328 | is_expanded = expand_section(section)
329 | if is_expanded:
330 | # The ul element can appear in two different classes
331 | try:
332 | elem = section.find_element_by_css_selector(
333 | ".pv-profile-section__section-info.section-info.pv-profile-section__section-info--has-more.ember-view"
334 | )
335 | except NoSuchElementException:
336 | elem = section.find_element_by_css_selector(
337 | ".pv-profile-section__section-info.section-info.pv-profile-section__section-info--has-more"
338 | )
339 | else:
340 | # The ul element can appear in two different classes
341 | try:
342 | elem = section.find_element_by_css_selector(
343 | ".pv-profile-section__section-info.section-info.pv-profile-section__section-info--has-no-more."
344 | "ember-view"
345 | )
346 | except NoSuchElementException:
347 | elem = section.find_element_by_css_selector(
348 | ".pv-profile-section__section-info.section-info.pv-profile-section__section-info--has-no-more"
349 | )
350 |
351 | return elem
352 |
353 |
354 | def expand_section(section):
355 | css = ".pv-profile-section__see-more-inline.pv-profile-section__text-truncate-toggle.link"
356 | btns = []
357 | count = 0
358 |
359 | all_btns = section.find_elements_by_css_selector(css)
360 | if all_btns:
361 | btns.append(all_btns[-1])
362 |
363 | while btns:
364 | btn = btns.pop()
365 | text = btn.text.lower()
366 | btn.click()
367 | time.sleep(1)
368 |
369 | if EXPERIENCE in text or EDUCATION in text:
370 | count += 1
371 |
372 | new_btns = section.find_elements_by_css_selector(css)
373 | if new_btns:
374 | btns.append(new_btns[-1])
375 |
376 | return count > 0
377 |
--------------------------------------------------------------------------------
/linkedrw/templates/dev_portfolio_files/scss/styles.scss:
--------------------------------------------------------------------------------
1 | /*!
2 | Title: Dev Portfolio Template
3 | Version: 1.2.1
4 | Last Change: 08/28/2017
5 | Author: Ryan Fitzgerald
6 | Repo: https://github.com/RyanFitzgerald/devportfolio-template
7 | Issues: https://github.com/RyanFitzgerald/devportfolio-template/issues
8 |
9 | Description: This file contains all the styles associated with the page
10 | that don't come from third party libraries. This file gets compiled using
11 | Gulp and send to the /css folder which is then loaded on the page.
12 | */
13 | /*
14 | File Contents:
15 |
16 | 1. Variables
17 | 2. Mixins
18 | 3. Global Styles
19 | 4. Lead Styles
20 | 5. About Styles
21 | 6. Experience Styles
22 | 7. Education Styles
23 | 8. Project Styles
24 | 9. Skills Styles
25 | 10. Contact Styles
26 | 11. Optional Section Styles
27 | 12. Media Queries
28 | */
29 |
30 | /*
31 | ------------------------
32 | ----- 1. Variables -----
33 | ------------------------
34 | */
35 |
36 | // Define base and accent colors
37 | $base-color: #3498db;
38 | $base-color-hover: darken($base-color, 10%);
39 |
40 | // Define background colors
41 | $background: #fff;
42 | $background-alt: #f2f2f5;
43 |
44 | // Define border colors
45 | $border: #dcd9d9;
46 |
47 | // Define text colors
48 | $heading: #374054;
49 | $text: #74808a;
50 |
51 | /*
52 | ---------------------
53 | ----- 2. Mixins -----
54 | ---------------------
55 | */
56 |
57 | @mixin transition($duration: 0.5s, $func: ease, $property: all) {
58 | transition: #{$duration} #{$func} #{$property};
59 | }
60 |
61 | @mixin placeholder {
62 | &::-webkit-input-placeholder {
63 | @content;
64 | }
65 |
66 | &:-moz-placeholder {
67 | @content;
68 | opacity: 1;
69 | }
70 |
71 | &::-moz-placeholder {
72 | @content;
73 | opacity: 1;
74 | }
75 |
76 | &:-ms-input-placeholder {
77 | @content;
78 | }
79 | }
80 |
81 | /*
82 | ----------------------------
83 | ----- 3. Global Styles -----
84 | ----------------------------
85 | */
86 |
87 | body {
88 | font-family: 'Lato', sans-serif;
89 | font-size: 16px;
90 |
91 | &.active {
92 | overflow: hidden;
93 | z-index: -1;
94 | }
95 | }
96 |
97 | // No JS styles
98 | .no-js {
99 | #experience-timeline {
100 | > div {
101 | background: $background;
102 | padding: 10px;
103 | margin-bottom: 10px;
104 | border: 1px solid $border;
105 |
106 | h3 {
107 | font-size: 1.5em;
108 | font-weight: 300;
109 | color: $heading;
110 | display: inline-block;
111 | margin: 0;
112 | }
113 |
114 | h4 {
115 | font-size: 1.2em;
116 | font-weight: 300;
117 | color: #7e8890;
118 | margin: 0 0 15px 0;
119 | }
120 |
121 | p {
122 | color: $text;
123 | font-size: 0.9em;
124 | margin: 0;
125 | }
126 | }
127 |
128 | &:before, &:after {
129 | content: none;
130 | }
131 | }
132 | }
133 |
134 | @keyframes dropHeader {
135 | 0% {
136 | transform: translateY(-100%);
137 | }
138 | 100% {
139 | transform: translateY(0);
140 | }
141 | }
142 |
143 | header {
144 | position: absolute;
145 | top: 0;
146 | left: 0;
147 | right: 0;
148 | text-align: center;
149 | z-index: 10;
150 | animation-name: dropHeader;
151 | animation-iteration-count: 1;
152 | animation-timing-function: ease;
153 | animation-duration: 0.75s;
154 |
155 | ul {
156 | display: inline-block;
157 | background: $background;
158 | text-align: center;
159 | padding: 10px;
160 | margin: 0;
161 | border-bottom-right-radius: 4px;
162 | border-bottom-left-radius: 4px;
163 | }
164 |
165 | li {
166 | display: inline-block;
167 | }
168 |
169 | a {
170 | display: block;
171 | color: $base-color;
172 | padding: 10px;
173 |
174 | &:hover {
175 | color: $base-color-hover;
176 | text-decoration: none;
177 | background: #eee;
178 | border-radius: 4px;
179 | }
180 |
181 | &:focus {
182 | color: $base-color;
183 | text-decoration: none;
184 | }
185 | }
186 |
187 | &.active {
188 | display: block;
189 | }
190 |
191 | &.sticky {
192 | position: fixed;
193 | z-index: 999;
194 | }
195 | }
196 |
197 | #menu {
198 | &.active {
199 | display: block;
200 | }
201 | }
202 |
203 | #mobile-menu-open {
204 | display: none;
205 | cursor: pointer;
206 | position: fixed;
207 | right: 15px;
208 | top: 10px;
209 | color: $base-color;
210 | font-size: 1.5em;
211 | z-index: 20;
212 | padding: 0 7px;
213 | border-radius: 4px;
214 | background: $background;
215 | }
216 |
217 | #mobile-menu-close {
218 | display: none;
219 | text-align: right;
220 | width: 100%;
221 | background: $background;
222 | font-size: 1.5em;
223 | padding-right: 15px;
224 | padding-top: 10px;
225 | cursor: pointer;
226 | color: $base-color;
227 |
228 | span {
229 | font-size: 0.5em;
230 | text-transform: uppercase;
231 | }
232 |
233 | i {
234 | vertical-align: middle;
235 | }
236 | }
237 |
238 | footer {
239 | padding: 50px 0;
240 | }
241 |
242 | .copyright {
243 | padding-top: 20px;
244 |
245 | p {
246 | margin: 0;
247 | color: $text;
248 | }
249 | }
250 |
251 | .top {
252 | text-align: center;
253 |
254 | span {
255 | cursor: pointer;
256 | display: block;
257 | margin: 15px auto 0 auto;
258 | width: 35px;
259 | height: 35px;
260 | border-radius: 50%;
261 | border: 3px solid lighten($text, 25%);
262 | text-align:center;
263 | }
264 |
265 | i {
266 | color: $text;
267 | }
268 | }
269 |
270 | .social {
271 | text-align: right;
272 |
273 | ul {
274 | margin: 5px 0 0 0;
275 | padding: 0;
276 | }
277 |
278 | li {
279 | display: inline-block;
280 | font-size: 1.25em;
281 | list-style: none;
282 | }
283 |
284 | a {
285 | display: block;
286 | color: $text;
287 | padding: 10px;
288 |
289 | &:hover {
290 | color: $base-color;
291 | }
292 | }
293 | }
294 |
295 | .btn-rounded-white {
296 | display: inline-block;
297 | color: #fff;
298 | padding: 15px 25px;
299 | border: 3px solid #fff;
300 | border-radius: 30px;
301 | @include transition();
302 |
303 | &:hover {
304 | color: $base-color;
305 | background: #fff;
306 | text-decoration: none;
307 | }
308 | }
309 |
310 | .shadow {
311 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
312 | }
313 |
314 | .shadow-large {
315 | box-shadow: 0 3px 6px rgba(0,0,0,0.08), 0 3px 6px rgba(0,0,0,0.15);
316 | }
317 |
318 | .heading {
319 | position: relative;
320 | display: inline-block;
321 | font-size: 2em;
322 | font-weight: 300;
323 | margin: 0 0 30px 0;
324 |
325 | &:after {
326 | position: absolute;
327 | content: '';
328 | top: 100%;
329 | height: 1px;
330 | width: 50px;
331 | left: 0;
332 | right: 0;
333 | margin: 0 auto;
334 | background: $base-color;
335 | }
336 | }
337 |
338 | .background-alt {
339 | background: $background-alt;
340 | }
341 |
342 | /*
343 | --------------------------
344 | ----- 4. Lead Styles -----
345 | --------------------------
346 | */
347 |
348 | #lead {
349 | position: relative;
350 | height: 100vh;
351 | min-height: 500px;
352 | max-height: 1080px;
353 | background: url(../images/lead-bg.jpg);
354 | background-size: cover;
355 | padding: 15px;
356 | overflow: hidden;
357 | }
358 |
359 | #lead-content {
360 | position: absolute;
361 | z-index: 10;
362 | top: 50%;
363 | left: 50%;
364 | transform: translate(-50%, -50%);
365 | text-align: center;
366 |
367 | h1, h2 {
368 | margin: 0;
369 | }
370 |
371 | h1 {
372 | color: #fff;
373 | font-weight: 900;
374 | font-size: 5em;
375 | text-transform: uppercase;
376 | letter-spacing: 0.05em;
377 | line-height: 0.9em;
378 | }
379 |
380 | h2 {
381 | color: lighten($base-color, 25%);
382 | font-weight: 500;
383 | font-size: 2.25em;
384 | margin-bottom: 15px;
385 | }
386 | }
387 |
388 | #lead-overlay {
389 | position: absolute;
390 | height: 100%;
391 | width: 100%;
392 | top: 0;
393 | right: 0;
394 | bottom: 0;
395 | left: 0;
396 | background: rgba($base-color-hover, 0.8);
397 | z-index: 1;
398 | }
399 |
400 | #lead-down {
401 | position: absolute;
402 | left: 0;
403 | right: 0;
404 | width: 100%;
405 | text-align: center;
406 | z-index: 10;
407 | bottom: 15px;
408 | color: #fff;
409 |
410 | span {
411 | cursor: pointer;
412 | display: block;
413 | margin: 0 auto;
414 | width: 35px;
415 | height: 35px;
416 | border-radius: 50%;
417 | border: 3px solid lighten($base-color, 25%);
418 | text-align:center;
419 | }
420 |
421 | i {
422 | animation: pulsate 1.5s ease;
423 | animation-iteration-count: infinite;
424 | padding-top: 5px;;
425 | }
426 | }
427 |
428 | @keyframes pulsate {
429 | 0% {
430 | transform: scale(1, 1);
431 | }
432 |
433 | 50% {
434 | transform: scale(1.2, 1.2);
435 | }
436 |
437 | 100% {
438 | transform: scale(1, 1);
439 | }
440 | }
441 |
442 | /*
443 | ---------------------------
444 | ----- 5. About Styles -----
445 | ---------------------------
446 | */
447 |
448 | #about {
449 | padding: 75px 15px;
450 | border-bottom: 1px solid $border;
451 |
452 | h2 {
453 | color: $heading;
454 | }
455 |
456 | p {
457 | color: $text;
458 | margin: 0;
459 | }
460 | }
461 |
462 | /*
463 | --------------------------------
464 | ----- 6. Experience Styles -----
465 | --------------------------------
466 | */
467 |
468 | #experience {
469 | padding: 50px 15px;
470 | text-align: center;
471 | border-bottom: 1px solid $border;
472 |
473 | h2 {
474 | color: $heading;
475 | }
476 | }
477 |
478 | #experience-timeline {
479 | margin: 30px auto 0 auto;
480 | position: relative;
481 | max-width: 1000px;
482 |
483 | &:before {
484 | position: absolute;
485 | content: '';
486 | top: 0;
487 | bottom: 0;
488 | left: 303px;
489 | right: auto;
490 | height: 100%;
491 | width: 3px;
492 | background: $base-color;
493 | z-index: 0;
494 | }
495 |
496 | &:after {
497 | position: absolute;
498 | content: '';
499 | width: 3px;
500 | height: 40px;
501 | background: $base-color;
502 | background: linear-gradient(to bottom, $base-color, rgba($base-color, 0));
503 | top: 100%;
504 | left: 303px;
505 | }
506 | }
507 |
508 | .vtimeline-content {
509 | margin-left: 350px;
510 | background: #fff;
511 | border: 1px solid #e6e6e6;
512 | padding: 15px;
513 | border-radius: 3px;
514 | text-align: left;
515 |
516 | h3 {
517 | font-size: 1.5em;
518 | font-weight: 300;
519 | color: $heading;
520 | display: inline-block;
521 | margin: 0;
522 | }
523 |
524 | h4 {
525 | font-size: 1.2em;
526 | font-weight: 300;
527 | color: #7e8890;
528 | margin: 0 0 15px 0;
529 | }
530 |
531 | p, ul {
532 | color: $text;
533 | font-size: 0.9em;
534 | margin: 0;
535 | }
536 |
537 | ul {
538 | padding: 0 0 0 15px;
539 | }
540 | }
541 |
542 | .vtimeline-point {
543 | position: relative;
544 | display: block;
545 | vertical-align: top;
546 | margin-bottom: 30px;
547 | }
548 |
549 | .vtimeline-icon {
550 | position: relative;
551 | color: #fff;
552 | width: 50px;
553 | height: 50px;
554 | background: $base-color;
555 | border-radius: 50%;
556 | float: left;
557 | z-index: 99;
558 | margin-left: 280px;
559 |
560 | i {
561 | display: block;
562 | font-size: 2em;
563 | margin-top: 10px;
564 | }
565 | }
566 |
567 | .vtimeline-date {
568 | width: 260px;
569 | text-align: right;
570 | position: absolute;
571 | left: 0;
572 | top: 10px;
573 | font-weight: 300;
574 | color: #374054;
575 | }
576 |
577 | /*
578 | -------------------------------
579 | ----- 7. Education Styles -----
580 | -------------------------------
581 | */
582 |
583 | #education {
584 | padding: 50px 15px 20px 15px;
585 | border-bottom: 1px solid $border;
586 | text-align: center;
587 |
588 | h2 {
589 | color: $heading;
590 | margin-bottom: 50px;
591 | }
592 | }
593 |
594 | .education-block {
595 | max-width: 700px;
596 | margin: 0 auto 30px auto;
597 | padding: 15px;
598 | border: 1px solid $border;
599 | text-align: left;
600 |
601 | h3 {
602 | font-weight: 500;
603 | float: left;
604 | margin: 0;
605 | color: $heading;
606 | }
607 |
608 | span {
609 | color: $text;
610 | float: right;
611 | }
612 |
613 | h4 {
614 | color: $text;
615 | clear: both;
616 | font-weight: 500;
617 | margin: 0 0 15px 0;
618 | }
619 |
620 | p, ul {
621 | margin: 0;
622 | color: $text;
623 | font-size: 0.9em;
624 | }
625 |
626 | ul {
627 | padding: 0 0 0 15px;
628 | }
629 | }
630 |
631 | /*
632 | -------------------------------
633 | ----- 8. Project Styles -----
634 | -------------------------------
635 | */
636 |
637 | #projects {
638 | padding: 50px 15px;
639 | border-bottom: 1px solid $border;
640 | text-align: center;
641 |
642 | h2 {
643 | color: $heading;
644 | margin-bottom: 50px;
645 | }
646 | }
647 |
648 | .project {
649 | position: relative;
650 | max-width: 900px;
651 | margin: 0 auto 30px auto;
652 | overflow: hidden;
653 | background: #fff;
654 | border-radius: 4px;
655 | }
656 |
657 | .project-image {
658 | float: left;
659 | }
660 |
661 | .project-info {
662 | position: absolute;
663 | top: 50%;
664 | transform: translateY(-50%);
665 | margin-left: 300px;
666 | padding: 15px;
667 |
668 | h3 {
669 | font-size: 1.5em;
670 | font-weight: 300;
671 | color: $heading;
672 | margin: 0 0 15px 0;
673 | }
674 |
675 | p, ul {
676 | color: $text;
677 | margin: 0 0 15px 0;
678 | font-size: 0.9em;
679 | text-align: left;
680 | }
681 | }
682 |
683 | .no-image {
684 | .project-info {
685 | position: relative;
686 | margin: 0;
687 | padding: 30px 15px;
688 | transform: none;
689 | }
690 | }
691 |
692 | #more-projects {
693 | display: none;
694 | }
695 |
696 | /*
697 | -------------------------------
698 | ----- 9. Skills Styles -----
699 | -------------------------------
700 | */
701 |
702 | #skills {
703 | padding: 50px 15px;
704 | text-align: center;
705 |
706 | h2 {
707 | color: $heading;
708 | margin-bottom: 50px;
709 | }
710 |
711 | ul {
712 | display: block;
713 | margin: 0 auto;
714 | padding: 0;
715 | max-width: 800px;
716 | }
717 |
718 | li {
719 | display: inline-block;
720 | margin: 7px;
721 | padding: 5px 10px;
722 | color: $heading;
723 | background: darken($background-alt, 5%);
724 | list-style: none;
725 | cursor: default;
726 | font-size: 1.2em;
727 | }
728 | }
729 |
730 | /*
731 | -------------------------------
732 | ----- 10. Contact Styles -----
733 | -------------------------------
734 | */
735 |
736 | #contact {
737 | padding: 50px 15px;
738 | background: $base-color;
739 | text-align: center;
740 |
741 | h2 {
742 | margin: 0 0 15px 0;
743 | color: #fff;
744 | font-weight: 500;
745 | }
746 | }
747 |
748 | #contact-form {
749 | max-width: 500px;
750 | margin: 0 auto;
751 |
752 | input, textarea {
753 | display: block;
754 | width: 100%;
755 | padding: 10px;
756 | border-radius: 4px;
757 | border: none;
758 | margin-bottom: 10px;
759 | background: darken($base-color, 15%);
760 | color: #fff;
761 | @include transition();
762 | @include placeholder {
763 | color: #fff;
764 | }
765 |
766 | &:focus {
767 | outline: none;
768 | background: darken($base-color, 25%);
769 | }
770 | }
771 |
772 | textarea {
773 | height: 150px;
774 | resize: none;
775 | }
776 |
777 | button {
778 | display: block;
779 | width: 100%;
780 | background: #fff;
781 | border-radius: 4px;
782 | padding: 5px 10px;
783 | border: none;
784 | color: $base-color;
785 | font-weight: 700;
786 | box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
787 | @include transition();
788 |
789 | &:hover {
790 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
791 | }
792 | }
793 | }
794 |
795 | /*
796 | ---------------------------------------
797 | ----- 11. Optional Section Styles -----
798 | ---------------------------------------
799 | */
800 |
801 | .optional-section {
802 | padding: 50px 15px;
803 | text-align: center;
804 | border-top: 1px solid $border;
805 |
806 | h2 {
807 | color: $heading;
808 | }
809 | }
810 |
811 | .optional-section-block {
812 | max-width: 700px;
813 | margin: 0 auto 30px auto;
814 | padding: 15px;
815 | border: 1px solid $border;
816 | background: #fff;
817 | text-align: left;
818 |
819 | h3 {
820 | font-weight: 500;
821 | margin: 0 0 15px 0;
822 | color: $heading;
823 | }
824 |
825 | h4 {
826 | color: $text;
827 | clear: both;
828 | font-weight: 500;
829 | margin: 0 0 15px 0;
830 | }
831 |
832 | p, ul {
833 | margin: 0 0 15px 0;
834 | color: $text;
835 | font-size: 0.9em;
836 | }
837 |
838 | ul {
839 | padding: 0 0 0 15px;
840 | }
841 | }
842 |
843 | /*
844 | -----------------------------
845 | ----- 12. Media Queries -----
846 | -----------------------------
847 | */
848 |
849 | // Collapse timeline
850 | @media only screen and (max-width: 750px) {
851 |
852 | #experience-timeline {
853 | &:before, &:after {
854 | left: 23px;
855 | }
856 |
857 | }
858 |
859 | .vtimeline-date {
860 | width: auto;
861 | text-align: left;
862 | position: relative;
863 | margin-bottom: 15px;
864 | display: block;
865 | margin-left: 70px;
866 | }
867 |
868 | .vtimeline-icon {
869 | margin-left: 0;
870 | }
871 |
872 | .vtimeline-content {
873 | margin-left: 70px;
874 | }
875 |
876 | }
877 |
878 | // Medium Devices
879 | @media only screen and (max-width : 992px) {
880 |
881 | #lead {
882 | height: auto;
883 | min-height: auto;
884 | max-height: auto;
885 | padding: 100px 15px;
886 | }
887 |
888 | #lead-content {
889 | position: relative;
890 | transform: none;
891 | left: auto;
892 | top: auto;
893 |
894 | h1 {
895 | font-size: 3em;
896 | }
897 |
898 | h2 {
899 | font-size: 1.75em;
900 | }
901 | }
902 |
903 | #about {
904 | text-align: center;
905 |
906 | p {
907 | text-align: left;
908 | }
909 | }
910 |
911 | }
912 |
913 | // Small Devices
914 | @media only screen and (max-width : 768px) {
915 |
916 | header {
917 | position: fixed;
918 | display: none;
919 | z-index: 999;
920 | animation: none;
921 | bottom: 0;
922 | height: 100%;
923 | }
924 |
925 | #mobile-menu-open, #mobile-menu-close {
926 | display: block;
927 | }
928 |
929 | #menu {
930 | height: 100%;
931 | overflow-y: auto;
932 | box-shadow: none;
933 | border-radius: 0;
934 | width: 100%;
935 |
936 | li {
937 | display: block;
938 | margin-bottom: 10px;
939 | }
940 | }
941 |
942 | #lead-content {
943 | h1 {
944 | font-size: 2em;
945 | }
946 |
947 | h2 {
948 | font-size: 1.3em;
949 | }
950 |
951 | a {
952 | padding: 10px 20px;
953 | }
954 | }
955 |
956 | #lead-down {
957 | display: none;
958 | }
959 |
960 | .education-block {
961 | h3, span {
962 | float: none;
963 | }
964 | }
965 |
966 | .project-image {
967 | display: none;
968 | }
969 |
970 | .project-info {
971 | position: relative;
972 | margin: 0;
973 | padding: 30px 15px;
974 | top: auto;
975 | transform: none;
976 | }
977 |
978 | footer {
979 | text-align: center;
980 | }
981 |
982 | .social {
983 | text-align: center;
984 | }
985 |
986 | }
987 |
988 | // Extra Small Devices
989 | @media only screen and (max-width : 480px) {
990 |
991 | #lead-content {
992 | h1 {
993 | font-size: 1.5em;
994 | }
995 |
996 | h2 {
997 | font-size: 1em;
998 | }
999 |
1000 | a {
1001 | font-size: 0.9em;
1002 | padding: 5px 10px;
1003 | }
1004 | }
1005 |
1006 | }
1007 |
--------------------------------------------------------------------------------