✨ Dump v3.0.0

package.json

@@ -1,13 +1,14 @@
 {
   "name": "jolshylar",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/components/About.jsx

@@ -1,15 +1,23 @@
 import "../styles/About.css";
+import { AiFillInstagram } from "react-icons/ai";
 
 function About() {
+  const styles = {
+    width: "16px",
+    height: "16px",
+  };
+
   return (
     <div className="about">
       <h1>About Us</h1>
       <p>
         Jolshylar is a set of people dedicated to beat closed-source software.
       </p>
-      <p>As of today, we have 10 people (2 working actually)</p>
+      <p>As of today, we have 10 people (3 working actually)</p>
       <a href="https://www.instagram.com/stories/highlights/17916904040361247/">
-        <button className="more-btn">More</button>
+        <button className="more-btn">
+          <AiFillInstagram style={styles} /> More
+        </button>
       </a>
     </div>
   );

src/components/Footer.jsx

@@ -1,4 +1,6 @@
 import "../styles/Footer.css";
+import { FaTelegram, FaDiscord } from "react-icons/fa";
+import { AiTwotoneMail, AiFillInstagram } from "react-icons/ai";
 
 function Footer() {
   return (
@@ -7,9 +9,11 @@ function Footer() {
         <h3>Contact Us</h3>
         <ul>
           <li>
+            <AiTwotoneMail />
             <a href="mailto:jolshylar@gmail.com">Email</a>
           </li>
           <li>
+            <FaTelegram />
             <a href="https://t.me/+nk4YJtv9z702MjIy">Telegram</a>
           </li>
         </ul>
@@ -18,9 +22,11 @@ function Footer() {
         <h3>We on Social Media</h3>
         <ul>
           <li>
+            <FaDiscord />
             <a href="https://discord.gg/6dSpCGtJuB">Discord</a>
           </li>
           <li>
+            <AiFillInstagram />
             <a href="https://instagram.com/jolshylar">Instagram</a>
           </li>
         </ul>

src/components/Member.jsx

@@ -1,4 +1,6 @@
 import "../styles/Member.css";
+import { AiTwotoneMail } from "react-icons/ai";
+import { FaSuitcase } from "react-icons/fa";
 
 function Member({ member }) {
   const photo = require(`../images/members/${member.element}.jpeg`);
@@ -11,11 +13,15 @@ function Member({ member }) {
         <h3>{member.role}</h3>
         {member.portfolio && (
           <a href={`https://${member.portfolio}`}>
-            <button>Portfolio</button>
+            <button>
+              <FaSuitcase /> Portfolio
+            </button>
           </a>
         )}
         <a href={`mailto:${member.email}`}>
-          <button className="emailButton">Email</button>
+          <button className="emailButton">
+            <AiTwotoneMail /> Email
+          </button>
         </a>
         <p>{member.quote}</p>
       </div>

src/components/Navbar.jsx

@@ -1,14 +1,31 @@
 import logo from "../images/logo.png";
 import "../styles/Navbar.css";
+import { AiFillGithub, AiFillInstagram } from "react-icons/ai";
+import { FaDiscord } from "react-icons/fa";
 
 function Navbar() {
+  const styles = {
+    width: "36px",
+    height: "36px",
+  };
+
   return (
     <nav>
       <div className="logo">
         <img alt="logo" src={logo} />
         <h1>Jolshylar</h1>
       </div>
-      <h3>we ❤️ open-source</h3>
+      <div className="links">
+        <a href="https:/github.com/jolshylar/website">
+          <AiFillGithub style={styles} />
+        </a>
+        <a href="https:/instagram.com/jolshylar">
+          <AiFillInstagram style={styles} />
+        </a>
+        <a href="https://discord.gg/6dSpCGtJuB">
+          <FaDiscord style={styles} />
+        </a>
+      </div>
     </nav>
   );
 }

src/components/Project.jsx

@@ -1,4 +1,5 @@
 import "../styles/Project.css";
+import { BiLinkExternal } from "react-icons/bi";
 
 function Project({ project }) {
   const preview = require(`../images/previews/${project.fileName}`);
@@ -9,7 +10,9 @@ function Project({ project }) {
       <div className="content">
         <h2>{project.name}</h2>
         <a href={project.url}>
-          <button>Visit</button>
+          <button>
+            <BiLinkExternal /> Visit
+          </button>
         </a>
         <p>{project.description}</p>
       </div>

src/data/members.js

@@ -5,7 +5,7 @@ const data = [
     role: "Frontend Developer",
     portfolio: null,
     email: "bekslambek22@gmail.com",
-    quote: "Underidoderidoderiododeridoo idoderiododeridoo government",
+    quote: "Underidoderidoderiododeridoo idoderiododeridoo government.",
     interests: [],
   },
   {
@@ -41,16 +41,17 @@ const data = [
     role: "Discord Server Owner",
     portfolio: null,
     email: "kabyletad@gmail.com",
-    quote: "Be nice. Be bald",
+    quote: "The ideal cannot be achieved, but it can be strived for.",
     interests: [],
   },
   {
     element: "food",
     name: "Imanali Koksal",
     role: "Game Developer",
     portfolio: null,
-    email: "a.kabylet@gmail.com",
-    quote: "Live every day as productive as someone who gets 250k at Hackathons",
+    email: "imashkoksal@gmail.com",
+    quote:
+      "Live every day as productive as someone who gets 250k at Hackathons.",
     interests: [],
   },
   {
@@ -59,7 +60,7 @@ const data = [
     role: "SMM Management",
     portfolio: null,
     email: "7770504@inbox.ru",
-    quote: "Visual jasaimyn",
+    quote: "Do not give up, the beginning is always the hardest.",
     interests: [],
   },
   {
@@ -72,14 +73,15 @@ const data = [
     interests: [],
   },
   {
-    element: "water",
+    element: "food",
     name: "Yerassyl Abilkassym",
     role: "Android/iOS Developer",
     portfolio: null,
-    email: "a.kabylet@gmail.com",
-    quote: "I pee'd on project, but still member",
+    email: "yerassyl.abylkassym@gmail.com",
+    quote:
+      "Enthusiastic student interested in engineering, machine learning and computer science.",
     interests: [],
-  }
+  },
 ];
 
 export default data;

src/index.css

@@ -14,6 +14,10 @@ a {
   font-weight: 700;
 }
 
+button {
+  cursor: pointer;
+}
+
 h1 {
   font-size: 48px;
   text-decoration: underline;

src/styles/About.css

@@ -1,23 +1,42 @@
 .about {
-  background-image: url('../images/bg.jpeg');
-  background-size: 100%;
+  background-image: url("../images/bg.png");
   background-repeat: no-repeat;
   padding: 20px;
   height: 600px;
+  background-size: 100% 650px;
   text-align: center;
 }
 
+@media (max-width: 700px) {
+  .about {
+    height: max-content;
+    background-size: auto;
+  }
+}
+
 .more-btn {
+  margin-top: 40px;
+  font-size: 24px;
   background-color: transparent;
-  border-radius: 30px;
+  border-radius: 20px;
   border: 2px #ffff solid;
   color: white;
-  width: 15%;
-  height: 30px;
+  width: 150px;
+  height: 50px;
+  align-items: center;
 }
 
 .more-btn:hover {
   background-color: #ffffff;
   color: #282d35;
   transition: 0.5s;
 }
+
+.about a {
+  text-decoration: none;
+}
+
+.about p {
+  margin: 0;
+  font-size: 24px;
+}

src/styles/Footer.css

@@ -1,7 +1,7 @@
 footer {
   /* Sticking to the Bottom */
   padding: 1rem;
-  background-color: #21222A;
+  background-color: #21222a;
   bottom: 0;
   left: 0;
   /* Displaying Content */
@@ -10,16 +10,24 @@ footer {
   justify-content: center;
 }
 
-footer .footer--section {
+.footer--section {
   padding: 0 20px;
 }
 
-footer .footer--section > h3 {
-  color: #61DAFB;
+.footer--section > h3 {
+  color: #61dafb;
 }
 
-footer .footer--section > ul {
+.footer--section > ul {
   list-style: none;
   padding: 0;
   text-align: center;
 }
+
+.footer--section li a {
+  margin-left: 4px;
+}
+
+.footer--section li svg {
+  padding-top: 6px;
+}

src/styles/MemberList.css

@@ -9,6 +9,14 @@
   grid-template-columns: repeat(3, 1fr);
 }
 
+@media (max-width: 480px) {
+  .members-list {
+    overflow-x: scroll;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+}
+
 .members--title {
   text-align: center;
 }

src/styles/Navbar.css

@@ -1,5 +1,5 @@
 nav {
-  background-color: #21222A;
+  background-color: #21222a;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -18,11 +18,16 @@ nav .logo {
 nav h1 {
   margin: 0;
   padding: 1rem;
-  color: #61DAFB;
+  color: #61dafb;
   font-size: 2rem;
   text-decoration: none;
 }
 
 nav h3 {
-  color: #DEEBF8;
+  color: #deebf8;
+}
+
+.links {
+  display: flex;
+  gap: 1rem;
 }