rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created project sections front end with dummy images and text for now. Not mobile compatible yet.

Browse Source
This commit is contained in:
Rohit Pai
2021-09-13 18:03:20 +01:00
parent 47870fe19d
commit d304149f9b
19 changed files with 646 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/config.php
+21
View File
@@ -0,0 +1,21 @@
<?php
//////////// Config file /////////////////////
/// Used for storing important information ///
/// such as passwords, usernames etc. ///
//////////////////////////////////////////////
function dbConn(): PDO|string
{
$host = "localhost";
$dbName = "u987021215_cms";
$username = "u987021215_rodude123";
$password = "pFHS5qKhkyaDumgf";
try
{
return new PDO("mysql:host=$host;dbname=$dbName", $username, $password);
}
catch (PDOException $e)
{
return "Connection failed: " . $e->getMessage();
}
}
src/css/cv.css
-9
View File
@@ -33,14 +33,6 @@ section#curriculumvitae .timeline {
height: 100%;
}
/*section#curriculumvitae .timeline#edu {
margin: 0 auto;
}
section#curriculumvitae .timeline#work {
margin-left: auto;
}*/
section#curriculumvitae #work {
margin: 0 auto 0 8rem;
}
@@ -50,7 +42,6 @@ section#curriculumvitae .timeline:before {
position: absolute;
height: 100%;
border: 4px var(--timelineItemBrdr) solid;
/*border-bottom: 4;*/
right: 194px;
top: 0;
}
src/css/main.css
+5 -2
View File
@@ -2,10 +2,11 @@
@import "/node_modules/normalize.css/normalize.css";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
/*local imports*/
@import "templateStyles.css";
@import "nav.css";
@import "about.css";
@import "cv.css";
@import "templateStyles.css";
@import "projects.css";
/****** Root Style ******/
:root {
@@ -18,7 +19,9 @@
--timelineItemBrdr: hsla(var(--mainHue), var(--mainSat), calc(var(--mainLight) - 20%), 1);
--errorDefault: hsla(0, var(--mainSat), var(--mainLight), 1);
--grey: hsla(0, 0%, 39%, 1);
--mutedGrey: hsla(0, 0%, 67%, 0.58);
--notAvailableDefault: hsla(0, 0%, 39%, 1);
--notAvailableHover: hsla(0, 0%,32%, 1);
--mutedGrey: hsla(0, 0%, 78%, 1);
--mutedBlack: hsla(0, 0%, 0%, 0.25);
--navBack: hsla(0, 0%, 30%, 1);
src/css/nav.css
+1 -1
View File
@@ -86,7 +86,7 @@ header div button {
}
i.fa-chevron-down {
color: var(--mutedGrey);
color: hsla(0, 0%, 67%, 0.58);
font-size: 3.75em;
margin: 1.5rem 0;
}
src/css/projects.css
+94
View File
@@ -0,0 +1,94 @@
/*** Projects Styles ****/
section#projects {
display: flex;
flex-direction: row;
padding: 0 2.5rem;
border-bottom: 2px solid var(--mutedGrey);
}
section#projects .mainProj, section#projects .otherProj {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
}
section#projects .mainProj {
justify-content: center;
border-right: 2px solid var(--mutedGrey);
padding: 0 2.5em 5em 0;
}
section#projects .mainProj img, section#projects .otherProj .oProjItem img {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: block;
margin: 1em auto;
}
section#projects .mainProj img {
max-width: 30rem;
}
section#projects .mainProj .flexRow {
display: flex;
flex-direction: row;
gap: 4em;
}
section#projects .mainProj .flexCol {
display: flex;
flex-direction: column;
gap: 2.5em;
}
section#projects .otherProj > a{
margin: 5rem 0;
}
section#projects .otherProj > div{
display: flex;
flex-direction: column;
gap: 2em;
}
section#projects .otherProj > div .oProjItem {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 0 auto;
width: 90%;
border: 1px solid var(--grey);
gap: 1em;
box-shadow: 0 6px 4px 0 var(--mutedBlack);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0 1em;
}
section#projects .otherProj > div .oProjItem:nth-child(2) {
flex-direction: row-reverse;
}
section#projects .otherProj .oProjItem img {
max-width: 10rem;
}
section#projects .oProjItem .flexCol div:nth-child(2) {
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 3em;
margin-left: 2em;
}
section#projects .flexCol div:nth-child(2) .btn {
padding: 0.25em 0.5em;
}
src/css/templateStyles.css
+11
View File
@@ -56,6 +56,17 @@ a.btnOutline {
color: var(--primaryDefault);
}
a.btnPrimary[disabled] {
pointer-events: none;
background: var(--notAvailableDefault);
border: 0.3215em solid var(--notAvailableDefault);
}
a.btnPrimary[disabled]:hover {
background: var(--notAvailableHover);
border: 0.3215em solid var(--notAvailableHover);
}
a.btnPrimary:hover, form input[type="submit"]:hover {
background: var(--primaryHover);
}
src/imgs/1000x800.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

src/imgs/500x400.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

src/index.html
+41 -35
View File
@@ -77,13 +77,14 @@
<section id="projects">
<div class="mainProj">
<h1>project title to be generated</h1>
<div><img src="" alt="">
<div>
<img src="imgs/1000x800.jpg" alt="">
<div class="flexRow">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque
iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit,
repudiandae.</p>
<div class="flexCol">
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut" disabled="disabled">testing</a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
</div>
</div>
@@ -92,43 +93,48 @@
<div class="otherProj">
<h1>other projects</h1>
<div class="oProjGrid">
<img src="" alt="">
<div class="flexCol">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p>
<div>
<div class="oProjItem">
<img src="imgs/500x400.jpg" alt="">
<div class="flexCol">
<div>
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam,
voluptate.</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View Project</a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">Github</a>
</div>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
<div class="oProjItem">
<img src="imgs/500x400.jpg" alt="">
<div class="flexCol">
<div>
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam,
voluptate.</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View Project</a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">Github</a>
</div>
</div>
</div>
<div class="oProjItem">
<img src="imgs/500x400.jpg" alt="">
<div class="flexCol">
<div>
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam,
voluptate.</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View Project</a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">Github</a>
</div>
</div>
</div>
</div>
<div class="oProjGrid">
<img src="" alt="">
<div class="flexCol">
<div>
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
<div class="oProjGrid">
<img src="" alt="">
<div class="flexCol">
<div>
<p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p>
</div>
<div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">View More</a>
</div>
</section>
<section id="contact">