Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test_sketch
README.md

README.md

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


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.


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;
}
  1. 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);
}
  1. Get the embed url in P5 editor, or generate a github static page

  2. 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>
  3. 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


A portfolio list


You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.