Spaces:

Sakuna
/

codecanvas-creations

Running

App Files Files Community

Sakuna commited on 30 days ago

Commit

c5ded71

verified ·

1 Parent(s): 01926e2

Create a simple portfolio website (beautiful) that provides a summary of my self and allow the visitors to download my CV and direct them to my linked in, medium, and google scholar profiles

Browse files

Files changed (4) hide show

components/profile-links.js +70 -0
index.html +22 -8
script.js +26 -0
style.css +15 -0

components/profile-links.js ADDED Viewed

	@@ -0,0 +1,70 @@

+class ProfileLinks extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        .links-container {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 1rem;
+          margin-top: 2rem;
+          justify-content: center;
+        }
+        .profile-link {
+          display: flex;
+          align-items: center;
+          padding: 0.75rem 1.5rem;
+          border-radius: 0.5rem;
+          text-decoration: none;
+          font-weight: 500;
+          transition: all 0.3s ease;
+          border: 1px solid var(--indigo-600);
+          color: var(--indigo-600);
+          background: transparent;
+        }
+        .profile-link:hover {
+          background: var(--indigo-600);
+          color: white;
+          transform: translateY(-2px);
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .profile-link i {
+          margin-right: 0.5rem;
+        }
+        .dark .profile-link {
+          border-color: var(--indigo-400);
+          color: var(--indigo-400);
+        }
+        .dark .profile-link:hover {
+          background: var(--indigo-400);
+          color: var(--gray-900);
+        }
+      </style>
+      <div class="links-container">
+        <a href="#" class="profile-link" id="profile-cv">
+          <i data-feather="download"></i> Download CV
+        </a>
+        <a href="#" class="profile-link" id="profile-linkedin">
+          <i data-feather="linkedin"></i> LinkedIn
+        </a>
+        <a href="#" class="profile-link" id="profile-medium">
+          <i data-feather="edit"></i> Medium
+        </a>
+        <a href="#" class="profile-link" id="profile-scholar">
+          <i data-feather="book-open"></i> Scholar
+        </a>
+      </div>
+    `;
+    // Initialize feather icons
+    document.addEventListener('DOMContentLoaded', () => {
+      feather.replace();
+    });
+  }
+}
+customElements.define('profile-links', ProfileLinks);

index.html CHANGED Viewed

@@ -3,14 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PixelPerfect Portfolio | Creative Showcase</title>
-    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/project-card.js"></script>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
     <custom-navbar></custom-navbar>
@@ -21,17 +22,30 @@
             <div class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-indigo-500 mb-6">
                 <img src="http://static.photos/people/320x240/42" alt="Profile" class="w-full h-full object-cover">
             </div>
-            <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-indigo-600 dark:text-indigo-400">Alex</span></h1>
-            <h2 class="text-xl md:text-2xl text-gray-600 dark:text-gray-400 mb-6">UI/UX Designer & Frontend Developer</h2>
-            <div class="flex gap-4">
                 <a href="#work" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View My Work</a>
                 <a href="#contact" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition">Contact Me</a>
             </div>
         </section>
         <!-- About Section -->
-        <section id="about" class="py-12 md:py-20">
-            <div class="max-w-4xl mx-auto">
                 <h2 class="text-3xl font-bold mb-8 text-center">About Me</h2>
                 <div class="grid md:grid-cols-2 gap-8 items-center">
                     <div>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Professional Portfolio | CV & Profiles</title>
+<link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script src="components/navbar.js"></script>
     <script src="components/footer.js"></script>
     <script src="components/project-card.js"></script>
+    <script src="components/profile-links.js"></script>
 </head>
 <body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
     <custom-navbar></custom-navbar>
             <div class="w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border-4 border-indigo-500 mb-6">
                 <img src="http://static.photos/people/320x240/42" alt="Profile" class="w-full h-full object-cover">
             </div>
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-indigo-600 dark:text-indigo-400" id="userName">[Your Name]</span></h1>
+            <h2 class="text-xl md:text-2xl text-gray-600 dark:text-gray-400 mb-6" id="userTitle">[Your Profession]</h2>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="#" id="cvDownload" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
+                    <i data-feather="download" class="mr-2"></i> Download CV
+                </a>
+                <a href="#" id="linkedinLink" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition flex items-center">
+                    <i data-feather="linkedin" class="mr-2"></i> LinkedIn
+                </a>
+                <a href="#" id="mediumLink" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition flex items-center">
+                    <i data-feather="edit" class="mr-2"></i> Medium
+                </a>
+                <a href="#" id="scholarLink" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition flex items-center">
+                    <i data-feather="book-open" class="mr-2"></i> Scholar
+                </a>
+            </div>
+<div class="flex gap-4">
                 <a href="#work" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View My Work</a>
                 <a href="#contact" class="px-6 py-3 border border-indigo-600 text-indigo-600 dark:text-indigo-400 rounded-lg hover:bg-indigo-50 dark:hover:bg-gray-800 transition">Contact Me</a>
             </div>
         </section>
         <!-- About Section -->
+        <section id="about" class="py-12 md:py-20" data-aos="fade-up">
+<div class="max-w-4xl mx-auto">
                 <h2 class="text-3xl font-bold mb-8 text-center">About Me</h2>
                 <div class="grid md:grid-cols-2 gap-8 items-center">
                     <div>

script.js CHANGED Viewed

@@ -1,4 +1,30 @@
 // Intersection Observer for section animations
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {

+// User profile data - replace with your actual information
+const userData = {
+    name: "Your Name",
+    title: "Your Profession",
+    cvUrl: "#", // Replace with your CV download link
+    linkedin: "#", // Replace with your LinkedIn profile URL
+    medium: "#", // Replace with your Medium profile URL
+    scholar: "#"  // Replace with your Google Scholar profile URL
+};
+// Set user data on page load
+document.addEventListener('DOMContentLoaded', () => {
+    document.getElementById('userName').textContent = userData.name;
+    document.getElementById('userTitle').textContent = userData.title;
+    const cvDownload = document.getElementById('cvDownload');
+    const linkedinLink = document.getElementById('linkedinLink');
+    const mediumLink = document.getElementById('mediumLink');
+    const scholarLink = document.getElementById('scholarLink');
+    if (cvDownload) cvDownload.href = userData.cvUrl;
+    if (linkedinLink) linkedinLink.href = userData.linkedin;
+    if (mediumLink) mediumLink.href = userData.medium;
+    if (scholarLink) scholarLink.href = userData.scholar;
+});
 // Intersection Observer for section animations
 const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {

style.css CHANGED Viewed

@@ -39,6 +39,21 @@ html {
 .dark ::-webkit-scrollbar-thumb:hover {
     background: #666;
 }
 /* Animation for sections */
 section {

 .dark ::-webkit-scrollbar-thumb:hover {
     background: #666;
 }
+/* Profile links styling */
+.profile-link {
+    transition: all 0.3s ease;
+    min-width: 150px;
+    justify-content: center;
+}
+.profile-link:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.dark .profile-link:hover {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
 /* Animation for sections */
 section {