Merge pull request #478 from canopas/update-website-readme

Enhance : Update readme with new content
canopas · Aug 25, 2023 · 15c8e3b · 15c8e3b
2 parents 6720b6c + e42ef11
commit 15c8e3b
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,51 +1,62 @@
-<h1 align="left"><strong>Repository of canopas website includes intuitive UI designs</strong></h1>
-
-Source code repository of [Canopas Software Website](https://canopas.com).
+<h1 align="left"><strong>Website with intuitive UI designs</strong></h1>
 
 We intend to keep this open source. Plan is to keep the repository up to date with latest technologies and best practices.
 
-## Requirements
+## Showcase
 
-- Node18
-- Go 1.20
+This repository contains the working code of [Canopas website](https://canopas.com). You can check out the link to view a live example of this repository.
 
-### Note :
+### [Home Page](https://canopas.com/)
 
-- We have used SSR(Server Side Rendering) in website to improve performance. Server will render UI in `<!--app-html-->` part of `vue-frontend/index.html`. Due to this, reformating of `index.html` can cause UI breaking.
+### [Services](https://canopas.com/services)
 
-## To run front-end
+### [Contributions](https://canopas.com/contributions)
 
-- Install dependencies
+---
 
-  ```
-  cd vue-frontend && yarn install
-  ```
+# Table of contents
 
-- Run vue server
+- [Key features](https://github.com/canopas/canopas-website#key-features)
+- [Canopas website -- Backend](https://github.com/canopas/canopas-website#backend)
+  - [Requirements](https://github.com/canopas/canopas-website#requirements)
+  - [Setup](https://github.com/canopas/canopas-website#setup)
+- [Canopas website -- Frontend](https://github.com/canopas/canopas-website#frontend)
+  - [Requirements](https://github.com/canopas/canopas-website#requirements-1)
+  - [Setup](https://github.com/canopas/canopas-website#setup-1)
+- [Formatting and Linting](https://github.com/canopas/canopas-website#formatting-and-linting)
+- [Dependencies](https://github.com/canopas/canopas-website#dependencies)
+  - [Backend](https://github.com/canopas/canopas-website#requirements)
+- [Licence](https://github.com/canopas/canopas-website#licence)
 
-  ```
-  yarn dev
-  ```
+---
 
-- Compiles and minifies for production
+# Key Features
 
-  ```
-  yarn build
-  ```
+1. **Vuejs as Frontend:** Canopas website is built using Vue.js, a progressive JavaScript framework that offers a flexible and efficient way to build user interfaces. Vue.js is renowned for its simplicity and ease of integration, making it an ideal choice for creating dynamic and interactive web applications.
 
-- Server side rendering
+2. **Go as Backend:** canopas website backend is developed using the Go programming language, commonly referred to as Golang. Go is a statically typed, compiled language designed for simplicity, efficiency, and concurrency. With its focus on performance and readability, Go offers a robust foundation for building scalable applications.
 
-  ```
-  yarn build
-  ```
+3. **Server Side Rendering:** We have used SSR(Server Side Rendering) in website to improve performance. Server will render UI in `<!--app-html-->` part of `vue-frontend/index.html`. Due to this, reformating of `index.html` can cause UI breaking.
 
-  ```
-  yarn serve
-  ```
+4. **SEO-friendly URLs and Metadata:** We prioritize SEO best practices to ensure that canopas website receive the visibility they deserve in search engines. From meta tags to URL structure and sitemaps, canopas website is equipped with all the essential elements for optimal SEO.
 
-You can access the page by pointing a web browser at http://localhost:8080.
+5. **Responsive and Mobile-friendly Design:** We understand the importance of a mobile-friendly design in modern SEO. Canopas website is fully responsive and adapts seamlessly to various screen sizes, providing a positive user experience across devices.
+
+6. **CI/CD and Deployment:** With CI in place, every code change is automatically tested and integrated into the main codebase. This ensures that the main branch always remains stable, reducing the chances of bugs and allowing for rapid deployment. This repository contains AWS ECR/ECS and EC2 stack for frontend and backend deployment.
+
+7. **Code formatting and linting:** Clean, readable, and consistent code is the foundation of any successful project. This website follows strict code formatting and linting rules, which are enforced through automated tools. This ensures that the codebase remains maintainable and adheres to industry best practices.
 
-## To run backend
+8. **reCAPTCHA Integration:** Security is paramount, especially when it comes to user-generated content. Canopas website integrates reCAPTCHA, a widely trusted CAPTCHA service, to protect your site from spam and abuse while maintaining a user-friendly experience.
+
+---
+
+# Canopas website -- Backend
+
+## Requirements
+
+- Go 1.20
+
+## Setup
 
 - Start Go Server
 
@@ -115,37 +126,105 @@ You can access the page by pointing a web browser at http://localhost:8080.
 
   [Here](https://github.com/canopas/canopas-website/blob/master/api-doc.md) is APIs reference used in the website.
 
+# Canopas website -- Frontend
+
+## Requirements
+
+- Node18
+
+## Setup
+
+### Install dependencies
+
+```
+cd vue-frontend && yarn install
+```
+
+### Start website in dev mode using,
+
+```
+yarn dev
+```
+
+### Compiles and minifies for production
+
+```
+yarn build
+```
+
+### Server side rendering
+
+```
+yarn build
+```
+
+```
+yarn serve
+```
+
+You can access the page by pointing a web browser at http://localhost:8080.
+
+# Formatting and Linting
+
+The pre-commit hook will automatically lint and format your code before committing.
+
 ## To enable pre-commit hook
 
 ```
 git config core.hooksPath .githooks
 ```
 
-## Dependencies
+# Dependencies
+
+## Backend
+
+### [gin](https://github.com/gin-gonic/gin)
+
+- The core package of the Gin web framework, providing routing, middleware, and other essential features for building web applications.
+
+### [sqlx](https://github.com/jmoiron/sqlx)
+
+- A library that provides a set of extensions on top of the standard Go database/sql package. It enhances database access with features like named parameters and better scanning into structs.
+
+### [logrus](https://github.com/sirupsen/logrus)
+
+- A structured logger for Go. It provides a flexible way to log messages with different severity levels and customizable output formats.
+
+### [testify](https://github.com/stretchr/testify)
+
+- A popular testing toolkit for Go. It provides various assertion functions and testing utilities to enhance the readability and maintainability of your test code.
+
+### [cors](https://github.com/gin-contrib/cors)
+
+- A middleware for Gin that provides Cross-Origin Resource Sharing (CORS) support, allowing controlled access to resources hosted on different domains.
+
+### [gzip](https://github.com/gin-contrib/gzip)
+
+- A middleware for Gin that enables Gzip compression of HTTP responses, reducing data transfer size and improving performance.
 
-Following are dependencies used by the project
+## Frontend
 
-#### [VueJs](https://github.com/vuejs/core)
+### [VueJs](https://github.com/vuejs/core)
 
 - It is used to build web interfaces and one-page applications.
 
-#### [Vite](https://github.com/vitejs/vite)
+### [Vite](https://github.com/vitejs/vite)
 
 - It is frontend build tool that significantly improves the frontend development experience. We have used it for server side rendering.
 
-#### [Tailwind CSS](https://tailwindcss.com/)
+### [Tailwind CSS](https://tailwindcss.com/)
 
 - A utility-first CSS framework packed with classes like flex, pt-4, my-4 and text-center that can be composed to build any design, directly in your markup.
 
-#### [Vue collapse transition](https://github.com/ivanvermeyen/vue-collapse-transition)
+### [Vue collapse transition](https://github.com/ivanvermeyen/vue-collapse-transition)
 
 - It is used for collapses elements horizontally or vertically.
 
-#### [FontAwesome](https://github.com/FortAwesome/Font-Awesome)
+### [FontAwesome](https://github.com/FortAwesome/Font-Awesome)
 
 - Used for icons.
 
-#### [Swiper](https://github.com/nolimits4web/swiper)
+### [Swiper](https://github.com/nolimits4web/swiper)
 
 - Used for Animation.
 

diff --git a/vue-frontend/src/components/contributions/DevOps.vue b/vue-frontend/src/components/contributions/DevOps.vue
@@ -81,12 +81,12 @@
             :src="blog.image[0]"
             :srcset="`${blog.image[0]} 400w, ${blog.image[1]} 800w`"
             alt="devops"
-            class="tw-h-full tw-w-full tw-rounded-5 tw-object-cover"
+            class="tw-h-full tw-w-full tw-rounded-[20px] tw-object-cover"
             loading="lazy"
           />
           <div @click="openBlog(blog.link, 'tap_contribution_Devops_section')">
             <div
-              class="gradient-class tw-opacity-1 tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-h-[21%] tw-w-full tw-rounded-b-5 tw-transition-all tw-duration-1000 group-hover:tw-h-full lg:group-hover:tw-h-[85%]"
+              class="gradient-class tw-opacity-1 tw-ease tw-absolute tw-bottom-[0] tw-left-[0] tw-h-[21%] tw-w-full tw-rounded-b-[20px] tw-transition-all tw-duration-1000 group-hover:tw-h-full lg:group-hover:tw-h-[85%]"
             ></div>
             <div
               class="tw-opacity-1 tw-absolute -tw-bottom-16 tw-translate-y-[50%] tw-p-4 tw-font-inter-medium tw-text-white tw-transition-all tw-duration-1000 group-hover:-tw-bottom-4 group-hover:tw-translate-y-[0%] group-hover:tw-transition-all group-hover:tw-duration-1000 xl:group-hover:tw-bottom-0 2xl:group-hover:tw-bottom-8"