GDSC Submission for Web Development Domain

Languages Used: HTML, CSS, JAVASCRIPT

I started by making a header div containing the hyperlinks for the various sections of the website.

I divided the website into 8 divisions:

Home

About Me

Education

Certificates

Work Experience

Skills

Projects

Contact

I gave the website an overall black look with white text.

I gave the hyperlinks animations using CSS ‘hover’ and ‘after’ properties

I then worked on the Home Section, first I added the general introduction text for a portfolio website and to make it better I worked on animating the text.

I wanted a typewriter effect but since I lack knowledge of JS, I encountered several difficulties

While trying to create the desired effect. After a lot of hit and trial and some help from the internet, I was able to successfully create the animated effect I desired to create.

function sleep(ms) {

return new Promise**((resolve) => setTimeout(resolve,ms))**;

}

const phrases = ["Code.", "Game.", "Develop."];

const el = document.getElementById**("typewriter")**

let sleepTime = 78;

let curPhraseIndex = 0;

const writeLoop = async () => {

while (true) {

let curWord = phrases**[curPhraseIndex]**;

console.log**(curWord)**;

for (let i =0; i < curWord.length; i++) {

el.innerText = curWord.substring**(0, i + 1)**;

await sleep**(sleepTime)**;

}

await sleep**(sleepTime * 10)**;

for (let i =curWord.length; i > 0; i--) {

el.innerText = curWord.substring**(0, i - 1)**;

await sleep**(sleepTime)**;

}

await sleep**(sleepTime * 5)**;

if (curPhraseIndex === phrases.length - 1) {

curPhraseIndex = 0;

} else {

curPhraseIndex++;

}

};

writeLoop**()**;

</script>

Here,

const phrases = ["Code.", "Game.", "Develop."];

const el = document.getElementById**("typewriter")**

The const phrases stores the elements code, game, develop which are displayed in the animated effect.

let sleepTime = 78;

sleepTime refers to the milliseconds of duration of every word that is displayed.

for (let i =curWord.length; i > 0; i--) {

el.innerText = curWord.substring**(0, i - 1)**;

await sleep**(sleepTime)**;

}

This loop removes the letters of the word.

for (let i =0; i < curWord.length; i++) {

el.innerText = curWord.substring**(0, i + 1)**;

await sleep**(sleepTime)**;

}

This loop adds the letters of the word that is sent to the console.

I made the div’s for the sections in the menu bar so that upon clicking a section it will take you to its respective div.

I added some images to the websites to make it more lively and added sample text.

I then added respective social media icons in the contact section.

I also added media tags of 1060px, 790px, 630px, and 440px and added appropriate dimensions for each element in respective dimensions to make the webpage responsive and a script code to make it so that a sidebar opens up for the mobile site navigation;

Though I encountered a lot of difficulties while trying to make the website responsive I tried to make it as responsive as possible.

var menu = document.querySelector**('.menu')**;

var menuBtn = document.querySelector**('.menu-btn')**;

var closeBtn = document.querySelector**('.close-btn')**;

menuBtn.addEventListener**(**"click", () => {

menu.classList.add**('active')**;

});

closeBtn.addEventListener**(**"click", () => {

menu.classList.remove**('active')**;

})

</script>

Here, the script checks if the menu-btn is active or not and activates the sidebar based upon that and another icon is used for closing it and is named close-btn,

</div>

</div>

The icons are taken from Boxicons, you can check them out here.

To go to the website: click here

Created By

Harshal Taunk

I Semester - C

GITAM University, Visakhapatnam