Code Monkey home page Code Monkey logo

hugo-creative-portfolio-theme's Introduction

Creative portfolio theme for hugo

Build Status Join the chat at https://gitter.im/hugo-creative-portfolio-theme/Lobby Buy me a coffee

Creative portfolio is a clean and elegant template mainly made for designers and creatives but can be easily transformed into a generic website.

This Hugo theme was ported from Bootstrapious for training and fun. It has a very nice landing page, a comments system by Disqus, contact forms by Formspree and Google Analytics.

screenshot

Installation

Go to the directory where you have your Hugo site and run:

mkdir themes
cd themes
git clone https://github.com/kishaningithub/hugo-creative-portfolio-theme.git
rm -rf hugo-creative-portfolio-theme/.git

For more information read the official setup guide of Hugo.

Configuration

After installing the Creative portfolio theme successfully, i recommend you to take a look at the exampleSite directory. You will find a working Hugo site configured with the Creative portfolio theme that you can use as a starting point for your site.

First, let's take a look at the config.toml. It will be useful to learn how to customize your site. Feel free to play around with the settings.

Style

You can change the color of the theme by modifying the following key.

style = "default"

Available options are: default (pink), blue, green, pink, red, sea, violet.

More style customizations?

Create css/custom.css in your <<base dir>>/static folder and add all your custom styling.

Comments

The optional comments system is powered by Disqus. If you want to enable comments, create an account in Disqus and write down your shortname.

disqusShortname = "your-disqus-short-name"

You can disable the comments system by leaving the disqusShortname empty.

Google Analytics

You can optionally enable Google Analytics. Type your tracking code in the ``.

googleAnalytics = "UA-XXXXX-X"

Leave the googleAnalytics key empty to disable it.

Make the contact form working

Since this page will be static, you can use formspree.io as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Begin the setup by following the steps below:

  1. Enter your email address under 'email' in the config.toml
  2. Upload the generated site to your server
  3. Send a dummy email yourself to confirm your account
  4. Click the confirm link in the email from formspree.io
  5. You're done. Happy mailing!

Nearly finished

In order to see your site in action, run Hugo's built-in local server.

hugo server

Now enter localhost:1313 in the address bar of your browser.

Deployment

Base theme version (From bootstrapious)

  • 1.0

Contributing

Have you found a bug or got an idea for a new feature? Feel free to use the issue tracker to let me know. Or make directly a pull request.

License

This port is released under the MIT License. Check the original theme license for additional licensing information.

Thanks

Thanks to Steve Francia for creating Hugo and the awesome community around the project. And also thanks to Bootstrapious for creating this awesome theme.

hugo-creative-portfolio-theme's People

Contributors

5tan avatar adrianovieira avatar amnerip avatar anapaulagomes avatar andrewcemil avatar bep avatar conoria avatar gaetawoo avatar georgewl avatar gitter-badger avatar ifraixedes avatar jamesemann avatar kaitlinnewson avatar kdabir avatar kishaningithub avatar nazareno avatar nununo avatar professorlogout avatar realorangeone avatar tilsammans avatar tommorris avatar xennis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hugo-creative-portfolio-theme's Issues

Link new pages to site

I cannot find a way to link new page to the website I built with this theme. Can you help explain the process?

Images are distorted on web server

On my localserver everything looks good. When I deploy (the public folder) to dreamhost www.namitamohandas.com , all the images have weird coloured bars across them. I've optimised the images to the container width.
The images are loaded by an img partial.

I've tried various kind of image profiles and optimisation techniques but nothing seems to solve it. Help

Keeping homepage URL as base URL

With the recent changes to allow for multiple portfolios, the theme now forces the homepage to be a subfolder. For example, the homepage of the example site is no longer https://example.org. Instead, the user is redirected to https://example.org/portfolio/.

I would prefer it if the homepage did not redirect to a subfolder, since I don't like the way it looks in the address bar. I know this is a small thing, but it also has a side effect of causing Hugo to set the homepage's .Title variable (page title in the browser tab) to the pluralized folder name. For example, if the homepage's folder is "portfolio", as it is for the example site, the page title will be "Portfolios". In order to change this, I have to add an _index.md file inside the "portfolio" folder with contents

+++
title = "Creative Portfolio"
+++

to keep the homepage's page title consistent with the website name. In my humble opinion, this is not a preferable default behavior for the theme.

What do you think? Is there a way to have multiple portfolios, and yet also keep the homepage URL as the base URL?

How do you add code ?

I understand you can add ~~~ or ``` to highlight code block but how to add a js code block to show output .

Description in .Rmd frontmatter not working in portfolio

I can't get 'description' in the frontmatter of an Rmd file to show up on the main page of my page - it just shows the first few lines of the content. I have included in the .Rmd file the line description - "blah blah blah" but when I open up the .xml files to see what's going on, it is pulling the description as well as the first few lines of text from the body. This is making the portfolio items have very long text on the homepage.

Theme not applied on deployment

I'm deploying to github pages (tried both via the /docs folder as well as gh-pages branch)
While a local hugo server runs the site perfectly,
building the site using hugo and deploying the build to the web, doesn't apply the theme at all, all the HTML files are extremely out of sync.

Edit contact form in Hugo

Fist of all, this is a great template, thanks!

I want to change the language in the contact form fields. I could not find any place to do that other than in the .html file. Is there a way to do that while still in the development phase?

David

new installation - blank page

Hi,

I tried to install the theme in a new hugo website, but the webpage is still blank.
hugo version: Hugo Static Site Generator v0.47.1/extended linux/amd64 BuildDate: 2018-09-25T03:41:10Z

reproduce:
shell:

- hugo new site test
- cd test
- git clone https://github.com/kishaningithub/hugo-creative-portfolio-theme.git
- rm -rf hugo-creative-portfolio-theme/.git
- cp exampleSite/content, static and config.toml into /test

if I inspect html rendered page, no error, no content ...

Any idea?

Hk

Add "black" as optional color scheme?

Hello kishaningithub,

Thank you for porting this great theme for hugo. I've really loved working with. I was wondering if you would consider adding black as an optional color scheme in addition to those already available. I understand black was not originally in the bootstrapious theme, but I would love it as an option.

If this is not possible, I was wondering if you knew of an easy CSS or JS override that I could use to make all the default colors black. Thank you so much for you help! This is my first experience with web development, so I really appreciate any advice.

Eli

Can't scroll sidebar

Sidebar can't be scrolled when having long sidebar about and many social icons so I can't see the nice attribution :)

How to remove additional "s" in home title?

Totally agree with keanenmind. Used this theme in the past and really liked it, but had to abandon it because loadtimes were too long. Want to use it for a different project now, but the change to the default title feels weird. Just curious, if I have folder called "story", does it expand to "storys"?

Originally posted by @Dapuva76 in #46 (comment)

Can't load Disqus

When I was building my website firstly, my blog post wasn't able to load the Disqus comment section. It seems Disqus has a new version of the universal embed code https://disqus.com/admin/install/platforms/universalcode/. After I manually fixed the index.html file of my file in the public folder, it works. How to fix the mechanism automatically? Where is {{ template "_internal/disqus.html" . }}?

media queries

It would be nice to use media queries to adjust content based on viewport, rather than creating separate html elements for each viewport.

Problems using disqus

I have tried to follow your instructions to use disqus, setting disqusShortname variable, but it's throwing me errors.
I have checked the baseURL (in config.toml) and trusted domains (in disqus), but nothing seems to work. Could you please help me solve this issue?

Unable to find theme Directory

I cloned the repo and tried to build the site using hugo -v --source exampleSite from your travis config script, but received the error
Error: Unable to find theme Directory: ~hugo-creative-portfolio-theme/exampleSite/themes/hugo-creative-portfolio-theme

I also tried downgrading my hugo installation from 0.55.6 to 0.40.3 to match the travis build in case themes weren't required previously, but no luck.

If I'm missing a step, let's add it to the README.

This could also be related to your issue on the hugoThemes page

love the theme but links have error when loaded AWS S3

Thank you for creating this - I attempted building site with it which ran great with hugo server version 17 but when I moved public folder to AWS s3 the links had issue running from AWS. Take a look at thechinagrove.com - hope its an easy fix...?

why single page of portfolio left 1/3 blank for desktop

Hello,

I love the style of this theme.

But when click to enter each portfolio page, there is one third of blank on the right. is it designed in this way (to keep content slim) ?

Is it possible to have a param or workaround to let content to fill the whole space ?

Best regards,
wushuzh

Adding another portfolio

Hi, thanks for this wonderful and yet simple theme!

I just want to know is there a way to add another portfolio (eg: stocks and bonds) to the theme? Each portfolio will have different set of cards of course.

Thanks in advance for your help here!

<!-- more --> gets randomly(?) ignored

I've noticed that many of the posts on http://maurer.club ignore the <!-- more --> and just dump all the blog content on the front page. Also in those cases html tags get ignored and stripped from the post on the front page, but it's still present in the main article.

I can't figure out why it's random. Maybe somewhere there's an open tag that messes with Hugo parsing the files?

Example where it gets ignored:
http://maurer.club/portfolio/sneakpeek/
second story on the front page. cut-off should come after the first paragraph.
this is the .md code

+++
title = "Sneak peek at upcoming comic"
image = "images/sneakopeeko.jpg"
showonlyimage = true
date = "2017-01-14T12:11:30+01:00"
draft = false

+++
I've been working on a comic the past several months, and
hopefully will be able to publish it in early february.
<!-- more -->

I'm halfway done with the colorization, and still need to put in the
speech bubbles. Then I'll finish it off by designing the cover. I
thought it's clever to save that for last, since that's when I'll be
most aquainted with the tools I'm working with. Here's a panel, sans
text:

![Sneak peek at upcoming comic](/images/sneakopeeko.jpg "Sneak peek at
 upcoming comic")

Not really spoiling anything storywise, guess you'll have to read it
when it comes out.

Equations not rendering on deployment

I'm trying to include equations in math mode in my portfolio pages, and they are not rendering properly. My portfolio pages are .Rmd files, so I was under the impression that the equations would be processed and compiled with minimal issue. Is there a setting I need to change in one of the layout files? Thank you!

Updating to Hugo 0.19 breaks home page layout

I recently updated to Hugo 0.19 (from 0.17), and when I re-built my site that uses this theme, it broke the grid layout on the home page -- the cards were not positioning properly vertically. Reverting back to 0.17 and re-building fixed the issue.

Not easy to customise the /contact/ page

Hi, thank you for this great theme! The only major issue I've encountered is that there is large text hardcoded into the contact page:

"You can find me also on:
[social media icons]
Drop me a line, maybe?"

This wasn't to my liking, because "you can find me also on" is worded a little awkwardly, and I didn't want to include the social media icons again, since they are already in the sidebar. Also, "Drop me a line, maybe?" doesn't fit with the style of my site.

I was able to remove this myself by editing one of the template html pages, but I would prefer to easily customise this text via the index.md page in the content folder. Thank you!

Opengraph support

Is this theme not have opengraph support?
Could you add this feature or let me know how to add it myself?

Order of "posts"/portfolio

Great theme, very lovely port. Firstly, it seems like posts are not displayed (the default rmarkdown post for example I can't find anywhere on an example site). Second, how does it order the portfolio/posts? Is it based on the weight parameter in the header of each post? If not, how can I go about customising this?

theme is not applied when actual site is generated

when site is served with hugo server --buildDrafts will serve the page with beautiful theme. But when the public directory is built with command hugo -t hugo-creative-portfolio-theme. Theme is not applied. it looks very native html layout.

Nice work

Nice work on this theme ! Suggestion -- you could add the version of the original that you drawing from. I think it is 1.0 and based upon Bootstrap 3.3.7, but I have no idea which version you have used. Thanks.

Choose min cards size by params in config.toml

It would be great if it were possible to configure a minimum portfolio card size by defining a parameter in config.toml file.

I, for instance, love the theme, but for my use case a bigger card would be most beneficial. ¿Do you think that would be possible/feasible?

P.S.: great work! the theme is slick and works like a charm 👍

Feature Request: More pages like the main (masonry) page please ?

Hello Kishan,

I really like this theme and I'm slowly getting to understand it and the code, etc. (I am a novice.)

What would be a really good feature would be to have more than just the home page doing the masonry tile 'shuffle'. Ideally, I'd like to be able to add perhaps five or six other pages driven from the sidebar menu (so no drop down / fly out menu requirement) that would point to different 'portfolios' of assets.

Many thanks for the great theme and any ideas you have with this feature request.

Kind regards,

Luke (Derby, UK)

Number of columns

Hello, is it possible to change the number of columns in the portfolio?
I didn't find a way to modify it, yet.

Error: module not found?

I'm sorry if this is a really dumb question, but I added the config.toml file to the top level of my /hugo-creative-portfolio-theme directory and edited it, but then when I ran hugo server in terminal I got this error:

Error: module "hugo-creative-portfolio-theme" not found; either add it as a Hugo Module or store it in "/Users/<username>/themes/hugo-creative-portfolio-theme/themes".: module does not exist

I don't understand what's it's asking for, and I haven't edited or moved any other files. Does the config.toml file need to go somewhere else? I'd appreciate any help anyone can give. Thanks!

Links Within Mouseover Text

Greetings — thanks for a very nice theme.

Question: is it possible to have links within text revealed on mouseover? I would like to avoid having clicks on an item lead to another page, but would like to be able to link directly to external pages. If this doesn't make sense, please ask for clarification.

Thank you!

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.