In this project I created personal portfolio website using HTML CSS and JavaScript. You can use this website to make your online resume or CV.
⚡️ Modern UI Design + Reveal Animations
⚡️ Dark theme
⚡️ One Page Layout
⚡️ Styled with HTML + CSS +JavaScript
⚡️ Fully Responsive
⚡️ Valid HTML5 & CSS3
⚡️ add contact info and contact form.
⚡️ Your can receive the contact form data on your google sheets
⚡️ Well organized documentation
To view the demo: click here
- Professional way to showcase your work to digital word
- Increases your visibility and online presence
- Shows you’re more than just a resume
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
You'll need Git and IDE(Integrated development environment) Visual Studio Code installed on your computer.
- Git
- IDE ( Integrated development environment ) Visual Studio Code
From your command line, first clone DTKfolio:
- Method-01
# Clone the repository
$ git clone https://github.com/kusal-tharindu/DTKfolio
- Method-02
Download directly from github.
You start DIE and open the download floder(portfolio-main) with it and edit it with your details. I am using VS Code for this demo.
download Live Server extension. Once your server has started, open index.html file via Live Server extension.
Go to index.html and put your information, there are several sections:
- Search below
htmlcode inheadsection - Replace Kusal Tharindu with you name
<!-- head -->
<title>Kusal Tharindu</title>- Repale
sidemenuinfomation andheader textwith you details - Change image in the
img src="images/logo.png" class="logo"html code.
<!-- sidemenu -->
<div id="header">
<div class="container">
<nav>
<img src="images/logo.png" class="logo">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">My services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fa-solid fa-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-solid fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Network Engineer</p>
<h1>I'm <span>Kusal</span><br> from Sri lanka</h1>
</div>
</div>
</div>- Repale
ABOUTinfomation andskillswith you details. - Change image in the
img src="images/user.png"html code.
<div id="about">
<div class="container">
<div class="row">
<div class="about-col-1">
<img src="images/user.png">
</div>
<div class="about-col-2">
<h1 class="sub-title">About me</h1>
<p>This site focuses on cyber security and network engineering. Knowledge of the these
fields goes beyond the ordinary and we are tempted to present it in
a new dimension and different way.</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')" >Skills</p>
<p class="tab-links" onclick="opentab('experience')" >Experiences</p>
<p class="tab-links" onclick="opentab('education')" >Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Networking</span><br>configuer the routers</li>
<li><span>Cyber Securety</span><br>wireshark configuratiuon</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>2021- currnt</span><br>diolog</li>
<li><span>2020-2021</span><br>MIT</li>
</ul>
</div>
<div class="tab-contents" id="education" >
<ul>
<li><span>Networking</span><br>Harvard University</li>
<li><span>Cyber Securety</span><br>CISCO</li>
</ul>
</div>
</div>
</div>
</div>
</div>- Repale
servicesinfomation with you details. - Add you personal link for that specific Services in the
<a href="#">htlm code.
<!-- Services -->
<div id="services">
<div class="container">
<h1 class="sub-title">My services</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-server"></i>
<h2>Networking</h2>
<p>Networking Essentials ( Version 2) Pretest Exam answers</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-user-secret"></i>
<h2>Cyber security</h2>
<p>Cyber security is the application of technologies, processes,
and controls to protect systems, networks, programs</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fa-solid fa-code"></i>
<h2>Programming</h2>
<p>Programming involves tasks such as analysis, generating algorithms, profiling algorithms'
accuracy and resource consumption</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>- Repale
portfolioinfomation with you details. - Add you personal link for that specific portfolio in the
<a href="#">htlm code.
<!-- portpolio -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My work</h1>
<div class="work-list">
<div class="work">
<img src="images/work-1.png">
<div class="layer">
<h3>Social app</h3>
<p>Create app and make up to $1000 monthly passive income. Absolutely free
forever. No monthly charges, fees or paid features</p>
<a href="#"><i class="fa-solid fa-link"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-2.png">
<div class="layer">
<h3>Mucic app</h3>
<p>Create app and make up to $1000 monthly passive income. Absolutely free
forever. No monthly charges, fees or paid features</p>
<a href="#"><i class="fa-solid fa-link"></i></a>
</div>
</div>
<div class="work">
<img src="images/work-3.png">
<div class="layer">
<h3>Online app</h3>
<p>Create app and make up to $1000 monthly passive income. Absolutely free
forever. No monthly charges, fees or paid features</p>
<a href="#"><i class="fa-solid fa-link"></i></a>
</div>
</div>
</div>
<a href="#" class="btn">See more</a>
</div>
</div>- Repale
contectinfomation with you details. - Add you social-media link for that specific portfolio in the
<a href="#">htlm code.
<!-- ********contect*******-->
<div id="contact">
<div class="container">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact me</h1>
<p><i class="fa-solid fa-envelope"></i> [email protected]</p>
<p><i class="fa-solid fa-square-phone"></i> 011345678</p>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-twitter-square"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="Documents/my_cv.pdf" download class="btn btn2">Download CV</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your name" required>
<input type="email" name="email" placeholder="Your Email",required>
<textarea name="Massage" rows="6" placeholder="Your Massage"></textarea>
<button type="submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>
</div>
</div>
</div>
<div class="copyright">
<p>copyright <i class="fa-regular fa-copyright"></i> kusal.Tharindu</p>
</div>
</div>- You can set-up
google_scrpitsand connect with your form. - Step by step guide: Easy Tutorials
<script>
/* How to Send contact form data on Google sheets,
reference: "https://www.youtube.com/watch?v=0YFrGy_mzjY&t=6473s" */
const scriptURL = 'https://script.google.com/macros/s/your_google_scrpits'
const form = document.forms['submit-to-google-sheet']
const msg =document.getElementById("msg")
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {
msg.innerHTML= "Message sent successfully"
setTimeout(function(){
msg.innerHTML=""
}, 5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>Once you finish your setup. You need to put your website online!
I highly recommend to use Cloudflare pages because it is super easy. By default you can get yourname.pages.dev domain. also you can set custom domain name.
Kusal Tharindu- https://github.com/kusal-tharindu
This project is licensed under the MIT License - see the LICENSE.md file for details.
I was motivated to create this project because I wanted to contribute on something useful for the dev community.
Many thanks to Easy Tutorials.