新生报到：无压力的数字自我介绍

news2024/9/27 8:18:05

🌸 新生报到：无压力的数字自我介绍 🌸

开学季又来临，每个学校、每个班级都迎来了一批新鲜面孔。作为新生，面对陌生的环境和同学，首次的自我介绍无疑是一个让许多人感到紧张和迷茫的挑战。你是否曾因为害羞、紧张，甚至是社交恐惧，而在大家面前哑口无言？

为此，我特地为大家带来了 🌈 新生报到 项目。这不仅是一个数字自我介绍工具，更是一个助你轻松展现自己、打破初次见面尴尬的神器！

这个项目旨在帮助每位新生创建一个数字化的自我介绍名片。无论是你的基本信息、学术成就、兴趣爱好，还是过去的趣事、特长，都可以在这里一一呈现。最后，你会得到一个属于你的专属链接。

项目亮点：

  • 🌼 清晰明了: 每一部分都经过精心设计，确保你的介绍内容既详细又结构化，让人看后印象深刻。

  • 🎈 个性展现: 除了基本资料，你还可以上传自己的照片、视频或音频，让同学们更直观地了解你的多面性。

  • 🚀 便捷分享: 只需一键，你就可以将自我介绍链接分享到任何社交平台或学校群组，让每一个人都能轻松认识到你。

如果你是那种不太善于言辞、不善于表达的新生，或者你有一些社交恐惧，担心自我介绍时尴尬或者出错，这个项目就是为你量身定做的。通过它，不仅可以避免尴尬，还能确保你在全班同学面前闪亮出场，成为“全班最靓的仔”！

🔗 立即点击这里，开始创建你的数字自我介绍

🌷 每一位新生都是独特的，希望通过这个项目，你可以更自信地步入新的学习旅程，展现出最真实、最闪亮的自己！ 🌟

项目已经在GitHub上上传点击下方链接直接下载
数字化自我介绍下载

喜欢的话点一个Star🌟

在这里插入图片描述
上传其中一个文件的代码（可以下载后上传到手机上观看）

先展示效果

效果如下（节约时间，只分享其中一个展示，喜欢的话可在博主的GitHub上下载~）：
在这里插入图片描述

下面是这个网页的源代码，下载后直接使用。

<!DOCTYPE html>
<!-- saved from url=(0111)file:///D:/%E6%A1%8C%E9%9D%A2/avatar_visible_loose_layout_with_avatar_%E8%87%AA%E6%88%91%E4%BB%8B%E7%BB%8D.html -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>自我介绍</title>
<link href="file:///C:/Users/a/Downloads/styles.css" rel="stylesheet">
<script defer="" src="file:///C:/Users/a/Downloads/script.js"></script>
<style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    
    .profile-card {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        width: 85%;
        max-width: 400px;
        margin: 20px auto;
        text-align: center;
    }
    </style><style>
    
body, .hint, .intro-text, .more-button {
    //color: #ffffff;
}

    .profile-card {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        width: 85%;
        max-width: 400px;
        margin: 20px auto;
        text-align: center;
    }
    </style><style>
    
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

    .profile-card {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        width: 85%;
        max-width: 400px;
        margin: 20px auto;
        text-align: center;
    }
    </style><style>
    
body {
    background-color: #000;
}
</style></head>
<body style="font-family: &#39;Comic Sans MS&#39;, sans-serif; display: flex; justify-content: center; align-items: flex-start; padding-top: 5vh; height: 100vh; background-color: #f2f2f2; overflow: auto;"><canvas height="680" id="myCanvas" width="1313"></canvas>
<div class="container" style="display: flex; flex-direction: column; align-items: center; margin-top: 5vh;">
<div class="profile-card" style="background-color: rgba(255, 255, 255, 0.8);padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);/* width: 95%; */max-width: 360px;margin: 20px auto;text-align: center;">
<div class="container">
<img alt="头像" class="profile-pic" onclick="location.href=&#39;菜单.html&#39;" src="hobby-icon.png" style="width: 100px; height: 100px; border-radius: 50%; border: 2px solid #333; cursor: pointer; transition: transform 0.2s;">
<div class="intro-text" style="margin-top: 20px; font-size: 16px; display: none;"></div>
<a class="more-button hidden" href="菜单.html">Learn More</a>
</div>
<h3>✨Personal Introduction✨</h3>
<p>Name: Liu Shaolong 🍓</p>
<p>Date of Birth: September 3, 2002 🎉</p>
<p>Major: Computer Science and Technology 🌌</p>
<p>Zodiac Sign: Virgo 🌸</p>

<h3>🌟Qualifications & Certificates🌟</h3>
<p>Blue Bridge Cup - Provincial First Prize 🏆</p>
<p>Modeling - School First Prize 🥇</p>
<p>Program Design Competition - Campus Second Prize 🥈</p>
<p>Internet Development - Junior Level III 🌐</p>
<p>Computer Level II Certificate 🖥️</p>
<p>Mandarin Certificate 🍒</p>
<p>English Level IV Certificate 📘</p>
<p>Motor Vehicle Driving License - C1 Level 🚗</p>
<p>ACM Certificate 🐳</p>
<p>CCCC Certificate ☀️</p>
<p>Outstanding Author in Algorithm Field on CSDN 🦄</p>
<p>Aliyun Expert Blogger ❤️</p>
<p>Huawei Cloud Expert 🌠</p>
<p>Alipay Developer 📱</p>

<h3>🍓Skills Introduction🍓</h3>
<p>Proficient in Algorithms 🌟</p>
<p>Game Development 🎮</p>
<p>Mini-program Development 📱</p>
<p>Front-end Development 🌐</p>
<p>Proficient in C, JAVA, C++ and various front-end frameworks 🌌</p>

</div>
<p class="hint" style="margin-top: 10px; font-size: 12px;">💎 @计科3班刘少龙——其实我的梦想是世界和平！🎨</p>
<div class="intro-text"></div>
<a class="more-button hidden" href="file:///D:/%E6%A1%8C%E9%9D%A2/%E8%8F%9C%E5%8D%95.html">Learn More</a>
</div>
<script>
        // 获取canvas元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置canvas的宽度和高度
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 粒子对象
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 3 + 1; // 随机大小
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
                this.velocityY = Math.random() * 3 + 1; // 随机竖直速度
            }

            // 更新粒子的位置
            update() {
                this.y += this.velocityY;

                // 当粒子到达画布底部时，重新放置到画布顶部
                if (this.y > canvas.height) {
                    this.y = 0;
                }
            }

            // 绘制粒子
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }

        // 创建粒子数组
        const particles = [];
        const numParticles = 100;

        // 初始化粒子
        for (let i = 0; i < numParticles; i++) {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            particles.push(new Particle(x, y));
        }

        // 动画循环函数
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
            }

            requestAnimationFrame(animate);
        }

        // 启动动画
        animate();
    </script>
<style>
body {
    font-family: 'Comic Sans MS', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f2f2f2;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #333;
    cursor: pointer;
    transition: transform 0.2s;
}

.profile-pic:hover {
    transform: scale(1.05);
}

.hint {
    margin-top: 10px;
    font-size: 14px;
}

.intro-text {
    margin-top: 20px;
    font-size: 18px;
    display: none;
}

.more-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff9999;
    color: #fff;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    display: none;
}

.more-button:hover {
    background-color: #ff7777;
}

.hidden {
    display: none;
}
</style>
<script>
let currentIndex = 0;
const textToDisplay = "Greetings 🙂, I'm Liu Shaolong🤗. It's a pleasure to make your acquaintance!😊";
const textContainer = document.querySelector('.intro-text');
const moreButton = document.querySelector('.more-button');

function showText() {
    textContainer.style.display = "block";
    document.querySelector('.hint').style.display = "none";

    if (currentIndex < textToDisplay.length) {
        setTimeout(() => {
            textContainer.textContent += textToDisplay[currentIndex];
            currentIndex++;
            showText();
        }, 100);
    } else {
        moreButton.style.display = "block";
    }
}




</script>
</body></html>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本
在这里插入图片描述

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
在这里插入图片描述

🍓3.打开html文件（大功告成(●’◡’●)）
在这里插入图片描述

本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/934638.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

理解底层— —Golang的log库，二开实现自定义Logger

理解底层— —Golang的log库，二开实现自定义Logger

理解底层— —Golang的log库&#xff0c;实现自定义Logger 1 分析实现思路 基于golang中自带的log库实现&#xff1a;对日志实现设置日志级别&#xff0c;每天生成一个文件&#xff0c;同时添加上前缀以及展示文件名等 日志级别&#xff0c;通过添加prefix&#xff1a;[INFO]、…
阅读更多...
C 字符串处理

C 字符串处理

字符数组 输入输出 输入函数 scanf(%s, s)读入字符串&#xff0c;在第一个空白符( 、\n 、\t )处停止&#xff0c;不读入空白符&#xff0c;在串尾自动添加\0’ 。gets(s)读入一行字符&#xff0c;直到遇到\n &#xff0c;读入换行符并将其舍弃&#xff0c;在串尾自动添加\…
阅读更多...
H5如何做性能测试？

H5如何做性能测试？

说起H5性能测试&#xff0c;可能许多同学有所耳闻&#xff0c;但是不知道该如何去做性能测试&#xff0c;或者不知道H5应该关注哪些性能指标。今天我们就来看下。希望阅读本文后&#xff0c;能够有所了解。 常用指标 1、H5性能相关参数介绍 白屏时间&#xff1a;用户首次看到…
阅读更多...
[LitCTF 2023]PHP是世界上最好的语言！！

[LitCTF 2023]PHP是世界上最好的语言！！

进入环境看起来还是挺牛逼的&#xff0c;但是在右边输入框下有一个执行代码&#xff0c;有点牛 真的可以直接执行&#xff0c;那么 根据题目提示&#xff0c;我们得知flag&#xff0c;在根目录&#xff0c;所以我们可以直接利用 查看到flag位置 得到flag
阅读更多...
IDEA插件反编译jar包

IDEA插件反编译jar包

安装插件Java Decompiler 安装插件Java Decompiler成功之后重启idea 找到已安装插件的jar包 执行反编译 反编译 在已安装插件Java Decompiler的jar包位置下cmd命令执行反编译 java -cp "插件路径" org.jetbrains.java.decompiler.main.decompiler.ConsoleDec…
阅读更多...
在线SM4(国密)加密解密工具

在线SM4(国密)加密解密工具

在线SM4(国密)加密解密工具
阅读更多...
基于安卓的考研助手系统app 微信小程序

基于安卓的考研助手系统app 微信小程序

&#xff0c;设计并开发实用、方便的应用程序具有重要的意义和良好的市场前景。HBuilder技术作为当前最流行的操作平台&#xff0c;自然也存在着大量的应用服务需求。 本课题研究的是基于HBuilder技术平台的安卓的考研助手APP&#xff0c;开发这款安卓的考研助手APP主要是为了…
阅读更多...
【管理运筹学】第 6 章 | 运输问题（2，表上作业法 | 初始可行解的确定）

【管理运筹学】第 6 章 | 运输问题（2，表上作业法 | 初始可行解的确定）

文章目录 引言二、表上作业法2.1 初始基可行解的确定2.1.1 最小元素法2.1.2 伏格尔法 写在最后 引言 承接前文&#xff0c;在对运输问题有了基本的了解后&#xff0c;我们开始深入学习表上作业的具体内容。 二、表上作业法 2.1 初始基可行解的确定 2.1.1 最小元素法 基本思…
阅读更多...
攻防世界-倒立屋

攻防世界-倒立屋

原题 解题思路 用StegSolve打开文件&#xff0c;调通道没用&#xff0c;wp说用RGB信道打开可以找到&#xff0c;但说实话用大括号也没找到在哪&#xff0c;得是预先知道答案才找得到。
阅读更多...
Linux常用命令_文件处理命令：su root

Linux常用命令_文件处理命令：su root

文章目录 1. 命令格式与目录处理命令ls1.1 命令格式1.2 目录处理命令&#xff1a;ls 2. 目录处理命令2.1 目录处理命令&#xff1a;mkdir2.2 目录处理命令&#xff1a;cd2.3 目录处理命令&#xff1a;pwd2.4 目录处理命令&#xff1a;rmdir2.5 目录处理命令&#xff1a;cp2.6 目…
阅读更多...
C语言文件操作收尾【随机读写 + 结束判定 + 文件缓冲区】

C语言文件操作收尾【随机读写 + 结束判定 + 文件缓冲区】

全文目录 前言fseek 重定位位置指示器函数ftell 获取当前文件指示器的位置rewind 重置位置指示器文本文件和二进制文件文件读取结束的判定feof 和 ferror 文件缓冲区总结 前言 有了文件的顺序读写基础&#xff0c;那么肯定会好奇文件的随机读写&#xff0c;毕竟顺序读写对于有…
阅读更多...
构建与应用大数据环境：从搭建到开发与组件使用的全面指南

构建与应用大数据环境：从搭建到开发与组件使用的全面指南

文章目录 环境搭建开发与组件使用性能优化与监控安全与隐私总结 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;大数据系列 ✨文章内容&#xff1a; &#x1f91d;希望作者…
阅读更多...
基于 kernel 4.0 初始kmalloc

基于 kernel 4.0 初始kmalloc

kmalloc 系列函数是驱动者常用来向内核大管家申请内存的API&#xff0c;今天抽空扒一扒它是怎么工作的&#xff1b;首先看看它的原型 1. kmalloc () 函数 static __always_inline void *kmalloc(size_t size, gfp_t flags) {if (__builtin_constant_p(size)) {if (size > …
阅读更多...
性能测试工具分享推荐

性能测试工具分享推荐

性能测试工具 常用性能测试工具性能测试工具又分为软件性能测试工具和系统性能测试工具&#xff0c;以下主要从开源免费工具和商用工具两方面进行整理&#xff0c;开源工具是免费的但通常功能有限&#xff0c;商业工具价格也不便宜&#xff0c;具体还是要结合自己的需求来选择…
阅读更多...
AI图片鉴黄检测合规图片API

AI图片鉴黄检测合规图片API

AI图片鉴黄检测合规图片API 一、AI图片鉴黄检测合规二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 报错说明1、返回以下报错说明你没有正确传入检测是图片的参数(file参数), 且请求参数是**multipart/form-data**格式⚠️ 一、AI图片鉴黄检测合规 人工…
阅读更多...
JUC——多线程补充

JUC——多线程补充

前置可看 Java——多线程和锁_java多线程锁_北岭山脚鼠鼠的博客-CSDN博客 线程创建的三种方式 Thread、Runnable、Callable Thread类 Runable接口 Callable接口 Lamda表达式 Lamda表达式_北岭山脚鼠鼠的博客-CSDN博客 静态代理模式(Thread类的原理) 如下代码中 真实对象…
阅读更多...
前端vue2、vue3去掉url路由“ # ”号——nginx配置

前端vue2、vue3去掉url路由“ # ”号——nginx配置

文章目录 ⭐前言⭐vue2中router默认出现#号&#x1f496;在vue2项目中去掉&#x1f496;在vue3项目中去掉 ⭐vue打包 assetsPublicPath base 为绝对路径 /&#x1f496;vue2 配置 assetsPublicPath&#x1f496;vue3 配置 base&#x1f496;验证 ⭐nginx 配置&#x1f496; 使用…
阅读更多...
ROS-3.ros创建工作空间和工作包

ROS-3.ros创建工作空间和工作包

工作空间 工作空间(workspace)是存放工程开发相关文件的目录&#xff0c;目录里面包括 src &#xff1a;代码空间&#xff0c;ROS的catkin软件包&#xff08;源代码包&#xff09;build&#xff1a;编译空间&#xff0c;catkin&#xff08;CMake&#xff09;的缓存信息和中间…
阅读更多...
关于事件回调机制

关于事件回调机制

OVERVIEW 关于事件回调机制1.事件回调编程模式2.C中的事件回调编程模式函数指针回调函数对象回调 3.简单回调实例 关于事件回调机制 1.事件回调编程模式 当涉及到编程和软件开发时&#xff0c;事件回调是一种常见的编程模式。它用于处理异步事件和消息传递系统中的事件通知。 …
阅读更多...
map set

map set

✅<1>主页&#xff1a;我的代码爱吃辣&#x1f4c3;<2>知识讲解&#xff1a;C STL map&&set☂️<3>开发环境&#xff1a;Visual Studio 2022&#x1f4ac;<4>前言&#xff1a;map和set是C98就已经支持的两个搜索效率极高的容器&#xff0c;其底…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023