extends /templates/base block content if allowedToEditJobProfile .profile-control-bar if editing .progress.profile-completion-progress .progress-bar.progress-bar-success(style="width: #{100 * progress}%") .progress-text a.btn(href="/account/settings") i.icon-cog span(data-i18n="account_profile.settings") Settings if editing button.btn.btn-success#toggle-editing i.icon-ok span(data-i18n="account_profile.done_editing") Done Editing else button.btn#toggle-editing i.icon-cog span(data-i18n="account_profile.edit_profile") Edit Profile if profile.active button.btn.btn-success#toggle-job-profile-active i.icon-eye-open span(data-i18n="account_profile.active") Looking for interview offers now else button.btn#toggle-job-profile-active i.icon-eye-close span(data-i18n="account_profile.inactive") Not looking for offers right now if profile.active || me.isAdmin() if !profileApproved button.btn.btn-success#toggle-job-profile-approved(disabled=!me.isAdmin()) i.icon-eye-open span(data-i18n='account_profile.approved') Approved else if me.isAdmin() button.btn#toggle-job-profile-approved i.icon-eye-close span(data-i18n='account_profile.not_approved') Not Approved if me.isAdmin() && !myProfile button.btn.edit-settings-button#enter-espionage-mode 007 //if editing && myProfile // a.sample-profile(href="http://codecombat.com/images/pages/account/profile/sample_profile.png", target="_blank") // button.btn // i.icon-user // span(data-i18n="account_settings.sample_profile") See a sample profile if profile && allowedToViewJobProfile div(class="job-profile-container" + (editing ? " editable-profile" : "")) .job-profile-row .left-column.full-height-column .sub-column #profile-photo-container.editable-section(title="Click to change your photo") .editable-icon.glyphicon.glyphicon-pencil img.profile-photo(src=user.getPhotoURL(240, true)) .profile-caption= profile.jobTitle || 'Software Developer' #links-container.editable-section .editable-display(title="Click to add social and personal links") .editable-icon.glyphicon.glyphicon-pencil if profileLinks && profileLinks.length ul.links.editable-thinner each link in profileLinks if link.link && link.name li(title=profile.name + " on " + link.name, class=link.icon ? "has-icon" : "") a(href=link.link) if link.icon img(src=link.icon.url, alt=link.icon.name) else button.btn.btn-large.btn-inverse.flat-button= link.name else if editing h3.edit-label(data-i18n="account_profile.add_links") Add some links ul.links li.has-icon a(href='http://example.com') img(src='/images/pages/account/profile/icon_github.png', alt='GitHub') li.has-icon a(href='http://example.com') img(src='/images/pages/account/profile/icon_facebook.png', alt='Facebook') li.has-icon a(href='http://example.com') img(src='/images/pages/account/profile/icon_twitter.png', alt='Twitter') li.has-icon a(href='http://example.com/') img(src='/images/pages/account/profile/icon_linkedin.png', alt='LinkedIn') button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_blog") Blog button.btn.btn-large.btn-inverse.flat-button.edit-example-button(data-i18n="account_profile.example_personal_site") Personal Site form.editable-form .editable-icon.glyphicon.glyphicon-remove h3(data-i18n="account_profile.links_header") Personal Links p.help-block(data-i18n="account_profile.links_blurb") Link any other sites or profiles you want to highlight, like your GitHub, your LinkedIn, or your blog. .editable-array(data-property='links') for link, index in (profile.links || []).concat({}) .array-item.link-container.well.well-sm .form-group label.control-label(data-i18n="account_profile.links_name") Link Name input.form-control(type='link-name', maxlength='30', data-schemaformat='link-name', name="root[links][#{index}][name]", value=link.name, data-autocomplete="commonLinkNames", data-autocomplete-min-length=0) if !index p.help-block span(data-i18n="account_profile.links_name_help") What are you linking to? | Ex.: 'Personal Website', 'GitHub' .form-group label.control-label(data-i18n="account_profile.links_link") Link URL input.form-control(type='url', pattern='^(ht|f)tp(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*(:(0-9)*)*(/?)([a-zA-Z0-9-‌​.?,\'/\+&%$#_=]*)?$', data-schemaformat='url', name="root[links][#{index}][link]", value=link.link) if !index p.help-block Ex.: "https://github.com/nwinter" button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save .editable-section#basic-info-container - var editableDefaults = editing && profile.city == jobProfileSchema.properties.city.default div(class="editable-display" + (editableDefaults ? " edit-example-text" : ""), title="Click to edit your basic info") .editable-icon.glyphicon.glyphicon-pencil if editableDefaults h3.edit-label(data-i18n="account_profile.basics_header") Update basic info div= profile.city + ', ' + profile.country div= profile.visa div span(data-i18n="account_profile.looking_for") Looking for: | #{profile.lookingFor} div span(data-i18n="account_profile.last_updated") Last updated: | #{moment(profile.updated).fromNow()} form.editable-form .editable-icon.glyphicon.glyphicon-remove .form-group label.control-label(data-i18n="account_profile.basics_active") Open to Offers select.form-control(name='root[active]') option(value='1', selected=profile.active, data-i18n="account_profile.active") Looking for interview offers now option(value='', selected=!profile.active, data-i18n="account_profile.inactive") Not looking for offers right now p.help-block(data-i18n="account_profile.basics_active_help") Want interview offers right now? .form-group label.control-label(data-i18n="account_profile.basics_job_title") Desired Job Title input.form-control(type='text', maxlength='50', name='root[jobTitle]', value=profile.jobTitle) p.help-block span(data-i18n="account_profile.basics_job_title_help") What role are you looking for? | Ex.: "Full Stack Engineer", "Front-End Developer", "iOS Developer" .form-group label.control-label(data-i18n="account_profile.basics_city") City input.form-control(type='city', maxlength='100', data-schemaformat='city', name='root[city]', value=profile.city, data-autocomplete="commonCities", data-autocomplete-min-length=1) p.help-block span(data-i18n="account_profile.basics_city_help") City you want to work in (or live in now). | Ex.: "San Francisco", "Lubbock, TX" .form-group label.control-label(data-i18n="account_profile.basics_country") Country input.form-control(type='country', maxlength='100', data-schemaformat='country', name='root[country]', value=profile.country, data-autocomplete="commonCountries", data-autocomplete-min-length=1) p.help-block span(data-i18n="account_profile.basics_country_help") Country you want to work in (or live in now). | Ex.: "USA", "France" .form-group label.control-label(data-i18n="account_profile.basics_visa") US Work Status select.form-control(name='root[visa]') option(value='Authorized to work in the US', selected=profile.visa == 'Authorized to work in the US') Authorized to work in the US option(value='Need visa sponsorship', selected=profile.visa == 'Need visa sponsorship') Need visa sponsorship p.help-block(data-i18n="account_profile.basics_visa_help") Are you authorized to work in the US, or do you need visa sponsorship? .form-group label.control-label(data-i18n="account_profile.basics_looking_for") Looking For select.form-control(name='root[lookingFor]') option(value='Full-time', selected=profile.lookingFor == "Full-time", data-i18n="account_profile.basics_looking_for_full_time") Full-time option(value='Part-time', selected=profile.lookingFor == "Part-time", data-i18n="account_profile.basics_looking_for_part_time") Part-time option(value='Remote', selected=profile.lookingFor == "Remote", data-i18n="account_profile.basics_looking_for_remote") Remote option(value='Contracting', selected=profile.lookingFor == "Contracting", data-i18n="account_profile.basics_looking_for_contracting") Contracting option(value='Internship', selected=profile.lookingFor == "Internship", data-i18n="account_profile.basics_looking_for_internship") Internship p.help-block(data-i18n="account_profile.basics_looking_for_help") What kind of developer position do you want? button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save if !editing && !myProfile button#contact-candidate.btn.btn-large.btn-inverse.flat-button span(data-i18n="account_profile.contact") Contact | #{profile.name.split(' ')[0]} .middle-column.full-height-column .sub-column #name-container.editable-section .editable-display(title="Click to fill in your name") .editable-icon.glyphicon.glyphicon-pencil if editing && !profile.name h3.edit-label(data-i18n="account_profile.name_header") Fill in your name else if profile.name h3= profile.name else h3(data-i18n="account_profile.name_anonymous") Anonymous Developer form.editable-form .editable-icon.glyphicon.glyphicon-remove .form-group label.control-label(data-i18n="general.name") Name input.form-control(type='text', maxlength='100', name='root[name]', value=profile.name) p.help-block(data-i18n="account_profile.name_help") Name you want employers to see, like 'Nick Winter'. button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save #short-description-container.editable-section .editable-display(title="Click to write your tagline") .editable-icon.glyphicon.glyphicon-pencil if editing && (!profile.shortDescription || profile.shortDescription == jobProfileSchema.properties.shortDescription.default) h3.edit-label(data-i18n="account_profile.short_description_header") Write a short description of yourself p.edit-example-text(data-i18n="account_profile.short_description_blurb") Add a tagline to help an employer quickly learn more about you. else if profile.shortDescription p.editable-thinner= profile.shortDescription form.editable-form .editable-icon.glyphicon.glyphicon-remove .form-group label.control-label(data-i18n="account_profile.short_description") Tagline textarea.form-control(rows=3, maxlength='140', name='root[shortDescription]')= profile.shortDescription p.help-block(data-i18n="account_profile.short_description_help") Who are you, and what are you looking for? 140 characters max. button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save #skills-container.editable-section .editable-display.editable-thinner(title="Click to tag your programming skills") .editable-icon.glyphicon.glyphicon-pencil if editing && (!profile.skills || !profile.skills.length || (profile.skills.length == 1 && profile.skills[0] == 'javascript')) h3.edit-label Tag your programming skills each skill in ["python", "coffeescript", "node", "ios", "objective-c", "javascript", "app-engine", "mongodb", "web dev", "django", "backbone"] code.edit-example-tag= skill span else each skill in profile.skills code= skill span form.editable-form .editable-icon.glyphicon.glyphicon-remove h3(data-i18n="account_profile.skills_header") Skills p.help-block span(data-i18n="account_profile.skills_help") Tag relevant developer skills in order of proficiency. | Ex.: "objective-c", "mongodb", "rails", "android", "javascript" .editable-array(data-property='skills') for skill, index in (profile.skills || []).concat('') .array-item.skill-array-item input.form-control(type='skill', maxlength='20', pattern='.{1,}', data-schemaformat='skill', name="root[skills][#{index}]", value=skill, data-autocomplete="commonSkills", data-autocomplete-min-length=1) button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save #long-description-container.editable-section .editable-display(title="Click to start writing your longer description") .editable-icon.glyphicon.glyphicon-pencil - var modified = profile.longDescription && profile.longDescription != jobProfileSchema.properties.longDescription.default if editing && !modified h3.edit-label(data-i18n="account_profile.long_description_header") Describe your desired position p.edit-example-text(data-i18n="account_profile.long_description_blurb") Tell employers how awesome you are and what role you want. else if modified div.long-description.editable-thinner!= marked(profile.longDescription) form.editable-form .editable-icon.glyphicon.glyphicon-remove .form-group label.control-label(data-i18n="account_profile.long_description") Self Description textarea.form-control(rows=20, maxlength='600', data-schemaformat='markdown', name='root[longDescription]')= profile.longDescription p.help-block(data-i18n="account_profile.long_description_help") Describe yourself to potential employers. Keep it short and to the point. We recommend outlining the position that would most interest you. Tasteful markdown okay; 600 characters max. button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save #work-container.editable-section .editable-display(title="Click to add work experience") .editable-icon.glyphicon.glyphicon-pencil if profile.work && profile.work.length h3.experience-header img.header-icon(src="/images/pages/account/profile/work.png", alt="") span(data-i18n="account_profile.work_experience") Work Experience | - #{profile.experience} | span(data-i18n=profile.experience == 1 ? "units.year" : "units.years") each job in profile.work if job.role && job.employer div.experience-entry div.duration.pull-right= job.duration | #{job.role} at #{job.employer} .clearfix if job.description div!= marked(job.description) else if editing h3.experience-header.edit-label(data-i18n="account_profile.work_header") Chronicle your work history div.experience-entry.edit-example-text div.duration.pull-right June, 2012 - present | UX Designer at Hooli .clearfix div Revolutionized CSS, refactored flattening, and designed all the things. div.experience-entry.edit-example-text div.duration.pull-right 1999 - 2012 | Software Engineer at Initrode .clearfix div Built a P2P streaming TPS report fulfillment system. form.editable-form .editable-icon.glyphicon.glyphicon-remove h3(data-i18n="account_profile.work_experience") Work Experience .form-group label.control-label(data-i18n="account_profile.work_years") Years of Experience input.form-control(type='text', name='root[experience]', value=profile.experience) p.help-block(data-i18n="account_profile.work_years_help") How many years of professional experience (getting paid) developing software do you have? p(data-i18n="account_profile.work_blurb") List your relevant work experience, most recent first. .editable-array(data-property='work') for job, index in (profile.work || []).concat({}) .array-item.well.well-sm .form-group label.control-label(data-i18n="account_profile.work_employer") Employer input.form-control(type='text', maxlength='100', name="root[work][#{index}][employer]", value=job.employer) p.help-block(data-i18n="account_profile.work_employer_help") Name of your employer. .form-group label.control-label(data-i18n="account_profile.work_role") Job Title input.form-control(type='text', maxlength='100', name="root[work][#{index}][role]", value=job.role) p.help-block(data-i18n="account_profile.work_role_help") What was your job title or role? .form-group label.control-label(data-i18n="account_profile.work_duration") Duration input.form-control(type='text', maxlength='100', name="root[work][#{index}][duration]", value=job.duration) p.help-block span(data-i18n="account_profile.work_duration_help") When did you hold this gig? | Ex.: "Feb 2013 - present". .form-group label.control-label(data-i18n="account_profile.work_description") Description textarea.form-control(rows=3, maxlength='140', name="root[work][#{index}][description]")= job.description p.help-block(data-i18n="account_profile.work_description_help") What did you do there? (140 chars; optional) button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save #education-container.editable-section .editable-display(title="Click to add academic experience") .editable-icon.glyphicon.glyphicon-pencil if profile.education && profile.education.length h3.experience-header img.header-icon(src="/images/pages/account/profile/education.png", alt="") span(data-i18n="account_profile.education") Education each school in profile.education if school.degree && school.school div.experience-entry div.duration.pull-right= school.duration | #{school.degree} at #{school.school} .clearfix if school.description div!= marked(school.description) else if editing h3.experience-header.edit-label(data-i18n="account_profile.education_header") Recount your academic ordeals div.experience-entry.edit-example-text div.duration.pull-right 1995 - 1997 | Ph.D. Janitorial Science at MIT .clearfix div Anonymously solved problems in algebraic graph theory. Swept floors. form.editable-form .editable-icon.glyphicon.glyphicon-remove h3(data-i18n="accont_profile.education") Education p(data-i18n="account_profile.education_blurb") List your academic ordeals. .editable-array(data-property='education') for school, index in (profile.education || []).concat({}) .array-item.well.well-sm .form-group label.control-label(data-i18n="account_profile.education_school") School input.form-control(type='text', maxlength='100', name="root[education][#{index}][school]", value=school.school) p.help-block(data-i18n="account_profile.education_school_help") Name of your school. .form-group label.control-label(data-i18n="account_profile.education_degree") Degree input.form-control(type='text', maxlength='100', name="root[education][#{index}][degree]", value=school.degree) p.help-block span(data-i18n="account_profile.education_degree_help") What was your degree and field of study? | Ex.: "Ph.D. Human-Computer Interaction (incomplete)" .form-group label.control-label(data-i18n="account_profile.education_duration") Dates input.form-control(type='text', maxlength='100', name="root[education][#{index}][duration]", value=school.duration) p.help-block span(data-i18n="account_profile.education_duration_help") When? | Ex.: "Aug 2004 - May 2008". .form-group label.control-label(data-i18n="account_profile.education_description") Description textarea.form-control(rows=3, maxlength='140', name="root[education][#{index}][description]")= school.description p.help-block(data-i18n="account_profile.education_description_help") Highlight anything about this educational experience. (140 chars; optional) button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save if user.get('jobProfileNotes') || me.isAdmin() div(class="our-notes-section" + (editing ? " deemphasized" : "")) h3.experience-header(data-i18n="account_profile.our_notes") Our Notes - var notes = user.get('jobProfileNotes') || ''; if me.isAdmin() textarea#job-profile-notes!= notes button.btn.btn-primary#save-notes-button(data-i18n="common.save") Save else div!= marked(notes) .right-column.full-height-column .sub-column #projects-container.editable-section .editable-display(title="Click to add your projects") .editable-icon.glyphicon.glyphicon-pencil if profile.projects && profile.projects.length h3(data-i18n="account_profile.projects") Projects ul.projects each project in profile.projects if project.name li if project.link && project.link.length && project.link != 'http://example.com' a(href=project.link) if project.picture .project-image(style="background-image: url('/file/" + project.picture + "')") p= project.name div!= marked(project.description) else if editing h3.edit-label(data-i18n="account_profile.projects_header") Add 3 projects ul.projects li.edit-example-text .project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')") p Cog.js div JS microlibrary to animate fixie bike cogs on ecommerce sites that sell bike hardware. li.edit-example-text .project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')") p Combjoy div Ember.js project that schedules hair stylists to ride in Ubers with you to comb your hair on your way to work. li.edit-example-text .project-image(style="background-image: url('/images/pages/account/profile/sample_project.png')") p Bass Drop div Insert a few lines of JS into your site and get a "Drop the bass!" button for your website. Plays techno. form.editable-form .editable-icon.glyphicon.glyphicon-remove h3(data-i18n="account_profile.projects_header_2") Projects (Top 3) p(data-i18n="account_profile.projects_blurb") Highlight your projects to amaze employers. for index in [0, 1, 2] - var project = (profile.projects || [])[index] || {}; .array-item.well.well-sm .form-group label.control-label(data-i18n="account_profile.projects_name") Project Name input.form-control(type='text', maxlength='100', name="root[projects][#{index}][name]", value=project.name) p.help-block(data-i18n="account_profile.projects_name_help") What was the project called? .form-group label.control-label(data-i18n="account_profile.projects_description") Description textarea.form-control(rows=6, maxlength='400', data-schemaformat='markdown', name="root[projects][#{index}][description]")= project.description p.help-block(data-i18n="account_profile.projects_description_help") Briefly describe the project. .form-group label.control-label(data-i18n="account_profile.projects_picture") Picture .project-image(style="background-image: url('" + (src=project.picture ? "/file/" + project.picture : "/images/pages/account/profile/sample_project.png") + "')") input(type="hidden", name="root[projects][#{index}][picture]", value=project.picture) p.help-block(data-i18n="account_profile.projects_picture_help") Upload a 230x115px or larger image showing off the project. .form-group label.control-label(data-i18n="account_profile.projects_link") Link input.form-control(type='url', pattern='^(ht|f)tp(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*(:(0-9)*)*(/?)([a-zA-Z0-9-‌​.?,\'/\+&%$#_=]*)?$', data-schemaformat='url', name="root[projects][#{index}][link]", value=project.link) p.help-block(data-i18n="account_profile.projects_link_help") Link to the project. button.btn.btn-success.btn-block.save-section(data-i18n="common.save") Save else if allowedToViewJobProfile .public-profile-container h2(data-i18n="common.loading") Loading... else .public-profile-container h2 span(data-i18n="account_profile.profile_for_prefix") Profile for span= user.get('name') || "Anonymous Wizard" span(data-i18n="account_profile.profile_for_suffix") img.profile-photo(src=user.getPhotoURL(256)) p To see a private user profile, you may need to log in.