This media is not supported in your browser
VIEW IN TELEGRAM
SVG Animation
This is an SVG image animated in SCSS
👉 code
💎 @Htmlcss_channels | #css #JavaScript #HTML
This is an SVG image animated in SCSS
👉 code
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This project shows your skills, boosts your resume, and helps you stand out. Follow these steps:
• Install VS Code
• Create a folder named portfolio
• Add index.html, style.css, and script.js
html
<!DOCTYPE html>
<html>
<head>
<title>Your Name</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Your Name</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Short intro, skills, and goals</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">Project 1</div>
<div class="project">Project 2</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: your@email.com</p>
</section>
<footer>© 2025 Your Name</footer>
</body>
</html>
css
body {
font-family: sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
color: #333;
}
header {
background: #222;
color: white;
padding: 1rem;
text-align: center;
}
nav a {
margin: 0 1rem;
color: white;
text-decoration: none;
}
section {
padding: 2rem;
}
.project {
background: white;
padding: 1rem;
margin: 1rem 0;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
padding: 1rem;
background: #eee;
}
• Add smooth scroll, dark mode toggle, or animations if needed
• Push code to GitHub
• Deploy with Netlify or Vercel (connect repo, click deploy)
• Make it mobile responsive (media queries)
• Add a profile photo and social links
• Use icons (Font Awesome)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥1