Personal Website with HTML and CSS

Introduction

  • SO, Today i made the portfolio site again, but this time i added CSS.

  • I started with just the design on canva i made it in a 1400x800 canvas which i ended up regretting because i found out that my screen is actually longer than that...

  • It was too late to change at that point so i just winged it...

Hero page

  • This is the first page we end up on when we enter the site.

  • This is the design i made on canva.

  • I soon realized that that corner was going to be a nightmare to make..

  • A lot of divs and a lot of value tweaking later it worked.

  • The frame with my name in it is made with three rectangles one in the other with different colours and centered using flexbox.

  • I made the overall layout using grid.

  • I write my name in a sans serif font and the line below it in sans-serif.

  • This is the layout I ended up with its not the exact same but it works.

  • I didnt get the exact same fonts either but it is from the same family.

<div class="hero">
            <div class="corner">
                <div class="bar maroon one">    
                </div>
                <div class="bar brown two">
                </div>
                <div class="bar blue three">   
                </div>
                <div class="bar brown four">   
                </div>
                <div class="bar blue five">   
                </div>
                <div class="bar maroon six">    
                </div>
            </div>
            <div class="frame outer">
                <div class="frame mid">
                    <div class="frame inner">
                        <h1 class="name">Manmohan</h1><br/>
                        <p class="phrase">Friendly neighbourhood programmer</p>
                    </div>
                </div>
            </div>
        </div>
.hero{
    display: grid;
    grid-template-columns: 214px 500px 40px 1000px;
    grid-template-rows: 314px 331px;
    background-color: #FF204E;
    height:768px;
    width:100%;
    margin: 0px;
}
.corner{
    background-color: #FF204E;
}
.bar{
    position: relative;
    transform: rotate(135deg);
}
.maroon{
    background-color: #5D0E41;
}

.brown{
    background-color: #A0153E;
}

.blue{
    background-color: #00224D;
}

.one{
    top:5px;
    left:-34px;
    height: 30px;
    width: 154px;
}
.two{
    top : -110px;
    left: 0px;
    height: 13px;
    width: 150px;   
    z-index: 1;
}
.three{
    top : -93px;
    left: -41px;
    height: 19px;
    width: 200px;
}
.four{
    top:-50px;
    left: -45px;
    height: 19px;
    width: 200px;
    z-index: 1;
}
.five{
    top:-180px;
    left:85px;
    height: 50px;
    width: 200px;
}
.six{
    top:-80px;
    left:-150px;
    height: 25px;
    width: 500px;
}
.outer{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: 2 /3/3/5;
    background-color: #00224D;
}
.mid{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #5D0E41;
    height: 290px;
    width:990px;
    grid-area: 2/3/3/5;
}
.inner{
    display: flex;
    flex-direction: column;
    column-gap: 0px;
    background-color: #FF204E;
    height: 270px;
    width: 970px;
}

.name{
    font-size: 80px;
    letter-spacing: 5px;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300px;
    font-style: normal;
    margin-left: 40px;
    margin-top: 25px;
    margin-bottom: 0px;
}
.phrase{
    margin :0px;
    font-size: 40px;
    font-weight: 900;
    margin-left: 40px;
    margin-top: 0px;
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
}
  • That's all the code for that page.

Hello

  • I didn't know what to call this page so i called it hello because that where i say hello.

  • This was the design I made for this page .

  • I used grid for this page as well.

  • Now, that i think about it I could have used flexbox.

  • the frame is the same kind i used before and the card i made with a simple coloured div.

  • This is the design i ended up with.
           <div class="frame outer">
                <div class="frame mid">
                    <div class="frame inner">
                        <h1 class="name">Manmohan</h1><br/>
                        <p class="phrase">Friendly neighbourhood programmer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="hello">
            <div class="out">
                <div class="m">
                    <div class="i">
                        <img src="./resources/images/me.jpg" alt="my picture in a suit" class="self-pic">
                    </div>
                </div>
            </div>
            <div class="box">
                <h2 class="sub-title">Hello There!</h2>
                <p class="text">I am a college student studying computer science and aspiring to get into cyber security. I like art and games.</p>
            </div>
        </div>
.hello{
    display: grid;
    grid-template-rows: 50px 200px 250px 200px 100px;
    grid-template-columns: 80px 300px 100px 600px 200px;
    background-color: #A0153E;
    height:768px;
    width: 100%;
    margin: 0px;
}
.out{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00224D;
    grid-area: 2/2/5/3;
}
.m{
    display: flex;
    justify-content: center;
    align-items: center;
background-color: #5D0E41;
width:95%;
height: 95%;
}
.i{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF204E;
    height: 95%;
    width: 95%;
}
.self-pic{
    height: 95%;
    width: 95%;
    object-fit: cover;
}
.box{
    background-color: #FF204E;
    border-radius: 30px;
    grid-area: 3/4/4/6;
}
.sub-title{
    letter-spacing: 5px;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300px;
    font-style: normal;
    margin-left: 40px;
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 40px;
    color: #ffffff;
}
.text{
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    margin-left: 40px;
    margin-top: 25px;
    margin-bottom: 0px;
    font-size: 20px;
    color: #ffffff;
}
  • This is all the code.

Skills

  • Here I try to list my skills.

  • This is the design i came up with on canva i decided to make this using a column flexbox with 3 divs.

  • I made the images float right and added margins on the right and bottom to get it to the right position.
<div class="skills">
            <div><h2 class="sub-title skill">My Skills</h2></div>
            <div class="skill-block one">
                <h3 class="sub-title sub">Coding</h3>
                <img src="./resources/images/coding anime boy black and white.jpg" alt="sunglasses typeing something cartoon" class="skill-img">
                <p class="text sk">I’ve always felt amazed seeing people code and things just working, which made me learn coding and realising that things dont just work. But i still decided to learn it I guess i like not taking the easy way out.</p>
            </div>
            <div class="skill-block two">
                <h3 class="sub-title sub">Art</h3>
                <img src="./resources/images/240421_22h41m45s_screenshot.png" alt="drawing of my oc kiyo" class="skill-img">
                <p class="text sk">I like to draw i like the fact that by mastering this craft i can create anything, If my mind can imagine it i create it. So i started to draw, I wouldn't say I’m a master but i know my way around using a pencil to draw a face. Digital painting is also not impossible.</p>
            </div>
        </div>
.skills{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #A0153E;
    height:768px;
    width: 100%;
    margin: 0px;
}
.skill{
    margin-left:85px
}
.skill-block{
    display: inline;
    background-color: #FF204E;
    margin-left: 70px;
    margin-top: 30px;
    border-radius:30px ;
    height: 30%;
    width: 90%;
}
.two{
    margin-top: 80px;
}
.sub{
    font-size: 30px;
    margin-left: 15px;
    letter-spacing: 1px;
}
.sk{

    margin-left: 15px;
    width: 70%;
}
.skill-img{
    height: 80%;
    float: right;
    margin-right: 30px;
    margin-top: -48px;
}
  • And again thats all the code.
  • And finally i added a section where i added links to my github linkedin and twitter.

  • This was the design on canva, which i then decided to make using a flexbox with a nested flexbox in it.

  • This is the design i ended up with I changed the alignment of the heading because i thought it would be better to keep the alignment consistent.
<div class="footer">
    <div>
        <h2 class="sub-title more">Wanna know more?</h2>
    </div>
    <div class="links">
        <a href="https://github.com/P-M-Manmohan" class="button">GitHub</a>
        <a href="https://www.linkedin.com/in/manmohan-p-m-78618323a/" class="button">LinkedIn</a>
        <a href="https://twitter.com/Manmohan652" class="button">Twitter</a>
    </div>
    <div class="pink-part">
         <p class="copyright">© Manmohan P M</p>
    </div>
</div>
.footer{
    display: flex;
    flex-direction: column;
    background-color: #A0153E;
    height:768px;
    width: 100%;
    margin: 0px;
}
.more{
    margin-left: 85px;
}
.links{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
}
.button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    color: #ffffff;
    text-decoration: none;
    font-style: normal;
    background-color: #FF204E;
    height: 50px;
    width:100px;
    border-radius: 30px;
    margin-left: 100px;
    margin-right: 100px;
}
.pink-part{
    display: flex;
    justify-content: center;
    background-color: #FF204E;
    height: 70%;
}
.copyright{
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    opacity: 0.8;
}
  • And that is the code.

Conclusion

Did you find this article valuable?

Support The Journey by becoming a sponsor. Any amount is appreciated!