Code Monkey home page Code Monkey logo

hugo-theme-terminal's Introduction

Terminal Extended

This is the theme I use for my personal website. It is a fork of the amazing Hugo theme named Terminal by panr, adding more features and some differences that I need.

Terminal Extended Terminal Extended

Real life demo - https://luis.zip

List of Features:

List of differences

  • Language menu always visible below the top header bar
  • Posts list is simpler, not being expanded and therefore not showing content
  • Customisable dates for the post list (set ListDateFormat to your desired format in config.toml)
  • Allow overriding theme with Sass (create a file assets/css/override.scss)
  • Hide footer default credit (set HideDefaultCredit to true in your config.toml)

Quick setup

Please visit the original fork page for the complete readme with the basic instructions of how to use the base theme.

Visit the folder exampleSite to check the code for an example site

Features

Portfolio

A portfolio works as any normal section would. Consider the example below, of a section called "portfolio" with three items:

- exampleSite
-- content
--- portfolio
---- _index.md
---- portfolio_item1.md
---- portfolio_item2.md
---- portfolio_item3.md

In the \_index.md file to your section, add the following to the header: type = "portfolio"

Then, for each portfolio item, add an image to your static files. I recommend them being square as per the example screenshots, although other resolutions might work too (they might look funky tho 😶). Link the images to your portfolio items by adding the following to their header: portfolioCover = "path_to_image.png"

If you want to add icons, add them to the header too: portfolioIcons=["icon1.svg", "icon2.svg", "icon3.svg"]

I recommend getting icons from SimpleIcons

Using the steps above, you can have as many portfolios in your site as you want. As an example, you could have a "Photography" section with photos and a "Drawings" with drawings.

Sub sections

You can also organise your portfolio with subsections. Just add them as subfolders of the original section. For instance:

- exampleSite
-- content
--- portfolio
---- Mona Lisas
----- _index.md
----- portfolio_item1.md
----- portfolio_item2.md
----- portfolio_item3.md
---- Earrings
----- _index.md
----- portfolio_item1.md
----- portfolio_item2.md
----- portfolio_item3.md

Terminal Portfolio with subsections

Link List

Any page can be rendered as a Link List, including the index page if you so wish. It also supports social media links and text containers.

Terminal Link List

You'll need to create a data file to save the links. It should be under the data folder. Here's an example, made in json, called linklist.json. The parameters should be self-explanatory:

{
    "Name": "My Link List",
    "Description": "Link List of Luís Arnaldo",
    "Image": "../photo.jpg",
    "Socials": [
        {
            "Link": "https://instagram.com/Louisload",
            "Icon": "/icon/instagram.svg",
            "AltText": "Instagram"
        },
        {
            "Link": "https://www.twitter.com/Louisload",
            "Icon": "/icon/twitter.svg",
            "AltText": "Twitter"
        }
    ],
    "List": [
        {
            "Type": "text",
            "Content": "Helloooo! and welcome to my personal web space ✨🌈  \nI'm a dev who likes to write esoteric code, compose out-of-tempo music, produce weird films and draw petit pixel art monsters. 💾 🎹 🎞️ 👾",
            "HtmlClasses": "anotherClassSoICanOverrideStyles"
        },
        {
            "Type": "link",
            "Link": "https://distrokid.com/hyperfollow/louisload/memrias-de-peixe-2",
            "Icon": "/lt/memorias.jpg",
            "AltText": "Memórias de Peixe",
            "Content": "My latest album: Memórias de Peixe",
            "OpenNewTab": true
        },
        {
            "Type": "link",
            "Link": "https://demising.faith",
            "Icon": "/lt/demisingfaith.jpg",
            "AltText": "Demising Faith",
            "Content": "Demising Faith",
            "OpenNewTab": true
        },
        {
            "Type": "link",
            "Link": "https://youtube.com/@louisload",
            "Icon": "/icon/film.svg",
            "AltText": "Film Reel",
            "Content": "Weird films",
            "OpenNewTab": true
        }
    ]
}

Then, on the page that you want to be a link list, add the following to the header:

type = "link-list"
linkListData = "linklist"

hugo-theme-terminal's People

Contributors

panr avatar louisload avatar thunder33345 avatar florianbieser avatar cizordj avatar t2hhbmek avatar klikini avatar blakeashleyjr avatar kitchvx avatar larsks avatar kylestratis avatar qulogic avatar drew-morris avatar domgoodwin avatar sir-photch avatar polaricentropy avatar antoniogarosi avatar icy-comet avatar hubba1987 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.