diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..114030d --- /dev/null +++ b/css/index.css @@ -0,0 +1,408 @@ +:root { + --dark-blue: #272f3f; + --blue: #363f54; + --red: #e2554f; + --darker-red: #ca4944; + --orange: #ed6b2c; + --light-orange: #ed9837; + --yellow: #efbe43; + --off-white: #f2f1ea; + --gray: #d3d2cc; + --toc-width: 350px; + font-family: "proxima-nova", sans-serif; + scroll-behavior: smooth; +} + +/* HEADER + NAV */ +header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + padding: 10px; + z-index: 2; + + img { + height: 52px; + } +} + +nav { + display: flex; + gap: 10px; + + a { + color: white; + text-decoration: none; + font-weight: 700; + } +} + +/* HERO SECTION */ +#landing-wrap { + height: 100vh; + min-height: 750px; + background-color: var(--dark-blue); + position: relative; +} + +#landing { + position: relative; + color: white; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + z-index: 20; + padding-top: 120px; + + h1 { + font-family: Futura, sans-serif; + font-size: 3rem; + margin-top: -20px; + } + + h2 { + font-size: 1.25rem; + width: 50%; + text-align: center; + } + + a { + display: inline-block; + background-color: var(--red); + color: white; + padding: 10px 20px; + text-decoration: none; + border-radius: 500px; + font-weight: 700; + box-shadow: 0px 0px 30px var(--dark-blue); + } + + a:hover { + background-color: var(--darker-red); + } +} + +#landing-wrap:before { + content: " "; + display: block; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.3; + background-image: url("../images/stars.avif"); + background-blend-mode: overlay; + background-repeat: no-repeat; + background-position: 50% 0; + background-size: cover; +} + +/* LANDING-FEATURES TRANSITION */ +#landing-features { + position: absolute; + bottom: 0; + width: 100%; + height: 191px; + z-index: 5; + margin-top: -180px; + margin-bottom: -10px; + background-image: url("../images/hero-features.svg"); + background-color: none; + background-repeat: no-repeat; + background-size: cover; +} + +#rock-wrapper { + position: relative; + max-width: 100%; + height: 600px; + z-index: 3; + margin-top: -500px; + margin-bottom: -10px; + background-repeat: no-repeat; + background-size: cover; +} + +@media (max-width: 750px) { + #rock-wrapper { + margin-top: -400px; + } +} + +@media (max-width: 590px) { + #rock-wrapper { + margin-top: -300px; + } +} +#rock-left { + position: absolute; + left: 0; + right: 0; + z-index: 4; + width: 100%; + height: 670px; + background-image: url("../images/red-rock.svg"); + background-color: none; + background-repeat: no-repeat; + background-size: cover; +} +#rock-right { + position: absolute; + top: 0; + right: 0; + z-index: 1; + width: 850px; + height: 670px; + background-image: url("../images/purple-rock.svg"); + background-color: none; + background-repeat: no-repeat; + background-size: cover; +} + +/* FEATURES SECTION */ + +#features { + position: relative; + background-color: var(--off-white); + padding: 70px; + display: flex; + justify-content: center; + z-index: 10; + + h2 { + font-size: 1.5rem; + line-height: 2rem; + color: var(--dark-blue); + + span { + font-weight: 400; + font-style: italic; + } + } + + p { + color: var(--blue); + } +} + +#features-wrapper { + max-width: 800px; + display: flex; + flex-direction: column; + gap: 120px; +} + +.feature { + display: flex; + flex-direction: column; + gap: 20px; + + .text { + max-width: 430px; + display: flex; + flex-direction: column; + align-items: center; + } + + p { + margin-top: 10px; + } +} + +.feature .gif { + min-width: 200px; + max-width: 300px; + height: 200px; + background-color: var(--blue); +} + +@media (min-width: 800px) { + /* CSS code for the breakpoint of 800px wide */ + + .feature { + flex-direction: row; + align-items: center; + gap: 50px; + } + + .feature .gif { + min-width: 300px; + } + + .right { + order: 2; + } +} + +/* FEATURES-CASE-STUDY TRANSITION */ +#features-case-study { + max-width: 100%; + height: 191px; + margin-bottom: -10px; + background-image: url("../images/features-case-study.svg"); + background-color: var(--off-white); + background-repeat: no-repeat; + background-size: cover; +} + +/* CASE STUDY SECTION */ + +#case-study { + background-color: var(--dark-blue); + padding: 70px; + color: white; + + /* article houses case study content */ + article { + display: flex; + flex-direction: column; + gap: 50px; + width: 90%; + margin-left: var(--toc-width); + } + + article > section { + display: flex; + flex-direction: column; + gap: 30px; + } + + img { + margin: auto; + } + + h1 { + font-size: 1.5rem; + } + + h2 { + font-size: 1.35rem; + } + + p { + display: flex; + } +} + +#case-study-content { + display: flex; +} + +/* CASE STUDY TABLE OF CONTENTS */ + +#toc { + width: var(--toc-width); + position: fixed; + top: 5rem; + + a { + display: flex; + padding: 10px; + color: white; + text-decoration: none; + } + + li { + display: flex; + align-items: center; + } + + li::before { + display: block; + /* border: 4px solid var(--red); for selected item */ + content: " "; + border-radius: 50%; + width: 0.5rem; + height: 0.5rem; + background-color: var(--blue); + } +} + +/* CASE-STUDY-TEAM TRANSITION */ + +#case-study-team { + max-width: 100vw; + height: 191px; + margin-top: -10px; + background-image: url("../images/case-study-team.svg"); + background-color: var(--dark-blue); + background-repeat: no-repeat; + background-size: cover; +} + +/* MEET THE TEAM SECTION */ +#team { + padding: 70px; + padding-top: 20px; + background-color: var(--off-white); + + h1 { + font-size: 1.35rem; + } +} + +.contact-sheet { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + margin-top: 70px; + + h2 { + font-size: 1.35rem; + } + + p { + margin-top: -20px; + } + + img { + height: 150px; + } +} + +#contact-sheet-wrapper { + display: flex; + gap: 15px; + flex-wrap: wrap; + justify-content: space-around; +} + +.contact-icons { + display: flex; + gap: 2px; + + svg { + height: 40px; + transition: 0.3s; + } + svg:hover { + fill: var(--red); + } +} + +/* TEAM-FOOTER TRANSITION */ + +#team-footer { + max-width: 100vw; + height: 191px; + margin-bottom: -10px; + background-image: url("../images/team-footer.svg"); + background-color: var(--off-white); + background-repeat: no-repeat; + background-size: cover; +} + +/* FOOTER */ +footer { + background-color: var(--dark-blue); + text-align: center; + color: var(--gray); + padding: 30px; + padding-top: 0; + font-size: 0.8rem; +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..4583cce --- /dev/null +++ b/css/reset.css @@ -0,0 +1,81 @@ +/* +---------------------------------------- +Tantek Celik's Whitepsace Reset + Author: Tantek Celik, Shane Riley + Version: (CC) 2010 Some Rights Reserved - http://creativecommons.org/licenses/by/2.0 +Description: Resets default styling of common browsers to a common base +---------------------------------------- +*/ + +ul, +ol { + list-style: none; +} +h1, +h2, +h3, +h4, +h5, +h6, +pre, +code { + font-size: 1em; +} +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +form, +body, +html, +p, +blockquote, +fieldset, +input, +dl, +dt, +dd, +figure, +figcaption { + margin: 0; + padding: 0; +} +a img, +:link img, +:visited img, +fieldset { + border: none; +} +address { + font-style: normal; +} +header, +section, +article, +nav, +footer, +hgroup, +details, +summary, +figure, +main, +div { + display: block; + box-sizing: border-box; +} +mark { + color: inherit; + background: transparent; +} +abbr { + border: none; +} +summary::-webkit-details-marker { + display: none; +} diff --git a/images/Layer_1.svg b/images/Layer_1.svg new file mode 100644 index 0000000..cde18f3 --- /dev/null +++ b/images/Layer_1.svg @@ -0,0 +1,187 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/allen.png b/images/allen.png new file mode 100644 index 0000000..fde7a39 Binary files /dev/null and b/images/allen.png differ diff --git a/images/case-study-team.svg b/images/case-study-team.svg new file mode 100644 index 0000000..5797012 --- /dev/null +++ b/images/case-study-team.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/email-icon.svg b/images/email-icon.svg new file mode 100644 index 0000000..e69de29 diff --git a/images/favicon-color.svg b/images/favicon-color.svg new file mode 100644 index 0000000..d1395b4 --- /dev/null +++ b/images/favicon-color.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/favicon.svg b/images/favicon.svg new file mode 100644 index 0000000..8154bfc --- /dev/null +++ b/images/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/features-case-study.svg b/images/features-case-study.svg new file mode 100644 index 0000000..1c8bf0b --- /dev/null +++ b/images/features-case-study.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/images/github-icon.svg b/images/github-icon.svg new file mode 100644 index 0000000..6660953 --- /dev/null +++ b/images/github-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/hero-features.svg b/images/hero-features.svg new file mode 100644 index 0000000..c1e2a2f --- /dev/null +++ b/images/hero-features.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/linkedin-icon.svg b/images/linkedin-icon.svg new file mode 100644 index 0000000..e69de29 diff --git a/images/logo-mark.svg b/images/logo-mark.svg new file mode 100644 index 0000000..a625084 --- /dev/null +++ b/images/logo-mark.svg @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..d21e8b5 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/purple-rock.svg b/images/purple-rock.svg new file mode 100644 index 0000000..08fd306 --- /dev/null +++ b/images/purple-rock.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/images/rachele.png b/images/rachele.png new file mode 100644 index 0000000..36995be Binary files /dev/null and b/images/rachele.png differ diff --git a/images/red-rock.svg b/images/red-rock.svg new file mode 100644 index 0000000..fedc6a8 --- /dev/null +++ b/images/red-rock.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/images/stars.avif b/images/stars.avif new file mode 100644 index 0000000..980cda4 Binary files /dev/null and b/images/stars.avif differ diff --git a/images/team-footer.svg b/images/team-footer.svg new file mode 100644 index 0000000..8eddc52 --- /dev/null +++ b/images/team-footer.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/tess.png b/images/tess.png new file mode 100644 index 0000000..958cf74 Binary files /dev/null and b/images/tess.png differ diff --git a/images/website-icon.svg b/images/website-icon.svg new file mode 100644 index 0000000..adeb105 --- /dev/null +++ b/images/website-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/weston.png b/images/weston.png new file mode 100644 index 0000000..92c3955 Binary files /dev/null and b/images/weston.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..624c20b --- /dev/null +++ b/index.html @@ -0,0 +1,525 @@ + + + + + + + + + + Campfire + + +
+ campfire-logo + +
+
+
+ campfire-logo +

campfire

+

open-source, self-hosted collaborative deploy previews for everyone

+ read our case study +
+
+
+
+
+
+
+
+
+
+
+
+

automatically spin up a new deploy preview for each new pull-request

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt magna id mauris molestie, ut congue + tortor hendrerit. Ut ornare gravida est sed congue. +

+
+
+
+
+
+

+ get both technical and non-technical stakeholders involved early in the development cycle +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt magna id mauris molestie, ut congue + tortor hendrerit. Ut ornare gravida est sed congue. Ut volutpat nibh sit amet eros feugiat, vel + consectetur mi fringilla. +

+
+
+
+
+
+

get context-rich feedback with session replay, browser and screen-size information

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt magna id mauris molestie, ut congue + tortor hendrerit. Ut ornare gravida est sed congue. Ut volutpat nibh sit amet eros feugiat, vel + consectetur mi fringilla. +

+
+
+
+
+
+
+

case study

+ + +
+ + +
+ +
+

1 - Introduction

+

logo

+

Campfire is an open-source, self-hosted deploy preview solution for containerized, headless frontends. Much like how an actual campfire brings people together to trade stories, it aims to be a central place for cross-functional teams to visually review and comment on proposed code changes or bug fixes early in the development cycle.

+

Campfire creates a new deploy preview upon every pull request, creating a live version of the application incorporating the changes – all accessible via a shareable link. This live version is shipped with tools that allow users to provide feedback directly on the deploy preview. The goal is to simplify collaboration between teams and address common bottlenecks that delay project timelines, by integrating seamlessly into existing development pipelines.

+ +
+ +
+

1.1 - Terms

+

A brief overview of the terms we’ll be using throughout this case study:

+
    +
  • +

    Client App - The user’s code that we pull from the repo when a new Pull Request is opened

    +
    • +
  • +

    Deploy Preview - Temporary infrastructure that powers each client app preview

    +
    • +
  • +

    Feedback Interface - The visual overlay aspect of the deploy preview where users collaborate and provide feedback

    +
    • +
+ +
+ +
+

2 - The Problem

+ +
+ +
+

2.1 - Before Deploy Previews

+

In the development lifecycle, visual feedback was often delayed until near deployment, which could lead to significant revisions and development delays due to late-discovered issues. Non-engineering stakeholders also lacked early visibility, only seeing changes in a shared staging environment. This inefficiency in developer time and lack of early testing environments meant many user experience and performance issues remained undetected until late in the cycle or post-deployment. [1]

+ +
+ +
+

2.2 - Deploy Previews

+

The advent of deploy previews, also known as ephemeral environments or preview apps, improved this process by allowing immediate changes within production-like environments, significantly shortening the feedback loop. By integrating preview environments into existing development pipelines, organizations could streamline workflows, detect problems earlier, and align products more closely with user expectations. [2]

+ +
+ +
+

2.3 - Limitations of Deploy Previews

+

Existing preview environment solutions, while adept at showcasing code changes, often lack robust collaboration features, necessitating reliance on third-party tools, which can slow down the development process. These limitations can be particularly challenging for non-engineering team members, such as project managers, designers, and/or QA personnel, who may not have experience using or have access to GitHub or other developer tools where visual feedback is given. [3]

+ +
+ +
+

3 - Existing Solutions

+

The landscape for deploy previews includes different solutions like Netlify Drawer, Vercel Comments, and Livecycle, each offering tools to facilitate the visual review process. These services come with different tradeoffs regarding hosting flexibility, open-source availability, and self-hosting capabilities.

+ +
+ +
+
+
+
+
+

meet the team

+ +
+
+ rachele +

rachele lang

+

denver, CO

+
+ + + Mail + + + + + + LinkedIn + + + + + + Personal Website + + + + + + Github + + + + + + + + + + +
+
+ + +
+ tess +

tess lockey

+

las vegas, NV

+
+ + + Mail + + + + + + LinkedIn + + + + + + Personal Website + + + + + + Github + + + + + + + + + + +
+
+ + +
+ weston +

weston ludeke

+

houston, TX

+
+ + + Mail + + + + + + LinkedIn + + + + + + Personal Website + + + + + + Github + + + + + + + + + + +
+
+ + +
+ allen +

allen lee

+

leonia, NJ

+
+ + + Mail + + + + + + LinkedIn + + + + + + Personal Website + + + + + + Github + + + + + + + + + + +
+
+
+
+ + + +