Savvy Portfolio

Check out the demo.

Find the template Here.

How to use this Template

1. Click the template link above.

2. Duplicate the template in the top right corner.

3. Use your new Notion Url for the page in the Potion Dashboard when setting up the site.

4. After creating the site, in the Potion dashboard under Snippet Injection, copy and paste the following code 👇

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;600;700;800;900&display=swap" rel="stylesheet">

<style type="text/css">
* {
  text-decoration: none !important;
  outline: none !important;
}
.notion-page-content {
  padding-bottom: 100px;
}
.notion {
  --transition: all 0.4s cubic-bezier(0.8, 0.04, 0.4, 1) !important;
  --font-sans: "Inter", serif !important;
  --color-text-default-light: #808c99 !important;
  --color-border-default: #e9e8ed !important;
  --color-bg-default: #f5f7fa !important;
  --color-text-gray: #808c99 !important;
  --color-border: #bcbec8 !important;
}
:root {
  --bg-color: #f5f7fa;
  font-family: var(--font-sans) !important;
  --start: #26aeff;
  --mid: #9c49d6;
  --end: #1572dc;
  --a: 0%;
  --b: 75%;
  --c: 150%;
  --d: 200%;
}
.notion.notion-app {
  font-family: var(--font-sans) !important;
}
.notion-full-page {
  padding-bottom: 0;
}
.notion-header {
  display: none;
}
.notion-title {
  display: none;
}
.notion-hash-link {
  display: none;
}
.not-notion-full-width {
  width: auto;
  max-width: 1280px;
  marign-top: 0 !important;
}
.notion-page-no-cover {
  margin-top: 0 !important;
}
.notion-h1 {
  font-size: 4.2em;
  font-weight: 600;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  position: relative;
}
.notion-h1 span {
  max-width: 900px;
  display: inline-block;
  background-image: linear-gradient(
    to right,
    var(--mid) var(--a),
    var(--start) var(--b),
    var(--mid) var(--c),
    var(--end) var(--d)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  fill-color: transparent;
}
.notion-h1::before {
  animation: bounce 1s ease infinite;
  bottom: 2rem;
  color: #fff;
  content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="m72.082 53.332l-17.914 17.918v-58.75h-8.3359v58.75l-17.914-17.918-5.8359 5.8359 27.918 27.914 27.918-27.914z" fill="blueviolet"/></svg>');
  font-size: 2rem;
  height: 4rem;
  left: 20px;
  letter-spacing: -1px;
  line-height: 4rem;
  margin-left: -3rem;
  opacity: 0.8;
  position: absolute;
  text-align: center;
  width: 6rem;
}
.notion-h2 {
  margin-top: 4em;
  color: #836be3;
  font-size: 2em;
}
.notion-text {
  color: #9e9ba8;
  margin-bottom: 24px;
}

.notion-hr {
  border-color: transparent;
}
.notion-asset-wrapper {
  margin: 0;
  margin-bottom: 30px;
}
.notion-row {
  margin-bottom: 30px;
}
.notion-asset-wrapper-image {
  /* margin-bottom: 30px; */
}

.notion-column {
  padding-top: 0;
  padding-bottom: 0;
}

.notion-quote {
  border: none;
  background: #fff;
  width: 100%;
  min-height: 100px;
  padding: 100px 120px;
  font-weight: 300;
  font-size: 28px;
  text-align: center;
  /* margin-bottom: 20px; */
  /* margin-top: 20px; */
  position: relative;
  margin: 0;
  margin-bottom: 30px;
}
.notion-quote::before {
  content: "\201C";
  font-size: 200px;
  position: absolute;
  top: -40px;
  right: 25px;
  height: 300px;
  width: 45px;
  color: #f5f7fa;
  font-family: Georgia, "Times New Roman", Times, serif;
}

@keyframes bounce {
  50% {
    transform: translateY(-50%);
  }
}

@media only screen and (max-width: 1100px) {
  .notion-h1 {
    font-size: 3em;
    margin-left: 50px;
  }
}

@media only screen and (max-width: 600px) {
  .notion-h1 {
    font-size: 1.8em;
    margin-left: 20px;
    padding-right: 20px;
  }

  .notion-h1::before {
    bottom: 4rem;
    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 50 120" height="50px" width="50px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="m72.082 53.332l-17.914 17.918v-58.75h-8.3359v58.75l-17.914-17.918-5.8359 5.8359 27.918 27.914 27.918-27.914z" fill="blueviolet"/></svg>');
    left: 10px;
    letter-spacing: -1px;
    line-height: 4rem;
    margin-left: -3rem;
  }

  .notion-quote {
    min-height: 100px;
    padding: 50px;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    /* margin-bottom: 20px; */
    /* margin-top: 20px; */
    position: relative;
  }
}

.notion-list-disc {
  list-style: none;
  margin-left: 30px;
  font-size: 24px;
  font-weight: 600;
  margin-top: 20px;
}
.notion-list-disc a {
  color: #29aeff;
  text-decoration: none;
  border-bottom: none;
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: color 0.3s;
}
.notion-list-disc a:hover {
  color: #836be3;
}
.notion-list-disc a::before {
  border-top: 2px solid #836be3;
  content: "";
  position: absolute;
  top: 50%;
  left: -70px;
  bottom: 0;
  width: 60px;
  z-index: -1;
  transition: transform 0.3s, opacity 0.3s;
}
.notion-list-disc a:hover::before {
  border-color: #836be3;
  transform: translateX(70px);
  opacity: 0;
}

</style>