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

57
pages/index.js
View File

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

330
styles/Home.module.css
View File

@ -1,122 +1,320 @@
.container { .container {
min-height: 100vh; min-height: 100vh;
padding: 0 0.5rem; padding: 0 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.page {
height: 100vh;
} }
.main { .main {
padding: 5rem 0; padding: 5rem 0;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer { .footer {
width: 100%; width: 100%;
height: 100px; height: 100px;
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer img { .footer img {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.footer a { .footer a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.title a { .title {
color: #0070f3; text-decoration: none;
text-decoration: none; text-align: center;
} }
.title a:hover, .title a:hover,
.title a:focus, .title a:focus,
.title a:active { .title a:active {
text-decoration: underline; text-decoration: underline;
} }
.title { .title {
margin: 0; margin: 0;
line-height: 1.15; line-height: 1.15;
font-size: 4rem; font-size: 4rem;
} }
.title, .title,
.description { .description {
text-align: center; text-align: center;
} }
.description { .description {
line-height: 1.5; line-height: 1.5;
font-size: 1.5rem; font-size: 1.5rem;
} }
.code { .code {
background: #fafafa; background: #fafafa;
border-radius: 5px; border-radius: 5px;
padding: 0.75rem; padding: 0.75rem;
font-size: 1.1rem; font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace; Bitstream Vera Sans Mono, Courier New, monospace;
} }
.grid { .grid {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 800px; max-width: 800px;
margin-top: 3rem; margin-top: 3rem;
} }
.card { .card {
margin: 1rem; margin: 1rem;
flex-basis: 45%; flex-basis: 45%;
padding: 1.5rem; padding: 1.5rem;
text-align: left; text-align: left;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
border-radius: 10px; border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, border-color 0.15s ease;
} }
.card:hover, .card:hover,
.card:focus, .card:focus,
.card:active { .card:active {
color: #0070f3; color: #0070f3;
border-color: #0070f3; border-color: #0070f3;
} }
.card h3 { .card h3 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
font-size: 1.5rem; font-size: 1.5rem;
} }
.card p { .card p {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.5; line-height: 1.5;
} }
.logo { .logo {
height: 1em; height: 1em;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.grid { .grid {
width: 100%; width: 100%;
flex-direction: column; 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);
} }