5025251096_Gabriel Mesly Managam Siahaan_Website Portofolio
Tampilan Website Portofolio
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio | Web Developer</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="layout-container">
<aside class="sidebar">
<div class="profile-section">
<img src="Profile.png" alt="Profile Picture" class="profile-img">
<h1 class="name">Gabriel Mesly Managam Siahaan</h1>
<h2 class="title">Informatics Student<br>Web Developer Enthusiast</h2>
<p class="description">
Saya adalah mahasiswa baru di program studi Teknik Informatika, Institut Teknologi Sepuluh Nopember (ITS), dengan minat mendalam di bidang software engineering, khususnya pengembangan game dan desain visual. Meskipun masih berada di awal perjalanan akademik, saya telah aktif dalam kegiatan organisasi, termasuk menjadi panitia perpisahan sekolah yang melatih kemampuan kerja tim dan koordinasi. </p>
</div>
<div class="contact-info">
<div class="info-item">
<i class="fas fa-id-badge"></i>
<div>
<strong>NRP</strong>
<p>5025251096</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-envelope"></i>
<div>
<strong>Email</strong>
<p>5025251096@student.its.ac.id</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-phone"></i>
<div>
<strong>Phone</strong>
<p>+62 812 8202 2159</p>
</div>
</div>
<div class="info-item">
<i class="fas fa-map-marker-alt"></i>
<div>
<strong>Location</strong>
<p>Surabaya, Jawa Timur</p>
</div>
</div>
</div>
<div class="social-links">
<a href="https://www.linkedin.com/in/gabriel-mesly-managam-siahaan-a68626378/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/gabrielmesly123-cyber" target="_blank" aria-label="GitHub"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/gabrielmesly/" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="mailto:gabrielmesly123@gmail.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</aside>
<div class="content-wrapper">
<header class="top-nav">
<div class="logo">
<strong>GM</strong> Portfolio
</div>
<nav class="nav-links">
<a href="#home">Home</a>
<a href="#skills">Skills</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
<a href="#" class="btn btn-outline"><i class="fas fa-download"></i> Download CV</a>
</header>
<main class="main-content">
<section id="home" class="card hero-section">
<div class="hero-text">
<span class="greeting">HELLO, I'M</span>
<h2 class="hero-name">Gabriel Mesly</h2>
<p class="hero-subtitle">Membuat suatu ide menjadi sebuah pengalaman.</p>
<p class="hero-desc">
Saya berfokus dalam Music Production & Sound Engineering, UI/UX, serta Graphic Design .
</p>
<div class="hero-buttons">
<a href="#portfolio" class="btn btn-primary">View Portfolio <i class="fas fa-arrow-right"></i></a>
<a href="#contact" class="btn btn-outline-dark">Contact Me</a>
</div>
</div>
<div class="hero-image">
<img src="images.png" alt="Workspace or hero illustration">
</div>
</section>
<div class="grid-layout">
<section id="skills" class="card">
<h3 class="section-title"><i class="fas fa-cog"></i> Skillset</h3>
<div class="skill">
<div class="skill-info">
<span>Photshop</span>
<span>70%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 70%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>Canva</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 85%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>Adobe Illustrator</span>
<span>60%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 60%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>Ableton Live</span>
<span>75%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 75%;"></div>
</div>
</div>
<div class="skill">
<div class="skill-info">
<span>Figma</span>
<span>85%</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: 85%;"></div>
</div>
</div>
</section>
<section id="tools" class="card">
<h3 class="section-title"><i class="fas fa-tools"></i> Toolset</h3>
<div class="tools-grid">
<div class="tool-item">
<i class="fas fa-code"></i>
<span>VS Code</span>
</div>
<div class="tool-item">
<i class="fab fa-figma"></i>
<span>Figma</span>
</div>
<div class="tool-item">
<i class="fab fa-github"></i>
<span>GitHub</span>
</div>
<div class="tool-item">
<i class="fab fa-p"></i>
<span>Photshop</span>
</div>
<div class="tool-item">
<i class="fas fa-paint-brush"></i>
<span>Canva</span>
</div>
<div class="tool-item">
<i class="fas fa-headset"></i>
<span>Ableton</span>
</div>
</div>
</section>
<div class="flex-column">
<section id="education" class="card">
<h3 class="section-title"><i class="fas fa-graduation-cap"></i> Education</h3>
<div class="edu-item">
<h4>Institut Teknologi Sepuluh Nopember (ITS)</h4>
<p class="major">S1 Teknik Informatika</p>
<p class="year">2025 – Present</p>
</div>
</section>
<section id="interests" class="card">
<h3 class="section-title"><i class="fas fa-heart"></i> Interests</h3>
<div class="tags-container">
<span class="tag">Music Production</span>
<span class="tag">UI/UX Design</span>
<span class="tag">Sound Engineering</span>
<span class="tag">Concerts</span>
<span class="tag">Gym</span>
<span class="tag">Graphic Design</span>
</div>
</section>
</div>
</div>
<section id="portfolio" class="card">
<h3 class="section-title"><i class="fas fa-briefcase"></i> Portfolio</h3>
<div class="portfolio-grid">
<article class="project-card">
<img src="Porto.png" alt="Task Manager App Screenshot">
<div class="project-content">
<h4>Nutrilens</h4>
<p>A web application designed to help users with managing caloric and nutritional intake.</p>
<div class="project-tags">
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
</div>
<a href="#" class="project-link">View Project <i class="fas fa-arrow-right"></i></a>
</div>
</article>
</div>
</section>
<section id="contact" class="card">
<h3 class="section-title"><i class="fas fa-paper-plane"></i> Contact Me</h3>
<div class="contact-content">
<p>Interested in working together or have any questions? Feel free to reach out!</p>
<div class="contact-links">
<a href="mailto:5025251096@student.its.ac.id" class="contact-box">
<i class="fas fa-envelope"></i>
<span>5025251096@student.its.ac.id</span>
</a>
<a href="https://github.com/gabrielmesly123-cyber" target="_blank" class="contact-box">
<i class="fab fa-github"></i>
<span>github.com/gabrielmesly123-cyber</span>
</a>
<a href="https://www.linkedin.com/in/gabriel-mesly-managam-siahaan-a68626378/" target="_blank" class="contact-box">
<i class="fab fa-linkedin"></i>
<span>linkedin.com/in/gabriel-mesly-managam-siahaan</span>
</a>
</div>
<a href="mailto:5025251096@student.its.ac.id" class="btn btn-primary" style="margin-top: 1.5rem; display: inline-block;">Email Me Directly</a>
</div>
</section>
</main>
<footer>
<p>© 2026 Gabriel Mesly. All Rights Reserved.</p>
<div class="footer-socials">
<a href="https://www.linkedin.com/in/gabriel-mesly-managam-siahaan-a68626378/"><i class="fab fa-linkedin"></i></a>
<a href="https://github.com/gabrielmesly123-cyber"><i class="fab fa-github"></i></a>
<a href="https://www.instagram.com/gabrielmesly/"><i class="fab fa-instagram"></i></a>
</div>
</footer>
</div>
</div>
</body>
</html>
CSS :
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--secondary-color: #1e293b;
--background-color: #f5f7fb;
--card-color: #ffffff;
--text-main: #1f2937;
--text-muted: #64748b;
--border-radius: 15px;
--shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
--border-color: #e2e8f0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--background-color);
color: var(--text-main);
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.layout-container {
display: flex;
min-height: 100vh;
max-width: 1440px;
margin: 0 auto;
}
.sidebar {
width: 320px;
background-color: var(--card-color);
position: sticky;
top: 0;
height: 100vh;
padding: 2.5rem 2rem;
overflow-y: auto;
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 2rem;
}
.profile-section {
text-align: center;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--background-color);
margin-bottom: 1rem;
}
.name {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.title {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 500;
margin-bottom: 1rem;
}
.description {
font-size: 0.9rem;
color: var(--text-muted);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.info-item {
display: flex;
align-items: center;
gap: 1rem;
}
.info-item i {
font-size: 1.2rem;
color: var(--primary-color);
width: 24px;
text-align: center;
}
.info-item strong {
display: block;
font-size: 0.85rem;
color: var(--text-main);
}
.info-item p {
font-size: 0.85rem;
color: var(--text-muted);
}
.social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: auto;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: var(--primary-color);
color: white;
border-radius: 8px;
font-size: 1.2rem;
}
.social-links a:hover {
background-color: var(--primary-hover);
transform: translateY(-3px);
}
.content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
.top-nav {
position: sticky;
top: 0;
background-color: var(--secondary-color);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 3rem;
z-index: 100;
}
.logo {
font-size: 1.25rem;
}
.logo strong {
color: var(--primary-color);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
font-weight: 500;
font-size: 0.95rem;
}
.nav-links a:hover {
color: var(--primary-color);
}
.btn {
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.btn-outline {
border: 2px solid white;
background: transparent;
color: white;
}
.btn-outline:hover {
background: white;
color: var(--secondary-color);
}
.btn-primary {
background-color: var(--primary-color);
color: white;
border: none;
}
.btn-primary:hover {
background-color: var(--primary-hover);
}
.btn-outline-dark {
border: 2px solid var(--secondary-color);
background: transparent;
color: var(--secondary-color);
}
.btn-outline-dark:hover {
background: var(--secondary-color);
color: white;
}
.main-content {
padding: 2.5rem 3rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.card {
background-color: var(--card-color);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
}
.section-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-main);
}
.section-title i {
color: var(--primary-color);
}
.hero-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.hero-text {
flex: 1;
}
.greeting {
color: var(--primary-color);
font-weight: 700;
letter-spacing: 1px;
font-size: 0.9rem;
}
.hero-name {
font-size: 2.5rem;
font-weight: 700;
margin: 0.5rem 0;
color: var(--secondary-color);
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.hero-desc {
margin-bottom: 2rem;
color: var(--text-muted);
}
.hero-buttons {
display: flex;
gap: 1rem;
}
.hero-image {
flex: 1;
max-width: 400px;
}
.hero-image img {
width: 100%;
border-radius: var(--border-radius);
object-fit: cover;
}
.grid-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.flex-column {
display: flex;
flex-direction: column;
gap: 2rem;
}
.skill {
margin-bottom: 1.25rem;
}
.skill-info {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.progress-bar {
width: 100%;
height: 8px;
background-color: var(--background-color);
border-radius: 4px;
overflow: hidden;
}
.progress {
height: 100%;
background-color: var(--primary-color);
border-radius: 4px;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.tool-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem 1rem;
background-color: var(--background-color);
border-radius: 10px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-item i {
font-size: 2rem;
color: var(--secondary-color);
margin-bottom: 0.5rem;
}
.tool-item span {
font-size: 0.85rem;
font-weight: 600;
}
.tool-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow);
background-color: white;
}
.edu-item h4 {
font-size: 1rem;
font-weight: 700;
color: var(--secondary-color);
}
.edu-item .major {
font-size: 0.9rem;
color: var(--text-main);
margin: 0.25rem 0;
}
.edu-item .year {
font-size: 0.85rem;
color: var(--text-muted);
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background-color: var(--background-color);
color: var(--text-muted);
font-size: 0.8rem;
font-weight: 500;
padding: 0.4rem 0.8rem;
border-radius: 20px;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.project-card {
background-color: var(--background-color);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-5px);
}
.project-card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.project-content {
padding: 1.5rem;
}
.project-content h4 {
font-size: 1.1rem;
color: var(--secondary-color);
margin-bottom: 0.5rem;
}
.project-content p {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.project-tags span {
font-size: 0.75rem;
background-color: #e2e8f0;
padding: 0.2rem 0.6rem;
border-radius: 4px;
color: var(--secondary-color);
font-weight: 600;
}
.project-link {
font-size: 0.9rem;
font-weight: 600;
color: var(--primary-color);
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.project-link:hover {
color: var(--primary-hover);
}
.contact-links {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1.5rem;
}
.contact-box {
display: flex;
align-items: center;
gap: 0.75rem;
background-color: var(--background-color);
padding: 1rem 1.5rem;
border-radius: 10px;
font-weight: 500;
}
.contact-box i {
color: var(--primary-color);
font-size: 1.2rem;
}
.contact-box:hover {
background-color: var(--border-color);
}
footer {
padding: 2rem 3rem;
text-align: center;
color: var(--text-muted);
font-size: 0.9rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.footer-socials {
display: flex;
gap: 1rem;
}
.footer-socials a {
color: var(--text-muted);
font-size: 1.2rem;
}
.footer-socials a:hover {
color: var(--primary-color);
}
/* Tablet Layout */
@media (max-width: 1024px) {
.grid-layout {
grid-template-columns: 1fr 1fr;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile Layout */
@media (max-width: 768px) {
.layout-container {
flex-direction: column;
}
.sidebar {
width: 100%;
height: auto;
position: static;
border-right: none;
border-bottom: 1px solid var(--border-color);
padding: 2rem 1.5rem;
}
.top-nav {
flex-direction: column;
padding: 1.5rem;
gap: 1rem;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.main-content {
padding: 1.5rem;
}
.hero-section {
flex-direction: column-reverse;
text-align: center;
}
.hero-buttons {
justify-content: center;
}
.grid-layout {
grid-template-columns: 1fr;
}
.tools-grid {
grid-template-columns: repeat(3, 1fr);
}
.portfolio-grid {
grid-template-columns: 1fr;
}
}
Komentar
Posting Komentar