使用NextJS尾风CSS和Framer Motion建立现代投资组合

使用nextjs尾风css和framer motion建立现代投资组合

大家好!我最近用现代Web技术构建了一个投资组合网站(4sish.vercel.app),并乐于分享我的开发经验。

技术栈:

Next.js 13 App Router (类型安全TypeScript)Tailwind CSS (样式)Framer Motion (动画)Geist字体 (排版)

主要功能:

流畅的主题切换 (深色/浅色模式): 支持系统偏好设置检测和自定义主题选择。

立即学习“前端免费学习笔记(深入)”;

响应式设计: 为移动设备优化,提供简洁、流畅动画的最小化界面。

社交媒体集成: 包含GitHub个人资料、LinkedIn链接和LeetCode统计信息,并集成了Dev.to博客。

高性能: 页面加载速度快,针对移动设备优化,并注重SEO友好性。

我的收获:

Next.js App Router彻底改变了路由和布局管理。Framer Motion 简化了复杂动画的实现。Tailwind CSS 显著提升了开发效率。TypeScript 帮助在开发早期就捕获错误。

我遇到的挑战:

实现流畅的暗模式过渡。确保移动端的响应式设计。优化动画性能。设计简洁、极简的界面。

未来计划:

添加项目筛选功能。添加更多交互式元素。提升网站的可访问性。添加更多博客内容。

欢迎访问我的网站 4sish.vercel.app 并留下您的宝贵意见!

GitHub: github.com/noiseless476LinkedIn: LinkedIn.com/in/asishkumaryeleti

webDev #nextjs #typescript #portfolio

以上就是使用NextJS尾风CSS和Framer Motion建立现代投资组合的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1501548.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
AI驱动的代码生成:软件开发的未来
上一篇 2025年12月19日 23:39:36
通过回忆优化JavaScript功能
下一篇 2025年12月19日 23:39:55

相关推荐

  • Debian系统上Tomcat日志如何备份

    Debian系统上Tomcat日志如何备份Debian系统上Tomcat日志如何备份Debian系统上Tomcat日志如何备份Debian系统上Tomcat日志如何备份

    本文介绍几种在Debian系统上备份Tomcat日志文件的有效方法,帮助您安全地保存和管理重要的日志信息。 方法一:手动备份 找到日志文件: Tomcat日志文件通常位于 /var/log/tomcat 或 /opt/tomcat/logs 目录下。请根据您的实际安装路径进行调整。压缩日志: 使用 …

    2026年9月26日 • 用户投稿
    000
  • Debian上Tomcat日志文件过大怎么办

    Debian上Tomcat日志文件过大怎么办Debian上Tomcat日志文件过大怎么办Debian上Tomcat日志文件过大怎么办Debian上Tomcat日志文件过大怎么办

    Debian系统中Tomcat日志文件(例如catalina.out)过大,可能导致磁盘空间占用过多,影响系统性能,并增加日志管理和分析的难度。本文提供几种解决方法: 方法一:利用logrotate实现日志轮转 logrotate是Linux系统自带的日志管理工具,可自动轮转、压缩和删除日志文件。 …

    2026年9月26日 • 用户投稿
    100
  • LINUX连接不上WiFi怎么办_LINUX系统WiFi连接失败排查指南

    LINUX连接不上WiFi怎么办_LINUX系统WiFi连接失败排查指南LINUX连接不上WiFi怎么办_LINUX系统WiFi连接失败排查指南LINUX连接不上WiFi怎么办_LINUX系统WiFi连接失败排查指南LINUX连接不上WiFi怎么办_LINUX系统WiFi连接失败排查指南

    首先检查无线网卡是否被系统识别,通过lspci或lsusb命令确认硬件存在;若识别正常但无法连接,需安装对应驱动如firmware-iwlwifi或rtl88x2bu-dkms;确保NetworkManager服务已启动并启用;使用nmcli命令扫描并连接WiFi网络;若仍失败,可手动编辑Netpl…

    2026年9月26日 • 用户投稿
    400
  • Java 方法中数组参数的正确调用方式

    Java 方法中数组参数的正确调用方式Java 方法中数组参数的正确调用方式Java 方法中数组参数的正确调用方式Java 方法中数组参数的正确调用方式

    本文旨在阐述如何在 Java 方法中正确传递和使用数组参数。通过一个实际的例子,我们将详细讲解如何创建数组、将其作为参数传递给方法,以及如何在方法内部访问和操作数组元素。掌握这些技巧对于编写高效且易于维护的 Java 代码至关重要。 在 Java 编程中,方法经常需要接收数组作为参数,以便对一组数据…

    2026年9月26日 • 用户投稿
    000
  • 从Scanner读取单个字符时处理空格的问题

    从Scanner读取单个字符时处理空格的问题从Scanner读取单个字符时处理空格的问题从Scanner读取单个字符时处理空格的问题从Scanner读取单个字符时处理空格的问题

    本文旨在解决Java中使用Scanner读取用户输入时,由于Scanner默认以空格作为分隔符,导致读取单个字符时出现的问题。我们将深入探讨Scanner的工作原理,并提供使用Scanner.nextLine()方法读取整行输入来解决此问题的方案,确保程序能够正确处理包含空格的输入。 在使用Java…

    2026年9月26日 • 用户投稿
    100
  • grokAI平台官方网站主页 grokAI 智能助手入口官方直达地址

    GrokAI平台官方网站主页是https://grok.com/,用户可直接访问该网址进入。新用户无需注册即可点击“Start Chatting”体验基础功能,登录X账号则可使用高级服务。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ Gr…

    2026年9月26日
    100
  • 从 0 开始学 V8 漏洞利用之 V8 通用利用链(二)

    作者:hcamael@知道创宇404实验室 相关阅读:从 0 开始学 V8 漏洞利用之环境搭建(一)经过一段时间的研究,先进行一波总结,不过因为刚开始研究没多久,也许有一些局限性,以后如果发现了,再进行修正。 概述 ‍我认为,在搞漏洞利用前都得明确目标。比如打CTF做二进制的题目,大部分情况下,目标…

    2026年9月26日
    100
  • 强!荣耀 Magic V5 官宣搭载 6100mAh 青海湖刀片电池

    强!荣耀 Magic V5 官宣搭载 6100mAh 青海湖刀片电池强!荣耀 Magic V5 官宣搭载 6100mAh 青海湖刀片电池强!荣耀 Magic V5 官宣搭载 6100mAh 青海湖刀片电池强!荣耀 Magic V5 官宣搭载 6100mAh 青海湖刀片电池

    官方消息透露,7 月 2 日晚 19:00,荣耀将召开 magic v5 及 ai 终端生态发布会。届时,荣耀 magic v5 等多款旗舰新品将同步登场。早在 6 月 25 日,荣耀就已为 magic v5 开启预热宣传。据 cnmo 掌握的信息,这款折叠屏手机搭载了容量高达 6100mah 的青…

    2026年9月26日 • 用户投稿
    100
  • 伊津野英昭腾讯原创3A新情报:融合鬼泣、龙信精华!

    伊津野英昭腾讯原创3A新情报:融合鬼泣、龙信精华!伊津野英昭腾讯原创3A新情报:融合鬼泣、龙信精华!伊津野英昭腾讯原创3A新情报:融合鬼泣、龙信精华!伊津野英昭腾讯原创3A新情报:融合鬼泣、龙信精华!

    据automatonmedia报道,《鬼泣》系列总监、《龙之信条》系列主导者伊津野英昭近日在接受《fami通》采访时,分享了他离开卡普空后首个新项目的最新进展。 伊津野在卡普空工作长达30年,于2024年8月正式离职,并加入腾讯,出任光子工作室日本分部负责人。他目前正在主导开发的首款作品,是一款面向…

    2026年9月26日 • 用户投稿
    000
  • debian邮件服务器如何实现自动回复

    debian邮件服务器如何实现自动回复debian邮件服务器如何实现自动回复debian邮件服务器如何实现自动回复debian邮件服务器如何实现自动回复

    在debian系统搭建自动回复邮件服务器,只需简单几步即可实现。本文将指导您配置postfix邮件服务器,实现自动回复功能。 一、安装Postfix 首先,确认Debian系统已安装Postfix。若未安装,请执行以下命令: sudo apt updatesudo apt install postf…

    2026年9月26日 • 用户投稿
    300
  • ️「SpringBoot3.2深度探索」WebFlux性能优化与RSocket集成指南

    ️「SpringBoot3.2深度探索」WebFlux性能优化与RSocket集成指南️「SpringBoot3.2深度探索」WebFlux性能优化与RSocket集成指南️「SpringBoot3.2深度探索」WebFlux性能优化与RSocket集成指南️「SpringBoot3.2深度探索」WebFlux性能优化与RSocket集成指南

    Spring Boot 3.2通过升级底层依赖、增强GraalVM Native Image支持、深化Micrometer Tracing集成及引入Project Loom虚拟线程,优化WebFlux性能;同时通过spring-boot-starter-rsocket简化RSocket集成,实现高效…

    2026年9月26日 • 用户投稿
    000
  • 使用构造器注入替代 @Autowired 注解

    使用构造器注入替代 @Autowired 注解使用构造器注入替代 @Autowired 注解使用构造器注入替代 @Autowired 注解使用构造器注入替代 @Autowired 注解

    本文旨在讲解如何使用构造器注入来替代 Spring 框架中的 @Autowired 注解,从而实现更简洁、更易于测试的代码。我们将通过一个实际案例,展示如何利用 Lombok 提供的 @AllArgsConstructor 注解简化构造器注入的过程,并解决可能遇到的问题,最终避免手动创建 Bean。…

    2026年9月26日 • 用户投稿
    100
  • 华为开发者大会曝光《王者荣耀》新英雄:孙权即将上线

    华为开发者大会曝光《王者荣耀》新英雄:孙权即将上线华为开发者大会曝光《王者荣耀》新英雄:孙权即将上线华为开发者大会曝光《王者荣耀》新英雄:孙权即将上线华为开发者大会曝光《王者荣耀》新英雄:孙权即将上线

    在 6 月 20 日举行的华为开发者大会 2025(hdc2025)上,华为与《王者荣耀》联合发布了一系列令人振奋的消息,其中最受关注的亮点之一便是全新英雄孙权即将上线。 华为常务董事、终端 BG 董事长余承东在大会上正式宣布 HarmonyOS 6 已面向开发者开放 Beta 版。作为新一代操作系…

    2026年9月26日 • 用户投稿
    000
  • 如何通过豆包AI进行异常检测?离群值分析实战

    如何通过豆包AI进行异常检测?离群值分析实战如何通过豆包AI进行异常检测?离群值分析实战如何通过豆包AI进行异常检测?离群值分析实战如何通过豆包AI进行异常检测?离群值分析实战

    异常检测是识别数据集中不符合预期模式的数据点的过程,这些“异常”可能由错误、欺诈、设备故障等引起,在金融、网络安全、制造质量控制等领域具有重要意义。常见方法包括基于统计的z-score、iqr法;基于距离的knn;孤立森林;one-class svm;以及深度学习中的自编码器。其中孤立森林因高效性和…

    2026年9月26日 • 用户投稿
    100
  • 俄罗斯yandex主页手机版入口 yandex入口引擎无需登录手机链接

    俄罗斯yandex主页手机版入口 yandex入口引擎无需登录手机链接俄罗斯yandex主页手机版入口 yandex入口引擎无需登录手机链接俄罗斯yandex主页手机版入口 yandex入口引擎无需登录手机链接俄罗斯yandex主页手机版入口 yandex入口引擎无需登录手机链接

    Yandex,作为俄罗斯本土最大的互联网公司,其搜索引擎在全球范围内享有盛誉,尤其在俄语市场占据绝对主导地位。其精心优化的手机版主页入口,旨在为全球移动用户提供极致便捷的上网体验,让用户无论身处何地,都能通过无需登录的快速链接,瞬时直达其功能异常丰富的综合性平台。 一、正确的官网地址 要直接进入俄罗…

    2026年9月26日 • 用户投稿
    000
  • Debian邮件服务器防火墙配置技巧

    配置debian邮件服务器的防火墙是确保服务器安全性的重要步骤。以下是几种常用的防火墙配置方法,包括iptables和firewalld的使用。 使用iptables配置防火墙 安装iptables(如果尚未安装): sudo apt-get updatesudo apt-get install i…

    2026年9月26日
    100
  • 豆包是否支持自动保存对话 对话存储与历史记录查看方法详解

    关于豆包是否具备自动保存对话功能,答案是肯定的。豆包系统会自动保存用户的每一段对话,无需手动操作。本文将详细阐述豆包的对话存储机制,并提供一套清晰的步骤指南,帮助您轻松查找和回顾过往的对话历史记录,方便您随时查阅和继续之前的讨论。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用…

    2026年9月26日
    100
  • Debian邮件服务器SSL证书安装方法

    在debian邮件服务器上安装ssl证书的步骤如下: 1. 安装OpenSSL工具包 首先,确保你的系统上已经安装了OpenSSL工具包。如果没有安装,可以使用以下命令进行安装: sudo apt-get updatesudo apt-get install openssl 2. 生成私钥和证书请求…

    2026年9月26日
    100
  • 多模态AI如何识别特殊符号 多模态AI符号理解能力解析

    多模态AI如何识别特殊符号 多模态AI符号理解能力解析多模态AI如何识别特殊符号 多模态AI符号理解能力解析多模态AI如何识别特殊符号 多模态AI符号理解能力解析多模态AI如何识别特殊符号 多模态AI符号理解能力解析

    多模态ai理解特殊符号主要依靠数据训练与上下文分析。首先,它通过大规模标注数据学习符号在不同场景中的常见用法,例如社交媒体中的“@”或“#”;其次,结合图像和文本的上下文进行语义推理,判断如“$”是货币单位还是情绪表达;最后,借助ocr与视觉特征识别图像中的符号,并通过跨模态联合建模提升准确性。 ☞…

    2026年9月26日 • 用户投稿
    800
  • sublime怎么格式化less文件_sublime LESS文件美化方法

    sublime怎么格式化less文件_sublime LESS文件美化方法sublime怎么格式化less文件_sublime LESS文件美化方法sublime怎么格式化less文件_sublime LESS文件美化方法sublime怎么格式化less文件_sublime LESS文件美化方法

    使用插件可实现Sublime Text格式化LESS文件。1. 安装HTML-CSS-JS Prettify插件,通过命令面板搜索并安装;2. 确保文件语法设为Less;3. 配置Prettify支持Less,在用户设置中启用less_enable;4. 全选代码后右键选择Prettify Code…

    2026年9月26日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信