Merge pull request #7 from pixincreate/readme

feat(health, css, docs): Add README.md with build instructions, Add health check, beautify buttons [#7]

.github/workflows/CI.yml

@@ -1,4 +1,4 @@
-name: Build and Deploy Hugo Website
+name: Build and Deploy
 
 on:
   push:

README.md

@@ -1 +1,100 @@
 # pixincreate.dev
+
+[![Staging or PR preview](https://github.com/pixincreate/pixincreate.dev/actions/workflows/pr-preview.yml/badge.svg)](https://github.com/pixincreate/pixincreate.dev/actions/workflows/pr-preview.yml) [![Production](https://github.com/pixincreate/pixincreate.dev/actions/workflows/CI.yml/badge.svg)](https://github.com/pixincreate/pixincreate.dev/actions/workflows/CI.yml)
+
+Welcome to my portfolio website repository! This site is built using the Hugo static site generator and uses the [Hello-Friend-NG](https://github.com/rhazdon/hugo-theme-hello-friend-ng) theme to showcase my work, projects, and achievements. It's deployed through Cloudflare using GitHub CI/CD for a seamless and efficient workflow.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [How to Build](#how-to-build)
+- [License](#license)
+- [Disclaimer](#disclaimer)
+
+## Introduction
+
+This repo is the home of **_pixincreate.dev_** and the source is available within this repo. **_pixincreate.dev_** is a "to-be-static" website and is stands as the portfolio website of _Pa1NarK_. **_pixincreate.dev_** is an entry point where you get to see all of my work and experience.
+
+## How to Build
+
+I discourage you from using this repo as your base given that you will have to go through all the changes Pa1Nark has done.
+
+To start with, install [`HUGO`](https://gohugo.io/installation/) and [Git](https://git-scm.com/download) as a pre-requisite.
+
+1. Create a HUGO project:
+
+    ```sh
+    hugo new site <your-website-name>
+    cd  <your-website-name>
+    ```
+
+2. Initialize you Git repository:
+
+    ```sh
+    git init
+    git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng
+    # Optionally,  you can try running this once as well:
+    git submodue update --recursive
+    ```
+
+3. Add theme to `hugo.toml`
+
+    ```sh
+    echo "theme = 'hello-friend-ng'" >> hugo.toml
+    ```
+
+4. Starti server for testing:
+
+    ```sh
+    # To run in 'development' environment.
+    # This will start a development server. You can preview your site by opening a web browser and navigating to `http://localhost:1313`.
+    hugo server
+    # To run locall in 'staging environment'
+    hugo server --environment "staging"
+    ```
+
+5. **Customize Your Content:**
+    Modify the content in the `content/` directory to reflect your portfolio. Hugo is highly customizable, and you can edit configuration files in the `hugo.toml` file to adjust site settings.
+
+    ```sh
+    hugo new <file-name>.md
+    ```
+
+    This should create a content file for you to work with.
+    You can refer to HUGO's [Getting-Started](https://gohugo.io/getting-started) to learn to work with the file-system
+    Prefereably, it is receommended that you go through [Hello-Friend-NG](https://github.com/rhazdon/hugo-theme-hello-friend-ng) theme's GitHub repo to learn about the custom commands that are specific tothe theme and the options that it provides
+
+6. **Build the Site:**
+
+   When you are ready to deploy your site, run:
+
+   ```bash
+   hugo --gc --minify
+   ```
+
+   This should run in `production` environment
+
+7. **Deploy with GitHub CI:**
+
+    This repository is set up with GitHub CI/CD to automatically deploy changes to Cloudflare-hosted site. Make sure to configure your Cloudflare settings and GitHub Actions workflow as needed.
+
+    7.1 **Buy a Domain**
+
+        You can buy domain at `namecheap` or `cloudflare registrar`
+
+    7.2 **Set up cloudflare**
+
+        - Set-up your cloudflare account, and create a cloudflare page  
+        - Add the custom domain you bought in the project's custom domain section
+
+## License
+
+This project is licensed under the [CC0 1.0 Universal (CC0 1.0) License](LICENSE). You are free to use and modify this project for your own purposes. For more details, see the [LICENSE](LICENSE) file.
+
+## Disclaimer
+
+YOU SHOULD NOT MISUSE ANY INFORMATION, CONTENT, OR SERVICES PROVIDED ON THIS WEBSITE. IF YOU CHOOSE TO MISUSE, IT IS YOUR RESPONSIBILITY, AND YOU ACCEPT THE CONSEQUENCES.
+I DISCLAIM ANY LIABILITY FOR ANY DAMAGES, LOSSES, OR CONSEQUENCES RESULTING FROM YOUR ACTIONS, WHETHER INTENTIONAL OR UNINTENTIONAL, BASED ON THE INFORMATION, CONTENT, OR SERVICES OFFERED ON THIS WEBSITE.
+THIS DISCLAIMER SERVES AS A CLEAR NOTICE THAT YOU ARE SOLELY ACCOUNTABLE FOR YOUR BEHAVIOR AND INTERACTIONS ON THIS WEBSITE. I WILL NOT BE HELD RESPONSIBLE FOR ANY MISUSE, HARASSMENT, MALICIOUS INTENT, OR OTHER ACTIVITIES THAT MAY RESULT FROM YOUR ENGAGEMENT WITH THIS SITE.
+BY ACCESSING AND USING THIS WEBSITE, YOU ACKNOWLEDGE AND AGREE TO THIS DISCLAIMER. IF YOU DISAGREE WITH ANY PART OF THIS DISCLAIMER, PLEASE REFRAIN FROM USING THIS WEBSITE.
+THIS DISCLAIMER APPLIES TO ALL USERS, VISITORS, AND INTERACTIONS ON THIS WEBSITE.

content/about.md

@@ -6,7 +6,7 @@ draft = false
 
 ## Introduction
 
-Hi I'm Pavana Narayana K, an 8-bit developer, interested in information security. I spend most of time lurking around data breaches, latest CVEs and stalking repos on GitHub. However, that's not the end. I do have experience automating stuffs here and there and love contributing to **open-source** (which is where I live) for a better world.
+Hi I'm Pavana Narayana K AKA `Pa1NarK`, an 8-bit developer, interested in information security. I spend most of time lurking around data breaches, latest CVEs and stalking repos on GitHub. However, that's not the end. I do have experience automating stuffs here and there and love contributing to **open-source** (which is where I live) for a better world.
 
 A lot of my work is open-source on [GitHub](https://github.com).
 
@@ -30,3 +30,7 @@ A lot of my work is open-source on [GitHub](https://github.com).
 Did a lot of _SDE_ work in _RustLang_ and fixed a lot of bugs after joining as a **QE**, wrote an entire test suite to run automated tests to catch bugs within the product like a _DevOps_ Engineer
 
 {{< back-to-top >}}
+
+___
+
+All contents on this site is licensed under CC0 1.0 Universal unless stated otherwise.

content/work.md

@@ -19,4 +19,7 @@ a CLI tool that will attend your online classes on behalf of you. our job is sch
 
 and [many more...](https://github.com/pixincreate?tab=repositories)
 
+You can contact me from the below button
+
+{{< contact-button-work >}}
 {{< back-to-top >}}

layouts/partials/contact-button.html

@@ -1 +1 @@
-<a href="contact/"><button>Get in touch</button></a>
+<a href="contact/"><button type="button"><span>Get in touch</span></button></a>

layouts/partials/footer.html

@@ -10,7 +10,7 @@
         <br>
         <a href="/privacy-policy">Privacy</a>
         <a href="/terms-of-service">Terms</a>
-        <a href="/to-be-updated">Status</a>
+        <a href="https://stats.uptimerobot.com/JM9DRspAMl">Health</a>
     </small>
     <div class="footer__inner">
         <div class="footer__content">

layouts/shortcodes/back-to-top.html

@@ -1,6 +1,6 @@
 <div class="progress-bar">
     <a href="#top">
-        <button class="back-to-top-button hidden">
+        <button class="back-to-top-button hidden" type="button">
             &uarr;
         </button>
     </a>

layouts/shortcodes/contact-button-work.html

@@ -0,0 +1,3 @@
+<div>
+    {{ partial "contact-button.html" }}
+</div>

layouts/shortcodes/contact.html

@@ -12,7 +12,7 @@
             <label for="message">Message</label>
             <textarea id="message" name="message" placeholder="Lorem ipsum dolor sit amet," required></textarea>
         </div>
-        <button>Submit</button>
+        <button onclick="alert('You\'ll now be redirected to your mail app.')"><span>Submit</span></button>
     </form>
 </div>
 <script>
@@ -24,9 +24,9 @@
         const message = document.getElementById("message").value;
 
         // Create a mailto link with subject and body
-        const subject = encodeURIComponent("Getting in touch through your website");
+        const subject = encodeURIComponent("Getting in touch with Pa1NarK");
         const body = `Name: ${name}%0D%0AEmail: ${email}%0D%0AMessage:%0D%0A${message}`;
-        const mailtoLink = `mailto:[email protected]?subject=${subject}&body=${body}`;
+        const mailtoLink = `mailto:[email protected]?subject=${subject}&body=${body}`;
 
         // Open the user's email client with the pre-filled email
         window.location.href = mailtoLink;

static/css/styles.css

@@ -17,6 +17,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    -webkit-transition: all 0.5s;
+    /* add this line, chrome, safari, etc */
+    -moz-transition: all 0.5s;
+    /* add this line, firefox */
+    -o-transition: all 0.5s;
+    /* add this line, opera */
+    transition: all 0.5s;
+    /* add this line */
 }
 
 .back-to-top-button:hover {
@@ -108,6 +116,7 @@ textarea {
     min-height: 100px;
 }
 
+/* Used in Submit and Get in touch button */
 button {
     display: inline-block;
     padding: 10px 20px;
@@ -119,13 +128,47 @@ button {
     font-size: 15px;
     cursor: pointer;
     margin-top: 0.9rem;
+    -webkit-transition: all 0.5s;
+    /* add this line, chrome, safari, etc */
+    -moz-transition: all 0.5s;
+    /* add this line, firefox */
+    -o-transition: all 0.5s;
+    /* add this line, opera */
+    transition: all 0.5s;
+    /* add this line */
+}
+
+button span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.3s;
+}
+
+button span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -10px;
+    transition: 0.3s;
 }
 
 button:hover {
     background: -moz-linear-gradient(-45deg, #02EAFF 0%, #D401D4 100%);
     background: -webkit-linear-gradient(-45deg, #02EAFF 0%, #D401D4 100%);
     background: linear-gradient(135deg, #02EAFF 0%, #D401D4 100%);
     color: #fff;
+    box-shadow: 1px 2px 3px 4px rgba(10, 10, 10, 0.2);
+}
+
+button:hover span {
+    padding-right: 15px;
+}
+
+button:hover span:after {
+    opacity: 1;
+    right: 0;
 }
 
 .footer__content span {