Completed design and made it responsive

Author: sudip-101

api/controller.go

@@ -16,124 +16,124 @@ var projects = []Repo{
 		Name:        "Parkify",
 		Url:         "​​https://github.com/DSCKGEC/parkify",
 		Description: "Hassle-free way to book your parking space with easy cancellations and timeline extensions",
-		Tags:        []string{},
+		Tags:        []string{"html", "css", "javascript", "node-js", "express", "mongodb", "bootstrap"},
 	},
 	{
 		Name:        "Libraryly",
 		Url:         "​​https://github.com/DSCKGEC/Libraryly",
 		Description: "A software solution to handle the primary functions of a library like managing books, members and issues",
-		Tags:        []string{},
+		Tags:        []string{"html", "css", "javascript", "node-js", "express", "mongodb"},
 	},
 	{
 		Name:        "Seat&Eat",
 		Url:         "​​https://github.com/DSCKGEC/SeatAndEat",
-		Description: "This is a beautifully designed commercial website template for a restaurant. This project is a beginner-friendly project. It is a static website and mostly based on the front end.",
-		Tags:        []string{},
+		Description: "SeatAndEat is a beautifully designed commercial website template for a restaurant.",
+		Tags:        []string{"html", "css", "javascript"},
 	},
 	{
 		Name:        "DevBook",
 		Url:         "​​https://github.com/DSCKGEC/DevBook",
-		Description: "DevBook is a social development environment for front-end designers and developers. A project editor that supports HTML, CSS, and JavaScript, where you can show off your work, build test cases to learn and debug and find inspiration",
-		Tags:        []string{},
+		Description: "DevBook is a development environment for front-end designers and developers that supports HTML, CSS, and JavaScript.",
+		Tags:        []string{"react", "html", "css", "javascript"},
 	},
 	{
 		Name:        "Leucos",
 		Url:         "​​https://github.com/DSCKGEC/Leucos",
 		Description: "Real-time chatting application within private rooms, from anywhere in the world",
-		Tags:        []string{},
+		Tags:        []string{"html", "css", "javascript", "node-js", "express", "mongodb"},
 	},
 	{
 		Name:        "Taskify",
 		Url:         "​​https://github.com/DSCKGEC/Taskify",
-		Description: "It is a task management system for everyone. It is designed to help you manage your tasks and projects from ideation to delivery. This task manager helps to bring in only the necessary parts – without all the annoying clutter.",
-		Tags:        []string{},
+		Description: "Taskify is a task management system for everyone to help you manage your tasks and projects from ideation to delivery.",
+		Tags:        []string{"html", "css", "javascript", "node-js", "express", "mongodb"},
 	},
 	{
 		Name:        "Codeaon",
 		Url:         "​​https://github.com/DSCKGEC/Codeaon",
-		Description: "A one-stop website for all developers and coders. This platform helps us to get all YouTube tutorials, blogs and articles for a certain topic in one place. This project proves to be a very handy and effective yet resourceful tool for learners.",
-		Tags:        []string{},
+		Description: "A one-stop website for all programmers that helps us to get all YouTube tutorials and articles for a certain topic in one place.",
+		Tags:        []string{"html", "css", "javascript", "node-js", "express", "mongodb"},
 	},
 	{
 		Name:        "C-Coins",
 		Url:         "​​https://github.com/DSCKGEC/C-Coins",
 		Description: "Defining the basic behaviour of Blockchains and Web-2.0 imitation",
-		Tags:        []string{},
+		Tags:        []string{"python"},
 	},
 	{
 		Name:        "kitkat.virus",
 		Url:         "​​https://github.com/DSCKGEC/kitkat.virus",
 		Description: "A simple python based keylogger",
-		Tags:        []string{},
+		Tags:        []string{"python"},
 	},
 	{
 		Name:        "CSGO-Professional",
 		Url:         "​​https://github.com/DSCKGEC/CSGO-Professional",
 		Description: "Scraping, Cleaning and Exploring a Dataset about CSGO Athletes from hltv.org",
-		Tags:        []string{},
+		Tags:        []string{"jupyter notebook"},
 	},
 	{
 		Name:        "Learn-Machine-Learn",
 		Url:         "​​https://github.com/DSCKGEC/Learn-Machine-Learn",
 		Description: "A machine learning repository to demonstrate regression and classification problems",
-		Tags:        []string{},
+		Tags:        []string{"jupyter notebook"},
 	},
 	{
 		Name:        "Text Recognition",
 		Url:         "​​https://github.com/DSCKGEC/OCR-TextRecognition",
 		Description: "Recognizes text from any image and prints them",
-		Tags:        []string{},
+		Tags:        []string{"python"},
 	},
 	{
 		Name:        "Movie Recommendation",
 		Url:         "​​https://github.com/DSCKGEC/MovieRecommendationSystem",
 		Description: "A Movie Recommendation System along with Data Analysis and Data Visualization and Revenue Prediction Model",
-		Tags:        []string{},
+		Tags:        []string{"jupyter notebook"},
 	},
 	{
 		Name:        "NASA Collision Detection",
 		Url:         "​​https://github.com/DSCKGEC/NASA_nearest_earth_object_classifier",
 		Description: "Classifying hazardous asteroids based on NASA Dataset.",
-		Tags:        []string{},
+		Tags:        []string{"jupyter notebook"},
 	},
 	{
 		Name:        "Resumie",
 		Url:         "​​https://github.com/DSCKGEC/Resumie",
 		Description: "Resumie is an android CV & Portfolio app. Now carry your resume with you wherever you go!",
-		Tags:        []string{},
+		Tags:        []string{"java"},
 	},
 	{
 		Name:        "Health Tracker App",
 		Url:         "​https://github.com/DSCKGEC/Health-Tracker-App",
 		Description: "Health Tracker is your one stop solution to keep your heath related information in a secured way",
-		Tags:        []string{},
+		Tags:        []string{"dart", "c++", "cmake", "html", "swift", "c"},
 	},
 	{
-		Name:        "Samsung Gallery",
+		Name:        "Galleriz",
 		Url:         "​​https://github.com/DSCKGEC/samsung-gallery-clone",
-		Description: "Clone of Samsung's Default Gallery",
-		Tags:        []string{},
+		Description: "A beautiful and functional gallery app for smartphones",
+		Tags:        []string{"javascript", "java", "objective-c", "ruby", "starlark"},
 	},
 	{
-		Name:        "Wallpaper App",
+		Name:        "WallX",
 		Url:         "​​https://github.com/DSCKGEC/flutter-wallx-wallpaperApp",
-		Description: "",
-		Tags:        []string{},
+		Description: "A cool wallpaper app for smartphones",
+		Tags:        []string{"dart", "html", "swift"},
 	},
 }
 
 // RenderHome ...
 func (g *GitHubAPI) RenderHome(c *gin.Context) {
 	c.HTML(200, "index.html", gin.H{
-		"title":  "KGEC Summer of Code 2021",
+		"title":  "KGEC Summer of Code 2022",
 		"isHome": true,
 	})
 }
 
 // RenderDashboard ...
 func (g *GitHubAPI) RenderDashboard(c *gin.Context) {
 	c.HTML(200, "dashboard.html", gin.H{
-		"title":  "Dashboard | KGEC Summer of Code 2021",
+		"title":  "Dashboard | KGEC Summer of Code 2022",
 		"issues": g.issues,
 		"pulls":  g.pulls,
 	})
@@ -142,7 +142,7 @@ func (g *GitHubAPI) RenderDashboard(c *gin.Context) {
 // RenderLeaderboard ...
 func (g *GitHubAPI) RenderLeaderboard(c *gin.Context) {
 	c.HTML(200, "leaderboard.html", gin.H{
-		"title":  "Leaderboard | KGEC Summer of Code 2021",
+		"title":  "Leaderboard | KGEC Summer of Code 2022",
 		"issues": g.issues,
 		"pulls":  g.pulls,
 	})

run.sh

@@ -1,3 +1,3 @@
 # Install nodemon globally before running this command 
 
-nodemon --watch './**/*.go' --signal SIGTERM --exec 'go' run main.go
+nodemon --watch './**/*.*' --signal SIGTERM --exec 'go' run main.go

views/css/faq.css

@@ -1,7 +1,7 @@
 :root {
   --main-bg-color: #000f1d;
   --main-wrapper-color: #07141a;
-  --main-text-color: #ffffff;
+  --shadow-color: #ffffff;
   --shadow-color: #ebecee;
   --para-color: #c4c4c4;
   --cta-color: #fbbc05;
@@ -34,7 +34,7 @@
 }
 
 #faq h1 {
-  color: var(--neon-green);
+  color: var(--pale-blue);
   text-align: center;
 }
 
@@ -57,9 +57,9 @@
   text-align: left;
   width: 100%;
   padding: 1em 0;
-  color: var(--main-text-color);
-  font-size: 1.15rem;
-  font-weight: 400;
+  color: var(--shadow-color);
+  font-size: 16px;
+  font-weight: 500;
   border: none;
   background: none;
   outline: none;
@@ -122,8 +122,18 @@
   will-change: opacity, max-height;
 }
 .accordion .accordion-content p {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 300;
   margin: 2em 0;
   color: var(--para-color);
 }
+
+@media only screen and (max-width: 448px) {
+  .accordion-title,
+  .accordion-content {
+    font-size: 14px;
+  }
+  .accordion .accordion-content p {
+    font-size: 14px;
+  }
+}

views/css/leaderboard.css

@@ -29,6 +29,10 @@
   --spacing-l: 60px;
 }
 
+/* #leaderboard .container {
+  overflow-x: hidden;
+} */
+
 #leaderboard .wrapper {
   flex-direction: column;
   width: 100%;
@@ -84,6 +88,7 @@
 }
 
 .github-handles {
+  width: max-content;
   padding: 5px 10px;
   cursor: pointer;
   background-color: var(--neon-blue);
@@ -107,6 +112,13 @@
   color: var(--shadow-color);
 }
 
+.leaderboard-card .d-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
 .leaderboard-card.leaderboard-card--first {
   margin-top: -24px;
 }
@@ -156,6 +168,14 @@ img.circle-img.circle-img--small {
   border-radius: 35px;
 }
 
+.leaderboard-table-container {
+  width: 100%;
+}
+
+.leaderboard-table-wrapper {
+  width: 100%;
+}
+
 .table-heading {
   color: var(--para-color);
   font-size: 24px;
@@ -208,9 +228,9 @@ img.circle-img.circle-img--small {
   text-align: center;
 }
 
-.table tbody tr {
+/* .table tbody tr {
   border-bottom: 1px solid var(--blue-light);
-}
+} */
 
 /* .table tbody tr td {
   background: #fff;
@@ -224,14 +244,39 @@ img.circle-img.circle-img--small {
   border-radius: 0 5px 5px 0;
 }
 
-@media only screen and (max-width: 767px) {
-  table thead :where(th:nth-child(3), th:nth-child(4), th:nth-child(5)),
-  table tbody tr :where(td:nth-child(3), td:nth-child(4), td:nth-child(5)) {
-    display: none;
+@media only screen and (max-width: 768px) {
+  .leaderboard-row {
+    grid-template-columns: auto;
+  }
+  .leaderboard-card {
+    max-width: 300px;
+    margin: auto;
+  }
+  .leaderboard-card.leaderboard-card--first {
+    margin-top: 0;
   }
 
-  .leaderboard-card.leaderboard-card--first,
   .leaderboard-card.leaderboard-card--second {
-    transform: scale(1);
+    margin-top: 0;
+  }
+}
+
+@media only screen and (max-width: 700px) {
+  .leaderboard-table-container {
+    overflow-x: hidden;
+  }
+  .leaderboard-table-wrapper {
+    overflow-x: scroll;
+  }
+  .table th,
+  .table td {
+    padding: 8px;
+  }
+  .table td *,
+  .github-handles {
+    font-size: 14px;
+  }
+  .github-handles {
+    padding: 6px;
   }
 }