kova/hugo-profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading icon on page loading

Browse Source
This commit is contained in:
gurusabarish
2021-06-04 19:29:24 +05:30
parent 63454f7c31
commit 0d77e9d032
11 changed files with 175 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.yaml
+19 -14
View File
@@ -24,24 +24,11 @@ params:
# Navbar Menus # Navbar Menus
customMenus: customMenus:
- name: "About"
Url: "/#about"
- name: "Experience"
Url: "/#experience"
- name: "Education"
Url: "/#education"
- name: "Projects"
Url: "/#projects"
- name: "Contact"
Url: "/#contact"
- name: Achievements
Url: "/#achievements"
- name: "Blog" - name: "Blog"
Url: "/blog" Url: "/blog"
# home # home
socialiconfooter: true disable_home: false
disablehome: false
profile_image: "/images/gurusabarish.webp" profile_image: "/images/gurusabarish.webp"
name: "Gurusabarish" name: "Gurusabarish"
profession: "Full stack developer" profession: "Full stack developer"
@@ -52,6 +39,7 @@ params:
facebook: "https://facebook.com" facebook: "https://facebook.com"
# About # About
disable_about: false
descripe_l1_person: "Hi, I'm Gurusabarish, a passionate web developer and ML engineer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly." descripe_l1_person: "Hi, I'm Gurusabarish, a passionate web developer and ML engineer. I tend to make use of modern web technologies to build websites that looks great, feels fantastic, and functions correctly."
descripe_l2_person: "I started my career as a web developer back in 2020 when try to make a blog for me. You can find my works [here](#projects)" descripe_l2_person: "I started my career as a web developer back in 2020 when try to make a blog for me. You can find my works [here](#projects)"
skills: skills:
@@ -65,6 +53,7 @@ params:
percentage: 70 percentage: 70
# Experience # Experience
disable_experience: false
experience: experience:
- company: "Google" - company: "Google"
role: "Software developer" role: "Software developer"
@@ -92,6 +81,7 @@ params:
- point: It's a very good experience. - point: It's a very good experience.
# Education # Education
disable_education: false
education: education:
- degree: "B.tech" - degree: "B.tech"
branch: "Information Technology" branch: "Information Technology"
@@ -110,6 +100,7 @@ params:
graduation: "2023" graduation: "2023"
# Projects # Projects
disable_projects: false
projects: projects:
- name: "hugo profile" - name: "hugo profile"
img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp
@@ -118,14 +109,28 @@ params:
description: "Build your website with “Hugo” comment Go to the terminal and type “hugo” " description: "Build your website with “Hugo” comment Go to the terminal and type “hugo” "
# Achievements # Achievements
disable_achievements: false
achievements: achievements:
- title: Techfest winner - title: Techfest winner
description: It's a great experience. description: It's a great experience.
img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp
- title: Techfest winner
description: It's a great experience.
img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp
- title: Techfest winner
description: It's a great experience.
img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp
- title: Techfest winner
description: It's a great experience.
img: https://gurusabarish.tech/static/d6ef67298140446c6f2e94b8b38ff25c/15384/hugo.webp
# Contact # Contact
disable_contact: false
email: "[email protected]" email: "[email protected]"
# Footer
socialiconfooter: true
#Description for seo. If you want to show description in your listing or single page, let's make it true #Description for seo. If you want to show description in your listing or single page, let's make it true
showdescription: false showdescription: false
tweet: true tweet: true
layouts/index.html
+42 -1
View File
@@ -65,6 +65,7 @@
</head> </head>
<body> <body>
<div id="loader" class="center"></div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script> <script>
AOS.init(); AOS.init();
@@ -72,19 +73,59 @@
<div> <div>
{{- partial "sections/v3/navbar.html" . -}} {{- partial "sections/v3/navbar.html" . -}}
{{ if .Site.Params.disablehome }} {{ if .Site.Params.disable_home }}
{{ else }} {{ else }}
{{- partial "sections/v3/home.html" . -}} {{- partial "sections/v3/home.html" . -}}
{{ end }} {{ end }}
{{ if .Site.Params.disable_about }}
{{ else }}
{{- partial "sections/v3/about.html" . -}} {{- partial "sections/v3/about.html" . -}}
{{ end }}
{{ if .Site.Params.disable_experience }}
{{ else }}
{{- partial "sections/v3/experience.html" . -}} {{- partial "sections/v3/experience.html" . -}}
{{ end }}
{{ if .Site.Params.disable_education }}
{{ else }}
{{- partial "sections/v3/education.html" . -}} {{- partial "sections/v3/education.html" . -}}
{{ end }}
{{ if .Site.Params.disable_projects }}
{{ else }}
{{- partial "sections/v3/projects.html" . -}} {{- partial "sections/v3/projects.html" . -}}
{{ end }}
{{ if .Site.Params.disable_achievements }}
{{ else }}
{{- partial "sections/v3/achievements.html" . -}} {{- partial "sections/v3/achievements.html" . -}}
{{ end }}
{{ if .Site.Params.disable_contact }}
{{ else }}
{{- partial "sections/v3/contact.html" . -}} {{- partial "sections/v3/contact.html" . -}}
{{ end }}
{{- partial "sections/v3/footer.html" . -}} {{- partial "sections/v3/footer.html" . -}}
{{- partial "sections/v3/scripts.html" . -}} {{- partial "sections/v3/scripts.html" . -}}
</div> </div>
<script>
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.querySelector(
"body").style.visibility = "hidden";
document.querySelector(
"#loader").style.visibility = "visible";
} else {
document.querySelector(
"#loader").style.display = "none";
document.querySelector(
"body").style.visibility = "visible";
}
};
</script>
</body> </body>
{{ else }} {{ else }}
layouts/partials/sections/v3/about.html
+7 -5
View File
@@ -1,9 +1,10 @@
<div id="about" class="pt-3" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true"> <div id="about" class="pt-3" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
<div class="container-fluid"> <div class="container-fluid">
<div class="text-light text-center h3">About Me</div> <div class="text-light text-center h3">About Me</div>
<div class="row justify-content-center about"> <div class="row justify-content-center about">
<div class="col-md-6 about-content"> <div class="col-md-6 about-content">
<div class="px-2" style="color: #8892b0;"> <div class="px-2" style="color: #8892b0;" data-aos="zoom-in" data-aos-offset="50" data-aos-delay="50"
data-aos-once="true" data-aos-duration="900">
{{ .Site.Params.descripe_l1_person | markdownify }} {{ .Site.Params.descripe_l1_person | markdownify }}
<br> <br>
<br> <br>
@@ -11,17 +12,17 @@
</div> </div>
{{ if .Site.Params.email }} {{ if .Site.Params.email }}
<div class="py-3 pl-2"> <div class="py-3 pl-2">
<a href="mailto:{{ .Site.Params.email }}?subject=Say hi!" class="contact-btn btn"> <a href="mailto:{{ .Site.Params.email }}?subject=Say hi!" class="contact-btn btn" data-aos="zoom-in"
data-aos-offset="50" data-aos-delay="50" data-aos-once="true" data-aos-duration="1000">
Get In Touch Get In Touch
</a> </a>
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="col-md-5 about-skill"> <div class="col-md-5 about-skill">
<div class="text-secondary text-center h4">Skills</div> <div class="text-secondary text-center h4">Skills</div>
{{ range .Site.Params.skills }} {{ range .Site.Params.skills }}
<div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
<div style="color: rgb(230, 241, 255)"> <div style="color: rgb(230, 241, 255)">
{{ .name }} {{ .name }}
</div> </div>
@@ -29,6 +30,7 @@
<div class="progress-bar" role="progressbar" style="width: {{ .percentage }}%;" aria-valuemin="0" <div class="progress-bar" role="progressbar" style="width: {{ .percentage }}%;" aria-valuemin="0"
aria-valuemax="100"></div> aria-valuemax="100"></div>
</div> </div>
</div>
{{ end }} {{ end }}
</div> </div>
layouts/partials/sections/v3/achievements.html
+3 -2
View File
@@ -1,6 +1,6 @@
{{ $img:= "images/v1/background.png" }} {{ $img:= "images/v1/background.png" }}
<section class="py-3 pt-5" id="achievements" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600" <section class="py-3 pt-5" id="achievements" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600"
data-aos-once="true"> data-aos-once="true">
<div class="container-fluid"> <div class="container-fluid">
<div class="text-light text-center h3">Achievements</div> <div class="text-light text-center h3">Achievements</div>
@@ -9,7 +9,8 @@
{{ if .img }} {{ if .img }}
{{ $img = .img }} {{ $img = .img }}
{{ end }} {{ end }}
<div class="col-md-5 achiv-out px-4 px-md-2 my-2"> <div class="col-md-5 achiv-out px-4 px-md-2 my-2" data-aos="fade-up" data-aos-easing="linear"
data-aos-duration="600" data-aos-once="true">
<div class="achiv-card d-flex align-items-end shadow-lg rounded" style="background-image: url({{ .img }});"> <div class="achiv-card d-flex align-items-end shadow-lg rounded" style="background-image: url({{ .img }});">
<div class="p-3 w-100 achiv overflow-hidden"> <div class="p-3 w-100 achiv overflow-hidden">
<h4 class="text-center"> <h4 class="text-center">
layouts/partials/sections/v3/contact.html
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="row justify-content-center px-md-5"> <div class="row justify-content-center px-md-5">
<div class="col-md-6 py-3"> <div class="col-md-6 py-3">
<div class=" text-center"> <div class=" text-center">
Although I'm not currently looking for any new opportunities, my inbox is always open. Whether you have a 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! question or just want to say hi, I'll try my best to get back to you!
</div> </div>
{{ if .Site.Params.email }} {{ if .Site.Params.email }}
layouts/partials/sections/v3/education.html
+3 -2
View File
@@ -1,11 +1,12 @@
<section id="education" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true"> <section id="education" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
<div class="container-fluid py-3 pt-5"> <div class="container-fluid py-3 pt-5">
<div class="text-light text-center h3">Education</div> <div class="text-light text-center h3">Education</div>
<div class="row row-eq-height justify-content-center"> <div class="row row-eq-height justify-content-center">
<div class="col-md-5 pl-5 py-3 pb-0 v-center"> <div class="col-md-5 pl-5 py-3 pb-0 v-center">
<ul class="edu"> <ul class="edu">
{{ range .Site.Params.education }} {{ range .Site.Params.education }}
<li class="py-2 edu-item"> <li class="py-2 edu-item" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600"
data-aos-once="true">
<h5 style="font-size: 20px;">{{ .degree }} - {{ .branch }}</h5> <h5 style="font-size: 20px;">{{ .degree }} - {{ .branch }}</h5>
<div style="font-size: 15px;"> <div style="font-size: 15px;">
{{ .university }} {{ .university }}
layouts/partials/sections/v3/experience.html
+2 -19
View File
@@ -1,4 +1,4 @@
<section id="experience" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true"> <section id="experience" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
<div class="container-fluid pt-5"> <div class="container-fluid pt-5">
<div class="text-light text-center h3">Experience</div> <div class="text-light text-center h3">Experience</div>
@@ -6,7 +6,7 @@
<div class="d-md-none d-lg-none d-sm-block"> <div class="d-md-none d-lg-none d-sm-block">
<ol class="ex-ol pl-5 pr-3"> <ol class="ex-ol pl-5 pr-3">
{{ range .Site.Params.experience }} {{ range .Site.Params.experience }}
<li class="ex-ol-li"> <li class="ex-ol-li" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
<h4> <h4>
<span class="text-primary">{{ .company }}</span> - {{ .role }} <span class="text-primary">{{ .company }}</span> - {{ .role }}
</h4> </h4>
@@ -80,23 +80,6 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<div class="h4">
<span class="text-primary">Google</span> - Software developer
</div>
<div>
<small>Feb 2019</small>
-
<small>Sep 2020</small>
</div>
<ul class="py-2 ex">
<li class="ex-item">Write modern, performant, maintainable code for a diverse array of client and internal
projects</li>
<li class="ex-item">Write modern, performant, maintainable code for a diverse array of client and internal
projects</li>
</ul>
</div>
</div> </div>
</div> </div>
layouts/partials/sections/v3/home.html
+12 -8
View File
@@ -3,20 +3,23 @@
<div class="row justify-content-center intro" data-aos="fade-down" data-aos-easing="linear" <div class="row justify-content-center intro" data-aos="fade-down" data-aos-easing="linear"
data-aos-duration="1000"> data-aos-duration="1000">
<div class="col-md-7 name-container"> <div class="col-md-7 name-container">
<div class="name" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000"> <div class="name" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000"
data-aos-once="true">
<div class="text-warning" style="font-size: 15px;" data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" <div class="text-warning" style="font-size: 15px;" data-aos="fade-up" data-aos-offset="50" data-aos-delay="50"
data-aos-duration="900"> data-aos-once="true" data-aos-duration="900">
Hi there, I'm Hi there, I'm
</div> </div>
<h1 class="text-primary" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="900"> <h1 class="text-primary" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="900"
data-aos-once="true">
{{ .Site.Params.name }} {{ .Site.Params.name }}
</h1> </h1>
<h5 class="text-light" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="900"> <h5 class="text-light" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="900"
data-aos-once="true">
{{ .Site.Params.profession }} {{ .Site.Params.profession }}
</h5> </h5>
</div> </div>
<div class="row social pt-4" data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" <div class="row social pt-4" data-aos="fade-up" data-aos-offset="50" data-aos-delay="50" data-aos-duration="900"
data-aos-duration="900"> data-aos-once="true">
{{ if .Site.Params.github }} {{ if .Site.Params.github }}
<a href="{{ .Site.Params.github }}" class="social-icon"> <a href="{{ .Site.Params.github }}" class="social-icon">
<i class="fab fa-lg fa-github"></i> <i class="fab fa-lg fa-github"></i>
@@ -45,7 +48,8 @@
{{ end }} {{ end }}
</div> </div>
<div class="pt-4 btn-intro"> <div class="pt-4 btn-intro">
<a href="#about" class="btn-know btn btn-outline-info"> <a href="#about" class="btn-know btn btn-outline-info" data-aos="zoom-in" data-aos-offset="50"
data-aos-delay="50" data-aos-duration="900" data-aos-once="true">
About me About me
</a> </a>
</div> </div>
@@ -53,7 +57,7 @@
</div> </div>
<div class="col-md-5 text-center"> <div class="col-md-5 text-center">
{{ if .Site.Params.profile_image }} {{ if .Site.Params.profile_image }}
<img class="profile rounded shadow-lg" data-aos="zoom-in" data-aos-once="true" <img class="profile rounded shadow-lg" data-aos="zoom-in" data-aos-once="true" data-aos-duration="1000"
src="{{ .Site.Params.profile_image }}" alt="{{ .Site.Params.name }}" class="rounded"> src="{{ .Site.Params.profile_image }}" alt="{{ .Site.Params.name }}" class="rounded">
{{ end }} {{ end }}
</div> </div>
layouts/partials/sections/v3/navbar.html
+50 -5
View File
@@ -1,6 +1,6 @@
<nav style="background-color: #0a192f;" class="pt-3 navbar-home navbar navbar-expand-lg navbar-dark" <div class="container">
data-aos="fade-down" data-aos-easing="linear" data-aos-duration="500"> <nav style="background-color: #0a192f;" class="pt-3 navbar navbar-expand-lg navbar-dark" data-aos="fade-down"
<div class="container"> data-aos-easing="linear" data-aos-duration="500">
<a class="navbar-brand" href="{{ .Site.BaseURL | relURL }}"> <a class="navbar-brand" href="{{ .Site.BaseURL | relURL }}">
{{ if .Site.Params.favicon }} {{ if .Site.Params.favicon }}
<img src="{{ .Site.Params.favicon }}" width="30" height="30" class="d-inline-block align-top"> <img src="{{ .Site.Params.favicon }}" width="30" height="30" class="d-inline-block align-top">
@@ -16,12 +16,57 @@
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto text-center"> <ul class="navbar-nav ml-auto text-center">
{{ if .Site.Params.disable_about }}
{{ else }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#about" aria-label="about">About</a>
</li>
{{ end }}
{{ if .Site.Params.disable_experience }}
{{ else }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#experience" aria-label="experience">Experience</a>
</li>
{{ end }}
{{ if .Site.Params.disable_education }}
{{ else }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#education" aria-label="education">Education</a>
</li>
{{ end }}
{{ if .Site.Params.disable_projects }}
{{ else }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#projects" aria-label="projects">Projects</a>
</li>
{{ end }}
{{ if .Site.Params.disable_achievements }}
{{ else }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#achievements"
aria-label="achievements">Achievements</a>
</li>
{{ end }}
{{ if .Site.Params.disable_contact }}
{{ else }}
<li class="nav-item navbar-text">
<a class="nav-link" href="{{ .Site.BaseURL | relURL }}#contact" aria-label="contact">Contact</a>
</li>
{{ end }}
{{ range site.Params.customMenus }} {{ range site.Params.customMenus }}
<li class="nav-item navbar-text"> <li class="nav-item navbar-text">
<a class="nav-link" href="{{.Url}}" aria-label="{{ .name }}">{{ .name }}</a> <a class="nav-link" href="{{.Url}}" aria-label="{{ .name }}">{{ .name }}</a>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
</div> </nav>
</nav> </div>
layouts/partials/sections/v3/projects.html
+1 -1
View File
@@ -1,4 +1,4 @@
<section id="projects" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true"> <section id="projects" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="600" data-aos-once="true">
<div class="container-fluid py-3 pt-5"> <div class="container-fluid py-3 pt-5">
<div class="text-light text-center h3">Projects</div> <div class="text-light text-center h3">Projects</div>
<div class="row justify-content-center pt-2"> <div class="row justify-content-center pt-2">
static/css/v3/v3.css
+29 -11
View File
@@ -9,6 +9,32 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
/*loader */
#loader {
position: fixed;
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 12px solid #444444;
width: 70px;
height: 70px;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.center {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* v3 navbar */ /* v3 navbar */
.navbar-brand { .navbar-brand {
color: #007bff !important; color: #007bff !important;
@@ -19,9 +45,6 @@ a:hover {
.navbar .nav-link:hover { .navbar .nav-link:hover {
color: #007bff !important; color: #007bff !important;
} }
.navbar-home {
border-top: 5px solid #ff69b4;
}
.navbar-text { .navbar-text {
font-size: 16px !important; font-size: 16px !important;
} }
@@ -61,10 +84,6 @@ a:hover {
padding-left: 15%; padding-left: 15%;
} }
.profile { .profile {
filter: gray;
-webkit-filter: sepia(70%);
filter: sepia(70%);
cursor: pointer;
padding: 1%; padding: 1%;
border: 1px solid #f9fafc; border: 1px solid #f9fafc;
width: 250px; width: 250px;
@@ -319,16 +338,15 @@ a:hover {
} }
/* v3 Achievements */ /* v3 Achievements */
.achiv-card:hover {
filter: grayscale(100%);
}
.achiv-card { .achiv-card {
height: 300px; height: 300px;
width: 100%; width: 100%;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
filter: grayscale(100%);
}
.achiv-card:hover {
filter: none;
} }
.achiv { .achiv {
min-height: 40%; min-height: 40%;