Author: gabe_t

How to Set Up Your Portfolio Site

| gabe_t

Read this first to Activate your U.OSU.EDU account

  1. Activate your u.osu.edu site.
  2. Learn about Navigating U.OSU.

Navigate to the U.OSU dashboard and follow the below steps to set-up your site as a portfolio site.

Scroll down to watch the video walk through of these steps.

  1. Change the site’s theme to Orton.
  2. Go to Settings > Reading. Set the Site Visibility to “Discourage search engines from indexing this site.”
  3. Activate the Jetpack Plugin. See Jetpack for details on the Jetpack plugin.
    1. From the Jetpack page on U.OSU, click Set up Jetpack. This SHOULD take you directly to the setup process for Jetpack. My experience is that this rarely works on the first click and will show an error several times before working. Just keep trying.
    2. Once you get the the Jetpack Setup screen, create a WordPress.com log-in by establishing a username and password. Save this info somewhere in case you need it later. Follow the prompts to link Jetpack to your account. You may see an option to select a plan type. If you do, select Start with Free when it asks what plan you’d like.
    3. Navigate back to your u.osu site because Jetpack and WordPress just abandoned you in an unfamilar site and interface. Sigh in exasperation at a poor user experience and vow to rid the world of such issues in your future as a designer.
    4. Note: this will change your URL from ending with name.## to name-##. (Example: buckeye.1 becomes buckeye-1). This is ok, just keep track of what your website URL is by clicking “View Site” from the dashboard.
  4. Enable Portfolios in Jetpack
    1. From the Jetpack page on U.OSU, click Settings. Scroll down to “Custom content types” and turn on the button next to Portfolios.
  5. Click on Pages in the left navigation
    1. Edit the “Sample Page” to become your “About” page. Don’t forget to update the “permalink.”
    2. Create a New Page and call it “Portfolio”. In the Page Attributes widget, set the template to “Default Template”. In the text editor for the page, add  the word “portfolio” with brackets [ ] around it. Publish the page. Don’t do anything else to this page.
    3. Create a New Page. Call it “Process Journal.” Publish it. Don’t do anything else to this page.
  6. Update Settings
    1. Under General:
      1. Change Site Title to your preferred first and last name. Ex. “Gabe Tippery” as opposed to “Gabriel Tippery”
      2. Set the tag line as “A Design Foundations Portfolio”
      3. Set the Timezone to a city in the Eastern timezone (like New York). You can also choose to modify your Date and Time Formats here.
      4. Click Save Changes.
    2. Under Writing:
      1. Scroll down to “Portfolio Projects” where it says “You theme supports jetpack-portoflio” and set it to 25 projects shown per page.
      2. Click Save Changes.
    3. Under Reading:
      1. From the “Your Homepage Displays” section, select A static page. There are two drop-down menu choices:
        • Homepage – Choose the page “Portfolio” to be your new homepage.
        • Posts page – Choose the page “Process Journal” to be your new blog post page.
      2. Click Save Changes.
    4. Under Discussion:
      1. Turn Comments Off.
      2. Click Save Changes.
  7. Remove the sidebar from the portfolio page. Click on Appearance in the left nav, then Widgets in the sub menu. Delete each widget from the Sidebar panel in the upper right.

Video how-to:

You are done with the hard part and 90% of the setup.

Now we have to start creating content. After we get a few types of content going, we can come back and bring more structure and clarity to our menus and sidebars.

For now, you can just start experimenting with the following:

  • Working with Posts – Posts are dynamic information, usually displayed in reverse-chronological order with the most recent post at the top of the page. Common elements of a post include: title, published date, author information, content, comments, tags and categories. If you have done all the above correctly, these should appear under your menu item “Process Journal.”
  • Creating Projects – Each project may represent a specific collection of work or an individual piece of work. Projects function similarly to posts with two primary exceptions: the individual project page does not contain widgets and project featured images display on the portfolio page.

What is U.OSU.EDU?

| gabe_t

U.OSU is the university’s easy-to-use professional website platform. Share your work and explore sites from throughout The Ohio State community. “U” because it’s about the work you do at this university.

What is it?

U.OSU provides web space to support professional and educational activities at The Ohio State University. Students, faculty and staff use U.OSU.EDU to share independent work, host course assignments, enhance project visibility, communicate within groups, and represent organizations.

What’s under the hood?

For those who want the technical details, the service is a multi-site WordPress installation hosted by EduBlogs. It provides a flexible and easily accessible platform for individuals to post about their work. Sites can contain both static pages and chronologic blog posts.

How can I use it?

U.OSU is designed to support professional sites for groups and individuals affiliated with Ohio State. What does that mean? Here are some examples:

  • A professional profile that highlights scholarly, pedagogical, and service activities, with pages for a biographical statement, curriculum vitae, teaching overview and course listing, research statement and more.
  • A portfolio of projects, both in process and completed, that can be used to demonstrate skills and experiences. Regular posts can share progress on ongoing projects in the field or in the classroom.
  • A forum to enable sharing amongst community members who might otherwise be separated geographically or by discipline.
  • A site to host and share resources, notes, and collections of digital materials.
  • A site created for use in a class or as a group project (assuming the site is ultimately owned and managed by one individual).

Specific information listed in our Terms of Service.

Where do I go for help?

If you need help the Resource Center is your first stop, with tutorials and answers to frequently asked questions. If you need additional support or can’t find what you are looking for, email u@osu.edu or call 8-HELP (614–688-HELP).

CSS Style Test

| gabe_t

The following is just a test of the embedded CSS for the site theme. The goal was to easily and quickly have a frame of reference when selecting and formatting various things as I create posts, pages, and projects on this site.

The code inserted is from: https://www.granneman.com/webdev/coding/htmlcsstestpage

Heading One

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Two

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Three

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Four

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Five

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

Heading Six

This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap. If not, we can repeat it over and over again until it does wrap. This is a paragraph of text that should be long enough to wrap.

This is italic text, made with em. This is italic text as well, made with i.

This is bold text, made with strong. This is bold text as well, made with b.

This is underlined text, made with u. This is inserted text, made with ins.

This is deleted (strikethrough) text, made with strike. This is also strikethrough text, but made with s. This is deleted text, made with del.

This is computer code, made with code. This is teletype text, made with tt.

This is text the user is supposed to enter in, or keyboard, made with kbd. This is a variable, made with var. This is sample program output, made with samp.

This is small text, made with small. This is big text, made with big.

This is a citation, made with cite. This is a short quotation in the middle of a sentence, made with q.

This sentence ends with a superscript. This sentence ends with a subscript.

This is an abbreviation, made with abbr: WWW. This is an acronym, made with acronym: NATO. This is a term that needs a definition, made with dfn: Yog-Sothoth.

This is an unordered list:

  • Koyaanisqatsi
  • Powaqqatsi
  • Naqoyqatsi

This is an ordered list:

  1. Larry
  2. Moe
  3. Curly

This is a definition list:

Defintion Term
Definition data defining the previous term
Another Definition Term
Definition data defining the previous term

This is an address with breaks:

John Q. Public123 Main StreetAnywhere, ST 12345

This is a long quotation inside a blockquote:

“I love songs about horses, railroads, land, judgement day, family, hard times, whiskey, courtship, marriage, adultery, separation, murder, war, prison, rambling, damnation, home, salvation, death, pride, humor, piety, rebellion, patriotism, larceny, determination, tragedy, rowdiness, heartbreak, and love. And Mother. And God.” ~ Johnny Cash

This is pre-formatted:

Start in column one.
         Then indent to column ten.
    Then back five spaces.

Here’s a table with a border, a caption, colgroups, cols, thead, tfoot, & tbody:

This is a table caption, made with caption
Table Header 1 Table Header 2 Table Header 3
Table Footer 1 Table Footer 2 Table Footer 3
TD 1.1 TD 1.2 TD 1.3
TD 2.1 TD 2.2 TD 2.3
TD 3.1 TD 3.2 TD 3.3