ajitverma15 / interactive-portfolio Goto Github PK

A clean, beautiful and responsive portfolio templete with using only HTML and css. Later on add some javascript for animation and designing.

Home Page: https://ajitverma15.github.io/Interactive-Portfolio/

License: MIT License

HTML 61.81% CSS 38.19%

html5 css3 portfolio-website portfolio-site interactive portfolio portfolio-template developer-portfolio-template resume

interactive-portfolio's Introduction

Interactive-Portfolio

A Resposive and attractive portfolio for Developers 🔥

A clean, beautiful and responsive portfolio templete with using only HTML and css. Later on add some javascript for animation and designing. visit the website here.

Sections:

💥 About me
💥 Education
💥 Cretification
💥 Skills
💥 Projects
💥 Contact me

Technology used:

HTML
CSS

Illustration and Images

For the Future

I'm in the process of learning javascript So,i didn't add any of it If you can help us with these.Please don't hesitate to open a pull request.

Add a page loader
Add some Animation
Enable Dark mode
Add some more Section

Reference

Some Design idea are taken from Ashutosh Hathidara

interactive-portfolio's People

Contributors

Stargazers

Watchers

Forkers

ronak007mistry akashjohn1111 goksunbasel dalpan obilo509 domwat prasath1105 gvivekchary max-munene sambitkumar10 mehmetkaandemir jenniferputria brat23 codepool867 aspazz33 asrafulalamazad chandan2710 loisobrero yanmeeei arshdeep-13 haydenhildreth denemelers11 bitubhaiyt vvashu38 mirsaidbey moersito officialwastaken kundan594 arushi2610 steffanic ansh04196 arjunc36532 eyelid2003 megan-kwok-1 njeruh rafaelmotta01 chauhanvanshita jsxtp01

interactive-portfolio's Issues

Issue Template

Currently, your repository does not have any issue templates, which makes it slightly harder to manage issues and assign issues for maintainers. To fix this issue, I opened a Pull - Request, which will add Issue Templates to this Repository.

Regards,
Zemerik

Add Dark Mode

Whether you also want to add dark mode, just follow me! Read:
Create file called switcher or other as you want, link it as defer in body tag and in switcher type the code:

function toggleDarkMode(){
    document.body.classList.toggle("dark");
}

After it is, save JS File. Next, in your css stylesheet, add the following code. The given code contain only solid colors, you can change it to other colors as you need to suit them best in your site.

.dark{
    color: white;
    background-color: black;
}

Well, if you want to add different colors in different elements like div.container contains div.row and you want to add different colors in both of these, just use .dark.div.container div.row. Code:

.dark.div.container div.row{
    color: purple;
}

It is neccessary that the JS File should be linked. Create a button element in your body tag and set its content to Dark Mode or your choice and set a onclick attribute to call the toggleDarkMode() function.

<button onclick="toggleDarkMode()">Dark Mode</button>

You can also style anything excluding JS.

Help needed

Sir how can i make my demo website from this repo. What things i needed to change to run github pages successfully

Add loader

As in your README's For the future section, you want to add a loader. I can help you in that. Here's how:
Create a JS File called loader or your choice, link it at bottom of the body tag under body tag and also add 'defer=defer' in the script tag which you will use to link the JS File.
In loader.js, type the given code. Replace the comment by the code to be executed after the page is loaded.

document.body.addEventListener("load", (e) => {
    // code to be executed after the page is loaded
})

If you confused where the script tag and what tag to be added, see the syntax here:

<html>
<head>
<!-- Your Head Tag Code -->
</head>
<body>
<!-- Your Body Tag Code -->

<!-- The below is the code to be added -->
<script defer="defer" src="loader.js"></script>
</body>
</html>