Skip to content

terminal-style-webpage #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yashwrdhn wants to merge 1 commit into
base: main
Choose a base branch
from
Open

terminal-style-webpage #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions Projects/TerminalThemePotfolio/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;300;400&display=swap');

* {

padding:0;
margin:0;
box-sizing: border-box;
}

body{
font-family: 'Roboto Mono', monospace;
background-color:#333;
color:#ccc;
font-size:18px;
line-height: 1.6;
}

:root {
--text-color: #00aa00;
}

h1 {
color:var(--text-color);
font-size: 50px;
letter-spacing: -5px;
margin-bottom: 20px;
}

h2{
color:var(--text-color);

}

ul{

list-style-type: none;
}

nav{
width:30%;

}
nav ul{
display: flex;
justify-content: space-around;
}

nav ul li {
color:var(--text-color);
cursor:pointer;
}


h3{
margin-bottom: 10px;
}

a{
color:var(--text-color);
text-decoration: none;
}
p{
margin:20px 0;
}
.container{
max-width:600px;
margin:auto;
display:flex;
flex-direction: column;
height:70vh;
justify-content: center;
align-items: center;
}

.wb-body{
background:#111;
padding:20px;
}
.hidden{
display: none;
}

.cursor {
font-weight: 700;
animation: 1s blink step-end infinite;
}

@keyframes blink {
from,to{
color:transparent;
}

50% {
color: var(--text-color);
}
}


.line {
position: relative;
width:24em;
margin:0 auto;
overflow: hidden;
white-space: nowrap;

}

.anim-typewriter{

animation:typewriter 4s steps(40) 1s 1 normal both,
blinkTextCursor 500mx steps(40) infinite normal;
}


@keyframes typewriter{
from{
width:0;
}
to {
width:16em;
}
}

@keyframes blinkTextCursor {
from {
border-right-color: rgba(255,255,255,0.75);
}
to{
border-right-color:transparent;
}
}
50 changes: 50 additions & 0 deletions Projects/TerminalThemePotfolio/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!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>Welcome</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="container">
<nav >
<ul>
<li id="about">/about</li>
<li id="contact">/contact</li>
</ul>
</nav>
<main>
<h1>yashwardhan :$<span class="cursor">|</span></h1>
<h3>Find me online: </h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Outlook</a></li>
<li><a href="#">Github</a></li>
<li><a href="#">Linkedin</a></li>
</ul>
</main>

<div class="hidden">
<div id="about-content">
<h2>about-me:$<span class="cursor">|</span> </h2>
<p>My name is yashwardhan singh. I am a Software developer,
currently working as SDE2 at google Zurich.</p>
<p>Some of things I am good at includes Algorithms, Robotics and Psychology.</p>
</div>

<div id="contact-content">
<h2>Contact-me:$<span class="cursor">|</span> </h2>
<p>You can contact me this email .</p>
<p>email:[email protected]/</p>
</div>
</div>

<p class="line anim-typewriter">Typewriter effest using css</p>
</div>
<script src="js/main.js"></script>
<script src="js/winbox.bundle.js"></script>
</body>
</html>
44 changes: 44 additions & 0 deletions Projects/TerminalThemePotfolio/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
const about = document.querySelector('#about')
const contact = document.querySelector('#contact')
const aboutContent = document.querySelector('#about-content')
const contactContent = document.querySelector('#contact-content')

about.addEventListener('click',() => {
const aboutBox = new WinBox({
title:'about me',
background: '#00aa00',
width:'400px',
height:'400px',
top:50,
right:50,
bottom:50,
left:50,
mount: aboutContent,
onfocus: function(){
this.setBackground('#00aa00')
},
onblur: function(){
this.setBackground('#777')
}
})
})

contact.addEventListener('click',() => {
const contactbox = new WinBox({
title:'contact me',
background: '#00aa00',
width:'400px',
height:'400px',
top:150,
right:50,
bottom:50,
left:250,
mount: contactContent,
onfocus: function(){
this.setBackground('#00aa00')
},
onblur: function(){
this.setBackground('#777')
}
})
})
25 changes: 25 additions & 0 deletions Projects/TerminalThemePotfolio/js/winbox.bundle.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.