priyatham
/
Portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

intial project setup

This commit is contained in:
Priyatham Sai Chand 2021-01-11 22:07:05 +05:30
parent e0bc3230dc
commit ada9bb373a
2 changed files with 299 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
pages/index.js
View File

@ -5,54 +5,67 @@ export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<title>Portfolio</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className= {styles.page}>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<h2 className={styles.title}>Priyatham Sai Chand</h2>
<div className={styles.content}><div className={ styles.content__container }>
<p className={ styles.content__container__text }>
I'm am</p>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<ul className={ styles.content__container__list }>
<li className={ styles.content__container__list__item }>a Programmer</li>
<li className={ styles.content__container__list__item }>a Full stack Dev</li>
<li className={ styles.content__container__list__item }>an Application Developer</li>
<li className={ styles.content__container__list__item }>a Techie</li>
</ul>
</div></div>
</main>
</div>
<h2 className={styles.title}>Projects</h2>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
<a href="https://github.com/Priyatham-sai-chand/Locaft" className={styles.card}>
<h3>Locaft &rarr;</h3>
<p>A logistics and renting website for both owners and tenants alike</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
<a href="https://github.com/Priyatham-sai-chand/Steganography-in-C" className={styles.card}>
<h3>Steganography &rarr;</h3>
<p>Hiding images in plain bitmap images</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
href="https://github.com/Priyatham-sai-chand/Auction"
className={styles.card}
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
<h3>Auction &rarr;</h3>
<p>An Auctioning system for bidding items to the highest bidder using
Django
</p>
</a>
<a
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy &rarr;</h3>
<h3>Alz. &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
A Mobile application to detect Alzheimers' prematurely.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
href="https://github.com/Priyatham-sai-chand/alzapp"
target="_blank"
rel="noopener noreferrer"
>

204
styles/Home.module.css
View File

@ -6,7 +6,9 @@
justify-content: center;
align-items: center;
}
.page {
height: 100vh;
}
.main {
padding: 5rem 0;
flex: 1;
@ -35,9 +37,9 @@
align-items: center;
}
.title a {
color: #0070f3;
.title {
text-decoration: none;
text-align: center;
}
.title a:hover,
@ -120,3 +122,199 @@
flex-direction: column;
}
}
.content {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: "Lato", sans-serif;
font-size: 35px;
line-height: 40px;
margin-right: 0;
color: #16a085;
}
.content__container {
font-weight: 1000;
overflow: hidden;
height: 40px;
padding: 0 60px;
width: 1000px;
margin-left: 25%;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
font-size: 1em;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
font-size: 1em;
}
@-webkit-keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-webkit-keyframes change {
0%,
12.66%,
100% {
transform: translate3d(0, 0, 0);
}
16.66%,
29.32% {
transform: translate3d(0, -25%, 0);
}
33.32%,
45.98% {
transform: translate3d(0, -50%, 0);
}
49.98%,
62.64% {
transform: translate3d(0, -75%, 0);
}
66.64%,
79.3% {
transform: translate3d(0, -50%, 0);
}
83.3%,
95.96% {
transform: translate3d(0, -25%, 0);
}
}
@keyframes opacity {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
@keyframes change {
0%,
12.66%,
100% {
transform: translate3d(0, 0, 0);
}
16.66%,
29.32% {
transform: translate3d(0, -25%, 0);
}
33.32%,
45.98% {
transform: translate3d(0, -50%, 0);
}
49.98%,
62.64% {
transform: translate3d(0, -75%, 0);
}
66.64%,
79.3% {
transform: translate3d(0, -50%, 0);
}
83.3%,
95.96% {
transform: translate3d(0, -25%, 0);
}
}
.navbar_item {
color: #000000;
padding: 10px;
}
.navbar_item:hover {
color: #58d5f7;
text-decoration: none;
}
.bold {
font-weight: 600;
}
.light {
font-weight: 300;
}
.header {
padding-top: 35px;
width: 100%;
height: 100px;
position: relative;
z-index: 999;
}
.logo {
max-width: 100px;
padding-left: 0;
padding-top: 5px;
}
.headerbtn {
background-color: #0abceb;
border-radius: 10px;
border: #0abceb;
float: right;
width: 195px;
height: 51px;
color: white;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
margin-top: -10px;
}
.headerbtn:hover {
background-color: #58d5f7;
color: white;
border-radius: 20px;
-webkit-box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1);
-moz-box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1);
box-shadow: -1px 9px 46px -17px rgba(43, 43, 43, 1);
}
.hero {
position: relative;
z-index: 999;
padding-bottom: 60px;
}
.mouse {
position: absolute;
left: 0;
right: 0;
top: 85%;
margin: auto;
padding-bottom: 40px;
text-align: center;
cursor: pointer;
transition: transform 0.4s ease;
}
.mouse:hover {
transform: translateY(5px);
}