Hello Beautiful People,

You must have known about Kali Linux and most probably have used it. If not no problem then, we are going to create our own Kali Linux (oops, Sorry... Our Kali Linux themed portfolio.

For reference you people can see these terminal themed portfolio websites:

1. Heber Leonard's Portfolio

2. Lokesh Bachhu's Portfolio

3. ShellFolio

One day I was just chilling about it and somehow found a website in the theme of terminal. Then I thought why not make something like that? A terminal themed portfolio it isn't that bad...

Prerequisites

Previous knowloedge of React + JavaScript

No knowledge? No problem😥 Learn by building things just like I do...

Let's Begin

What else we will add?

We will make our own linux like login screen and will make a custom loader. Cool right? Let's start Coding.

Create a React App

Go to your desired folder, open terminal and run this command to create a react app in that directory.

npx create-react-app ./

After the app gets created,

Consider the folder structure we are going to use in this project...

Create the folders which are not available in your default app folder according to this structure.

After making the following file structure we are ready to start working with our Application.

Packages

Packages we are going to use in this project are as:

Run the below command to install all the packages, if you want to explore about these packages, click on the names to go to their respective pages.

npm i react-icons react-router-dom

Components

Now we are going to work with our components. Create these files in your components folder with the same names to use in your app.

There are total 7 components I've made.

This file contains the layout of our terminal.

Paste the below code into this file

import React from 'react'
import Contact from './Contact'
import Terminal from './Terminal'

export default function TerminalLayout(props) {
    return (
        <>
            <div className='kali_desktop'>
                <div className='kali_terminal'>

                    <Terminal loginname={props.loginname} />

                </div>

                <Contact />
                
            </div>
        </>
    )
}

This file is our actual terminal

import React, { useState } from 'react'
import TerminalData from './TerminalData';

export default function Terminal(props) {

    let logo = `
       _______      __            __                ____                  _______        __            ___
     /    _____|     |     |____|     |            /          \\             /    _____|      |     |____|      |
   /    /_____       |     ____       |          /    /_\\    \\          /    /_____       |     _____      |
   \\_____      |     |     |        |      |        /    ___      \\         \\_____     |      |     |         |     |
    _____/    /      |     |        |      |_     |    |       |     |_      _____/    /       |     |         |     |
    \\______/        |__ |        |____|    |__|       |____|    \\______/         |__ |         |___|
    
    `

    const [history, setHistory] = useState([])
    const [command, setCommand] = useState('')
    const [dirname, setdirname] = useState('')

    const dirs_list = ["home", "about"]

    const handleAdd = () => {
        const newList = [...history];
        newList.push(command);
        setHistory(newList);
    }

    const handleKeyDown = event => {
        // what if ctrl + c is pressed break the command
        var key = event.which || event.keyCode;
        var ctrl = event.ctrlKey ? event.ctrlKey : ((key === 17)
            ? true : false);
        if (key == 67 && ctrl) {
            event.key = "Enter"
        }

        if (event.key === 'Enter') {
            // Enter key pressed ✅

            handleAdd()
            setCommand('')
            // console.log(history)


            // hide the logo terminal
            if (command === "hide") {
                document.querySelector(".terminal_logo").style.display = "none";
            }
            // show the logo terminal
            if (command === "show") {
                document.querySelector(".terminal_logo").style.display = "block";
            }

            // clear the terminal
            if (command === "clear") {
                setHistory([])
            }

            const contact = document.querySelector(".contact_container")
            if (command.substring(0, 5) === "mkmsg") {
                contact.style.display = "block"
            }

            if (command.substring(0, 2) === "cd") {
                if (command.includes("..")) {
                    setdirname('')
                } else {
                    if (dirs_list.includes(command.slice(3))) {
                        setdirname(command.slice(3))
                    }
                }
            }
        }
    };




    return (
        <>
            <div className='terminal_logo'>
                <pre>{logo}</pre>
                <div className='instructions'>
                    <ol type='number'>
                        <li>Type 'hide/show' to hide or show these instructions.</li>
                        <li>Type 'clear' to clear the terminal.</li>
                        <li>Type '-help' to get help instructions of the terminal.</li>
                        <li>Type 'whoishe' to know about me.</li>
                    </ol>
                </div>

                <br />
            </div>
            <div className='terminal_container'>

                <TerminalData loginname={props.loginname} array={history} dirname={dirname} />

                <div className='terminal_area'>
                    <div className='input_area'>
                        <div className='terminal_name'>
                            <font style={{ color: "lightgreen" }}>(</font>
                            {props.loginname}@shash
                            <font style={{ color: "lightgreen" }}>)
                                -[
                                <font style={{ color: "white" }}>~{dirname && <b>/{dirname}</b>}</font>]
                            </font>
                        </div>
                        <div className='input_box'>
                            $ <input
                                id='terminal_input'
                                value={command}
                                onKeyDown={handleKeyDown}
                                onBlur={({ target }) => target.focus()}
                                onChange={(e) => setCommand(e.target.value)}
                                type="text" autoFocus={true} />
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

import React from 'react'
import parse from "html-react-parser";

export default function TerminalResult(props) {

    const projects = "https://mrdevknown.blogspot.com"

    const dirs_list = ["home", "about"]

    const keywords = [
        {
            "name": "help",
            "abbr": ["-help", "-h", "-H", "-Help", "-HELP", "--help"],
            "text": `
                    <h4>Shash Help</h4> 
                    <br/>
                    <p/>Shash is a linux terminal themed website.
                    <p/>This website is made just for fun.
                    <br/><br/>
                    Commands:
                    <br/><br/>
                    <div className="command_desc">
                        <div className="command_name">-h, -help, --help</div>
                        <div className="command_details">Get Help</div>
                    </div>
                    <div className="command_desc">
                        <div className="command_name">cd</div>
                        <div className="command_details">To get inside a directory</div>
                    </div>
                    <div className="command_desc">
                        <div className="command_name">mkmsg</div>
                        <div className="command_details">Make me a new message</div>
                    </div>
                    <div className="command_desc">
                        <div className="command_name">dir</div>
                        <div className="command_details">Show the directories</div>
                    </div>
                    `
        },
        {
            "name": "cd",
            "abbr": ["cd"]
        },
        {
            "name": "whoishe",
            "abbr": ["whoishe"],
            "text": `Hello,
                    <p/>I am <font className="primarybg">Shivesh</font>
                    <br/><br/>
                    <ul style="margin-left: 20px">
                        <li type="square">I started to code when I was 11.</li>
                    </ul>
                    <br/>
                    <ul style="margin-left: 20px">
                        <li type="square">I love to make <a href=${projects} target="_blank">stupid things</a> like this.</li>
                    </ul>`
        },
        {
            "name": "dir",
            "abbr": ["dir"],
            "text": `Directories:
                    <br/><br/>
                    <div className="dirs_name">
                        <div>home</div>
                        <div>about</div>
                    </div>
                    `
        },
        {
            "name": "mkmsg",
            "abbr": ["mkmsg"],
            "text": `send a message`
        },
        {
            "name": "hide",
            "abbr": ["hide"],
            "text": `hidden`
        },
        {
            "name": "show",
            "abbr": ["show"],
            "text": `showing`
        },
        {
            "name": "clear",
            "abbr": ["clear"],
            "text": `clear`
        }
    ]

    let dirname = ""
    let text = "Command Not Found";

    for (let i = 0; i < keywords.length; i++) {
        const keywordResult = (item) => {
            for (let j = 0; j < keywords[i].abbr.length; j++) {
                if (item === `${keywords[i].abbr[j]}`) {
                    if (keywords[i].name === "help") {
                        text = `${keywords[i].text}<br/><br/>`
                    }
                    if (keywords[i].name === "dir") {
                        text = `${keywords[i].text}<br/><br/>`
                    }
                    if (keywords[i].name === "mkmsg") {
                        text = `${keywords[i].text}<br/><br/>`
                    }
                    if (keywords[i].name === "hide") {
                        text = `${keywords[i].text}<br/><br/>`
                    }
                    if (keywords[i].name === "show") {
                        text = `${keywords[i].text}<br/><br/>`
                    }
                    if (keywords[i].name === "whoishe") {
                        text = `${keywords[i].text}<br/><br/>`
                    }
                }
            } if (props.command.substring(0, 2) === "cd") {
                dirname = props.command.slice(3)
                if (dirs_list.includes(dirname) || dirname === "..") {
                    text = ""
                } else {
                    text = "No Such Directory"
                }
            }
        }

        keywordResult(props.command)
    }

    return (
        <>
            <div className='terminal_result'>
                {parse(text)}
            </div>
        </>
    )
}

import React from 'react'
import TerminalResult from './TerminalResult';

export default function TerminalData(props) {
    let dirname = ''
    return (
        <>{props.array.map((com) => {
    
            if (com.substring(0,2) === "cd") {
                dirname = com.slice(3)
                if (dirname === "..") {
                    dirname = ""
                }
            }

            return (
                <div className='terminal_area'>
                    <div className='input_area'>
                        <div className='terminal_name'>
                            <font style={{ color: "lightgreen" }}>(</font>
                            {props.loginname}@shash
                            <font style={{ color: "lightgreen" }}>)
                                -[
                                <font style={{ color: "white" }}>~{dirname && <b>/{dirname}</b>}</font>]
                            </font>
                        </div>
                        <div className='input_box'>
                            $ {com}
                        </div>
                    </div>

                    <TerminalResult command={com} />

                </div>
            );
        })}
        </>
    )
}

Now our  Terminal is Ready.

But I would like to add a few more things...

Here comes our 5th component

This file will display a popup window when user types mkmsg command, it will open and display our contact links.

Paste the below code into this file

import React from 'react'
import { IoIosClose, IoIosMail, IoIosSquareOutline, IoLogoGithub, IoLogoLinkedin } from 'react-icons/io';
import { BiMessageAltDetail, BiMinus } from 'react-icons/bi';

export default function Contact() {

    const logo = `
                 .--------\\ /--------.
                 |            -            |
                 |                         |
                 |                         |
      _____|____________|_____
       =========.==========
             / ~~~~~     ~~~~~ \\
           /|                |                |\\
           W   ------  / \\  --------   W
           \\.             |o o|             ./
            |                                    |
             \\    #########   /
               \\  ## --------- ##  /
                 \\##              ##/
                   \\_____v____/
    `

    var isMaximised = false;

    const maximize = () => {
        if (!isMaximised) {
            document.querySelector(".contact_container").classList.add("fullscreen")

            isMaximised = true
        } else {
            document.querySelector(".contact_container").classList.remove("fullscreen")

            isMaximised = false
        }
    }

    const hide = () => {
        document.querySelector(".contact_container").classList.remove("fullscreen")
        document.querySelector(".contact_container").style.display = "none"
    }

    return (
        <div className='contact_container'>
            <div className='title_bar'>
                <div className='title'>
                    <BiMessageAltDetail />
                    Contact Me
                </div>
                <div className='buttons'>
                    <div className='button' onClick={hide}><BiMinus style={{ fontSize: "10px" }} /></div>
                    <div className='button' onClick={maximize}><IoIosSquareOutline style={{ fontSize: "10px" }} /></div>
                    <div className='button' onClick={hide}><IoIosClose /></div>
                </div>
            </div>
            <div className='contact_window'>

                <pre>{logo}</pre>

                <div className="container">
                    <h1>Contact Me</h1>
                    <div className='contact_links'>
                        <a href='https://mail.google.com/mail/?view=cm&to=YOUR_EMAIL' target='_blank' className='link'>
                            <IoIosMail />
                            "Your Email"
                        </a>
                        <a href='gmail.com' className='link'>
                            <IoLogoGithub />
                            TheShiveshNetwork
                        </a>
                        <a href='gmail.com' className='link'>
                            <IoLogoLinkedin />
                            WhoIsShivesh
                        </a>
                    </div>
                </div>
            </div>
        </div>
    )
}

One more thing I would add is a login page, where user will enter their name or they can just enter as guest and we will display their entered name on the terminal. This is a little extra thing but I feel this adds to our portfolio and makes it a little more interactive.

import React from 'react'
import logo from '../kali-logo.png'
import { Link } from "react-router-dom";

export default function Login(props) {
    return (
        <>
            <div className='login_container'>
                <div className='login_box'>
                    <div className='login_area'>
                        {/* <h1>Login</h1> */}
                        <div className='logo_image'>
                            <img src={logo} alt="logo" />
                        </div>
                        <div className='input_login'>
                            Enter your name here
                            <input value={props.name} onChange={(e) => props.setName(e.target.value)} type="text" autoFocus={true} />
                        </div>
                    </div>
                    <div className='login_btns'>
                        <Link to="/" className='secondaryBtn' onClick={props.guestName}>Guest</Link>
                        <Link to="/" className='primaryBtn disabled-link' onClick={props.submitName}>Log In</Link>
                    </div>
                </div>
            </div>
        </>
    )
}

Now we are done with all our components. 

Now let's use all these components into our app.

App.js

import './App.css';
import Login from './components/Login';
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import TerminalLayout from './components/TerminalLayout';
import { useState } from 'react';
import Loader from './components/Loader';

function App() {
  const [name, setName] = useState("")
  const [loggedIn, setLoggedIn] = useState(false)
  // let loggedIn = false

  if (name !== "") { document.querySelector(".primaryBtn").classList.remove("disabled-link") }

  const submitName = () => {
    setName(name)
    // loggedIn = true;
    if (name !== "") { setLoggedIn(true); }
    // console.log(loggedIn)
  }

  const guestName = () => {
    setName("guest")
    setLoggedIn(true);
  }
  
  return (
    <>
          <BrowserRouter>
            <Routes>
              <Route path="/" element={loggedIn ? <TerminalLayout loginname={name} /> : <Navigate to="/login" />} />
              <Route path='*' element={<Navigate to="/" />} />
              <Route path="/login" element={<Login name={name} setName={setName} guestName={guestName} submitName={submitName} />} />
            </Routes>
          </BrowserRouter>

          <Loader />
    </>
  );
}

export default App;

  
  

With this app.js file, we are done with our project. Now start the app by running "npm start" command in the terminal.

But the design will definitely look ugly since we haven't added any styles. So let's do so.

I am going to modify the index.css file.

Paste the below code to get the output like me, it's just simple styling so anyone can easily go through it and understand it.

Index.css

.kali_desktop {
  min-height: 100vh;
  width: 100vw;
  background: url('../public/assets/wallpaper3.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.kali_terminal {
  background: black;
  min-height: 100vh;
  width: 100%;
  opacity: 70%;
  font-family: 'Ubuntu', sans-serif;
  color: white;
}

.terminal_container {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

a {
  color: #fff;
}

.input_area {
  display: flex;
  /* gap: 8px; */
  flex-direction: column;
  letter-spacing: 2px;
}

.input_area::after {
  z-index: -1;
  content: '';
  position: absolute;
  /* background: red; */
  border-left: 2px solid lightgreen;
  border-top: 2px solid lightgreen;
  border-bottom: 2px solid lightgreen;
  padding: 0;
  height: 16px;
  width: 50px;
  transform: translate(-15px, 10px);
}

.kali_terminal input {
  width: 80%;
  height: auto;
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  letter-spacing: 2px;
  font-family: 'Ubuntu', sans-serif;
}

input:focus {
  outline: none;
}

.input_box {
  background: black;
  width: 100%;
  padding-left: 8px;
}

.terminal_name {
  background: black;
  margin-left: 15px;
  padding-left: 5px;
  color: royalblue;
}

.dirs_name {
  display: grid;
  width: 350px;
  grid-template-columns: auto auto auto;
  gap: 25px;
}

pre {
  font-family: 'Ubuntu', sans-serif;
}

.command_desc {
  display: flex;
  gap: 105px;
  padding-bottom: 10px;
}

.command_name {
  width: 70px;
  font-style: italic;
  color: orange;
}

.terminal_result {
  margin: 10px 0 10px -10px;
}

.terminal_logo {
  padding: 10px;
}

.instructions {
  width: 100%;
  margin: 10px 20px 0 20px;
  font-size: 16px;
}

.login_container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../public/assets/wallpaper1.jpg');
  background-position: center;
  background-size: cover;
}

.login_box {
  backdrop-filter: blur(5px);
  color: white;
  height: 230px;
  width: 440px;
  border-radius: 5px;
  /* padding: 20px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login_area {
  font-size: 18px;
  width: 100%;
  height: 70%;
  gap: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0bed;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.input_login {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input_login input {
  width: 250px;
  font-size: 16px;
}

.login_btns {
  width: calc(100% - 80px);
  height: 30%;
  padding: 0 40px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000000;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.login_area .logo_image {
  height: 100px;
  width: 100px;
  background: #071a54;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo_image img {
  height: 80%;
}

.primaryBtn,
.secondaryBtn {
  border: none;
  padding: 5px 15px 5px 15px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.primarybg {
  background: #071a54;
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
}

.terminal_result li:before {
  content: '\26A1';
  margin-left: -20px;
  margin-right: 10px;
}

.primaryBtn:hover,
.secondaryBtn:hover {
  text-decoration: underline;
}

.disabled-link {
  pointer-events: none;
  background: #829ff7;
}

.primaryBtn {
  background: #28408b;
  color: white;
}

.secondaryBtn {
  background: #acacac;
  color: black;
}

.contact_container {
  display: none;
  position: fixed;
  top: 50%;
  right: 20%;
  transform: translate(0, -50%);
  width: 600px;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(1px);
  border-radius: 10px;
  box-shadow: 0 0 20px rgb(8, 8, 8);
  /* border: 5px solid lightseagreen; */
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  transition: .1s all;
}

.contact_container .container {
  margin: 20px;
}

.title_bar {
  width: 100%;
  min-height: 30px;
  background: rgb(16, 16, 16);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title_bar .title {
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 14px;
  display: flex;
  gap: 10px;
}

.title_bar .buttons {
  margin-right: 10px;
  display: flex;
  gap: 10px;
}

.title_bar .button {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: royalblue;
  cursor: pointer;
  color: #000;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.title_bar .button:hover {
  background: rgb(32, 51, 109);
  color: white;
}

.fullscreen {
  border-radius: 0%;
  width: 100vw !important;
  height: 100vh;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fullscreen .contact_window {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.contact_container .contact_links {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact_container .contact_links .link {
  background: black;
  padding: 10px 30px 10px 30px;
  border-radius: 15px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 30px;
  text-decoration: none;
  transition: .2s all;
}

.contact_container .contact_links .link:hover {
  color: rgb(223, 223, 223);
  background: rgb(19, 19, 19);
  text-decoration: underline;
}

.contact_window {
  display: flex;
  justify-content: space-evenly;
}


@media (max-width: 650px) {
  .terminal_logo {
    font-size: 10px !important;
  }

  .login_box {
    width: 70%;
    height: 400px;
  }

  .login_area {
    flex-direction: column;
    padding: 40px;
    width: calc(100% - 80px);
  }

  .login_area input {
    width: 100%;
  }

}

@media (max-width: 880px) {
  .contact_container {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
  }

  .contact_window {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}


.loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 74px;
}

.loader .icon {
  animation: loader-anime 1s infinite;
}

@keyframes loader-anime {
  0% {
    shadow: 0 0 20px #fff;
  }
  100% {
    shadow: 0 0 10px #fff;
  }
}

Adding these styles, our Kali Linux Terminal themed portfolio is ready.

Final Look

We have created an awesome login screen, a working terminal and a great loader. What else?

Go ahead and feel free to experiment with the code.

See ya in the next post, till then Bye Bye!

 Hey fella's,

Here I am with a new post.

In this post, I am gonna create a tic tac toe game but with pure html, css and js. Yeah, it's a little waste of time to not use any help from libraries as such, but I love to code.

So, let's make everything on our own.

Umm, actually it's a very easy project. Nothing needs to be created or hyped like a great work. I just wanted to post something after many months, so I am creating this.

Challenges

• Build responsive design 😥
• Code JavaScript on my own 😣
• No awesome components/functions of React 🤨

I coded for a few minutes and surprisingly, every logic I made worked.

It took me few minutes to make the basic work, changing the content inside the blocks and adding a few conditions.

But I want perfection.😅

Umm, actually I am not good at finalizing things at once...

How is it? Let me know in the comments.

Now, let me show you the code.

Actually it's very messed up, I am feeling embarrassed to show it. But, in the next post, I'll try to fix up things a little.

Code

// html part
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T3 - by Shivesh</title>
</head>

<body>
    <div class="container">
        <div class="main_game">
            <div class="heading">
                <h1>Tic Tac Toe</h1>
                <h1>Game</h1>
            </div>
            <div id="playerTurn" class="player_turn">Tap on the grid</div>
            <div class="game_container">
                <div class="column1">
                    <div id="box1" class="grid grid-1"></div>
                    <div id="box2" class="grid grid-2"></div>
                    <div id="box3" class="grid grid-3"></div>
                </div>
                <div class="column2">
                    <div id="box4" class="grid grid-4"></div>
                    <div id="box5" class="grid grid-5"></div>
                    <div id="box6" class="grid grid-6"></div>
                </div>
                <div class="column3">
                    <div id="box7" class="grid grid-7"></div>
                    <div id="box8" class="grid grid-8"></div>
                    <div id="box9" class="grid grid-9"></div>
                </div>
            </div>
        </div>
        <div class="fullscreen_msg">
            <div id="msg">Game</div>
        </div>
    </div>
</body>
</html>

<body>
    <div class="container">
        <div class="main_game">
            <div class="heading">
                <h1>Tic Tac Toe</h1>
                <h1>Game</h1>
            </div>
            <div id="playerTurn" class="player_turn">Tap on the grid</div>
            <div class="game_container">
                <div class="column1">
                    <div id="box1" class="grid grid-1"></div>
                    <div id="box2" class="grid grid-2"></div>
                    <div id="box3" class="grid grid-3"></div>
                </div>
                <div class="column2">
                    <div id="box4" class="grid grid-4"></div>
                    <div id="box5" class="grid grid-5"></div>
                    <div id="box6" class="grid grid-6"></div>
                </div>
                <div class="column3">
                    <div id="box7" class="grid grid-7"></div>
                    <div id="box8" class="grid grid-8"></div>
                    <div id="box9" class="grid grid-9"></div>
                </div>
            </div>
        </div>
        <div class="fullscreen_msg">
            <div id="msg">Game</div>
        </div>
    </div>
</body>
</html>

// css part
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran&family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');
:root {
    --primary-color: white;
    --text-primary: black;
    --x-primary: rgb(120, 231, 120);
    --o-primary: royalblue;
}

* {
    margin: 0%;
    padding: 0%;
}

body {
    height: 100vh;
}

.container {
    height: 100%;
    width: 100%;
    background: var(--primary-color);
    font-family: 'Catamaran', sans-serif;
}

.main_game {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
}

.heading {
    text-align: center;
    font-family: 'Ruslan Display', cursive;
    font-size: 3rem;
}

.heading h1:nth-child(1) {
    font-size: 2rem;
}

.game_container {
    height: 20rem;
    width: 20rem;
    background: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.column1,
.column2,
.column3 {
    /* background: green; */
    gap: .1rem;
    display: flex;
    height: calc(100% - .2rem / 3);
    /* grid-template-columns: auto auto auto; */
}

.grid {
    cursor: pointer;
    background: var(--primary-color);
    width: calc(100% - .2rem / 3);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Handlee', cursive;
    font-size: 3.5rem;
}

.fullscreen_msg {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 5rem;
    /* display: flex; */
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.player_turn {
    font-size: 1.3rem;
}

@media (max-width: 400px) {
    .heading {
        font-size: 2rem;
    }

    .game_container {
        width: 15rem;
        height: 15rem;
    }
}

//JS part
playerTurn = 1

document.getElementById("box1").textContent = ""
document.getElementById("box2").textContent = ""
document.getElementById("box3").textContent = ""
document.getElementById("box4").textContent = ""
document.getElementById("box5").textContent = ""
document.getElementById("box6").textContent = ""
document.getElementById("box7").textContent = ""
document.getElementById("box8").textContent = ""
document.getElementById("box9").textContent = ""

const changeBoxElem = (elem) => {
    document.getElementById(elem).addEventListener('click', () => {
        if (document.getElementById(elem).textContent != players[0] && document.getElementById(elem).textContent != players[1]) {
            if (playerTurn === 1) {
                document.querySelector(".container").style.background = "var(--o-primary)"
                document.getElementById(elem).textContent = players[1]
                playerTurn = 2
                document.getElementById("playerTurn").textContent = `${players[0]}'s turn`
            } else if (playerTurn === 2) {
                document.querySelector(".container").style.background = "var(--x-primary)"
                document.getElementById(elem).textContent = players[0]
                playerTurn = 1
                document.getElementById("playerTurn").textContent = `${players[1]}'s turn`
            }
        }
    })
}

list = ["box1", "box2", "box3", "box4", "box5", "box6", "box7", "box8", "box9"]

players = ["O", "X"]

winCombinations = [["box1", "box2", "box3"],
["box4", "box5", "box6"],
["box7", "box8", "box9"],
["box1", "box5", "box9"],
["box3", "box5", "box7"],
["box1", "box4", "box7"],
["box2", "box5", "box8"],
["box3", "box6", "box9"]
]


list.forEach(element => {
    changeBoxElem(element)
});

let gameOver = false

function gameIsOver() {
    console.log("game over")
    document.querySelector(".main_game").style.filter = "blur(5px)"
    document.querySelector(".fullscreen_msg").style.display = "flex"
    document.querySelector(".container").style.background = "lightgreen"
    document.getElementById("msg").textContent = `${wonPlayer} won`
}

function checkGameState() {
    // console.log("hey")
    for (let i = 0; i < winCombinations.length; i++) {
        if (document.getElementById(winCombinations[i][0]).textContent === players[0]) {
            if (document.getElementById(winCombinations[i][1]).textContent === players[0]) {
                if (document.getElementById(winCombinations[i][2]).textContent === players[0]) {
                    // console.log("hey")
                    let gameOver = true
                    wonPlayer = players[0]
                    gameIsOver()
                }
            }
        }
        else if (document.getElementById(winCombinations[i][0]).textContent === players[1]) {
            if (document.getElementById(winCombinations[i][1]).textContent === players[1]) {
                if (document.getElementById(winCombinations[i][2]).textContent === players[1]) {
                    let gameOver = true
                    wonPlayer = players[1]
                    gameIsOver()
                }
            }
        }
        else {
            gameOver = false
        }
    }
}

So, that's it for this post.

I will try to make this code better in the next one.

Till then bye bye, see ya

Hello folks, in this post, we will explore how can you create an effect like this using HTML, CSS and JS.

The simple logic

Just replace the "divname" in the code by the name given to the div to that you want to apply this hover effect. We will use jQuery. So firstly, import this line:

<!-- paste this line either in the 'title' tag or at the end of body -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />

//JS part
document.getElementById("divname").onmousemove = e => {
	const divname = document.getElementById("divname")
    const rect = projects.getBoundingClientRect(),
    	x = e.clientX - rect.left,
    	y = e.clientY - rect.top;

	projects.style.setProperty("--mouse-x", `${x}px`);
    projects.style.setProperty("--mouse-y", `${y}px`);
};

The CSS (playing with logic)

Now we will add some css to make this effect working.

/* CSS part -- this is the most important part to show the effect */
#divname::before {
    content: '';
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: white; */
    top: 0;
    left: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.1),
        transparent 40%);
    transition: .5s all;
}
#divname:hover::before {
    opacity: 1;
}

Complete Code

Now I will show you how you can make the same thing as I showed you in the preview.

HTML part:

<!-- This is the html of the preview -->

<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Hover glow effect</title>
    <link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"></link>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"></link>
</head>

<body>
<section id="skills">
        <div class="character">
            <img src="Assets/Images/AREmoji_20220823_102301_38219.gif" alt="Shivesh Tiwari">
        </div>
        <div class="skills-container">
            <h1>Skills</h1>
            <br /><br />
            HTML/CSS
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" id="html" style="width: 100%;"></div>
            </div>
            <br />
            React JS
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 70%;"></div>
            </div>
            <br />
            JavaScript
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 90%;"></div>
            </div>
            <br />
            UI/UX
            <div class="skill-meter">
                <div class="skill-reading skill-reading-transition" style="width: 85%;"></div>
            </div>
        </div>
    </section>
</body>
</html>

/* add this css to the html */
* {
    margin: 0%;
    padding: 0%;
}
body {
    /* font-family: "Poppins"; */
    background: var(--default-theme);
    /* background: black; */
    overflow-x: hidden;
	font-family: 'Montserrat', sans-serif;
	min-height: 100vh;
}
section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1;
}
#skills .character img {
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
}
#skills .skills-container {
    color: var(--dark-text-color);
    width: 30%;
    height: auto;
    padding: 2rem;
    /* background: red; */
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(0,-50%);
}
#skills .skill-meter {
    width: 100%;
    height: .7rem;
    background: white;
    border-radius: 1rem;
    margin-top: .6rem;
    padding: .1rem;
}
#skills .skill-meter .skill-reading {
    background: #4e33a4;
    height: 100%;
    border-radius: 2rem;
    transition: 5s linear;
}
#skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dark-text-color);
    /* animation: 10s shape_color linear infinite; */
    backdrop-filter: blur(10px);
    background: rgba(74, 255, 165, 0.1);
    box-shadow: 0 25px 45px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
}
#skills::before {
    content: '';
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    /* background: white; */
    top: 0;
    left: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(255, 255, 255, 0.1),
        transparent 40%);
    transition: .5s all;
}
#skills:hover::before {
    opacity: 1;
}

That's all for this post, see you in the next.

Hello there,

In this article you will learn how can you let the user input something when the website loads and the site will display that input on the screen.
We are going to use JavaScript Prompt to take the input from the user.

Prerequisites

Very basic knowledge of JavaScript

So, let's start the coding part...

HTML

Just give a id to the element whose content you have to change.

Here, I have to change the content inside the div with id "name".

So, we are all set. Now let's jump to the main JS part...

It's just a two line script and you're done.

JS

What we are doing here is taking a prompt input from the user and storing it in the variable called "name".

Then we're changing the content of the div with id "name".

So, that's it for this post. This was a small basic tutorial on JavaScript. Have a look on my other JavaScript projects by clicking the button below.

 In this post, I am continuing the work of the Windows 11 website. We are going to make a better taskbar, add some app windows and add the side panel to control all the things.

In this post, we have worked on the dark mode of Windows with the specific color themes and make a similar kind of look.

Code

HTML part:

Now the basic things of your website are ready. But it will not look good and clean. So, to give it a look like Windows 11, we are going to use CSS.

CSS part:

The designs are ready. Isn't it look similar to the design of Windows 11? But still we have some work left. To make this page resposive. We need to add some JavaScript to it.

Note: To make the windows of apps look like they are opening and closing, we are going to play with the display and visibility of the objects in CSS using JS.

JS part:

Note: I have also used JQuery in the last two lines to display the MrDevKnown site inside the Macrohard Edge Window. You can skip that thing, since it is a simple HTML, CSS, JS tutorial.

Now, our Windows 11 themed Website is ready.

Output

Summary

In this article you learnt how you can make a Windows 11 themed web design. You learnt about some basics of HTML and CSS.