Squarespace Cheatsheet Flyby

In this flyby, the first 5 to 10 minutes, we will go through some basic settings for Squarespace, which is alternative way to Wordpress and github static page.

Then, we will learn some quick and dirty ways to set up your portfolio and ITP blog separately, set up analytics, embed creative coding sketches, embed PDF resume and customize your own template.

This Flyby will also cover some tools and resources to make your portfolio. It's time to start your 100 days of internship application.

Problems to solve

---

1. How to set up a well-designed personal portfolio website without strong design and programming skills.

2. How to find out who from where visit my blog or portfolio, track their footprints (and how to not be found out I check someone's website XD).

3. How to embed full screen creative coding sketches to my page and won't affect the design framework.

4. How to embed my PDF resume

5. How to make a grid page and sort your projects by category

6. How to make a dropdown on your banner

Testing Material

---

• Squarespace 14 days free trial account
• Google analytics account
• P5 editor sketch: https://alpha.editor.p5js.org/embed/S1VOZL12x
• github static page: https://wenqili.github.io/flyby-squarespace/test_sketch/
• a PDF file

Why Squarespace, and premade template recommendation

---

• Why:

  • Keep portfolio and blog separately on one platform professionally
  • Less junk information, good user experience, well-designed template, smooth learning curve and saving time
  • mobile editing, now I do all my blog posts on subway

• Template:

  • 3 factors to consider: Navi Bar, Index/Project function, Blog
  • York: perfect for grid layout
  • Wells: perfect side navi bar
  • Forte: one of the most popular one. Easiest way to make a full screen design
  • Alex: good full screen stack layout

• Student discount: after 50% off, it's 72$ per year for personal account, 108$ per year for business account, with a custom domain. Strongly suggest the business account, it has unlimited pages.

Why Google analytics, and link it to your Squarespace account.

---

• keep track of your website, and get valued information
• Squarespace Help

Basic SEO settings

---

in flyby demo

Customize your template by injecting css/JavaScript code to page header.

---

• inject to whole website/single page
• inject css

<style type="text/css">
   body {
     background-color: green;
   }
 </style>

• inject HTML(iframe, most used)

<iframe
  src="https://alpha.editor.p5js.org/embed/S1VOZL12x"
  style="position:fixed;
  display:block;
  top:0px;
  left:0px;
  bottom:0px;
  right:0px;
  width:100vw;
  height:100vh;
  border:none;
  margin:0;
  padding:0;
  overflow:hidden"></iframe>

• inject JavaScript: upload your script first(in flyby demo), the url will start with /s/, then use this code,

<script type="text/javascript" src="/s/myScript.js"></script>

Create a single-page cover page and embed your best project documentation.

---

1. Go to PAGES/"+"/Cover Page, and choose a layout, here I use cover.

2. Usually a cover page is the landing page, set it as a home page and add a button link the home page.

3. To embed a P5 Sketch as the background, remove the background image or video first, then inject the following code to the page header:

<iframe src="Here put your sketch url" style="
position:fixed;
display:block;
top:0px; left:0px; bottom:0px; right:0px;
width:100vw;
height:100vh;
border:none;
margin:0; padding:0;
overflow:hidden"></iframe>

<style type="text/css">
div .sqs-slide {
  position:initial}
  </style>

Embed full screen P5 sketch or sketch blocks under your template by add code block.

---

1. Have your sketch files in P5 online editor or github. In your css, add following lines to make sure it doesn't have a scroll bar

html, body {
  margin: 0;
  padding: 0;
  overflow:hidden;
}

2. Modify the code to make sure the canvas full screen and responsive, here is how to do it in P5.js

//p5
function setup(){
  createCanvas(windowWidth, windowHeight)  
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

3. Get the embed url in P5 editor, or generate a github static page

4. In your Squarespace page, add a code block with the following HTML code and do not check "display source",for full screen embed:

   <iframe src="your sketch url" style="position:fixed;
   top:0px; left:0px; bottom:0px; right:0px;
   width:100%; height:100%;
   border:none;
   margin:0;
   padding:0;
   overflow:hidden;
   z-index:99;"></iframe>

5. for simple block embed

   <iframe src="your sketch url" style="display:block;
   top:0px; left:0px; bottom:0px; right:0px;
   width:100%; height:100vh;
   border:none;
   margin:0; padding:0;
   overflow:hidden"></iframe>

Customize grid showcase page

---

in flyby demo

Sort your projects by positions/titles

---

• index or folder
• archive function
• summary function

Embed PDF resume under your template

---

Upload your resume PDF to Squarespace first, it will be stored to the directory /s/yourFile

use following code to embed PDF:

<iframe src="/s/yourPDFURL#zoom=70" style=" display:block;
width:100%; height:100vh;
border:none; margin:0; padding:0; overflow:hidden;"></iframe>

Other Topics

---

• search engine optimization
• editing blogs in mobile app
• mobile ui design
• navigation styles
• aesthetics of web design
• font settings
• custom interactions through css

Documentation/case study tools and templates

---

• Text: grammerly / 1checker
• Font: Font Pair
• color: coolers
• CSS: animista
• GIF: GIF brewery 3
• Video: iMove or VUE
• ICON: noun project
• Documentation: casestudy

A portfolio list

---

• Full Screen: Claudio Guglieri(Designer), Evan You(Front-end Developer)
• Grid: Gene Kogan(Creative technologist), Yotam Mann(Musician)
• Side Bar: Ben Light(Maker)
• Side Bar + Grid: Sarah Rothberg(VR Director), Gabe BC(Artist)
• Side Bar + Full Screen: Franklin Zhu(Digital Generalist)
• Grid + Full Screen: Edan Kwan(Creative technologist)