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
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>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.
Sir how can i make my demo website from this repo. What things i needed to change to run github pages successfully
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.