Giter VIP home page Giter VIP logo

hugo-developer-portfolio's Introduction

GitHub

Developer Portfolio

Website Image

Features

  • Responsive Design
  • Blog Section
  • Portfolio Section
  • Homepage to show off skills

Installation

Integrating into your site

To install this theme, first create a themes folder in your site with

mkdir themes

Then move into this directory with

cd themes

The repository can then be added either by cloning or adding as a submodule

# Cloning
git clone https://github.com/samrobbins85/hugo-developer-portfolio hugo-developer-portfolio
# Submodule
git submodule add https://github.com/samrobbins85/hugo-developer-portfolio hugo-developer-portfolio

In the config.toml file in your site directory add

theme="hugo-developer-portfolio"

Creating a new site

The exampleSite folder is almost set up to work as a site, if you copy it out of the Git Repo and remove the lines in config.toml under "Remove this when using normally" and uncomment the lines starting at "[module]" it should work. You need to have golang installed as it uses hugo modules.

Configuration

This is a highly configurable site, and as such, it will be unlikely that it will work with your existing site.

Config.toml

Config.toml provides the basic structure of the site, it contains a range of sections

Base information

In the example site, the base information looks as follows

baseURL = "http://example.com" # The URL of your site
languageCode = "en-gb" # The language you want to display the site in
title = "Sam Robbins" # The title you want to appear in the address bar
theme = "hugo-developer-portfolio" # The theme, don't change this

Plugins

These are the essential plugins required to run the site, but you can add more if you need

[params.plugins]
  # CSS Plugins
  [[params.plugins.css]]
  URL = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css"
  # JS Plugins
  [[params.plugins.js]]
  URL = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"
  [[params.plugins.js]]
  URL = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"

Navigation

This specifies the titles for the entries in the taskbar. name can be changed to show a different name. URL should not be changed in most situations as the pages will exist at the old URLs rather than the new ones, so this will result in dead links.

# navigation
[menu]
  [[menu.main]]
  name = "About"
  URL = "about"
  [[menu.main]]
  name = "Blog"
  URL = "blog"
  [[menu.main]]
  name = "Portfolio"
  URL = "portfolio"
  [[menu.main]]
  name = "Contact"
  URL = "contact"

Params

This contains the other configuration information

[params]
home = "Home" # What you want the homepage to show up as in the menu bar
# Meta data
description = "The website of Sam Robbins, 2nd Year Computer Science Student at Durham University"
author = "Sam Robbins"


  [params.contact]
  formAction = "https://formspree.io/<Insert code>" # Add your formspree URL here to get emails

  # This contains the contact information for the footer
  [params.footer]
  email = "[email protected]"
  address = "Durham, UK"
  googlemaps = "https://www.google.com/maps/embed/v1/place?q=place_id:ChIJwbHYJaUqfEgRK0Ui9dVGimc&key=AIzaSyAE_4rVAKux_DSPcb_OdSRDaovtPOSk_3U"

homepage.yml

This file is stored in data/homepage.yml. It determines the content of the homepage and contains many sections

banner

This is the text in the hero section, change it to whatever you want

banner:
  title: Hi! Iā€™m Sam

social

Put all of your social links here and they will appear in the social section

social:
  twitter: ""
  linkedin: sam-robbins-gb
  bitbucket: ""
  github: samrobbins85
  gitlab: ""
  facebook: ""
  instagram: ""
  gmail: samrobbinsgb
  hotmail: ""
  telegram: ""
  whatsapp: ""

about

  • enable can be used to hide this section
  • content determines what text is shown here
  • btnText changes the text on the button
  • URL changes the URL the button directs to
about:
  enable: true
  content: 2nd Year Durham Computer Science Student
  button:
    btnText: Find out more
    URL: "/about"

skill

  • enable can be used to hide this section
  • title determines the text both under the image and in the modal
  • logo determines the image that shows up
  • description is the text that appears inside the modal
skill:
  enable: true
  item:
    - title: JavaScript
      logo: https://res.cloudinary.com/samrobbins/image/upload/v1591793272/logos/logos_javascript_adj1dx.svg
      description: Details coming soon, contact me if you want to know more

portfolio

This is used to highlight specific portfolio projects you want to show

  • enable can be used to hide this section
  • title is the text at the top each item
  • image is the image for each item
  • description goes underneath the image for each item
  • link directs to the main portfolio page
  • tools indicates what technologies you used, it uses the icons from https://simpleicons.org/
portfolio:
  enable: true
  item:
    - title: Easy DMARC
      image: https://res.cloudinary.com/samrobbins/image/upload/v1597159067/Easy_DMARC_hkcgif.webp
      description: A website to make it easy to add DMARC to a Vercel website
      link: "/portfolio/easy-dmarc"
      tools:
        - next-dot-js
        - tailwindcss
        - vercel
        - react

experience

  • enable can be used to hide this section
  • logo determines the image that shows up
  • title is the main text that appears in the card
  • company is the secondary text in the card
  • duration is the tertiary text in the card
experience:
  enable: true
  item:
    - logo: https://res.cloudinary.com/samrobbins/image/upload/f_auto,q_auto/v1591793271/logos/logos_google_id6v9a.svg
      title: init.g
      company: Google
      duration: November 2019

hackathons

By placing none in the URL field, the image will be rendered without any links

hackathons:
  enable: true
  item:
    - title: Hack Cambridge 2019
      description: Climate change simulator
      image: https://res.cloudinary.com/samrobbins/image/upload/f_auto,q_auto/v1591793405/stickers/Hack_Cambridge_101_ozoq5d.png
      url: none

certifications

This allows you to list your certifications in the following format

certifications:
  enable: true
  item:
    - title: Microsoft Azure Fundamentals
      image: https://res.cloudinary.com/samrobbins/image/upload/v1592501459/microsoft-certified-fundamentals-badge_cpcgyn.svg
      url: https://www.youracclaim.com/badges/b4cf7a86-eb83-478e-bfd0-9f427c3474a0/public_url

Awards and Achievements

This allows you to list your awards and achievements in the following format

awards:
  enable: true
  item:
    - title: Phase 1 Winner
      event: GNOME Community Engagement Challenge
      image: https://res.cloudinary.com/samrobbins/image/upload/v1595701167/CEChallenge-P1Winner2_iyjvyu.png

education

This section allows you to showcase your education history, the fields are self explanatory.

education:
  enable: true
  item:
    - title: BSc Computer Science
      year: 2018 - Present
      academy: Durham University
      image: https://res.cloudinary.com/samrobbins/image/upload/f_auto,q_auto/v1591793268/logos/logos_Durham_fc2sae.svg

publications

This section allows you to showcase your publications history, the fields are self explanatory.

publications:
  enable: true
  item:
    - image: /path/to/img
      title: Title of the publication
      description: details about the publication
      code_link: link/to/the/repository
      pdf_link: link/to/the/pdf

about.yml

This file configures the about page, and follows the format below:

leadership:
  enable: true
  item:
    - logo: https://res.cloudinary.com/samrobbins/image/upload/f_auto,q_auto/v1591793280/logos/logos_yl_qozav6.webp
      title: Young Leader
      company: The Scout Association
      duration: September 2014 - July 2018

porfolio.yml

This file configures the portfolio page, allowing you to specify the filters you want to use.

filter:
  - label: Web Dev
    value: web-dev

Blogs

When submitting a blog, you can supply the following fields in the front matter

title: "Making a new Website"
date: 2019-12-31T12:14:34+06:00
description: "My first blog, introducing my new website"
author: "Sam Robbins"

Portfolio pages

The portfolio page and blog page use the same configuration, so you can use these new fields if you want, but they are more suited to portfolio pages

categories = ["hackathon", "web-dev"]
coders = ["samrobbins85", "karina-talibzhanova"]
date = 2020-05-30T23:00:00Z
description = "A Firefox Browser Extension"
github = ["https://github.com/karina-talibzhanova/oxfordhack2020"]
image = "https://res.cloudinary.com/samrobbins/image/upload/q_auto/v1593352345/twoo-home_k7molq.png"
title = "Oxford Digithon"
[[tech]]
logo = "https://res.cloudinary.com/samrobbins/image/upload/q_auto/v1591793272/logos/logos_javascript_adj1dx.svg"
name = "JavaScript"
url = "https://www.ecma-international.org/memento/tc39.htm"
[[tech]]
logo = "https://res.cloudinary.com/samrobbins/image/upload/q_auto/v1593368547/firefox-ar21_cps6me.svg"
name = "Firefox WebExtensions"
url = "https://www.mozilla.org/en-GB/firefox/"

The [[tech]] item can be repeated as many times as you desire.

hugo-developer-portfolio's People

Contributors

gorgeous-patrick avatar samrobbins85 avatar settinger avatar wallstromsimon avatar xlammertink 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

Watchers

 avatar  avatar  avatar

hugo-developer-portfolio's Issues

No skills section and duplicate certifications section

Hi Sam! I was taking a look at your portfolio theme and looks amazing!

I tried to use it myself and realize that no matter what I did with the skills section in homepage.yml nothing would appear in the website.

I went to index.html and saw that there is no section for skills, I also notieced certifications is duplicated. I'm not sure if you would like to take a look at this.

Best,
Alvaro.

Could not add Multiple skills

Hi sam!That was an amazing theme, thanks for the theme.

When I try to add multiple skill items in homepage.yml ,

skill:
  enable: true

  item:
    - title: Python
      logo: https://res.cloudinary.com/dbwuq1kps/image/upload/v1615733646/personalwebsite/5848152fcef1014c0b5e4967_glhwi8.png
      description: Details coming soon, contact me if you want to know more

  item:
    - title: cpp
      logo: https://res.cloudinary.com/dbwuq1kps/image/upload/v1615734208/personalwebsite/c-logo-icon-28389_v1dvpq.png
      description: Details coming soon, contact me if you want to know more

the bottom most one tend to be appearing (this case , cpp tends to ovewrite the python item) . is there any fix?

Feature Request: add "credit" to the item when there's choice to show logos

Sometimes I need to show credits (copyrights) when I show logos especially using the ones under cc licenses.
But it is seemed to be no way to show credits under the logos except for editing html, css, etc... on my own (it beyonds my ability....).
So I think it is nice that officially provides the way to show credits.

The HTML of the blog

Hi, sam. I would like to tweak the HTML of the blog page (the main page i.e. xxx.com/blog). I can't find it in the layout folder. Would you mind letting me know where I can find it? Thanks.

Cannot get tags to show up in portfolio page

Hello there!

There's something I don't get with the way tags are handled in the portfolio list page. This the content of my data/portfolio.yml :

portfolio:
  filter:
    - label: plugin
      value: plugin
    - label: commercial
      value: commercial
    - label: installation
      value: installation
    - label: backend
      value: backend
    - label: software
      value: software
    - label: teaching
      value: teaching
    - label: hardware
      value: hardware

And in one of my portfolio's article, I set the header as so :

categories = ["backend", "hardware"]

Though in the portfolio list page, I only get the All tag, the others do not show up (I would have expected "backend" and "hardware" buttons).

Have I missed something?

Thanks!

EDIT: looks related to #5

JS for portfolio categories not working

Hi,

There is something wrong in your code as the categories defined at the top of the .md files for the portfolio are not rendered as in your final website (ALL | WEB DEV | etc)

Leadership & Teamwork section always shows up in About

Hey there,

I noticed the Leadership & Teamwork section is always present in the About page, even if you specify

leadership:
  enable: false

in about.yml.

I solved it locally by putting the whole Experience section inside the {{ range .Site.Data.about.leadership.item }} block in layouts/about/list.html, not sure this is the right way to do though!

Thanks for this theme.

Skill section in homepage is broken when title includes symbols

Hi! When I try to apply this great theme to mine, I came across following problems.

I am trying to show "c++" as my skill.
I wrote my data/homepage.yml as follows.

skill:
  enable: true
  item:
    - title: c++
      logo: /images/logos/cpp.svg
      description: Details coming soon, contact me if you want to know more

And then I run a development server and clicked the logo of c++, there's no modal window and only change is that the logo turned into "c++" strings.
Screen Shot 2021-05-03 at 16 03 52

What I tested

  • change title c++ to "c++" (enclose c++ string with double quotes)
    I got the same result as above.

  • change title c++ to c# (change to another symbol)
    I got the same result as above.

  • change title c++ to c3 (add not alphabetical letter instead of adding symbols)
    It worked

Error in loading CSS

I' am able to apply the theme "hugo-developer-portfolio", While applying the theme "tailwind-developer-website", the following error pops up:

Error: Error building site: POSTCSS: failed to transform "css/tailwind.css" (text/css): resource "css/css/tailwind.css_0a7609e807cbb0441390b6ce32d26025" not found in file cache

Can u let know why this error occurs?

Social not loading the images

When enter the social I want to appear, The circle appears with the side name but does not load the image of the site.
image

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.