From 589091a4b331f85be19609dae2a07a49964496f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Piku=C5=82a?= Date: Sun, 2 Jun 2024 15:09:40 +0200 Subject: [PATCH] Add generic home page section generation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This change enables theme user to specify arbitrary order of sections, and add multiple sections of the same type (more generic approach than in #105, which is applicable only to experience blocks). - All sections are specified in config as a list, with order of items directly reflecting order on the main page (including navbar). - Type of a section is specified with a new `type` field. - If there are multiple sections of the same type, in order to distinguish them for navbar navigation, you need to specify unique `id` field. - Navbar and main page generation is more generic, allowing to add custom section types – the only requirement is a custom partial named after the section type. Styling can be provided in a custom CSS (enabled with `customCSS` site param). Signed-off-by: Marek Pikuła --- exampleSite/config.yaml | 526 +++++++++++--------- layouts/index.html | 27 +- layouts/partials/sections/about.html | 32 +- layouts/partials/sections/achievements.html | 8 +- layouts/partials/sections/contact.html | 34 +- layouts/partials/sections/education.html | 14 +- layouts/partials/sections/experience.html | 64 ++- layouts/partials/sections/header.html | 62 +-- layouts/partials/sections/hero/index.html | 40 +- layouts/partials/sections/hero/social.html | 4 +- layouts/partials/sections/projects.html | 10 +- layouts/projects/list.html | 4 +- static/css/index.css | 174 +++---- static/css/projects.css | 24 +- 14 files changed, 508 insertions(+), 515 deletions(-) diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 7a2c5053..628178e1 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -114,254 +114,296 @@ params: enable : true showOnScrollUp : true enableSeparator: false - menus: - disableAbout: false - disableExperience: false - disableEducation: false - disableProjects: false - disableAchievements: false - disableContact: false - - # Hero - hero: - enable: true - intro: "Hi, my name is" - title: "Isabella." - subtitle: "I build things for the web" - content: "A passionate web app developer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly." - image: /images/hero.svg - bottomImage: + + sections: + # Hero + - type: hero enable: true - # roundImage: true # Make hero image circular | default false - button: + intro: "Hi, my name is" + title: "Isabella." + subtitle: "I build things for the web" + content: | + A passionate web app developer. I tend to make use of modern web + technologies to build websites that looks great, feels fantastic, and + functions correctly. + image: /images/hero.svg + bottomImage: + enable: true + # roundImage: true # Make hero image circular | default false + button: + enable: true + name: "Resume" + url: "#" + download: true + newPage: false + socialLinks: + fontAwesomeIcons: + - icon: fab fa-github + url: https://example.com + - icon: fab fa-x-twitter + url: https://example.com + customIcons: + - icon: /fav.png + url: "https://example.com" + + # About + - type: about enable: true - name: "Resume" - url: "#" - download: true - newPage: false - socialLinks: - fontAwesomeIcons: - - icon: fab fa-github - url: https://example.com - - icon: fab fa-x-twitter - url: https://example.com - customIcons: - - icon: /fav.png - url: "https://example.com" - - # About - about: - enable: true - title: "About Me" - image: "/images/me.png" - content: |- - I am a software developer with a passion for web development. I have a background in computer science and mathematics, and I have a strong interest in the intersection of technology and art. I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. - - I am currently working on a project that will be used to help people find the best way to get around the city. - skills: + showInNavbar: true + title: "About Me" + # id: about-me # Custom ID (used for navbar) + image: "/images/me.png" + content: | + I am a software developer with a passion for web development. I have a + background in computer science and mathematics, and I have a strong + interest in the intersection of technology and art. I am currently + working as a software developer at [example org.](https://example.com) + in San Francisco, CA. + + I am currently working on a project that will be used to help people + find the best way to get around the city. + skills: + enable: true + title: "Here are a few technologies I've been working with recently:" + items: + - "HTML" + - "CSS" + - "JavaScript" + - "React" + - "Node" + - "Express" + + # Experience + - type: experience + enable: true + showInNavbar: true + # title: "Custom Name" + items: + - job: "Senior Software Developer" + company: "Facebook" + companyUrl: "https://example.com" + date: "Jan 2022 - present" + featuredLink: + enable: true + name: "View the project" + url: "https://example.com" + content: | + I am currently working as a software developer at [example + org.](https://example.com) in San Francisco, CA. I am currently + working on a project that will be used to help people find the best + way to get around the city." + + - job: "Software Developer" + company: "Amazon" + companyUrl: "https://example.com" + date: "Sep 2020 - Dec 2021" + featuredLink: + enable: true + url: "https://example.com" + info: + enable: true + content: | + I worked as a software developer for more than one year in Amazon. + content: | + I am currently working as a software developer at [example + org.](https://example.com) in San Francisco, CA. I am currently + working on a project that will be used to help people find the best + way to get around the city. + + - Lead backend developer for a product. + - Created a frontend design for a product. + + - job: "Junior Software Developer" + company: "Apple" + companyUrl: "https://example.com" + date: "Jan 2020 - Aug 2020" + info: + enable: false + featuredLink: + enable: true + url: "https://example.com" + content: | + I am currently working as a software developer at [example + org.](https://example.com) in San Francisco, CA. I am currently + working on a project that will be used to help people find the best + way to get around the city. + + - Lead backend developer for a product. + - Created a frontend design for a product. + + - job: "UI/UX Designer" + company: "Netflix" + companyUrl: "https://example.com" + date: "June 2017 - Nov 2019" + featuredLink: + enable: true + url: "https://example.com" + content: | + I am currently working as a software developer at [example + org.](https://example.com) in San Francisco, CA. I am currently + working on a project that will be used to help people find the best + way to get around the city. + + - Lead backend developer for a product. + - Created a frontend design for a product. + + - job: "Product Designer" + company: "Google" + companyUrl: "https://example.com" + date: "Feb 2016 - Mar 2017" + content: | + I am currently working as a software developer at [example + org.](https://example.com) in San Francisco, CA. I am currently + working on a project that will be used to help people find the best + way to get around the city. + + # Education + - type: education enable: true - title: "Here are a few technologies I've been working with recently:" + showInNavbar: true + # title: "Custom Name" + index: false items: - - "HTML" - - "CSS" - - "JavaScript" - - "React" - - "Node" - - "Express" - - # Experience - experience: - enable: true - # title: "Custom Name" - items: - - job: "Senior Software Developer" - company: "Facebook" - companyUrl: "https://example.com" - date: "Jan 2022 - present" - featuredLink: - enable: true - name: "View the project" - url: "https://example.com" - content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city." - - - job: "Software Developer" - company: "Amazon" - companyUrl: "https://example.com" - date: "Sep 2020 - Dec 2021" - featuredLink: - enable: true - url: "https://example.com" - info: - enable: true - content: I worked as a software developer for more than one year in Amazon. - content: | - I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city. - - - Lead backend developer for a product. - - Created a frontend design for a product. - - - job: "Junior Software Developer" - company: "Apple" - companyUrl: "https://example.com" - date: "Jan 2020 - Aug 2020" - info: - enable: false - featuredLink: - enable: true - url: "https://example.com" - content: | - I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city. - - - Lead backend developer for a product. - - Created a frontend design for a product. - - - job: "UI/UX Designer" - company: "Netflix" - companyUrl: "https://example.com" - date: "June 2017 - Nov 2019" - featuredLink: - enable: true - url: "https://example.com" - content: | - I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city. - - - Lead backend developer for a product. - - Created a frontend design for a product. - - - job: "Product Designer" - company: "Google" - companyUrl: "https://example.com" - date: "Feb 2016 - Mar 2017" - content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city." - - # Education - education: - enable: true - # title: "Custom Name" - index: false - items: - - title: "Master of Business Administration" - school: - name: "University of California, Berkeley" - url: "https://example.org" - date: "2013 - 2015" - GPA: "3.8 out of 5.0" - content: |- - Extracurricular Activities + - title: "Master of Business Administration" + school: + name: "University of California, Berkeley" + url: "https://example.org" + date: "2013 - 2015" + GPA: "3.8 out of 5.0" + content: |- + Extracurricular Activities: + - Lorem ipsum dolor sit amet consectetur adipisicing elit. - - Tempora esse, eaque delectus nulla quo doloribus itaque expedita alias natus optio totam maxime nihil excepturi velit a animi laborum hic similique. - - title: "Bachelor of Science in Computer Science" - school: - name: "Massachusetts Institute of Technology" - url: "https://example.org" - date: "2009 - 2013" - GPA: "3.9 out of 5.0" - content: |- - I Publiced two papers in the ACM SIGCHI Conference on Artificial Intelligence. - - [Fast and Accurate Object Detection with a Single Convolutional Neural Network](https://example.com) - - Face mask detection using a single convolutional neural network. - - Extracurricular Activities + - Tempora esse, eaque delectus nulla quo doloribus itaque expedita + alias natus optio totam maxime nihil excepturi velit a animi + laborum hic similique. + - title: "Bachelor of Science in Computer Science" + school: + name: "Massachusetts Institute of Technology" + url: "https://example.org" + date: "2009 - 2013" + GPA: "3.9 out of 5.0" + content: |- + I Publiced two papers in the ACM SIGCHI Conference on Artificial + Intelligence: + + - [Fast and Accurate Object Detection with a Single Convolutional + Neural Network](https://example.com) + - Face mask detection using a single convolutional neural network. + + Extracurricular Activities: + - Lorem ipsum dolor sit amet consectetur adipisicing elit. - - Tempora esse, eaque delectus nulla quo doloribus itaque expedita alias natus optio totam maxime nihil excepturi velit a animi laborum hic similique. - featuredLink: - enable: true - name: "My academic record" - url: "https://example.com" - - title: "High School" - school: - name: "Thomas Jefferson High School for Science and Technology." - url: "https://example.org" - GPA: "4.2 out of 5.0" - featuredLink: - enable: true - url: "https://example.com" - - # Achievements - achievements: - enable: true - # title: "Custom Name" - items: - - title: Google kickstart runner - content: I solved all problems with optimal solution. - url: https://example.com - image: /images/achievment.jpg - - title: Facebook Hackathon Winner - content: Developed a product using Artificial Intelligence. - image: /images/achievment.jpg - - title: Hugo Profile - content: Developed a theme and getting 1K+ downloads per month. - url: "https://github.com/gurusabarish/hugo-profile" - image: /images/achievment.jpg - - title: Microsoft Imagine Runner - content: We are developed a product which can help others. - - title: Google Summer of Code - content: Contributed to a open source project. - url: https://example.com - - # projects - projects: - enable: true - # title: "Custom Name" - items: - - title: Hugo Profile - content: A highly customizable and mobile first Hugo template for personal portfolio and blog. - image: /images/projects/profile.png - featured: - name: Demo - link: https://hugo-profile.netlify.app - badges: - - "Hugo" - - "Bootstrap" - - "Javascript" - links: - - icon: fa fa-envelope - url: mailto:?subject=Hugo%20Profile%20Template&body=Check%20it%20out:%20https%3a%2f%2fhugo-profile.netlify.app%2fblog%2fmarkdown-syntax%2f - - icon: fab fa-github - url: https://github.com/gurusabarish/hugo-profile - - icon: fab fa-twitter - url: https://twitter.com/intent/tweet?text=Check+it+out:&url=https%3A%2F%2Fgithub.com%2Fgurusabarish%2Fhugo-profile - - - title: Image Converter - content: A web app to convert image to pdf, png to jpg, png to jpg and png to webp without database using django. - image: /images/projects/converter.jpg - featured: - name: Demo - link: https://django-converter.herokuapp.com - badges: - - "Django" - - "Bootstrap" - links: - - icon: fab fa-github - url: https://github.com/gurusabarish/converter - - - title: Hugo Profile V2 - content: A clean and simple Hugo template for personal portfolio and blog. - image: /images/projects/profile2.jpg - featured: - name: Demo V2 - link: https://hugo-profile-2.netlify.app - badges: - - "Hugo" - - "Bootstrap" - - "Javascript" - links: - - icon: fab fa-github - url: https://github.com/gurusabarish/HugoProfileV2 - - #Contact - contact: - enable: true - # title: "Custom Name" - content: My inbox is always open. Whether you have a question or just want to say hi, I’ll try my best to get back to you! - btnName: Mail me - btnLink: mailto:gurusabarisha@gmail.com - # formspree: - # enable: true # `contact.email` value will be ignored - # formId: abcdefgh # Take it from your form's endpoint, like 'https://formspree.io/f/abcdefgh' - # emailCaption: "Enter your email address" - # messageCaption: "Enter your message here" - # messageRows: 5 + - Tempora esse, eaque delectus nulla quo doloribus itaque expedita + alias natus optio totam maxime nihil excepturi velit a animi + laborum hic similique. + featuredLink: + enable: true + name: "My academic record" + url: "https://example.com" + - title: "High School" + school: + name: "Thomas Jefferson High School for Science and Technology." + url: "https://example.org" + GPA: "4.2 out of 5.0" + featuredLink: + enable: true + url: "https://example.com" + + # Achievements + - type: achievements + enable: true + showInNavbar: true + # title: "Custom Name" + items: + - title: Google kickstart runner + content: I solved all problems with optimal solution. + url: https://example.com + image: /images/achievment.jpg + - title: Facebook Hackathon Winner + content: Developed a product using Artificial Intelligence. + image: /images/achievment.jpg + - title: Hugo Profile + content: Developed a theme and getting 1K+ downloads per month. + url: "https://github.com/gurusabarish/hugo-profile" + image: /images/achievment.jpg + - title: Microsoft Imagine Runner + content: We are developed a product which can help others. + - title: Google Summer of Code + content: Contributed to a open source project. + url: https://example.com + + # Projects + - type: projects + enable: true + showInNavbar: true + # title: "Custom Name" + items: + - title: Hugo Profile + content: | + A highly customizable and mobile first Hugo template for personal + portfolio and blog. + image: /images/projects/profile.png + featured: + name: Demo + link: https://hugo-profile.netlify.app + badges: + - "Hugo" + - "Bootstrap" + - "Javascript" + links: + - icon: fa fa-envelope + url: mailto:?subject=Hugo%20Profile%20Template&body=Check%20it%20out:%20https%3a%2f%2fhugo-profile.netlify.app%2fblog%2fmarkdown-syntax%2f + - icon: fab fa-github + url: https://github.com/gurusabarish/hugo-profile + - icon: fab fa-twitter + url: https://twitter.com/intent/tweet?text=Check+it+out:&url=https%3A%2F%2Fgithub.com%2Fgurusabarish%2Fhugo-profile + + - title: Image Converter + content: | + A web app to convert image to pdf, png to jpg, png to jpg and png to + webp without database using django. + image: /images/projects/converter.jpg + featured: + name: Demo + link: https://django-converter.herokuapp.com + badges: + - "Django" + - "Bootstrap" + links: + - icon: fab fa-github + url: https://github.com/gurusabarish/converter + + - title: Hugo Profile V2 + content: | + A clean and simple Hugo template for personal portfolio and blog. + image: /images/projects/profile2.jpg + featured: + name: Demo V2 + link: https://hugo-profile-2.netlify.app + badges: + - "Hugo" + - "Bootstrap" + - "Javascript" + links: + - icon: fab fa-github + url: https://github.com/gurusabarish/HugoProfileV2 + + # Contact + - type: contact + enable: true + showInNavbar: true + # title: "Custom Name" + content: | + My inbox is always open. Whether you have a question or just want to say + hi, I’ll try my best to get back to you! + btnName: Mail me + btnLink: mailto:gurusabarisha@gmail.com + # formspree: + # enable: true # `contact.email` value will be ignored + # formId: abcdefgh # Take it from your form's endpoint, like 'https://formspree.io/f/abcdefgh' + # emailCaption: "Enter your email address" + # messageCaption: "Enter your message here" footer: recentPosts: diff --git a/layouts/index.html b/layouts/index.html index c0fecbeb..f8286c7c 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -12,11 +12,22 @@ {{ end }} {{ define "main" }} -{{- partial "sections/hero/index.html" . -}} -{{- partial "sections/about.html" . -}} -{{- partial "sections/experience.html" . -}} -{{- partial "sections/education.html" . -}} -{{- partial "sections/projects.html" . -}} -{{- partial "sections/achievements.html" . -}} -{{- partial "sections/contact.html" . -}} -{{ end }} \ No newline at end of file + {{ range $index, $element := (where .Site.Params.sections "enable" true) }} + {{ if not .type }} + {{ errorf "Type property needs to be set for section with index %d." $index }} + {{ else }} + {{ with $element }} + {{ $partialPathIndex := printf "sections/%s/index.html" .type }} + {{ $partialPathStandalone := printf "sections/%s.html" .type }} + + {{ if templates.Exists (printf "partials/%s" $partialPathIndex) }} + {{- partial $partialPathIndex . -}} + {{ else if templates.Exists (printf "partials/%s" $partialPathStandalone) }} + {{- partial $partialPathStandalone . -}} + {{ else }} + {{ errorf "Cannot find partial for section type: %s" .type }} + {{ end }} + {{ end }} + {{ end }} + {{ end }} +{{ end }} diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html index 58df5510..f25ffafd 100644 --- a/layouts/partials/sections/about.html +++ b/layouts/partials/sections/about.html @@ -1,28 +1,26 @@ -{{ if .Site.Params.about.enable | default false }} -
+
-

{{ .Site.Params.about.title }}

+

{{ .title | default (strings.FirstUpper .type) }}

- {{ if .Site.Params.about.image }} -
-
- + {{ if .image }} +
+
+ +
-
{{ end }}
- {{ .Site.Params.about.content | markdownify }} + {{ .content | markdownify }} - {{ if .Site.Params.about.skills.enable }} - {{ .Site.Params.about.skills.title }} -
    - {{ range .Site.Params.about.skills.items }} -
  • {{ . | markdownify }}
    • - {{ end }} -
+ {{ if .skills.enable }} + {{ .skills.title }} +
    + {{ range .skills.items }} +
  • {{ . | markdownify }}
    • + {{ end }} +
{{ end }}
-{{ end }} \ No newline at end of file diff --git a/layouts/partials/sections/achievements.html b/layouts/partials/sections/achievements.html index 6f680dd9..105668ba 100644 --- a/layouts/partials/sections/achievements.html +++ b/layouts/partials/sections/achievements.html @@ -1,10 +1,9 @@ -{{ if .Site.Params.achievements.enable | default false }} -
+
-

{{ .Site.Params.achievements.title | default "Achievements" }}

+

{{ .title | default (strings.FirstUpper .type) }}

- {{ range .Site.Params.achievements.items }} + {{ range .items }} {{ if .url }}
@@ -43,4 +42,3 @@
{{ .title }}
-{{ end }} \ No newline at end of file diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html index 01cdf216..8a047499 100644 --- a/layouts/partials/sections/contact.html +++ b/layouts/partials/sections/contact.html @@ -1,39 +1,38 @@ -{{ if .Site.Params.contact.enable | default false }} -
+
-

{{ .Site.Params.contact.title | default "Get in Touch" }}

+

{{ .title | default (strings.FirstUpper .type) }}

- {{ .Site.Params.contact.content | emojify | markdownify }} + {{ .content | emojify | markdownify }}
- {{ if .Site.Params.contact.formspree.enable | default false }} + {{ if .formspree.enable | default false }}
-
+
- +
- +
- +
- {{ else if or (.Site.Params.contact.email) (.Site.Params.contact.btnLink) }} + {{ else if or .email .btnLink }}
- - {{ .Site.Params.contact.btnName | default "Get in Touch" }} + {{ .btnName | default "Get in Touch" }}
{{ end }} @@ -43,7 +42,6 @@

{{ .Site.Params.contact.title | default "Get in Touch" }

-{{ end }} diff --git a/layouts/partials/sections/education.html b/layouts/partials/sections/education.html index 3141b1ee..3e5f36a8 100644 --- a/layouts/partials/sections/education.html +++ b/layouts/partials/sections/education.html @@ -1,10 +1,9 @@ -{{ if .Site.Params.education.enable | default false }} -
+
-

{{ .Site.Params.education.title | default "Education" }}

+

{{ .title | default (strings.FirstUpper .type) }}

- {{ $indexMenu := .Site.Params.education.index }} - {{ range $index, $element := .Site.Params.education.items }} + {{ $indexMenu := .index }} + {{ range $index, $element := .items }}
{{ if $indexMenu }} @@ -24,7 +23,7 @@

{{ .Site.Params.education.title | default "Education" }} {{ .date }}

{{ .title }}
- + {{ if .school.url }}
@@ -40,7 +39,7 @@
GPA: {{ .GPA }} - +
{{ end }}
@@ -63,4 +62,3 @@
-{{ end }} diff --git a/layouts/partials/sections/experience.html b/layouts/partials/sections/experience.html index f9c2d13d..5e3de60f 100644 --- a/layouts/partials/sections/experience.html +++ b/layouts/partials/sections/experience.html @@ -1,35 +1,34 @@ -{{ if .Site.Params.experience.enable | default false }} -
+
-

{{ .Site.Params.experience.title | default "Experience" }}

+

{{ .title | default (strings.FirstUpper .type) }}

- {{ range $index, $element := .Site.Params.experience.items }} + {{ range $index, $element := .items }} {{ if (eq $index 0) }} - {{ else }} -
{{ .Site.Params.experience.title | default "Experience" {{ .job }} - {{ .company }} - +
{{ .date }} {{ if .info.enable | default true }} - + > {{ end }}
- + {{ if .featuredLink.enable | default false }}
- {{ .featuredLink.name | default "Featured Link" }} + {{ .featuredLink.name | default "Featured Link" }}
{{ end }} @@ -127,4 +126,3 @@

{{ .Site.Params.experience.title | default "Experience"

-{{ end }} diff --git a/layouts/partials/sections/header.html b/layouts/partials/sections/header.html index 68b05975..18d5b5e0 100644 --- a/layouts/partials/sections/header.html +++ b/layouts/partials/sections/header.html @@ -86,57 +86,17 @@ {{ end }} - {{ if and (.Site.Params.about.enable | default false) (not (.Site.Params.navbar.menus.disableAbout | default false)) }} -
  • - - {{ .Site.Params.about.title | default "About" }} - -
    • - {{ end }} - - {{ if and (.Site.Params.experience.enable | default false) (not (.Site.Params.navbar.menus.disableExperience | default false)) }} -
  • - - {{ .Site.Params.experience.title | default "Experience" }} - -
    • - {{ end }} - - {{ if and (.Site.Params.education.enable | default false) (not (.Site.Params.navbar.menus.disableEducation | default false)) }} -
  • - - {{ .Site.Params.education.title | default "Education" }} - -
    • - {{ end }} - - {{ if and (.Site.Params.projects.enable | default false) (not (.Site.Params.navbar.menus.disableProjects | default false)) }} -
  • - - {{ .Site.Params.projects.title | default "Projects" }} - -
    • - {{ end }} - - {{ if and (.Site.Params.achievements.enable | default false) (not (.Site.Params.navbar.menus.disableAchievements | default false)) }} -
  • - - {{ .Site.Params.achievements.title | default "Achievements" }} - -
    • - {{ end }} - - {{ if and (.Site.Params.contact.enable | default false) (not (.Site.Params.navbar.menus.disableContact | default false)) }} -
  • - - {{ .Site.Params.contact.title | default "Contact" }} - -
    • + {{ range (where (where .Site.Params.sections "enable" true) "showInNavbar" true) }} + {{ if and (.type) (not (eq .type "hero")) }} + {{ $id := (.id | default .type) }} + {{ $title := (.title | default (strings.FirstUpper .type)) }} + +
  • + + {{ $title }} + +
    • + {{ end }} {{ end }} {{ if and .Site.Menus.main (.Site.Params.navbar.enableSeparator | default false) }} diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html index cf580e6c..1e3208a4 100644 --- a/layouts/partials/sections/hero/index.html +++ b/layouts/partials/sections/hero/index.html @@ -1,28 +1,20 @@ -{{ if .Site.Params.hero.enable | default false }} -
    +{{ if .enable | default false }} +
    - - {{ .Site.Params.hero.intro }} - -

    - {{ .Site.Params.hero.title }} -

    -

    - {{ .Site.Params.hero.subtitle }} -

    -

    - {{ .Site.Params.hero.content | markdownify }} -

    + {{ .intro }} +

    {{ .title }}

    +

    {{ .subtitle }}

    +

    {{ .content | markdownify }}

    - {{ if .Site.Params.hero.button.enable }} - - {{ .Site.Params.hero.button.name }} + {{ if .button.enable }} + + {{ .button.name }} {{ end }}
    @@ -34,8 +26,8 @@

    -
    @@ -43,7 +35,7 @@

    - {{ if .Site.Params.hero.bottomImage.enable | default true }} + {{ if .bottomImage.enable | default true }}
    @@ -308,4 +300,4 @@

    {{ end }}
    -{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/partials/sections/hero/social.html b/layouts/partials/sections/hero/social.html index 8a36767e..19901544 100644 --- a/layouts/partials/sections/hero/social.html +++ b/layouts/partials/sections/hero/social.html @@ -1,5 +1,5 @@ - {{ range .Site.Params.hero.socialLinks.fontAwesomeIcons }} + {{ range .socialLinks.fontAwesomeIcons }} {{ end }} - {{ range .Site.Params.hero.socialLinks.customIcons }} + {{ range .socialLinks.customIcons }} +
    -

    {{ .Site.Params.projects.title | default "Projects" }}

    +

    {{ .title | default (strings.FirstUpper .type) }}

    - {{ range .Site.Params.projects.items }} + {{ range .items }}
    @@ -41,7 +40,7 @@
    {{ .title }}
    {{ end }} - {{ range ( where .Site.RegularPages "Type" "projects" ) }} + {{ range ( where site.RegularPages "Type" "projects" ) }} {{ if .Params.showInHome | default true }}
    @@ -80,4 +79,3 @@
    {{ .Title | truncate 50 }}
    -{{ end }} \ No newline at end of file diff --git a/layouts/projects/list.html b/layouts/projects/list.html index 95c6bb5b..f352bbe9 100644 --- a/layouts/projects/list.html +++ b/layouts/projects/list.html @@ -11,7 +11,7 @@ {{ end }} {{ define "main" }} -
    +

    {{.Title}}

    {{ range .Paginator.Pages }} @@ -55,4 +55,4 @@
    {{ .Title | truncate 50 }}
    -{{ end }} \ No newline at end of file +{{ end }} diff --git a/static/css/index.css b/static/css/index.css index a13aa4e1..d6711ff7 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -64,73 +64,73 @@ header .navbar.animate { .tooltip-inner { line-height: 1rem; } -.tooltip .tooltip-arrow { +.tooltip .tooltip-arrow { visibility: hidden !important; } /* hero */ -#hero { +.hero { min-height: 100vh; line-height: 2rem; max-width: 100%; } -#hero .content.animate { +.hero .content.animate { animation: fade-left 1s ease-out; } -#hero .hero-bottom-svg { +.hero .hero-bottom-svg { opacity: 0.5; position: absolute; bottom: -50px; left: -150px; } -#hero .subtitle { +.hero .subtitle { font-size: clamp(14px,5vw,16px); opacity: 0.6; } -#hero h2 { +.hero h2 { font-size: clamp(40px, 8vw, 80px); color: var(--primary-color) !important; } -#hero h3 { +.hero h3 { font-size: clamp(40px, 8vw, 60px); /* color: var(--primary-color) !important; */ opacity: 0.5; } -#hero p { +.hero p { margin: 20px 0px 0px; max-width: 640px; opacity: 0.8; } -#hero .image img { +.hero .image img { box-shadow:0px 8px 56px rgba(15, 80, 100, 0.16); padding: 0; border: 3px solid var(--secondary-color); border-radius: 1rem; } -#hero .image.animate img { +.hero .image.animate img { animation: fade-in 1s ease-out; transition: box-shadow 0.3s; } -#hero .image img:hover { +.hero .image img:hover { cursor: pointer; } -#hero .image.animate img:hover { +.hero .image.animate img:hover { box-shadow: 0 0 11px rgb(15 80 100 / 20%); filter: contrast(1.2); cursor: pointer; } -#hero a.btn.social-icon { +.hero a.btn.social-icon { color: var(--primary-color) !important; line-height: 0%; border-radius: 50%; @@ -140,15 +140,15 @@ header .navbar.animate { transition: none; } -#hero a.btn.social-icon img { +.hero a.btn.social-icon img { width: 1em; } -#hero a.btn.social-icon:hover { +.hero a.btn.social-icon:hover { opacity: 0.8; } -#hero a.btn { +.hero a.btn { margin-top: 50px; padding: 0.7rem 1.75rem; border: 1px solid var(--primary-color); @@ -157,28 +157,28 @@ header .navbar.animate { transition: none; } -#hero a.btn:focus { +.hero a.btn:focus { box-shadow: none; } -#hero a.btn:hover { +.hero a.btn:hover { background-color: var(--secondary-color) !important; color: var(--text-color) !important; opacity: 0.9; } -#hero a.btn.social-icon:hover { +.hero a.btn.social-icon:hover { background-color: var(--background-color) !important; opacity: 0.7; } -#hero .hero-content > a { +.hero .hero-content > a { display: inline-block; text-decoration: none; color: var(--primary-color) !important; } -#hero .hero-content > a::after { +.hero .hero-content > a::after { content: ""; display: block; width: 0px; @@ -189,29 +189,29 @@ header .navbar.animate { opacity: 0.5; } -#hero .hero-content > a:hover::after, #hero .hero-content > a:focus::after, #hero .hero-content > a:active::after { +.hero .hero-content > a:hover::after, .hero .hero-content > a:focus::after, .hero .hero-content > a:active::after { width: 100%; } /* about me */ -#about h3 { +.about h3 { color: var(--text-secondary-color) !important; } -#about .image img { +.about .image img { box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16); transition: box-shadow 0.3s; padding: 0; border: 0; } -#about .image img:hover { +.about .image img:hover { box-shadow: 0 0 11px rgb(15 80 100 / 20%); } -#about ul { +.about ul { display: grid; grid-template-columns: repeat(2, minmax(140px, 200px)); gap: 0px 10px; @@ -221,32 +221,32 @@ header .navbar.animate { list-style: none; } -#about ul li { +.about ul li { position: relative; margin-bottom: 10px; padding-left: 20px; } -#about ul li::before { +.about ul li::before { content: "▹"; color: var(--primary-color); position: absolute; left: 0px; } -#about .content { +.about .content { font-weight: 500; opacity: 0.9 !important; line-height: 1.7rem !important; } -#about a { +.about a { display: inline-block; text-decoration: none; color: var(--primary-color) !important; } -#about a::after { +.about a::after { content: ""; display: block; width: 0px; @@ -257,75 +257,75 @@ header .navbar.animate { opacity: 0.5; } -#about a:hover::after, #about a:focus::after, #about a:active::after { +.about a:hover::after, .about a:focus::after, .about a:active::after { width: 100%; } /* experience */ -#experience h3 { +.experience h3 { color: var(--text-secondary-color) !important; } -#experience * { +.experience * { background-color: transparent !important; } -#experience .tab-pane > * { +.experience .tab-pane > * { opacity: 0.9; } -#experience .tab-pane small { +.experience .tab-pane small { opacity: 0.8; } -#experience .tab-pane ul { +.experience .tab-pane ul { padding-top: 1%; padding-bottom: 1%; } -#experience .experience-container .tab-content > .tab-pane p { +.experience .experience-container .tab-content > .tab-pane p { padding: 1% 0; margin: 0; } -#experience .experience-container { +.experience .experience-container { background-color: var(--secondary-color) !important; border-radius: .75rem; box-shadow: 0px 8px 56px rgb(15 80 100 / 16%); } -#experience .nav-item .nav-link { +.experience .nav-item .nav-link { color: var(--text-color) !important; - border-bottom: 2px solid transparent; + border-bottom: 2px solid transparent; border-radius: 0%; transition: none; cursor: pointer; } -#experience .nav-item .nav-link.active { +.experience .nav-item .nav-link.active { color: var(--text-color) !important; - border-bottom: 2px solid var(--primary-color); + border-bottom: 2px solid var(--primary-color); opacity: 0.8; } -#experience .nav-item .nav-link.active:hover { +.experience .nav-item .nav-link.active:hover { transition: none !important; } -#experience .nav-item .nav-link:hover { +.experience .nav-item .nav-link:hover { border-bottom: 2px solid var(--primary-color); opacity: 0.8; } -#experience a { +.experience a { opacity: 0.9; display: inline-block; text-decoration: none; color: var(--primary-color) !important; } -#experience a::after { +.experience a::after { content: ""; display: block; width: 0px; @@ -336,30 +336,30 @@ header .navbar.animate { opacity: 0.5; } -#experience a:hover::after, #experience a:focus::after, #experience a:active::after { +.experience a:hover::after, .experience a:focus::after, .experience a:active::after { width: 100%; } -#experience .experience-container .tab-content .tab-pane ul { +.experience .experience-container .tab-content .tab-pane ul { overflow: hidden; list-style: none; margin-bottom: 0; } -#experience .experience-container .tab-content .tab-pane ul li { +.experience .experience-container .tab-content .tab-pane ul li { position: relative; margin-bottom: 10px; padding-left: 20px; } -#experience .experience-container .tab-content .tab-pane ul li::before { +.experience .experience-container .tab-content .tab-pane ul li::before { content: "▹"; color: var(--primary-color); position: absolute; left: 0px; } -#experience .experience-container .tab-content .tab-pane .featuredLink a::after { +.experience .experience-container .tab-content .tab-pane .featuredLink a::after { display: block; width: auto; height: auto; @@ -369,28 +369,28 @@ header .navbar.animate { opacity: 1; } -#experience .experience-container .tab-content .tab-pane .featuredLink a.btn { +.experience .experience-container .tab-content .tab-pane .featuredLink a.btn { border: 1px solid var(--primary-color); border-radius: .75rem; transition: none; } -#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:focus { +.experience .experience-container .tab-content .tab-pane .featuredLink a.btn:focus { box-shadow: none; } -#experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover { +.experience .experience-container .tab-content .tab-pane .featuredLink a.btn:hover { color: var(--text-color) !important; opacity: 0.7; } /* Education */ -#education .container > h3 { +.education .container > h3 { color: var(--text-secondary-color) !important; } -#education .row .index { +.education .row .index { opacity: 0.8; padding: 13px 20px; line-height: 0%; @@ -402,11 +402,11 @@ header .navbar.animate { font-weight: bold; } -#education .card * { +.education .card * { background-color: var(--secondary-color) !important; } -#education .card { +.education .card { border-radius: 1.5rem; box-shadow: 0px 8px 56px rgb(15 80 100 / 16%); border: 2px solid var(--text-secondary-color) !important; @@ -414,36 +414,36 @@ header .navbar.animate { transition: transform 0.2s; } -#education .card .card-body { +.education .card .card-body { border-radius: 1.5rem; padding: 2rem; } @media all and (max-width:768px) { - #education .card .card-body { + .education .card .card-body { padding: 2rem 1rem; } } -#education .card:hover { +.education .card:hover { transition: 0.3s; box-shadow: 0 4px 11px rgb(15 80 100 / 16%); border: 2px solid var(--primary-color) !important; } -#education .card .card-body .education-content a { +.education .card .card-body .education-content a { color: var(--primary-color) !important; text-decoration: none; opacity: 0.9; } -#education .card .card-body > a h6 { +.education .card .card-body > a h6 { display: inline-block; text-decoration: none; color: var(--primary-color) !important; } -#education .card .card-body > a h6::after { +.education .card .card-body > a h6::after { content: ""; display: block; width: 0px; @@ -454,11 +454,11 @@ header .navbar.animate { opacity: 0.5; } -#education .card .card-body > a h6:hover::after, #education .card .card-body > a h6:focus::after, #education .card .card-body > a h6:active::after { +.education .card .card-body > a h6:hover::after, .education .card .card-body > a h6:focus::after, .education .card .card-body > a h6:active::after { width: 100%; } -#education .card .card-body a.btn { +.education .card .card-body a.btn { opacity: 0.9; border: 1px solid var(--primary-color) !important; color: var(--text-color) !important; @@ -467,21 +467,21 @@ header .navbar.animate { transition: none; } -#education .card .card-body a.btn:hover { +.education .card .card-body a.btn:hover { opacity: 0.8; } /* achievements */ -#achievements a { +.achievements a { text-decoration: none; } -#achievements h3 { +.achievements h3 { color: var(--text-secondary-color) !important; } -#achievements .card { +.achievements .card { cursor: context-menu; background-color: var(--secondary-color) !important; border-radius: 1rem; @@ -491,40 +491,40 @@ header .navbar.animate { border: 2px solid transparent; } -#achievements a.card { +.achievements a.card { cursor: alias; } -#achievements .card h5 { +.achievements .card h5 { color: var(--text-color) !important; opacity: 0.9; } -#achievements .card:hover { +.achievements .card:hover { border: 2px solid var(--text-color); transition: .3s; } -#achievements .card:focus { +.achievements .card:focus { border: 2px solid var(--text-color); transition: .3s; } -#achievements .card-text { +.achievements .card-text { background-color: var(--secondary-color) !important; color: var(--text-secondary-color) !important; } -#achievements img { +.achievements img { border-radius: 0.7rem; } /* contact */ -#contact h3 { +.contact h3 { color: var(--text-secondary-color) !important; } -#contact .btn { +.contact .btn { transition: none; transition: opacity 0.3s; border-radius: .5rem !important; @@ -533,15 +533,15 @@ header .navbar.animate { color: var(--text-color) !important; } -#contact .btn:hover { +.contact .btn:hover { opacity: .7; } -#contact .btn:focus { +.contact .btn:focus { box-shadow: none !important; } -#contact form .form-control { +.contact form .form-control { background-color: var(--secondary-color); color: var(--text-color); border-radius: .7rem; @@ -549,7 +549,7 @@ header .navbar.animate { box-shadow: 0px 8px 56px rgb(15 80 100 / 5%); } -#contact-form-status { +.contact-form-status { position: fixed; bottom: 10px; right: 10px; @@ -557,12 +557,12 @@ header .navbar.animate { transform: translate3d(0, 0, 0); } -#contact-form-status svg { +.contact-form-status svg { height: 18px; width: 18px; } -#contact-form-status button { +.contact-form-status button { border-radius: 50%; border: none; background-color: white; @@ -572,8 +572,8 @@ header .navbar.animate { font-size: .6rem !important; } -#contact-form-status .alert { +.contact-form-status .alert { border-radius: 0.5rem; box-shadow: 0px 8px 56px rgb(15 80 100 / 5%); padding: .5rem 1rem; -} \ No newline at end of file +} diff --git a/static/css/projects.css b/static/css/projects.css index 7c9e2673..7b6fbe8b 100644 --- a/static/css/projects.css +++ b/static/css/projects.css @@ -1,21 +1,21 @@ /* projects */ -#projects h3 { +.projects h3 { color: var(--text-secondary-color) !important; } -#projects a { +.projects a { text-decoration: none; color: var(--text-color) !important; } -#projects .badge { +.projects .badge { background-color: var(--background-color) !important; color: var(--text-color) !important; margin: 0 1%; } -#projects .card { +.projects .card { background-color: var(--secondary-color) !important; box-shadow: 0px 8px 56px rgb(15 80 100 / 16%); min-height: 400px; @@ -24,13 +24,13 @@ border: none !important; } -#projects .card:hover { +.projects .card:hover { box-shadow: 0 0 11px rgb(15 80 100 / 20%); transition: transform 0.3s; transform: translateY(-7px); } -#projects .card .card-head { +.projects .card .card-head { -o-object-fit: cover; object-fit: cover; overflow: hidden; @@ -39,26 +39,26 @@ border: none !important; } -#projects .card .card-footer { +.projects .card .card-footer { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; } -#projects .card:hover .card-img-top { +.projects .card:hover .card-img-top { transform: scale(1.2); transition: all 0.3s ease-out; } -#projects .card-img-top { +.projects .card-img-top { transition: transform 0.3s; } -#projects .float-end .btn { +.projects .float-end .btn { transition: none; border-radius: .5rem !important; border-color: var(--primary-color) !important; } -#projects .float-end .btn:focus { +.projects .float-end .btn:focus { box-shadow: none !important; -} \ No newline at end of file +}