Compare commits

..

1 Commits

Author SHA1 Message Date
beb99b7e56 Add lang to html, alt to img, meta description. 2019-06-21 18:07:49 +05:30
10 changed files with 71 additions and 183 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -1,27 +0,0 @@
/* latin */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(./Comfortaa-Latin-Light.woff) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Comfortaa';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(./Comfortaa-Latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Montserrat Regular'), local('Montserrat-Regular'), url(./Montserrat-Latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
images/abstract_squares.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
images/ceda.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

View File

@@ -1,15 +1,12 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: Montserrat; font-family: Roboto;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} color: #FFF;
a, a:active, a:hover, a:visited {
color: #325090;
} }
.top-body { .top-body {
@@ -18,14 +15,14 @@ a, a:active, a:hover, a:visited {
.left-pane { .left-pane {
width: 60%; width: 60%;
background-color: #FFF; background-color: #121212;
} }
.right-pane { .right-pane {
position: fixed; position: fixed;
right: 0; right: 0;
width: 40%; width: 40%;
background-image: url("images/abstract_squares.webp"); background-image: url("images/abstract_squares.jpg");
background-size: cover; background-size: cover;
height: 100vh; height: 100vh;
display: flex; display: flex;
@@ -68,9 +65,8 @@ h1, h2 {
text-align: center; text-align: center;
} }
#home p, #contact p { #home p {
text-align: justify; text-align: justify;
text-align-last: center;
} }
.icons { .icons {
@@ -94,8 +90,6 @@ a.icon {
a.icon:hover { a.icon:hover {
color: #325090; color: #325090;
background-color: #FFF; background-color: #FFF;
border-color: #325090;
border-style: solid;
} }
.large { .large {
@@ -140,7 +134,6 @@ a.icon:hover {
} }
.selector i { .selector i {
color: #FFF;
margin-left: 1em; margin-left: 1em;
height: 4em; height: 4em;
line-height: 4em; line-height: 4em;
@@ -187,8 +180,7 @@ a.icon:hover {
} }
.project { .project {
background-color: #B13E62; background-color: #e4324c;
color: #FFF;
width: 31%; width: 31%;
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
@@ -230,12 +222,7 @@ h3 {
} }
#contact h3 { #contact h3 {
font-size: 2em; font-size: 3em;
}
#contact h4 {
font-size: 1.5em;
text-align: center;
} }
@media (max-width: 1300px) and (min-width: 600px) { @media (max-width: 1300px) and (min-width: 600px) {
@@ -279,7 +266,6 @@ h3 {
@media (max-width: 900px) { @media (max-width: 900px) {
.right-pane { .right-pane {
color: #FFF;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100vw; width: 100vw;
@@ -322,14 +308,4 @@ h3 {
.image-about { .image-about {
width: 200px; width: 200px;
} }
#contact {
padding-bottom: 3em;
}
.right-pane p a {
text-decoration: underline;
}
.right-pane p a:hover {
text-decoration: none;
}
} }

View File

@@ -2,12 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Ceda EI </title> <title> Ceda EI </title>
<link rel="stylesheet" type="text/css" href="index.css"> <link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
<link href="fonts/fonts.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Comfortaa:300,700|Roboto&display=swap" rel="stylesheet">
<meta name="Description" content="Homepage of Ceda EI." /> <meta property="Description" content="Homepage of Ceda EI." />
<meta property="og:description" content="Homepage of Ceda EI." /> <meta property="og:description" content="Homepage of Ceda EI." />
<meta property="og:image" content="https://webionite.com/images/webionite.jpg" /> <meta property="og:image" content="https://webionite.com/images/webionite.jpg" />
</head> </head>
@@ -17,191 +16,131 @@
<div class="page" id="home"> <div class="page" id="home">
<img alt="Webionite Logo" src="images/webionite.svg" class="title-image"/> <img alt="Webionite Logo" src="images/webionite.svg" class="title-image"/>
<h1>Webionite</h1> <h1>Webionite</h1>
<p>Internet home of Ceda EI</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis. Pellentesque iaculis lectus at erat fermentum ultricies. Curabitur est ante, accumsan in tortor vitae, molestie elementum ante. Duis tristique tellus eu molestie porta. Mauris euismod id sem ut ultrices. </p>
</div> </div>
<div class="page full-width" id="projects"> <div class="page full-width" id="projects">
<h2>Projects</h2> <h2>Projects</h2>
<div class="projects"> <div class="projects">
<div class="project"> <div class="project">
<h3>Questable</h3> <h3>Lorem Ipsum Dolorum</h3>
<p>Questable is an RPG-like bot (and API Server) for maintaining events in real life.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://t.me/questable_bot"><i class="fa fa-link"></i> Bot</a>
<a href="https://gitlab.com/questable/questable_bot"><i class="fa fa-link"></i> Source</a>
<a href="https://questable.webionite.com/api/"><i class="fa fa-link"></i> API</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Questable CLI</h3> <h3>Lorem</h3>
<p>Command Line Interface for Questable using the Questable Server API.</p> <p>Lorem ipsum dolor sit amet, </p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://gitlab.com/questable/questable-cli"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Wish</h3> <h3>Lorem</h3>
<p>Extensible Bash Prompt with support for plugins and themes.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://gitlab.com/ceda_ei/wish"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Sky</h3> <h3>Lorem</h3>
<p>A simple terminal based weather monitor.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://gitlab.com/ceda_ei/sky"><i class="fa fa-link"></i> Source and Help</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Quadnite Bot</h3> <h3>Lorem</h3>
<p>A simple telegram bot that makes chats in group more fun.</p> <p>Lorem ipsum dolor sit amet, </p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://t.me/quadnite_bot"><i class="fa fa-link"></i> Bot</a>
<a href="https://gitlab.com/ceda_ei/Quadnite-Bot"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Minetest Telegram Bridge</h3> <h3>Lorem</h3>
<p>Bridge the chat between a Telegram group and Minetest chat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://git.webionite.com/ceda_ei/minetest-telegram-bridge"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>The Long Night</h3> <h3>Lorem</h3>
<p>Increase Bus Factor by providing ssh access to your server.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://gitlab.com/ceda_ei/the-long-night"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Bin Client</h3> <h3>Lorem</h3>
<p>Command line client for mkr/bin and hastebin.</p> <p>Lorem ipsum dolor sit amet, </p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://git.webionite.com/ceda_ei/bin-client"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>PC Monitor Bot</h3> <h3>Lorem</h3>
<p>A bot intended to check the state of your PC (screenshots and check if locked)</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://gitlab.com/ceda_ei/pc-monitor-bot"><i class="fa fa-link"></i> Source</a>
</div>
</div>
<div class="project">
<h3>i3lock-delta</h3>
<p>A new image from Unsplash everytime you lock the screen.</p>
<div class="spacer"></div>
<div class="link">
<a href="https://gitlab.com/ceda_ei/i3lock-delta"><i class="fa fa-link"></i> Source</a>
</div>
</div>
<div class="project">
<h3>Kaomoji Rofi</h3>
<p>Rofi script for entering kaomojis in linux.</p>
<div class="spacer"></div>
<div class="link">
<a href="https://gitlab.com/ceda_ei/kaomoji-rofi"><i class="fa fa-link"></i> Source</a>
</div>
</div>
<div class="project">
<h3>Temac</h3>
<p>Telegram Matrix Channels Bridge</p>
<div class="spacer"></div>
<div class="link">
<a href="https://matrix.to/#/+temac:matrix.org"><i class="fa fa-link"></i> Community</a>
<a href="https://gitlab.com/ceda_ei/temac"><i class="fa fa-link"></i> Source</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="page full-width" id="hosted"> <div class="page full-width" id="hosted">
<h2>Hosted Services</h2> <h2>Hosted Services</h2>
<p><a href="#contact">Contact Me</a> for services that require a login.</p>
<div class="projects"> <div class="projects">
<div class="project"> <div class="project">
<h3>Gitea</h3> <h3>Lorem</h3>
<p>Gitea is a simple, easy-to-use, yet full-featured and completely open source code hosting solution.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://git.webionite.com/"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Nextcloud</h3> <h3>Lorem</h3>
<p>Nextcloud is a suite of client-server software for creating and using file hosting services.</p> <p>Lorem ipsum dolor sit amet, </p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://nc.webionite.com/"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Draw.io</h3> <h3>Lorem</h3>
<p>Create flow charts, process diagrams, org charts, UML diagrams, ER models, network diagrams, etc.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://draw.webionite.com/"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Sky</h3> <h3>Lorem</h3>
<p>A simple terminal based weather monitor.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://sky.webionite.com/"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Hastebin</h3> <h3>Lorem</h3>
<p>Open Source pastebin service written in Node.JS</p> <p>Lorem ipsum dolor sit amet, </p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://bin.webionite.com/"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Questable Bot</h3> <h3>Lorem</h3>
<p>Questable is an RPG-like bot for maintaining events in real life.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://t.me/questable_bot"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Questable API Server</h3> <h3>Lorem</h3>
<p>API Server for Questable. Used by external clients for Questable.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://api.questable.webionite.com/"><i class="fa fa-link"></i> Link</a>
</div>
</div> </div>
<div class="project"> <div class="project">
<h3>Quadnite Bot</h3> <h3>Lorem</h3>
<p>A simple telegram bot that makes chats in group more fun.</p> <p>Lorem ipsum dolor sit amet, </p>
<div class="spacer"></div> <div class="spacer"></div>
<div class="link"> <div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
<a href="https://t.me/quadnite_bot"><i class="fa fa-link"></i> Link</a>
</div> </div>
<div class="project">
<h3>Lorem</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<div class="spacer"></div>
<div class="link"><a href="#"><i class="fa fa-link"></i> Go to project</a></div>
</div> </div>
</div> </div>
</div> </div>
<div class="page" id="contact"> <div class="page" id="contact">
<h2>Contact</h2> <h2>Contact</h2>
<img alt="Ceda EI" src="images/ceda.webp" class="image-about"/> <img alt="Ceda EI" src="images/ceda.jpg" class="image-about"/>
<div> <h3>@ceda_ei</h3>
<h3>Irene (she/her)</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec augue risus. Praesent at lectus ante. Maecenas volutpat purus et eros vehicula, vitae scelerisque turpis iaculis.</p>
<h4>@ceda_ei</h4>
</div>
<p>I am a Full Stack Developer from India who also has an interest in Linux, Python, Vim, Data Science, IoT and so much more! Checkout my <a href="https://cedaei.com" target="_blank">blog</a>.</p>
<div class="icons large"> <div class="icons large">
<a class="icon" href="https://matrix.to/#/@ceda_ei:matrix.org"><i class="fa fa-matrix-org"></i></a> <a class="icon" href="https://matrix.to/#/@ceda_ei:matrix.org"><i class="fa fa-matrix-org"></i></a>
<a class="icon" href="https://t.me/ceda_ei"><i class="fa fa-paper-plane"></i></a> <a class="icon" href="https://t.me/ceda_ei"><i class="fa fa-paper-plane"></i></a>
@@ -228,7 +167,7 @@
<span>Contact</span> <span>Contact</span>
</a> </a>
</div> </div>
<p>Towards a free future.</p> <p>Part of <a href="https://libreho.st/"> libreho.st</a> network</p>
<div class="icons"> <div class="icons">
<a class="icon" href="https://gitlab.com/ceda_ei/"><i class="fa fa-gitlab"></i></a> <a class="icon" href="https://gitlab.com/ceda_ei/"><i class="fa fa-gitlab"></i></a>
<a class="icon" href="https://git.webionite.com/ceda_ei/"><i class="fa fa-gitea"></i></a> <a class="icon" href="https://git.webionite.com/ceda_ei/"><i class="fa fa-gitea"></i></a>