diff options
author | Xavi Ablaza <xlablaza@gmail.com> | 2017-10-16 13:12:38 +0300 |
---|---|---|
committer | Xavi Ablaza <xlablaza@gmail.com> | 2017-10-16 13:12:38 +0300 |
commit | 26679c9b8b8334f6d5abe6f857e674e3e5d3d6a6 (patch) | |
tree | 1ae377cd3c91702cc96e4b5234ab5be4e91d6d74 | |
parent | beeac83e5c034a7be1ad48a64e24f05f822ab2aa (diff) |
Wiring in progress for case study post
-rw-r--r-- | layouts/_default/single.html | 329 | ||||
-rw-r--r-- | layouts/index.html | 4 | ||||
-rw-r--r-- | layouts/partials/case_studies.html | 6 | ||||
-rw-r--r-- | layouts/partials/casestudy_main.html | 72 | ||||
-rw-r--r-- | layouts/partials/head_casestudy.html | 22 | ||||
-rw-r--r-- | layouts/partials/nav_casestudy.html | 9 |
6 files changed, 437 insertions, 5 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index e69de29..af75b57 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -0,0 +1,329 @@ +<!DOCTYPE html> +<html lang="{{ .Site.LanguageCode }}"> +<head> + {{ partial "head_casestudy.html" . }} +</head> +<body> + {{ partial "nav_casestudy.html" . }} + {{ partial "casestudy_main.html" . }} +<section class="testimonial" style="background:#fdfcfc;"> + <div class="results-content"> + <h1>"Alexis designed everything for Cope from the ground up. What I + really like about him is his true understanding and grasp of what makes a + great UI great. He knows that the user experience needs a lot of + refining from customers and he isn't shy to take feedback even if it's + critical. Alexis is one of those rare people who just gets it." + </h1> + <hr> + <img src="Cope%20%7C%20Alexis%20Collado_files/john.jpg" alt=""> + <h2>John Robert Palomo</h2> + <h3>Co-founder, Cope</h3> + </div> +</section> +<section> + <div class="content-case-study"> + <h1>The Challenge</h1> + <img src="Cope%20%7C%20Alexis%20Collado_files/persona.png" alt=""> + <p>A startup called Cope hired me to create a <strong>minimum viable product</strong> + for their new idea — tracking mental health. It was the first project + where I handled mobile app design, and I was very excited to learn the + intricacies of the iOS platform. + </p> + <p>My clients John and Kat have done some preliminary interviews + with psychologists and psychiatrists to get their side of the picture. + They have established a user persona, a business model canvas, and + several startup prep work for the product to take off. My job was to + actually create the experience for their users and make sure they are + represented in the design process. + </p> + <p>The design I created was a result of self-started questions, + validating assumptions, benchmarking, and guerilla testing. I could + have done some more usability studies early in the process, however. + </p> + <h1>Informal Competitive Analysis</h1> + <p>We checked the App Store for similar applications, and we found + out that there were no well-designed niche applications for handling + mental health. We found another app called Cope as well, but their + solution was more of a community-based social sharing platform. We saw + this as an opportunity for our own version of Cope to solve a unique + problem in the space. + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/competition-cope.jpg" alt=""> + <p>Instead, we drew inspiration from applications that feature the + design components we needed: menstrual cycle management apps that have + good summaries and calendars, emotion tracking apps, medicine tracking + apps. + </p> + <p>I used the concepts gained from these applications to study how + they understood the mental models of their own users and hopefully + replicate that kind of empathy whenever I create design decisions for + Cope. + </p> + <h1>Pivoting</h1> + <p>We had feature changes and a lot of design decisions cancelled. + Before, we had different modules for the design: forums, mental health + doctor search, messaging. + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/discarded.jpg" alt=""> + <p>We finalized the components of Cope that we wanted to build and + we decided that we wanted to focus on tracking their progress for + mental health. I had to drop some UI explorations I did for the first + version of Cope we were building. + </p> + <h1>Ideation and Feature Prioritization</h1> + <p>How do we exactly track one's progress in mental health? How do + we make sure that the design is as usable as possible? What specific + things should we track? How do we gauge someone's well-being in as few + questions as possible? How do we design an efficient system for tracking + and managing medication, and how does it tie up with the overall + well-being score and progress of the user? How do we make a + habit-forming product? + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/sketch.png" alt=""> + <p>There were so many questions we had to answer going into the + project, but we decided on four key features that will serve as the + solution to the mental health tracking problem: a self-report check-in + system, medicine tracker, calendar overview, and summary dashboard. All + modules work together to form a cohesive whole as a mental health + tracking platform. + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/summary.png" alt=""> + <h1>Assumptions and Considerations</h1> + <p><strong>The boundaries of self-reporting and analysis</strong><br> + We cannot really derive a diagnosis from the self-report component of + the application because doctors are the only ones qualified to do it. + There are so many factors that relate to mental health, and we realized + as a team that the last thing that our app would want to do is to guess. + The design decision is to tally user's progress based on his or her own + input, and we would assign a total well-being score based on the + aggregate of their answers. + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/calendar.png" alt=""> + <p><strong>Frequency of data collection</strong><br>How exactly do + we know if the emotion that was self-reported persisted all throughout + the day? As human beings, our emotions constantly change. We can't do a + self-check just once a day because the data becomes inaccurate. We + decided to have multiple check-ins as the solution. That changed the + initial design I created for the calendar screen. + </p> + <h1>User Flow Brainstorming</h1> + <img src="Cope%20%7C%20Alexis%20Collado_files/flow.png" alt=""> + <p><strong>Designing the onboarding process</strong><br>The + onboarding process starts with the user signing up or logging in and + keying important data. The user then performs his or her first symptoms + check-in. This is essential so there could be a baseline for his or her + data in the calendar and summary screens. He or she is led to an empty + state of the medicine tracker screen. From there, the user could add + medicine or check out his summary or calendar. + </p> + <h1>Hi-Fidelity Design</h1> + <p>After asking so many questions about the product and validating + our assumptions with experts, I created different screens using Sketch. + There were multiple versions and ideas that I had to validate, and + frankly, I feel like I haven't tested the solutions that I created yet. + During this phase, I got advice from a data visualization desginer if I + were designing the graphs correctly. I created a quick <a href="http://copenow.co/" target="blank">landing page as well.</a> + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/add-medicine.png" alt=""> + <p><strong>Design Intentionality</strong><br> + There are so many nuances during the high fidelity design phase + and so we kept on going back to sketching all the time. I tried to be + smarter in thinking about the usability of each design. My focus was to + be more intentional in all of the affordances I create within the + application. + </p> + <h1>Prototyping</h1> + <p>I built <a href="https://marvelapp.com/g4b64e/screen/14364499" target="blank">the prototype</a> + with Invision first but I encountered some problems with the tool. + MarvelApp proved a better choice. After building the prototype with + normal hotlinks, I believe we were ready to try it out with some users. + </p> + <h1>Guerilla Testing</h1> + <p>I tested the application with 7 college students from Ateneo de + Manila University with convenience sampling. The results revealed some + usability questions for the app. What would the users actually do after + keying in their symptoms for the day? What if they do not have + medication ready? How can we get them to come back and actually use it + again? Indeed, there are many more things to design for the product that + we have not explored yet. + </p> + <h1>Next Steps</h1> + <p>The project is actually in development now and the next step is + to conduct usability tests, install analytics and use new insights to + inform new iterations of the product. Design a better onboarding + process. Design for empty states. Design copywriting and strategy for + push notifications as trigger. Integrate a social aspect into the + application. All these will be helpful to create a better design for the + app. + </p> + <img src="Cope%20%7C%20Alexis%20Collado_files/cope-final.png" alt=""> + <p>In reality, product design is the easy part. The real problems + we're facing involve fighting a stigma around mental health, building an + open, supportive and vulnerable community, and creating a sustainable + business model for the product. + </p> + </div> +</section> +<section data-scroll-index="2"> + <div class="case-studies"> + <div class="header"> + <h1 class="title">Case Studies</h1> + <h2 class="subtitle">Selected Works</h2> + </div> + <div class="case-studies-wrapper"> + <div class="case-study-item"> + <a href="http://alexiscollado.com/cope.html"><img src="Cope%20%7C%20Alexis%20Collado_files/cope.jpg" alt=""></a> + <h4>Cope iOS App</h4> + <h5>MOBILE APP DESIGN</h5> + <p>Cope is a mobile app that allows mental health help seekers + track their symptoms and medication. I helped them create a minimum + viable product for testing. + </p> + <a href="http://alexiscollado.com/cope.html" class="read-more">Read Me</a> + </div> + <div class="case-study-item"> + <a href="http://alexiscollado.com/360pro.html"><img src="Cope%20%7C%20Alexis%20Collado_files/360.jpg" alt=""></a> + <h4>360 Pro Tracker</h4> + <h5>WEB APP DESIGN</h5> + <p>The 360 Pro Tracker is a performance tracking system for + the 360 Pro gym. It tracks an athlete’s statistics and calculates his or + her pro score. + </p> + <a href="http://alexiscollado.com/360pro.html" class="read-more">Read Me</a> + </div> + <div class="case-study-item"> + <a href="http://alexiscollado.com/tedx.html"><img src="Cope%20%7C%20Alexis%20Collado_files/tedx.jpg" alt=""></a> + <h4>TEDxADMU Website</h4> + <h5>WEB DESIGN</h5> + <p>The TEDxADMU website was a project for the Ateneo Junior + Marketing Association. It's a project where I helped them reach a 66.8% + conversion rate from scratch. + </p> + <a href="http://alexiscollado.com/tedx.html" class="read-more">Read Me</a> + </div> + </div> + </div> +</section> +<footer> + <div class="icons"> + <!--?xml version="1.0" encoding="UTF-8"?--> + <a href="mailto:lex.collado@gmail.com"> + <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch --> + <title>ui-16px-1_email-84</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-94.000000, -336.000000)" id="Group" fill="#505050"> + <g transform="translate(94.000000, 335.000000)"> + <g id="ui-16px-1_email-84" transform="translate(0.000000, 1.000000)"> + <path d="M15,0 L1,0 C0.448,0 0,0.447 0,1 L0,13 C0,13.553 0.448,14 1,14 L15,14 C15.552,14 16,13.553 16,13 L16,1 C16,0.447 15.552,0 15,0 Z M14,12 L2,12 L2,5.723 L7.504,8.868 C7.812,9.044 8.189,9.044 8.496,8.868 L14,5.723 L14,12 Z M14,3.42 L8,6.849 L2,3.42 L2,2 L14,2 L14,3.42 Z" id="Shape"></path> + </g> + </g> + </g> + </g> + </svg> + </a> + <a href="https://facebook.com/lex.collado" target="blank"> + <!--?xml version="1.0" encoding="UTF-8"?--> + <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch --> + <title>social-16px_logo-facebook</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-131.000000, -335.000000)" id="Group" fill="#505050"> + <g transform="translate(94.000000, 335.000000)"> + <g id="social-16px_logo-facebook" transform="translate(37.000000, 0.000000)"> + <path d="M15.3,0 L0.7,0 C0.3,0 0,0.3 0,0.7 L0,15.4 C0,15.7 0.3,16 0.7,16 L8,16 L8,11 L6,11 L6,8 L8,8 L8,6 C8,3.9 9.2,3 11,3 L13,3 L13,6 L12,6 C11.4,6 11,6.4 11,7 L11,8 L13.6,8 L13,11 L11,11 L11,16 L15.3,16 C15.7,16 16,15.7 16,15.3 L16,0.7 C16,0.3 15.7,0 15.3,0 Z" id="White_2_"></path> + </g> + </g> + </g> + </g> + </svg> + </a> + <a href="https://twitter.com/alexiscollado" target="blank"> + <!--?xml version="1.0" encoding="UTF-8"?--> + <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch --> + <title>social-16px_logo-twitter</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-169.000000, -336.000000)" id="Group" fill="#505050"> + <g transform="translate(94.000000, 335.000000)"> + <g id="social-16px_logo-twitter" transform="translate(75.000000, 1.000000)"> + <path d="M16,2 C15.4,2.3 14.8,2.4 14.1,2.5 C14.8,2.1 15.3,1.5 15.5,0.7 C14.9,1.1 14.2,1.3 13.4,1.5 C12.8,0.9 11.9,0.5 11,0.5 C9.3,0.5 7.8,2 7.8,3.8 C7.8,4.1 7.8,4.3 7.9,4.5 C5.2,4.4 2.7,3.1 1.1,1.1 C0.8,1.6 0.7,2.1 0.7,2.8 C0.7,3.9 1.3,4.9 2.2,5.5 C1.7,5.5 1.2,5.3 0.7,5.1 L0.7,5.1 C0.7,6.7 1.8,8 3.3,8.3 C3,8.4 2.7,8.4 2.4,8.4 C2.2,8.4 2,8.4 1.8,8.3 C2.2,9.6 3.4,10.6 4.9,10.6 C3.8,11.5 2.4,12 0.8,12 L0,12 C1.5,12.9 3.2,13.5 5,13.5 C11,13.5 14.3,8.5 14.3,4.2 L14.3,3.8 C15,3.3 15.6,2.7 16,2 Z" id="Shape"></path> + </g> + </g> + </g> + </g> + </svg> + </a> + <a href="https://dribbble.com/alexiscollado" target="blank"> + <!--?xml version="1.0" encoding="UTF-8"?--> + <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch --> + <title>social-16px_logo-dribbble</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-206.000000, -335.000000)" id="Group" fill="#505050"> + <g transform="translate(94.000000, 335.000000)"> + <g id="social-16px_logo-dribbble" transform="translate(112.000000, 0.000000)"> + <path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M10.2,7.4 C10.2,7.4 10,6.8 9.9,6.6 C11.6,5.8 12.7,4.9 13.1,4.4 C13.8,5.3 14.2,6.4 14.3,7.6 C13.5,7.4 11.7,7.1 10.2,7.4 Z M9.1,5.1 C8.3,3.7 7.4,2.5 7,1.8 C8.9,1.3 10.6,1.9 11.9,3.1 C11.5,3.6 10.7,4.4 9.1,5.1 Z M5.1,2.5 C5.5,3 6.3,4.2 7.1,5.7 C4.9,6.2 2.9,6.3 2,6.3 C2.4,4.7 3.6,3.3 5.1,2.5 Z M8,7.3 C8.1,7.5 8.2,7.7 8.3,7.8 C5.5,8.7 3.7,11 3.1,11.9 C2.3,10.8 1.8,9.5 1.8,8.2 C2.7,8.1 5.3,8 8,7.3 Z M9,9.5 C9.7,11.5 10.1,13.1 10.2,13.9 C8.1,14.6 5.7,14.2 4.4,13.1 C4.8,12.4 6.1,10.6 9,9.5 Z M11.9,12.9 C11.7,12.1 11.4,10.7 10.8,9 C11.9,8.8 13.5,9 14.1,9.2 C13.8,10.7 13,12 11.9,12.9 Z" id="Shape"></path> + </g> + </g> + </g> + </g> + </svg> + </a> + <a href="https://www.linkedin.com/in/alexander-hans-collado-jr-9444146a" target="blank"> + <!--?xml version="1.0" encoding="UTF-8"?--> + <svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch --> + <title>social-16px_logo-linkedin</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-243.000000, -335.000000)" id="Group" fill="#505050"> + <g transform="translate(94.000000, 335.000000)"> + <g id="social-16px_logo-linkedin" transform="translate(149.000000, 0.000000)"> + <path d="M15.3,0 L0.7,0 C0.3,0 0,0.3 0,0.7 L0,15.4 C0,15.7 0.3,16 0.7,16 L15.4,16 C15.8,16 16.1,15.7 16.1,15.3 L16.1,0.7 C16,0.3 15.7,0 15.3,0 Z M4.7,13.6 L2.4,13.6 L2.4,6 L4.8,6 L4.8,13.6 L4.7,13.6 Z M3.6,5 C2.8,5 2.2,4.3 2.2,3.6 C2.2,2.8 2.8,2.2 3.6,2.2 C4.4,2.2 5,2.8 5,3.6 C4.9,4.3 4.3,5 3.6,5 Z M13.6,13.6 L11.2,13.6 L11.2,9.9 C11.2,9 11.2,7.9 10,7.9 C8.8,7.9 8.6,8.9 8.6,9.9 L8.6,13.7 L6.2,13.7 L6.2,6 L8.5,6 L8.5,7 L8.5,7 C8.8,6.4 9.6,5.8 10.7,5.8 C13.1,5.8 13.5,7.4 13.5,9.4 L13.5,13.6 L13.6,13.6 Z" id="Shape"></path> + </g> + </g> + </g> + </g> + </svg> + </a> + <a href="https://medium.com/@ahvccollado" target="blank"> + <!--?xml version="1.0" encoding="UTF-8"?--> + <img src="Cope%20%7C%20Alexis%20Collado_files/medium.png" style="width: 16px;" alt=""> + </a> + </div> + <a href="http://alexiscollado.com/index.html" style="color: #574cdd + ; text-decoration: underline;">Go back home</a> +</footer> +<script src="Cope%20%7C%20Alexis%20Collado_files/jquery-1.js"></script> +<script src="Cope%20%7C%20Alexis%20Collado_files/stickUp.js"></script> +<script src="Cope%20%7C%20Alexis%20Collado_files/scrollIt.js" type="text/javascript"></script> +<script type="text/javascript"> + jQuery(function($) { + $(document).ready( function() { + $('.main-navigation').stickUp({ + //enabling marginTop with the 'auto' setting + + }); + + }); + }); + $(function(){ + $.scrollIt({ + topOffset: -70, // offste (in px) for fixed top navigation + activeClass: 'active' // class given to the active nav element + }); + }); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index 7501a30..54d00ae 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,7 +1,7 @@ <!DOCTYPE html> -<html lang ="{{ .Site.LanguageCode }}"> +<html lang="{{ .Site.LanguageCode }}"> <head> - {{ partial "header.html" . }} + {{ partial "head.html" . }} </head> <body> <div> diff --git a/layouts/partials/case_studies.html b/layouts/partials/case_studies.html index de82f15..40c06ee 100644 --- a/layouts/partials/case_studies.html +++ b/layouts/partials/case_studies.html @@ -9,9 +9,9 @@ {{ range .Pages }} <div class="case-study-item"> <a href="{{ .URL }}"><img src="img/{{ .Params.thumbnail }}" alt=""></a> - <h4>{{ .Title }}</h4> - <h5>{{ .Params.subtitle }}</h5> - <p>{{ .Description }}</p> + <h4>{{ .Params.case_title }}</h4> + <h5>{{ .Params.case_subtitle }}</h5> + <p>{{ .Params.case_description }}</p> <a href="{{ .URL }}" class="read-more">Read Me</a> </div> {{ end }} diff --git a/layouts/partials/casestudy_main.html b/layouts/partials/casestudy_main.html new file mode 100644 index 0000000..998ec04 --- /dev/null +++ b/layouts/partials/casestudy_main.html @@ -0,0 +1,72 @@ +<section> + <div class="main-case-study"> + <h1 class="title" style="text-align: center;">{{ .Params.case_title }}</h1> + <h2 class="subtitle" style="text-align: center;">{{ .Params.case_subtitle }}</h2> + <img src="{{ .Site.BaseURL }}img/{{ .Params.case_feature_img }}" alt=""> + <p class="summary">{{ .Params.case_summary }}</p> + <div class="case-details"> + <div class="case-details-item"> + <p><strong>Team</strong> + {{ range .Params.team }} + <br>{{ . }} + {{end}} + </p> + </div> + <div class="case-details-item"> + <p><strong>My Role</strong> + {{ range .Params.roles }} + <br>{{ . }} + {{ end }} + </p> + </div> + <div class="case-details-item"> + <p><strong>Methods</strong> + {{ range .Params.methods }} + <br>{{ . }} + {{ end }} + </p> + </div> + </div> + <h1 style="color: black; font-family: merriweather; font-size: 26px; line-height: 1.7em; margin-top: 20px;">{{ .Description }}</h1> + <div class="case-links"> + <div class="link-div"> + <a href="https://marvelapp.com/g4b64e/screen/14364499" target="blank" class="case-detail-link"> + <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16"> + <g> + <path fill="#5f4feb" d="M8,14c4.707,0,7.744-5.284,7.871-5.508c0.171-0.304,0.172-0.676,0.001-0.98C15.746,7.287,12.731,2,8,2 + C3.245,2,0.251,7.289,0.126,7.514c-0.169,0.303-0.168,0.672,0.002,0.975C0.254,8.713,3.269,14,8,14z M8,4 + c2.839,0,5.036,2.835,5.818,4C13.034,9.166,10.837,12,8,12c-2.841,0-5.038-2.838-5.819-4.001C2.958,6.835,5.146,4,8,4z"></path> + <circle data-color="color-2" fill="#5f4feb" cx="8" cy="8" r="2"></circle> + </g> + </svg> + View Prototype + </a> + </div> + <div class="link-div"> + <a href="http://copenow.co/" target="blank" class="case-detail-link"> + <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16"> + <g> + <path fill="#5f4feb" d="M8,14c4.707,0,7.744-5.284,7.871-5.508c0.171-0.304,0.172-0.676,0.001-0.98C15.746,7.287,12.731,2,8,2 + C3.245,2,0.251,7.289,0.126,7.514c-0.169,0.303-0.168,0.672,0.002,0.975C0.254,8.713,3.269,14,8,14z M8,4 + c2.839,0,5.036,2.835,5.818,4C13.034,9.166,10.837,12,8,12c-2.841,0-5.038-2.838-5.819-4.001C2.958,6.835,5.146,4,8,4z"></path> + <circle data-color="color-2" fill="#5f4feb" cx="8" cy="8" r="2"></circle> + </g> + </svg> + View Landing Page + </a> + </div> + <div class="link-div"> + <a href="http://alexiscollado.com/cope.pdf" target="blank" class="case-detail-link"> + <svg style="top: 1.8px !important;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16"> + <g> + <polygon data-color="color-2" fill="#5f4feb" points="9,8 9,1 7,1 7,8 4.6,8 8,12 11.4,8 "></polygon> + <path fill="#5f4feb" d="M15,16H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h3v2H2v7h12V7h-2V5h3c0.6,0,1,0.4,1,1v9C16,15.6,15.6,16,15,16z + "></path> + </g> + </svg> + Download Feature Sets + </a> + </div> + </div> + </div> +</section>
\ No newline at end of file diff --git a/layouts/partials/head_casestudy.html b/layouts/partials/head_casestudy.html new file mode 100644 index 0000000..3238fd3 --- /dev/null +++ b/layouts/partials/head_casestudy.html @@ -0,0 +1,22 @@ +<meta charset="UTF-8"> +<meta http-equiv="X-UA-Compatible" content="ie=edge"> +<title>{{ .Params.Title }}</title> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<meta name="theme-color" content="#574CDD"> + +<!-- desc --> +<meta name="description" content="{{ .Description }}"> +<meta property="og:description" content="{{ .Description }}"> +<meta name="twitter:description" content="{{ .Description }}"> + +<!-- image --> +<meta property="og:image" content="{{ .Params.Thumbnail }}"> +<meta name="twitter:image" content="{{ .Params.Thumbnail }}"> + +<link rel="icon" href="{{ .Site.BaseURL }}img/favicon.png" type="image/x-icon"> +<link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.png" type="image/x-icon"> + +<link rel="stylesheet" href="{{ .Site.BaseURL }}css/css.css" > +<link rel="stylesheet" href="{{ .Site.BaseURL }}css/final.css"> +<link rel="stylesheet" href="{{ .Site.BaseURL }}css/normalize.css"> diff --git a/layouts/partials/nav_casestudy.html b/layouts/partials/nav_casestudy.html new file mode 100644 index 0000000..3b83a82 --- /dev/null +++ b/layouts/partials/nav_casestudy.html @@ -0,0 +1,9 @@ +<nav class="main-navigation stuckMenu"> + <a href="http://alexiscollado.com/index.html"> + <img class="logo" src="{{ .Site.BaseURL }}img/logo.png" alt="My Portfolio"> + </a> + <h5>{{ .Params.nav_heading }}</h5> + <div class="sub-navigation"> + <a href="{{ .Site.BaseURL }}" class="main-navigation-link" data-scroll-goto="2">Case Studies</a> + </div> +</nav>
\ No newline at end of file |