HTML , CSS AND JAVASCRIPT CODE FOR PERSONAL PORTFOLIO

Posted on by admin

This code represents an advanced and interactive personal portfolio website for a web developer, designed to showcase their skills, projects, and contact information. Key elements and features include:

  1. Header with Navigation:
    • The header has a dynamic navigation menu with links to sections like Home, About, Projects, Skills, and Contact.
    • Links have a glowing effect on hover, using a golden color for a modern touch.
  2. 3D and Glowing Effects:
    • Sections lift slightly when hovered, giving a 3D effect that adds depth and interactivity to the page.
    • Project cards have a glowing golden border on hover, which enhances the visual appeal and interaction.
  3. Responsive Project Section:
    • The Projects section displays six projects in a grid format with images and descriptions.
    • Each project card features a zoom effect on the image when hovered, along with a background glow effect to make each project visually stand out.
  4. Skills Section:
    • Displays skills as buttons that highlight and slightly grow on hover, showing core technologies like HTML, CSS, JavaScript, and React.
  5. Contact Section with Social Links:
    • Contains email and phone information as well as links to social profiles (e.g., LinkedIn, GitHub).
    • Links are styled with hover effects for easy interaction.
  6. Footer:
    • A footer includes copyright information, styled with the same gradient as the header to unify the page’s appearance.
  7. Responsive and Accessible Design:
    • The layout is mobile-friendly, adjusting project cards and skill buttons to fit smaller screens.
    • Fonts, colors, and hover effects are accessible and responsive, contributing to a smooth UI and UX.
  8. Overall Aesthetic and Modern Touches:
    • Uses modern CSS techniques like gradients, box shadows, and transitions to create a polished and visually engaging website.
    • The color scheme and effects (3D lift, glow, hover animations) create an advanced, professional, and interactive portfolio design.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Srijan Acharya - Web Developer Portfolio</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #e0eafc, #cfdef3);
            color: #333;
            line-height: 1.6;
            transition: background-color 0.3s;
            perspective: 1000px; /* Added for 3D effect */
        }

        header {
            background: linear-gradient(90deg, #007BFF, #0056b3);
            color: white;
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            position: relative;
            transform: translateZ(0);
            transition: transform 0.3s;
        }

        header:hover {
            transform: translateZ(10px); /* Header lift effect on hover */
        }

        header nav {
            margin-top: 10px;
        }

        header nav a {
            margin: 0 15px;
            color: white;
            text-decoration: none;
            font-size: 1.2em;
            transition: color 0.3s, text-shadow 0.3s;
        }

        header nav a:hover {
            color: #ffd700; /* Golden color */
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5); /* Glowing effect */
        }

        h1 {
            margin: 10px 0;
            font-size: 2.5em;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            transform: translateZ(0);
            transition: transform 0.3s;
        }

        h1:hover {
            transform: translateY(-5px); /* Hover effect on title */
        }

        h2 {
            margin: 10px 0;
            font-size: 1.8em;
        }

        section {
            padding: 20px;
            max-width: 900px;
            margin: auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transform: translateZ(0);
            transition: transform 0.3s;
        }

        section:hover {
            transform: translateY(-5px); /* Lift effect on sections */
        }

        .contact-info {
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .socials {
            margin-top: 10px;
        }

        .socials a {
            margin: 0 15px;
            color: #007BFF;
            text-decoration: none;
            font-size: 1.5em;
            transition: color 0.3s;
        }

        .socials a:hover {
            color: #0056b3;
        }

        .about {
            margin-top: 30px;
            padding: 20px;
            background: #f8f8f8;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transform: translateZ(0);
            transition: transform 0.3s;
        }

        .projects {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 20px;
        }

        .project {
            width: calc(33% - 20px);
            margin: 10px;
            padding: 15px;
            background: #f8f8f8;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
        }

        .project img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: transform 0.3s;
        }

        .project:hover img {
            transform: scale(1.1); /* Zoom effect on image hover */
        }

        .project h3 {
            margin: 10px 0;
        }

        .project:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 20px rgba(0, 123, 255, 0.6);
            border-color: #ffd700; /* Golden border on hover */
        }

        .project::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 123, 255, 0.2);
            opacity: 0;
            transition: opacity 0.3s;
            border-radius: 8px;
            z-index: 1;
        }

        .project:hover::after {
            opacity: 1;
        }

        .skills {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 30px;
        }

        .skill {
            background: #007BFF;
            color: white;
            border-radius: 5px;
            padding: 10px;
            margin: 5px;
            font-size: 1em;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: background 0.3s, transform 0.3s;
        }

        .skill:hover {
            background: #0056b3;
            transform: scale(1.05);
        }

        footer {
            text-align: center;
            padding: 20px;
            margin-top: 20px;
            background: linear-gradient(90deg, #007BFF, #0056b3);
            color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }

        @media (max-width: 768px) {
            .project {
                width: calc(50% - 20px);
            }
        }

        @media (max-width: 480px) {
            .project {
                width: 100%;
            }

            .skill {
                flex: 1 1 100%;
            }
        }
    </style>
</head>

<body>
    <header>
        <h1>Srijan Acharya</h1>
        <h2>Web Developer</h2>
        <nav>
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#skills">Skills</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <section id="about" class="about">
        <h2>About Me</h2>
        <p>
            I am a passionate web developer with experience in creating dynamic and responsive websites. 
            I have a strong foundation in HTML, CSS, and JavaScript, and I love to build projects that solve real-world problems.
        </p>
    </section>

    <section id="projects">
        <h2>Projects</h2>
        <div class="projects">
            <div class="project">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRh--jVCN1FxGv7tkgtHWAmOgyprBghmyppSQ&s" alt="Project 1">
                <h3>WEBSITE</h3>
                <p> WORLD CLASS WEBSITE  CAN BE BUILD</p>
            </div>
            <div class="project">
                <img src="https://media.licdn.com/dms/image/v2/D4D12AQHYC_ZczxV2zw/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1695524296879?e=2147483647&v=beta&t=rLMZ59ByIABpdPtfPZPZC65iXWG4zbht2eqKfWOdxRs" alt="Project 2">
                <h3>GRAPHICS DESIGN</h3>
                <p>   QUALIFIED GRAPHICS DESIGNERS FOR YOU.</p>
            </div>
            <div class="project">
                <img src="https://i.ytimg.com/vi/VmekmH0QJMs/maxresdefault.jpg">
                <h3> VIDEO EDITING </h3>
                <p>  BEST VIDEO EDITOR FOR YOU .</p>
            </div>
            <div class="project">
                <img src="https://images.ctfassets.net/hzjmpv1aaorq/5HXWEnXDdy2ApxJmxatZ8D/ae24852a60c791fae04c21d9bf0046f2/US_100__15_.jpg?q=70" alt="Project 4">
                <h3>TRADING </h3>
                <p> MAXIMIZING YOUR PROFIT.</p>
            </div>
            <div class="project">
                <img src="https://wallpapers.com/blog/wp-content/uploads/2024/02/Trends-in-Australian-Animation-Themed-Wallpapers.jpg" alt="Project 5">
                <h3>ART </h3>
                <p> CREATE BSET ART.</p>
            </div>
            <div class="project">
                <img src="https://www.researchgate.net/publication/283618158/figure/fig2/AS:832386325544964@1575467773833/Partial-animation-example-The-user-outlines-the-first-frame-of-a-cartoon-character-a.ppm" alt="Project 6">
                <h3>ANIMATIONS</h3>
                <p>MAKE YOUR PROJECT MORE INTERACITVE .</p>
            </div>
        </div>
    </section>

    <section id="skills">
        <h2>Skills</h2>
        <div class="skills">
            <div class="skill">HTML</div>
            <div class="skill">CSS</div>
            <div class="skill">JavaScript</div>
            <div class="skill">React</div>
            <div class="skill">Node.js</div>
            <div class="skill">Python</div>
        </div>
    </section>

    <section id="contact">
        <h2>Contact Me</h2>
        <div class="contact-info">
            <p>Email: <a href="mailto:srijanacharya@example.com">srijanacharya@example.com</a></p>
            <p>Phone: +977 9812345678</p>
        </div>
        <div class="socials">
            <a href="#" target="_blank">LinkedIn</a>
            <a href="#" target="_blank">GitHub</a>
        </div>
    </section>

    <footer>
        <p>© 2024 Srijan Acharya. All Rights Reserved.</p>
    </footer>
</body>

</html>
HTML

Leave a Reply

Your email address will not be published. Required fields are marked *


error: Content is protected !!
Scroll to Top
MacroNepal
Verified by MonsterInsights